23.5 C
Brasília
quinta-feira, maio 1, 2025

Gradiente Shader funciona em 2.4.7, mas não em 3.8.2 – Cocos Creator


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

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

0FansLike
0FollowersFollow
0SubscribersSubscribe
- Advertisement -spot_img

Latest Articles