Gradient Shader Works in 2.4.7 But Not in 3.8.2

Cocos Creator
1

Hi everyone,

I’m facing an issue with applying a gradient effect to both simple and sliced sprites.

What Worked in Cocos 2.4.7?

In Cocos 2.4.7, I was able to modify vertex colors using the _assembler method:

const cmp = this.node.getComponent(cc.RenderComponent);
if (!cmp) return;
const _assembler = cmp['_assembler'];
if (!(_assembler instanceof cc['Assembler2D'])) return;
const uintVerts = _assembler._renderData.uintVDatas[0];
if (!uintVerts) return;
const color = this.node.color;
const floatsPerVert = _assembler.floatsPerVert;
const colorOffset = _assembler.colorOffset;

This worked fine for both SIMPLE and SLICED sprites.

What I Did for Cocos Creator 3.8.2

Since _assembler is no longer accessible in 3.8, I created a custom .effect shader to achieve the gradient effect.

Shader Code (.effect file)

vec4 o = vec4(1, 1, 1, 1);

// Normalize the coordinates
vec2 forcedUV = gl_FragCoord.xy / vec2(1024.0, 576.0);
vec2 forcedUVV = gl_FragCoord.xy / vec2(576.0, 1024.0);

// Declare a variable for the gradient color
vec4 gradientColor;

if(sprite == 1.0){
    // Check if horizontal gradient is enabled
    if (useHorizontal > 0.5) {
        gradientColor = mix(startColor, endColor, forcedUV.x); // Interpolate horizontally
    } else {
        gradientColor = mix(endColor, startColor, forcedUVV.y); // Interpolate vertically
    }
}

o.rgb *= gradientColor.rgb; // Apply the gradient color
o *= color; // Apply the original color with alpha

ALPHA_TEST(o);
return o;

TypeScript Code for Cocos 3.8

c.resources.load(effectPath, cc.Material, (err, material) => {
    if (err) {
        console.error("Failed to load EffectAsset:", err);
        return;
    }
    material.setProperty('sprite', 1.0);
    material.setProperty('startColor', new cc.Vec4(
        startColor.r / 255, 
        startColor.g / 255, 
        startColor.b / 255, 
        startColor.a / 255
    ));
    material.setProperty('endColor', new cc.Vec4(
        endColor.r / 255, 
        endColor.g / 255, 
        endColor.b / 255, 
        endColor.a / 255
    ));

    if(sp != null && sp != undefined){
        sp.setSharedMaterial(material, 0); // Reassign the material to force update
    }
});

Issue: Only Works for SIMPLE Sprites

This shader correctly applies the gradient for cc.Sprite.Type.SIMPLE, but when applied to cc.Sprite.Type.SLICED, it fails to render the gradient properly.

Has anyone found a working approach for applying gradient colors in cocos 3.8.2?
@Tom_k

2

in cocos creator 3.8, you can still access vertex colors from vbo:

let ur = this.node.getComponent(UIRenderer);
let vb = ur['_renderData'].chunk.vb;
// vb[5], vb[6], vb[7], vb[8] are rgba components of 1st vertex color
// vb[14], vb[15], vb[16], vb[17] are rgba components of 2nd vertex color
3

Thank you for your response!

I understand that in Cocos Creator 3.8, I can access the vbo and modify the vertex colors using:

let ur = this.node.getComponent(UIRenderer);
let vb = ur['_renderData'].chunk.vb;
// vb[5], vb[6], vb[7], vb[8] are rgba components of 1st vertex color
// vb[14], vb[15], vb[16], vb[17] are rgba components of 2nd vertex color

However, I am facing issues while trying to set a gradient color dynamically in Cocos 3.8.2.
Even after modifying the vertex buffer (vb), the changes are not reflecting on the sprite.
Can you please provide a complete code example for setting a gradient color dynamically in Cocos Creator 3.8.2?

  • Example for a vertical gradient (from startColor to endColor)
  • How to properly update the vertex buffer after modifying colors?

Your help would be greatly appreciated!

4

Hi,
Here’s a full component script that can be attached to a SIMPLE Sprite node, gradient colors will change every 1 second:

