IOS_31_cocos2d _ texture packaging (TexturePacker)

IOS_31_cocos2d _ texture packaging (TexturePacker)
Finally:
Final code: Use of texture album

// 4. play Zhao Yun's sequence Frame Animation-(void) zhaoyunPlay {// 1. [genie frame cache] is a singleton CCSpriteFrameCache * spriteFrameCache = [CCSpriteFrameCache sharedSpriteFrameCache]; // loads a large image from a plist file, and the method performs internal cutting, all generated elf frames will be placed in the [genie frame cache]. // you can retrieve the corresponding split according to the name of the elf frame in plist, spriteFrameCache addSpriteFramesWithFile: @ "zhaoyun. plist "]; // 2. fill NSMutableArray * spriteFramesArr = [NSMutableArray array]; for (int I = 1; I <= 10; I ++) {// name of the merged elf frame, must be the key in plist. A key corresponds to an NSString * filename = [NSString stringWithFormat: @ "mongod.png", I]; // Based on the elf name, extract the corresponding genie frame object CCSpriteFrame * oneSpriteFrame = [spriteFrameCache spriteFrameByName: filename] from [genie frame cache]. // Add it to the array [javasaddobject: oneSpriteFrame];} // 3. add an animation CCAnimation * animation = [CCAnimation animation: Invalid delay: 0.1]; CCActionAnimate * animate = [CCActionAnimate actionWithAnimation: animation]; [_ sprite runAction: [animated actionWithAction: animate];}

The TexturePacker tool is used to package multiple images into a large image. The objective is to: 1. save memory space and 2. Reduce the number of texture rendering times. Because Android and iOS games are rendered through OpenGL ES, WhileOpenGL ESThe texture size must be 2 to the Npower, If not, it will be extended to the nearest 2 Npower (by filling transparent pixels) The most important thing is that texture rendering consumes a lot of performance, If each small image is rendered separately, three steps are required: Prepare rendering, start rendering, and end Rendering However, if TP is used to combine all small images into a large image, You only need to render the image once (that is, you only need to perform the following operations on the large image:Prepare rendering, start rendering, and end Rendering) This will greatly improve the performance

For example, there is a 32-bit color map of 260x260 pixels,

It accounts for approximately 260 KB in memory (260x32/8 x = 270400B ),

However, due to the limited texture size, the texture size must be 2 to n power,

The system automatically generates a n-power texture that is closest to the source image size (only larger than the source image size) and has a width and height of 2,

Therefore, the system will generate a x512 pixel texture,

In addition, it will eventually occupy 1 MB of memory (512x512x32/8 = 1048576B ),

It can be seen that the actual memory occupied is four times the memory required by the source image.

The solution is to change the 260x260 pixel image to 256x256 pixel, and the system will also generate a texture of 256x256 pixel.

The synthesized large image supports the following frameworks:



It was developed by a foreigner called Andreas Loew. The following are his Twitter account and Facebook account

Download ,:
Open the application. The page is as follows: 1. Click Add Folder (to open a folder containing n multiple images)
2. select folders containing all images of Zhao Yun
3. Set parameters. The interface is as follows:

The following are related parameter settings: data Format options. supported formats include:
Data Filename: The generated target file name.
Texture Format:
Recommended: Compressed PVR [. pvr. ccz]




Image FZ success? Http://www.bkjia.com/kf/ware/vc/ "target =" _ blank "class =" keylink "> keys" http://www.2cto.com/uploadfile/Collfiles/20140923/20140923090603169.png "alt =" \ ">
Dithering [hesitant] jitter processing ??? Select: floydsteberger ???

When Algorithm is MaxRects:
When Algorithm is Basic:

When Allow Rotation is NO:
4. click Publish to generate a large png and a plist file. Note: Save is used to Save the TP project and generate the TPS file.



