Set vertex coloration of sprite in 3.5 – Cocos Creator

Hi there,

I couldn’t discover an updated instance of easy methods to set the vertices colours of a sprite in 3.5.
Can somebody clarify to me the way it’s finished, or hyperlink me an instance/doc that I might 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 SpriteComponent {
  @property({ sort: [Color] })
  non-public colours: Shade[] = [];


  protected _updateColor() {
    tremendous._updateColor();

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

However this provides 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 (sport.ts:838:26)

By the way in which, the explanation I would like it’s because I wish to apply a shader to a sprite that takes its sprite body via an atlas. Due to the atlas, I now not have entry to uv coordinates from 0 to 1 to be able to know the place I’m within the sprite within the fragment shader.
My concept to counter this was to make use of vertex coloration interpolation to simulates a 0 to 1 coordinate.
If somebody has a greater concept for this, let me know.

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

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

@ccclass('ColorSprite')
export class ColorSprite extends Sprite {
    @property([Color])
    non-public colours: Array<Shade> = [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.
Nevertheless, when a label makes use of a bitmap font, it appears to be like like one thing resets the vertices colours.
I don’t discover a method to counter that.
Any assist ?

I needed to learn a variety of supply information to discover a answer, however right here it’s :

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

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

  non-public originalFillBuffer: Perform;

  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 Second/UI-rendering course of in v3.6, rendering knowledge 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 coloration and assign it to entity.coloration. Then construct in considered one of native platforms and validate it.

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