Hello,

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

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

@ccclass("ColorSprite")
export class ColorSprite extends SpritePart {
  @property({ sort: [Color] })
  non-public colours: Color[] = [];


  protected _updateColor() {
    tremendous._updateColor();

    const vData = this.renderData.vertexFormat;
    let colorOffset = 5;
    for (let i = 0; i < 4; i++)  this.shade;
      const colorR = shade.r / 255;
      const colorG = shade.g / 255;
      const colorB = shade.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-2nd.ts:670:13)
at Batcher2D.stroll (batcher-2nd.ts:680:22)
at Batcher2D.stroll (batcher-2nd.ts:680:22)
at Batcher2D.replace (batcher-2nd.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 would like it is because I need to apply a shader to a sprite that takes its sprite body via an atlas. Because of the atlas, I now 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 concept to counter this was to make use of vertex shade interpolation to simulates a 0 to 1 coordinate.
If somebody has a greater concept 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])
    non-public 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 plenty of supply information to discover a answer, however right here it’s :

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

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

  non-public 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;
    }
  }
}

It does work on net platform.
Since we modify 2nd/UI-rendering course of in v3.6, rendering information of Label are saved in RenderEntity and transported to native to excute fillBuffers like net.
You would possibly attempt to overwrite setEntityColor in UIRenderer, recombine a shade and assign it to entity.shade. Then construct in certainly one of native platforms and validate it.