import { _decorator, Color, Component, macro, Sprite } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('vert_color')
export class vert_color extends Component {
    start() {
        this.schedule(() => {
            this.updateColor()
        }, 1, macro.REPEAT_FOREVER)
    }
    randomColor1() {
        const COLORS = [Color.BLUE, Color.CYAN, Color.GREEN];
        return COLORS[Math.floor(Math.random() * COLORS.length)]
    }
    randomColor2() {
        const COLORS = [Color.RED, Color.YELLOW, Color.MAGENTA];
        return COLORS[Math.floor(Math.random() * COLORS.length)]
    }
    updateColor () {
        let sprite = this.getComponent(Sprite)
        let vb = sprite['_renderData'].chunk.vb;
        let color1 = this.randomColor1();
        let color2 = this.randomColor2();
        let lb = color1, // left bottom
        rb = color1, // right bottom
        lt = color2, // left top
        rt = color2; // right top
        vb[5] = lb.r / 255; vb[6] = lb.g / 255; vb[7] = lb.b / 255; vb[8] = lb.a / 255;
        vb[14] = rb.r / 255; vb[15] = rb.g / 255; vb[16] = rb.b / 255; vb[17] = rb.a / 255;
        vb[23] = lt.r / 255; vb[24] = lt.g / 255; vb[25] = lt.b / 255; vb[26] = lt.a / 255;
        vb[32] = rt.r / 255; vb[33] = rt.g / 255; vb[34] = rt.b / 255; vb[35] = rt.a / 255;
    }
}

Note that: I use 4 colors to assign to 4 corner vertices, if you want horizontal gradient, just assign lb and lt to same value, rb and rt to same value.
For a SIMPLE sprite, vertices are ordered like this in vbo:

simple_sprite
simple_sprite185×170 212 Bytes

SLICED sprite is a bit more complicated, its vertices are ordered like this:
sliced_sprite
sliced_sprite318×239 605 Bytes

therefore to apply a gradient effect, we also have to assign vertex color to all edge vertices and inner vertices (1,2,4,5,6,7,8,9,10,11,13,14) by interpolating colors based on its relative position to corner vertices (0, 3, 12, 15). you can calculate interpolation ratio by accessing node size and border values:

uiTransform.contentSize // size
sprite.spriteFrame._capInsets // [border left, border top, border right, border bottom]
5

This works perfectly for a simple sprite, applying a gradient from bottom to top.

However, when I try to do the same for a sliced sprite (cc.Sprite.Type.SLICED), the color is not applying as expected.

Can you please provide a complete working code for setting vertex colors on a sliced sprite? Any help would be greatly appreciated!

Thanks in advance!

6

I thought by providing information about vertex data of SLICED sprite, you could do the calculation yourself, oh well
Here’s the code anyway, works for SIMPLE and SLICED sprite:

import { _decorator, color, Color, Component, lerp, macro, Sprite, UITransform } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('vert_color')
export class vert_color extends Component {
    start() {
        this.schedule(() => {
            this.updateColor()
        }, 1, macro.REPEAT_FOREVER)
    }
    randomColor1() {
        const COLORS = [Color.BLUE, Color.CYAN, Color.GREEN];
        return COLORS[Math.floor(Math.random() * COLORS.length)]
    }
    randomColor2() {
        const COLORS = [Color.RED, Color.YELLOW, Color.MAGENTA];
        return COLORS[Math.floor(Math.random() * COLORS.length)]
    }
    updateColor () {
        let sprite = this.getComponent(Sprite)
        let vb = sprite['_renderData'].chunk.vb;
        let color1 = this.randomColor1();
        let color2 = this.randomColor2();
        let lb = color1, // left bottom
        rb = color1, // right bottom
        lt = color2, // left top
        rt = color2; // right top
        if (sprite.type == Sprite.Type.SIMPLE) {
            this.setVertexColor(vb, 0, lb);
            this.setVertexColor(vb, 1, rb);
            this.setVertexColor(vb, 2, lt);
            this.setVertexColor(vb, 3, rt);
        } else if (sprite.type == Sprite.Type.SLICED) {
            let size = this.node.getComponent(UITransform).contentSize;
            // @ts-ignore
            let borderSize = sprite.spriteFrame._capInsets;
            let ratioLeft = borderSize[0] / size.width;
            let ratioTop = borderSize[1] / size.height;
            let ratioRight = borderSize[2] / size.width;
            let ratioBottom = borderSize[3] / size.height;
            let c4: Color, c8: Color, c7: Color, c11: Color;
            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: Color, color2: Color, t: number) {
        return color(
            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<ArrayBuffer>, vertexIndex: number, color: Color) {
        vbo[vertexIndex * 9 + 5] = color.r / 255;
        vbo[vertexIndex * 9 + 6] = color.g / 255;
        vbo[vertexIndex * 9 + 7] = color.b / 255;
        vbo[vertexIndex * 9 + 8] = color.a / 255;
    }
}