Set vertex colour of sprite in 3.5 – Cocos Creator

Howdy,

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 accomplished, or hyperlink me an instance/doc that I might need missed ?
Thanks prematurely.

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 SpriteComponent {
  @property({ kind: [Color] })
  personal colours: Coloration[] = [];


  protected _updateColor() {
    tremendous._updateColor();

    const vData = this.renderData.vertexFormat;
    let colorOffset = 5;
    for (let i = 0; i < 4; i++) 
  }
}

However this offers an error :

Uncaught TypeError: Can not 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 way in which, the explanation I would like it is because I wish to apply a shader to a sprite that takes its sprite body by way of an atlas. Due to 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 thought to counter this was to make use of vertex colour interpolation to simulates a 0 to 1 coordinate.
If somebody has a greater thought for this, let me know.

Okay, I discovered the way in which to do it :

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

@ccclass('ColorSprite')
export class ColorSprite extends Sprite {
    @property([Color])
    personal colours: Array<Coloration> = [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 really works effectively on sprites and labels that use ttf fonts. Each in 3.5 and three.6.
Nonetheless, when a label makes use of a bitmap font, it seems to be like one thing resets the vertices colours.
I don’t discover a method to counter that.
Any assist ?

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

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

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

  personal originalFillBuffer: Operate;

  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 internet platform.
Since we modify Second/UI-rendering course of in v3.6, rendering information of Label are saved in RenderEntity and transported to native to excute fillBuffers like internet.
You would possibly attempt to overwrite setEntityColor in UIRenderer, recombine a colour and assign it to entity.colour. Then construct in one in every of native platforms and validate it.

My goal is internet solely. However thanks for the information.