Home » cocos2D » iphone » 開發 App 時透過 Texture Packer 作圖片打包

開發 App 時透過 Texture Packer 作圖片打包

in , - on 上午8:33 - No comments
在做 App 的開發時，難免會需要在專案中加入許多的圖片，尤其在開發遊戲專案時，當加入的圖檔越來越多，程式難免越來越肥厚，這時候就需要像是 Zwoptex 或是 Texture Packer 這些工具將圖檔作打包的動作。

這次要介紹的就是 Texture Packer (以下簡稱 TP 好了...)，並且實做一個簡單的例子，



首先可以先去下載試用版的TP
http://www.texturepacker.com/download/


下載、安裝好後，將 TP打開，可以看到這樣子的介面：














選擇上面的 "Add Folders" 或 "Add Sprites" 將你的圖片們加進來，














左邊可以看到有一些設定可以做修改，目前先暫時不要理他，等以後有需求的時候再說。直接到左下角 Output 的部份，
Texture format: 選擇 Compressed PVR (.pvr.ccz)
Texture file: 選擇存放路徑、檔名
基本需要設定的地方只有這兩個，好了之後按下上方工具列的 publish


如果在設定的存放處看見 *.pvr.ccz 以及 *.plist 兩個檔案，代表打包成功，可以將 TP 關掉，準備進行專案的開發了。


















建置好專案後，將上面兩個檔拉進 Xcode 中，以及從 TP 的官網中下載一些幫助寫動作、動畫的程式碼，

http://www.texturepacker.com/cocos2d/improved-sprite-loader/



從上面網址下載的檔案解壓縮後，同樣拉到 Xcode 之中，然後修改 HelloWorldLayer.m，將它改成下面的程式碼：

#import "HelloWorldLayer.h" 
#import "CCAnimate+SequenceLoader.h"  

@implementation HelloWorldLayer  
+(CCScene *) scene {          
    CCScene *scene = [CCScene node];     
    HelloWorldLayer *layer = [HelloWorldLayer node];     
    [scene addChild: layer];          
    return scene; 
}  

-(id) init 
{          
       if( (self=[super init])) {                  
              [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"balltest.plist"];                                   
              mySprite = [CCSprite spriteWithSpriteFrameName:@"ball_1.png"];         
              mySprite.position = ccp(20, 150);         
              [self addChild:mySprite];                                  
              speed = 60.0f;         
              id repeatAction = [CCRepeatForever actionWithAction:[CCAnimate actionWithSpriteSequence:@"ball_%d.png" delay:0.3 restoreOriginalFrame:NO]];                  
              [mySprite runAction:repeatAction];                  
              [self schedule:@selector(loop:) interval:1/60];     
        }     
        return self; 
}  

-(void) loop:(ccTime)dt 
{     
   CGSize winSize = [[CCDirector sharedDirector] winSize];     
   mySprite.position = ccp(mySprite.position.x + (dt*speed), mySprite.position.y);          
   if(mySprite.position.x > winSize.width) {         
        speed = -60.0f;         
        id repeatAction = [CCRepeatForever actionWithAction:[CCAnimate actionWithSpriteSequence:@"rocket_goback%d.png" delay:0.3 restoreOriginalFrame:NO]];         
        [mySprite runAction:repeatAction];         
        mySprite.position = ccp(mySprite.position.x + (dt*speed), mySprite.position.y);     
   }          

   if(mySprite.position.x < 0)     
   {         
       speed = 60.0f;         
       id repeatAction = [CCRepeatForever actionWithAction:[CCAnimate actionWithSpriteSequence:@"rocket%d.png" delay:0.3 restoreOriginalFrame:NO]];         
       [mySprite runAction:repeatAction];         
       mySprite.position = ccp(mySprite.position.x + (dt*speed), mySprite.position.y);     
    } 
}  

- (void) dealloc {         
    [super dealloc]; 
} 

@end


然後可以開始執行程式了，如果沒有出錯的話，應該會在畫面看到一顆球從螢幕的左邊移動到右邊，並且在藍、綠色之間進行轉換。







標籤： ,