COCOS2DX Learning notes 10:COCOS2DX sequence frame animation (1)

GIF animation is not supported in COCOS2DX, so we cannot set images in GIF format for sprites. But what if we want to achieve animation? Then we have to use a lot of static diagram to compose the play into animation.

The concept of sequence frame animation is provided in COCOS2DX to achieve this function, the animation consists of frames, each frame is a texture, we can use a texture sequence to create the animation.

First find a map of the animated GIF, the QQ group in the recent dynamic figure of the plot too much, I casually find a picture, save the image to the desktop, open the PS software, drag the picture, so that the GIF will be split a lot of layers. We will save the layer one layer to a PNG static graph, named Manimation1-10, because this image is 10 layers, so to 10.

650) this.width=650; "Title=" Click to view the original "border=" 0 "alt=" study note 10: Figure 1.png "src=" http://www.byjth.com/content/uploadfile/ 201509/a4a11441628523.png "width=" 554 "height=" 243 "/>

The advantage of saving such a naming format is that the number that follows is incremented and mutable, and we can use the for loop to increase the number of digits in a programming operation without having to manually add 10.

1, the use of ordinary way to achieve animation
We use the animation class to describe an animation, and the Sprite animation action is a animate object. Animate animation is the action of the sprite to display an animation, which is created by an animated object and executed by the sprite.

650) this.width=650; "Title=" Click to view the original "border=" 0 "alt=" study note 10: Figure 2.png "src=" http://www.byjth.com/content/uploadfile/ 201509/thum-41021441628800.png "width=" 680 "height=" 296 "/>

2. Animating with Sprite frames

The last time the genie was created, we talked about the sprite frame.

(COCOS2DX study Note 7: Sprite (Sprite) http://www.byjth.com/biji/26.html) is mainly used for animation, this time we also use the Texturepacker tool to package the material we use.
Pack Tutorial: teach you how to pack your footage using the Texturepacker tool http://www.byjth.com/tools/29.html
After packing, we put the generated plist files and PNG images into the resources directory within the project, here I am the D:\cocos2d-x-3.4\tests\cocosxuexi\Resources folder.

650) this.width=650; "Title=" Click to view the original "border=" 0 "alt=" study note 10: Figure 4.png "src=" http://www.byjth.com/content/uploadfile/ 201509/95241441628867.png "width=" 519 "height=" 370 "/>

650) this.width=650; "Title=" Click to view the original "border=" 0 "alt=" study note 10: Figure 5.png "src=" http://www.byjth.com/content/uploadfile/ 201509/thum-a9991441628971.png "width=" 680 "height=" 395 "/>

and see if it's the same as the GIF picture.

650) this.width=650; "Title=" Click to view the original "border=" 0 "alt=" study note 10: Figure 3.gif "src=" http://www.byjth.com/content/uploadfile/ 201509/e43f1441629473.gif "width=" 338 "height=" 517 "/>

COCOS2DX Learning notes 10:COCOS2DX sequence frame animation (1)

Http://www.byjth.com/biji/30.html

Teach you to pack your footage using the Texturepacker tool

Http://www.byjth.com/tools/29.html

This article is from the "Close your eyes on the Dark" blog, please be sure to keep this source http://byjth.blog.51cto.com/4127898/1758979

COCOS2DX Learning notes 10:COCOS2DX sequence frame animation (1)