Cocos2D-iphone Development (7) Texture sprite Animation

First, we will introduce the concept of texture.

Image ---- texture --- memory --- GPU

During the running process, the game should load all the images to be used into the OpenGL ES texture that the GPU can understand and execute. Note that when the image is filled into the texture, its length and width should both be the N power of 2.

Cctexture2d is a built-in texture class in cocos2d used to manage texture information. It knows how to draw a texture on the screen. We can use this class to create a texture instance object.

Cctexturecache texture Cache Management, responsible for loading images and managing generated textures. You can use the "Dictionary" for quick query and use it as a singleton.

The cctextureatlas texture gallery combines multiple textures into a large texture image.

Cctexture2d * text2d = [[cctexturecache sharedtexturecache] addimage: file];

The following describes the genie-related content.

Through the above relationship diagram, we can know that both the ccsprite and ccspriteframe genie frames are drawn by texture textures, and cctexture2d is the class that encapsulates texture textures, both Genie and sprite frames must be assigned a cctexture2d object to work. Therefore, you can use the cctextur2d instance object to create Genie and sprite frames.

The ccspritebatchnode sprite form is used to manage the ccsprite. It is actually a collection of many genie. So what does it do?

Generally, when we use Sprite, we add the sprite to a layer by addchild. The draw function of Sprite executes OpenGL during each frame call.
Es call to complete

Sprite rendering. Then, when you add multiple genie to the layer by addchild, it will be drawn multiple times separately and multiple OpenGL calls will be called.
Es renders the genie.

A waste of resources and time.

With the spritebatchnode, we first add any genie to the sprite form, and then addchild to the layer. In this case, OpenGL ES is called

Render all the genie in the form.

For example, if we need to add 100 genie

① If the sprite form is not used, we can understand the underlying rendering process as follows: For (INT I = 0; I <100; I ++) {open-draw-close ;}

② If you use the genie form, it is to make a rendering of the genie form of the 100 genie sets, that is, open-draw (100 draws)-close

From the two methods above, we can see the difference between the two. The second method saves 99 Open and Close processes using the Genie set, so as to optimize the processing;

Ccspriteframe

Ccspriteframecache

Sprite frames are mainly used to make animations. cocos2d uses ccanimation to save a sequence of Sprite frames, and then uses the ccanimate behavior class to regularly switch the current frame of the genie Based on the sequence to achieve the animation effect, the caching of Sprite frames is mainly used to store sprite frames, and its main function is to optimize sprite frames.

Next we will introduce the animation, which is actually a ccaction.

The above graph shows the animation.

1. First, we need to understand three concepts:

The Animated action of the ccanimate animation action on the sprite object.

Ccanimation animation objects in the ccanimate action

The ccanimationcache class is a singleton. It caches ccanimation animations and is also used for optimization.

2. Follow these steps to create an animation:

① Create a Sprite and add it to the current node.

② Create the ccanimation animation action object and add the frame content (genie frame)

③ Create a ccanimate animation action and specify the animation object of the action

④ Execute the sprite action

The sample code is as follows:

CCTexture2D *texture = [[CCTextureCache sharedTextureCache] addImage:@"dragon.png"];        CCSpriteBatchNode *spriteBatchNode = [CCSpriteBatchNode batchNodeWithTexture:texture];        [self addChild:spriteBatchNode];                NSMutableArray *framesArray = [NSMutableArray array];        for (int i=0; i<8; i++) {            for (int j =0; j<10; j++) {                CCSpriteFrame *frame = [CCSpriteFrame frameWithTexture:texture rect:CGRectMake(j*75, i*70, 75, 70)];                [framesArray addObject:frame];            }        }                CCAnimation *animation = [CCAnimation animationWithSpriteFrames:framesArray delay:0.1];        CCAnimate *animate = [CCAnimate actionWithAnimation:animation];                CCSpriteFrame *frame1 = [CCSpriteFrame frameWithTexture:texture rect:CGRectMake(0, 0, 72, 70)];        CCSprite *sprite = [CCSprite spriteWithSpriteFrame:frame1];                id repeatAction = [CCRepeatForever actionWithAction:animate];        [sprite runAction:repeatAction];                [sprite setPosition:ccp(150, 150)];        [self addChild:sprite];

This is the resource image used in the above Code.

3,

The preceding steps show that the animation contains multiple sprite frames. If we use a separate Sprite, we need to call the OpenGL ES drawing command every time, when there are many genie in the game, the speed will be greatly reduced. Then we need to consider how to optimize it.

The common method is-The genie form ccspritebatchnode

The sprite form is like a large image spliced by a number of sprite pictures. The sprite form provides a file plist, in which the boundary and size of a single sprite are specified, extract A single genie from the form when using it.

You can use zwoptex to create a Sprite form. It can make all the sprite images we need into a Sprite form big image PNG and a plist file.

With PNG and plist, you can create animations.

Steps:

① Use the plist file to add the sprite texture to ccspriteframecache

② Create the spritebatchnode form and add it to the current node.

Note: When you need to create a certain genie object from the genie form, weAdd it as a child node of the sprite formBut cannot directly add it as a subnode of the current layer.

③ Obtain the sprite frame corresponding to the image name from ccspriteframecache (sprite frame cache), and create a number of Sprite Frames

④ Create a ccanimation animation object, and pass in the sprite frame number group as the parameter

⑤ Create the genie and ccanimate, and execute the ccanimation animation object

Note: The more frames an animation contains, the better the animation effect.

// 1. use the plist file to add the sprite frame texture to the sprite frame cache [[ccspriteframecache sharedspriteframecache] addspriteframeswithfile: @ "mypanda_default.plist"]; // 2. create a ccspritebatchnode (sprite form) object and add it to the current layer. This sprite form is loaded at one time. Ccspritebatchnode * batchnode = [ccspritebatchnode batchnodewithfile: @ "mypanda_default.png"]; [self addchild: batchnode]; // 3. create an image frame list (array) nsmutablearray * walkanimframes = [nsmutablearray array]; for (INT I = 1; I <= 3; I ++) {[walkanimframes addobject: [[ccspriteframecache sharedspriteframecache] spriteframebyname: [nsstring stringwithformat: @ "panda?d.png", I];} // 4. create an animation object ccanimation * walkanim = [ccanimation animationwithspriteframes: walkanimframes delay: 0.5] through the number of Sprite frames; // 5. create a Sprite object and run the animation cgsize size = [ccdirector shareddire]. winsize; // create a sprite from the panda1_1.png image in the sprite table. The project does not contain the ccsprite * panda = [ccsprite spritewithspriteframename: @ "panda1_1.png"]; Panda. position = CCP (size. width * 0.8, size. height * 0.4); Id Verification Action = [ccrepeatforever actionwithaction: [ccanimate actionwithanimation: walkanim]; [panda runaction: Invalid Action]; // note the following: we have created an genie from the genie form, so we need to add it as a subnode of the genie form [batchnode addchild: panda];

Below is a brief explanation of this Code.

We initialized the sprite frame cache through the plist file. Later, we can find the corresponding sprite frame based on the image name corresponding to the sprite frame (these information is stored in plist ), so pay attention to the naming rules for image resource files, all of which are numbers 1 2 3....

Then, initialize the sprite form with a large texture image and load all the genie at one time through add.