Using Cocos2d-x to realize UV animation--Basic article

using Cocos2d-x to realize UV animation--Basic articleUV coordinates and rendering

UV animation refers to the dynamic effect of texture animation by dynamically changing texture coordinates while the program is running, using UV animation to achieve the effects of water flow, flame burning and so on.

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 that the texture maps to the drawing body (usually the vertices of the triangle), and the texture map file (png,jpg picture) is generally abstracted as a two-dimensional plane in the computer. The horizontal direction is U, the vertical direction is V, through the planar two-dimensional UV coordinate system, we can index to any pixel on the image, a map of the (u,v) range of [0,1], (0,0) represents the lower left corner of the map, (a) represents the top right corner of the map.

UV coordinates in the 2.cocos2d-x

The UV coordinates in COCOS2D-X are represented by the following data structures:

typedef struct _CCTEX2F {     glfloat u;     Glfloat v;} Cctex2f;<span style= "font-family:arial, Helvetica, Sans-serif; Background-color:rgb (255, 255, 255); " ></span>

How to render a picture to the device screen in 3.cocos2d-x (take Ccsprite as an example)

In Ccsprite, there are two important members that are related to rendering:

cctexture2d* m_pobtexture;

Ccv3f_c4b_t2f_quad M_squad;

M_pobtexture represents the texture map that will be rendered to the device screen and M_squad represents the map's coordinate information 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 represents a rectangular area on the device, BL,BR,TL,TR represents the lower-left corner of the rectangle, the lower-right corner, the upper-left corner, the upper-right corner, and CCV2F_C4F_T2F describes the information necessary to draw a point with the following data structure:

typedef struct _ccv2f_c4f_t2f{    //! vertices (2F)    ccvertex2f        vertices;    //! Colors (4F)    cccolor4f        colors;    //! Tex Coords (2F)    cctex2f            texcoords;} ccv2f_c4f_t2f;

A.vertices represents the coordinates (x, y) in the device, colors represents the color of the point (Rgba), and Texcoords represents the map for that point (corresponding to them_pobtexture) in the coordinates (U,V).

B. When rendering an entire rectangle, the inner point of the rectangle is generated by interpolation in addition to the four points described in the above structure.

C. When the render point (x, y) is indexed to the texture map color based on that point mapping coordinates (U,V), the indexed color and color represent the color blend and are eventually drawn to the screen.

The rendering code for Ccsprite is as follows (only an important part is intercepted):

    Bind texture Map    ccglbindtexture2d (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        // Set render coordinates (x, y)    int diff = offsetof (ccv3f_c4b_t2f, vertices);    Glvertexattribpointer (Kccvertexattrib_position, 3, Gl_float, Gl_false, Kquadsize, (void*) (offset + diff));    Set texture coordinates (u,v)    diff = offsetof (ccv3f_c4b_t2f, texcoords);    Glvertexattribpointer (Kccvertexattrib_texcoords, 2, Gl_float, Gl_false, Kquadsize, (void*) (offset + diff));    Set vertex color    diff = offsetof (ccv3f_c4b_t2f, colors);    Glvertexattribpointer (Kccvertexattrib_color, 4, Gl_unsigned_byte, Gl_true, Kquadsize, (void*) (offset + diff));    Render Rectangle    gldrawarrays (gl_triangle_strip, 0, 4);

Basic rendering knowledge is introduced here, and next I'll show you how to implement UV animations with a class uvsprite.

Using Cocos2d-x to realize UV animation--Basic article