How to get an array of pixel colors from an image?

[justboy8]

I’m trying to make an effect of pixels appearing with transparency and sequence (first the “darkest” then the rest of the pixels). I want to achieve the effect - “so that the pixels, like water, fill the empty mouth of the river.”

I created a sprite → material → copied the builtin-sprite shader for 2D

I don’t know how to get a texture in the form of pixel colors from a sprite

...
let sprite = element.getComponent(Sprite);
sprite.spriteFrame
...

I assumed that I could get an array of pixel colors from a sprite, and then play with them and achieve the desired effect without touching the shader itself. But I couldn’t get the array of pixel colors.

I installed extensions in VS C (Cocos Effect, Shader languages support for VS Code) my next thought was to get into the shader to try working with the texture there, but I ran into difficulties:

1.) I couldn’t find the right package for working with textures to get pixel colors

#include <common/texture/texture-lod>

2.) hints are not displayed (screen attached)

I tried to figure it out on my own (Internet, video) but couldn’t. I’m here to get any help. sorry for my english.

[daisyH]

Add it like this

    float alpha = (sin(cc_time.x) + 1.0) / 2.0;
    o *= vec4(1, 1, 1, alpha);

The effect is transparency gradient.
surface-effect.effect.zip (1.2 KB)

[justboy8]

@daisyH

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

Thanks. Now I understand that this o *= vec4(1, 1, 1, alpha); is rgba. But I don’t understand whether these are rgba textures or just rgba colors that are superimposed on top of the texture.

I tried to display in the picture the movement pattern of drawing the appearance of pixels. The beginning of the movement of pixels depends on the color saturation and tends to display colors next to a circle. This is what I roughly want to achieve in the end at this stage.