2D background image 3D scrolling effect (perspective)! Cocos Creator !

Combat ground effect! The scrolling effect of depth depth (perspective) is realized in 2D.

The effect

review

The texture management is still using the Sprite component of the rendering mode Mesh, you can refer to the wizard in the Mesh rendering mode! .

The principle of

In order to achieve this perspective effect, grasp a principle, far small near big, far slow near fast.

Prepare a trapezoidal image and move the bottom one quickly and the top one slowly to create a 3D scrolling sensation.

The axis of the Sprite component’s render Mesh is the upper left corner, the xy position is the image size, and the UV texture is 0-1.

For the middle vertex data, see the figure below.

Here’s the code.

this.sp.spriteFrame['vertices'] = {
    x: [480.1440.1440.480],
    y: [0.0.480.480],
    nu: [0.35.0.65.0.65.0.35],
    nv: [0.0.1.1],
    triangles: [0.1.2.2.3.0],}Copy the code

So how to determine the texture coordinate u of a certain position after moving?

Just determine the range of the two leftmost points and work out the positions in percentage terms.

The point on the right can be figured out from the vertex and length on the left.

Here’s the code.

// percent 0-1
const vertices = this.sp.spriteFrame['vertices'];
const nu = vertices.nu;
nu[0] = 0.25 + 0.2 * percent;
nu[1] = nu[0] + 0.3;
nu[3] = percent * 0.7;
nu[2] = nu[3] + 0.3;
Copy the code

The Mathematics and Physics of Game Development

More and more

█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ For Gizmo, █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █

summary

Near big far small, near fast far slow!

The above is the technical sharing of “using 2D to achieve 3D rolling effect of background image” by using Cocos Creator V2.3.3. If it helps you, please share it with your friends.

There is a limit to the number of hours each day that a person can work intently and productively. You only have so much time, and it’s up to you what you do with it.

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