Hello,

I couldn’t discover an updated instance of methods to set the vertices colours of a sprite in 3.5.
Can somebody clarify to me the way it’s performed, or hyperlink me an instance/doc that I may need missed ?
Thanks upfront.

If I adapt the older examples I discovered for the three.5 API, it offers one thing like this :

@ccclass("ColorSprite")
export class ColorSprite extends SpritePart {
  @property({ kind: [Color] })
  personal colours: Color[] = [];


  protected _updateColor() {
    tremendous._updateColor();

    const vData = this.renderData.vertexFormat;
    let colorOffset = 5;
    for (let i = 0; i < 4; i++)  this.coloration;
      const colorR = coloration.r / 255;
      const colorG = coloration.g / 255;
      const colorB = coloration.b / 255;
      const colorA = this.node._uiProps.opacity;
      vData![colorOffset] = colorR;
      vData![colorOffset + 1] = colorG;
      vData![colorOffset + 2] = colorB;
      vData![colorOffset + 3] = colorA;
      colorOffset += 9;
    
  }
}

But this offers an error :

Uncaught TypeError: Cannot learn properties of undefined (studying ‘format’)
at updateOpacity (utils.ts:83:35)
at Batcher2D.stroll (batcher-Second.ts:670:13)
at Batcher2D.stroll (batcher-Second.ts:680:22)
at Batcher2D.stroll (batcher-Second.ts:680:22)
at Batcher2D.replace (batcher-Second.ts:204:18)
at Root.frameMove (root.ts:437:31)
at Director.tick (director.ts:715:25)
at callback (recreation.ts:838:26)

By the best way, the rationale I want it is because I wish to apply a shader to a sprite that takes its sprite body via an atlas. Because of the atlas, I not have entry to uv coordinates from 0 to 1 in an effort to know the place I’m within the sprite within the fragment shader.
My thought to counter this was to make use of vertex coloration interpolation to simulates a 0 to 1 coordinate.
If somebody has a greater thought for this, let me know.

Ok, I discovered the best way to do it :

import { _decorator, Sprite, Color } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ColorSprite')
export class ColorSprite extends Sprite {
    @property([Color])
    personal colours: Array<Color> = [Color.WHITE, Color.WHITE, Color.WHITE, Color.WHITE];

    begin() {
        let colorOffset = 5;
        const vertexCount = this.renderData.vertexCount;
        if (vertexCount === 0) return;
        const vData = this.renderData.chunk.vb;
        const stride = this.renderData.floatStride;
        for(let i = 0; i < vertexCount; i++) {
            vData[colorOffset] = this.colours[i % 4].r / 255;
            vData[colorOffset + 1] = this.colours[i % 4].g / 255;
            vData[colorOffset + 2] = this.colours[i % 4].b / 255;
            vData[colorOffset + 3] = this.colours[i % 4].a / 255;
            colorOffset += stride;
        }
    }
}

It works effectively on sprites and labels that use ttf fonts. Both in 3.5 and three.6.
However, when a label makes use of a bitmap font, it appears like one thing resets the vertices colours.
I don’t discover a method to counter that.
Any assist ?

I needed to learn a number of supply recordsdata to discover a resolution, however right here it’s :

import {
  _decorator,
  Color,
  Label,
} from "cc";
const { ccclass, property } = _decorator;

@ccclass("ColorBitmapFontLabel")
export class ColorBitmapFontLabel extends Label {
  @property([Color])
  personal colours: Array<Color> = [Color.RED, Color.RED, Color.BLUE, Color.BLUE];

  personal originalFillBuffer: Function;

  begin() {
    this.originalFillBuffer = this._assembler.fillBuffers;

    this._assembler.fillBuffers = (comp: Label, renderer) => {
      this.originalFillBuffer(comp, renderer);
      this.setVerticesColors();
    };
  }

  setVerticesColors() {
    let colorOffset = 5;
    const vertexCount = this.renderData.vertexCount;
    if (vertexCount === 0) return;
    const vData = this.renderData.chunk.vb;
    const stride = this.renderData.floatStride;
    for (let i = 0; i < vertexCount; i++) {
      vData[colorOffset] = this.colours[i % 4].r / 255;
      vData[colorOffset + 1] = this.colours[i % 4].g / 255;
      vData[colorOffset + 2] = this.colours[i % 4].b / 255;
      vData[colorOffset + 3] = this.colours[i % 4].a / 255;
      colorOffset += stride;
    }
  }
}