Vertex animation, sine, wavelength, amplitude, period.

Results the preview

Using the step

Create a new Material, select the corresponding Effect, and adjust the parameters.

Create a new Sprite in your scene and SpriteFrame a tiny image. Select TILED for render mode and change the node size. Material Select the material created above.

Preview and you’ll see the image in action.

Realize the principle of

Why does tiling work?

A simple Sprite usually has four vertices.

As found in the Cocos source code, the WebGL implementation of Sprite’s tiled rendering mode is tiled vertex mesh. The more tiling you have, the more vertices you have.

So, as long as the image is small enough, the denser the grid is.

How to produce the wave effect?

Here, the sine wave formula y = A sin{2π (t/ t-x /λ)} is used to achieve the wave effect.

So, using the sin function, the position of each vertex is offset once, to achieve the wave effect ~

The main vertex shader code is as follows.

void main () {
    vec4 pos = vec4(a_position, 1);
    // y = A sine {2π (t/ t-x /λ)}
    pos.y = pos.y + sin_A*sin(2.0*3.141592653*(cc_time.x/sin_T - pos.x/sin_lamda));
    // omit the code
}
Copy the code

One of the limitations of using Sprite’s tile rendering mode is that the texture has to be simple and reusable, such as the undulating effect of a solid color.

If you want to use complex texture fluctuations, you can use the following methods.

  1. useSprite Mesh rendering mode, custom vertex data, can refer toA probe into the grid rendering mode in sprites 。
  2. usecc.MeshRendererOrganize vertex data, referenceWaving flags! Shader programming practice!

More wonderful

█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █

summary

Y = A sin{2π (t/ t-x /λ)}

Above is white jade without ice using Cocos Creator V2.3.3 to develop “Shader animation flag/Water wave effect!” Technology sharing. If it helps you, please share it with your friends.

Everyone must be better than me at something, so I learn from everyone. How to Win People

Original link to complete code (see Readme) Original article navigation