
[ad_1]
Hello,
I couldn’t discover an updated instance of how one can set the vertices colours of a sprite in 3.5.
Can somebody clarify to me the way it’s achieved, 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] })
personal colours: Color[] = [];
protected _updateColor() {
tremendous._updateColor();
const vData = this.renderData.vertexFormat;
let colorOffset = 5;
for (let i = 0; i < 4; i++)
}
}
But this provides 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 (sport.ts:838:26)
By the way in which, the rationale I want it is because I need to apply a shader to a sprite that takes its sprite body by means of an atlas. Because of 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 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 way in which 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].r / 255;
vData[colorOffset + 1] = this.colours[i].g / 255;
vData[colorOffset + 2] = this.colours[i].b / 255;
vData[colorOffset + 3] = this.colours[i].a / 255;
colorOffset += stride;
}
}
}
[ad_2]