Eu pensei em fornecer informações sobre dados de vértice de sprite fatiado, você poderia fazer o cálculo, oh bem
Aqui está o código de qualquer maneira, funciona para sprite simples e fatiado:
import { _decorator, colour, Shade, Part, lerp, macro, Sprite, UITransform } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('vert_color')
export class vert_color extends Part {
begin() {
this.schedule(() => {
this.updateColor()
}, 1, macro.REPEAT_FOREVER)
}
randomColor1() {
const COLORS = (Shade.BLUE, Shade.CYAN, Shade.GREEN);
return COLORS(Math.ground(Math.random() * COLORS.size))
}
randomColor2() {
const COLORS = (Shade.RED, Shade.YELLOW, Shade.MAGENTA);
return COLORS(Math.ground(Math.random() * COLORS.size))
}
updateColor () {
let sprite = this.getComponent(Sprite)
let vb = sprite('_renderData').chunk.vb;
let color1 = this.randomColor1();
let color2 = this.randomColor2();
let lb = color1, // left backside
rb = color1, // proper backside
lt = color2, // left high
rt = color2; // proper high
if (sprite.kind == Sprite.Kind.SIMPLE) {
this.setVertexColor(vb, 0, lb);
this.setVertexColor(vb, 1, rb);
this.setVertexColor(vb, 2, lt);
this.setVertexColor(vb, 3, rt);
} else if (sprite.kind == Sprite.Kind.SLICED) {
let dimension = this.node.getComponent(UITransform).contentSize;
// @ts-ignore
let borderSize = sprite.spriteFrame._capInsets;
let ratioLeft = borderSize(0) / dimension.width;
let ratioTop = borderSize(1) / dimension.top;
let ratioRight = borderSize(2) / dimension.width;
let ratioBottom = borderSize(3) / dimension.top;
let c4: Shade, c8: Shade, c7: Shade, c11: Shade;
this.setVertexColor(vb, 0, lb);
this.setVertexColor(vb, 3, rb);
this.setVertexColor(vb, 12, lt);
this.setVertexColor(vb, 15, rt);
this.setVertexColor(vb, 1, this.lerpColor(lb, rb, ratioLeft));
this.setVertexColor(vb, 2, this.lerpColor(rb, lb, ratioRight));
this.setVertexColor(vb, 4, c4 = this.lerpColor(lb, lt, ratioBottom));
this.setVertexColor(vb, 8, c8 = this.lerpColor(lt, lb, ratioTop));
this.setVertexColor(vb, 13, this.lerpColor(lt, rt, ratioLeft));
this.setVertexColor(vb, 14, this.lerpColor(rt, lt, ratioRight));
this.setVertexColor(vb, 7, c7 = this.lerpColor(rb, rt, ratioBottom));
this.setVertexColor(vb, 11, c11 = this.lerpColor(rt, rb, ratioTop));
this.setVertexColor(vb, 5, this.lerpColor(c4, c7, ratioLeft));
this.setVertexColor(vb, 6, this.lerpColor(c7, c4, ratioRight));
this.setVertexColor(vb, 9, this.lerpColor(c8, c11, ratioLeft));
this.setVertexColor(vb, 10, this.lerpColor(c11, c8, ratioRight));
}
}
lerpColor(color1: Shade, color2: Shade, t: quantity) {
return colour(
lerp(color1.r, color2.r, t),
lerp(color1.g, color2.g, t),
lerp(color1.b, color2.b, t),
lerp(color1.a, color2.a, t)
)
}
setVertexColor (vbo: Float32Array, vertexIndex: quantity, colour: Shade) {
vbo(vertexIndex * 9 + 5) = colour.r / 255;
vbo(vertexIndex * 9 + 6) = colour.g / 255;
vbo(vertexIndex * 9 + 7) = colour.b / 255;
vbo(vertexIndex * 9 + 8) = colour.a / 255;
}
}