UV animation with cocos2d-x-basics, cocos2d-xuv

UV animation with cocos2d-x-basics, cocos2d-xuv
UV animation with cocos2d-x-basic article uv coordinates and rendering

Uv animation is a texture animation that dynamically changes the texture coordinates when the program is running to achieve dynamic effects. uv animation can be used to achieve water flow, flame burning, and other effects.

It is an animated effect implemented by UVSprite.

This article by liangneo original, reproduced Please retain the original address: http://blog.csdn.net/liangneo/article/details/42582947

1. What is UV coordinates?

Uv coordinates are the coordinates mapped by the fingerprint to the drawing body (usually the vertex of a triangle). texture map files (png, JPG images) are generally abstracted into a two-dimensional plane in the computer. The horizontal direction is U, and the vertical direction is V. Through the two-dimensional UV Coordinate System of the plane, we can index and locate any pixel on the image, one texture (u, v) the range is [], () indicates the lower left corner of the texture, () indicates the upper right corner of the texture.

2. uv coordinates in cocos2d-x

Uv coordinates in the cocos2d-x are represented in the following data structure:

typedef struct _ccTex2F {     GLfloat u;     GLfloat v;} ccTex2F;<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span>

3. How to render an image in the cocos2d-x to the device screen (take ccsprite as an example)

In ccsprite, there are two important rendering-related members:

CCTexture2D * m_pobTexture;

CcV3F_C4B_T2F_Quad m_sQuad;

M_pobTexture indicates the texture map to be rendered to the device screen, while m_sQuad indicates the coordinate information of the texture on the device, represented by the following data structure:

typedef struct _ccV2F_C4F_T2F_Quad{    //! bottom left    ccV2F_C4F_T2F    bl;    //! bottom right    ccV2F_C4F_T2F    br;    //! top left    ccV2F_C4F_T2F    tl;    //! top right    ccV2F_C4F_T2F    tr;} ccV2F_C4F_T2F_Quad;

The data structure indicates a rectangular area on the device. bl, br, tl, and tr indicate the lower left corner, lower right corner, upper left corner, and upper right corner of the rectangle respectively, ccV2F_C4F_T2F describes the information required to draw a vertex. Its data structure is as follows:

typedef struct _ccV2F_C4F_T2F{    //! vertices (2F)    ccVertex2F        vertices;    //! colors (4F)    ccColor4F        colors;    //! tex coords (2F)    ccTex2F            texCoords;} ccV2F_C4F_T2F;

A. vertices indicates the coordinates (x, y) in the device, colors indicates the color (rgba) corresponding to the point, and texCoords indicates the texture corresponding to the point (corresponding to m_pobTexture mentioned above) coordinates (u, v ).

B. When rendering the entire rectangle, except the four points described in the above structure, the interior points of the rectangle are generated by interpolation.

C. when rendering points (x, y), index the texture color based on the texture coordinates (u, v), and combine the color and color to indicate the color, it is finally drawn to the screen.

The rendering code of CCSprite is as follows (only important parts are captured ):

// Bind the texture map watermark (m_pobTexture-> getName (); # define kQuadSize sizeof (m_sQuad.bl) # ifdef EMSCRIPTEN long offset = 0; setGLBufferData (& m_sQuad, 4 * kQuadSize, 0); # else long offset = (long) & m_sQuad; # endif // EMSCRIPTEN // sets the rendering coordinate (x, y) int diff = offsetof (ccV3F_C4B_T2F, vertices ); glVertexAttribPointer (kCCVertexAttrib_Position, 3, GL_FLOAT, GL_FALSE, kQuadSize, (void *) (offset + diff); // set the texture coordinate (u, v) diff = offsetof (ccV3F_C4B_T2F, texCoords); glVertexAttribPointer (vertex, 2, GL_FLOAT, GL_FALSE, kQuadSize, (void *) (offset + diff); // sets the vertex color diff = offsetof (ccV3F_C4B_T2F, colors ); glVertexAttribPointer (kCCVertexAttrib_Color, 4, lag, GL_TRUE, kQuadSize, (void *) (offset + diff); // render the rectangular glDrawArrays (GL_TRIANGLE_STRIP, 0, 4 );

The basic rendering knowledge is introduced here first. Next I will introduce how to implement uv animation through a UVSprite class.