The Plist file contains the following content: dictionary: the key is the image name. For example, the 1.png value is a dictionary with the following keys: frame, offset, rotated, sourceSize, and sourceColorRect.

 
     
          
   
    frames
           
               
    
     1.png
                
                    
     
      frame
                     
     
      {{2,416},{92,107}}
                     
     
      offset
                     
     
      {-29,-26}
                     
     
      rotated
                     
                     
     
      sourceColorRect
                     
     
      {{91,56},{92,107}}
                     
     
      sourceSize
                     
     
      {332,167}
                 
                
    
     10.png
                
                    
     
      frame
                     
     
      {{111,414},{184,81}}
                     
     
      offset
                     
     
      {-3,-29}
                     
     
      rotated
                     
                     
     
      sourceColorRect
                     
     
      {{71,72},{184,81}}
                     
     
      sourceSize
                     
     
      {332,167}
                 
                
    
     2.png
                
                    
     
      frame
                     
     
      {{2,224},{190,81}}
                     
     
      offset
                     
     
      {-71,-29}
                     
     
      rotated
                     
                     
     
      sourceColorRect
                     
     
      {{0,72},{190,81}}
                     
     
      sourceSize
                     
     
      {332,167}
                 
                
    
     3.png
                
                    
     
      frame
                     
     
      {{297,337},{136,127}}
                     
     
      offset
                     
     
      {-46,-6}
                     
     
      rotated
                     
                     
     
      sourceColorRect
                     
     
      {{52,26},{136,127}}
                     
     
      sourceSize
                     
     
      {332,167}
                 
                
    
     4.png
                
                    
     
      frame
                     
     
      {{297,182},{158,153}}
                     
     
      offset
                     
     
      {-59,7}
                     
     
      rotated
                     
                     
     
      sourceColorRect
                     
     
      {{28,0},{158,153}}
                     
     
      sourceSize
                     
     
      {332,167}
                 
                
    
     5.png
                
                    
     
      frame
                     
     
      {{85,224},{188,149}}
                     
     
      offset
                     
     
      {-12,5}
                     
     
      rotated
                     
                     
     
      sourceColorRect
                     
     
      {{60,4},{188,149}}
                     
     
      sourceSize
                     
     
      {332,167}
                 
                
    
     6.png
                
                    
     
      frame
                     
     
      {{2,2},{242,143}}
                     
     
      offset
                     
     
      {45,2}
                     
     
      rotated
                     
                     
     
      sourceColorRect
                     
     
      {{90,10},{242,143}}
                     
     
      sourceSize
                     
     
      {332,167}
                 
                
    
     7.png
                
                    
     
      frame
                     
     
      {{246,2},{242,119}}
                     
     
      offset
                     
     
      {45,-10}
                     
     
      rotated
                     
                     
     
      sourceColorRect
                     
     
      {{90,34},{242,119}}
                     
     
      sourceSize
                     
     
      {332,167}
                 
                
    
     8.png
                
                    
     
      frame
                     
     
      {{246,123},{232,57}}
                     
     
      offset
                     
     
      {40,-41}
                     
     
      rotated
                     
                     
     
      sourceColorRect
                     
     
      {{90,96},{232,57}}
                     
     
      sourceSize
                     
     
      {332,167}
                 
                
    
     9.png
                
                    
     
      frame
                     
     
      {{2,147},{198,75}}
                     
     
      offset
                     
     
      {24,-32}
                     
     
      rotated
                     
                     
     
      sourceColorRect
                     
     
      {{91,78},{198,75}}
                     
     
      sourceSize
                     
     
      {332,167}
                 
            
           
   
    metadata
           
               
    
     format
                
    
     2
                
    
     realTextureFileName
                
    
     zhaoyun.png
                
    
     size
                
    
     {512,512}
                
    
     smartupdate
                
    
     $TexturePacker:SmartUpdate:aae1cbd56ecaac00aa0364cad5d7b3d2:1/1$
                
    
     textureFileName
                
    
     zhaoyun.png
            
       
  
 

Final merged image:
Plist file Overview: