使用TexturePacker 製做動畫的貼圖導出在 SpriteKit 中使用.

時間 2019-11-17

標籤使用 texturepacker 製做動畫導出 spritekit 简体版

原文原文鏈接

做爲常常使用的工具, TexturePacker的確是很方便的打包貼圖的工具. 打包能夠減小DrawCall次數.對於提高性能有很大做用.並且做者很友好,若是是開發階段使用, 能夠申請免費的受權. 固然,若是產品賺了錢都應該買一份正版.SpriteKit是ios7新的特性,爲2D遊戲開發而作, TexturePacker也推出了一個示範的實現,整合在一塊兒. 工具化,製做流程規範化是趨勢. 你out了麼.

ios7 SpriteKit 開發者指南.http://upyun.cocimg.com/cocoachina/SpriteKit_PG.pdfcss

TexturePacker 下載: http://www.codeandweb.com/texturepacker/downloadnode

支持的真多啊: Cocos2d SpriteKit Corona SDK Starling Unity3D Flash / AS3 CSS / HTML LibGDX AndEngine Moai Cocos2d-X XNA PlayStation® Suite V-Playios

SpriteKit Animations and TextureAtlassesgit

http://www.codeandweb.com/blog/2013/09/23/spritekit-animations-and-textureatlassesgithub

使用TexturePacker 製做動畫的貼圖導出在 SpriteKit 中使用.web

The main advantages over the pure Xcode solution are數組

Organizing your sprites in foldersruby
Importing multiple formats such as PNG, PSD, SVG, SWFbash
Compile time checks for sprite namesapp
Creating animations with a single line of code

純Xcode的優勢: 在目錄裏本身組織Sprites /能夠同時導入各類格式. png psd svg swf / 編譯時檢查sprite 資源名字 /一行代碼完成動畫建立.

Let’s start with how to easily create your atlas.

下面就開始示範如何建立 atlas

Create your SpriteKit atlas with TexturePacker

To create a new SpriteKit atlas, simply start TexturePacker and drag & drop the directories containing your sprite images to the Sprites area of TexturePacker. TexturePacker will automatically load and lay out all image files:

拖拽sprites文件夾到 TexturePacker 窗口便可. 導入資源. 以下圖.

Select SpriteKit in the Data Format field, and enter a path to which the atlas bundle should be written. Parallel to this .atlasc file TexturePacker generates a .hheader file which contains useful macros for easy SKTexture creation. If you choose the Xcode project directory as output here, the generated header file is automatically found in the include path.

選擇導出格式. 設置導出路徑以及導出的模板. 推薦導出到Xcode的工程目錄裏面. 直接就能夠include 了.

To use the published sprite sheet in Xcode, drag and drop the .atlasc bundle and the generated .h header file to your Xcode project:

導出後, 須要加入 .atlasc .h 文件到工程裏. 方法以下, 拖拽到Xcode 的窗口裏.

Xcode asks how the folder should be added. If you create a folder reference , the Xcode project is automatically updated in the future if the altasc bundle changes (e.g. additional sprite sheets are added).

而後, 在對話框裏, 選擇 create folder references for any added fodlers 以及確認 add to targets 選中. 這樣資源文件纔會在打包時包含到App裏.

Creating a SKSpriteNode from the texture atlas

演示使用 textureAtlas 建立. SKSpriteNode

Creating a textured sprite is quite easy, just load the texture and use the SKTexture object when creating the sprite node:

很簡單就是用 SKTexture

texture = [SKTexture textureWithImageNamed:@"Background"];sprite = [SKSpriteNode spriteNodeWithTexture:texture];

The first line loads the sprite—looking for a single sprite in the file system— and if not found searching all sprite sheets available to the application.

The second line creates a sprite object using the specified texture.

Adding compile-time checks to your SpriteKit project

As the texture image is referenced by its file name, typos in its name or a mismatch due to a reorganized texture atlas cannot be detected at compile-time.

由於texture 是一個文件名. 因此沒辦法在編譯時檢查某些貼圖資源不存在的狀況. 畢竟這是邏輯狀態. 好比「button1″ 你能夠用不存在的貼圖資源建立對象. 只有運行時纔會報錯. 編譯時檢查不出來的.

TexturePacker 提供了一個變通的解決方法. 引入了一個頭文件若是你使用了不存在的資源名字. 就會報錯了. 固然也須要你使用常量去建立對象. 好比 __BUTTON__ 而不是「button1「後者的話仍是會有問題的.

SpriteKit replaces missing images with a dummy graphic which might look strange. Imagine what this would mean for you if it accidently reaches the AppStore…

TexturePacker helps you avoid this: with compile-time checks!

TexturePacker creates a header file together with your atlas. You can simply import it using:

#import "sprites.h"

The file contains all sprite names used in the atlas as a #define . It also defines a macro for each texture image which creates the corresponding SKTextureobject.

#define SPRITES_SPR_BACKGROUND       @"Background"#define SPRITES_SPR_CAPGUY_TURN_0001 @"capguy/turn/0001"#define SPRITES_SPR_CAPGUY_TURN_0002 @"capguy/turn/0002"...#define SPRITES_TEX_BACKGROUND       [SKTexture textureWithImageNamed:@"Background"]#define SPRITES_TEX_CAPGUY_TURN_0001 [SKTexture textureWithImageNamed:@"capguy/turn/0001"]#define SPRITES_TEX_CAPGUY_TURN_0002 [SKTexture textureWithImageNamed:@"capguy/turn/0002"]

Using these defines, creating a sprite is a 1-liner:

經過定義好的頭文件建立 SKSpriteNode 即 Sprite 咱們須要的動畫精靈.

SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithTexture:SPRITES_TEX_BACKGROUND];

If you now rename the sprite and publish the sprite atlas from TexturePacker, the definition also changes its name. When compiling in Xcode you get a compiler error about a missing sprite.

注意: 若是你修改了定義的名字. 會有編譯錯誤. 須要手動修改爲新的動畫的名字. （老的被刪除了)

Simplifying SpriteKit’s animation handling

Sprites are considered as animation if they end with a number—e.g. img_01 , img_02 , etc. For these an NSArray object with all textures of the animation is defined.

#define SPRITES_ANIM_CAPGUY_TURN @[ \
        [SKTexture textureWithImageNamed:@"capguy/turn/0001"], \
        [SKTexture textureWithImageNamed:@"capguy/turn/0002"], \
        [SKTexture textureWithImageNamed:@"capguy/turn/0003"], \
        ...
SKSPrite 用數組來管理幀. 如上.

This makes it extremely simple to animate sprites:

SKAction *walk = [SKAction animateWithTextures:SPRITES_ANIM_CAPGUY_WALK timePerFrame:0.033];
[sprite runAction:walk];
初始化一個動畫Action 如上. SKAction 是一組動畫幀. 表明一個狀態. 好比walk.

No more adding single frames, no more worrying about missing animation phases!

Enhancing the animation with additional frames—or removing frames—doesn’t require you change the code at all: TexturePacker always fills in the right frames.

Using SKActions to move the sprite

用SKActions 來移動sprite吧.

For our sample application we use two animations:

walk (left to right)
turn (right to left)

These animations can be created as mentioned above:

SKAction *walk = [SKAction animateWithTextures:SPRITES_ANIM_CAPGUY_WALK timePerFrame:0.033];
SKAction *turn = [SKAction animateWithTextures:SPRITES_ANIM_CAPGUY_TURN timePerFrame:0.033];

Due to the enormous width of the iPad display we have to repeat the animation a few times:

SKAction *walkAnim = [SKAction sequence:@[walk, walk, walk, walk, walk, walk]];
用重複的Action 實現新的組合動畫.. 如上.. walk ,walk ...

Note As SpriteKit does not allow repeat actions to be nested, we cannot use [SKAction repeatAction:count:] here, this would conflict with [SKAction repeatActionForever:] , see below. This is why we implement the action as a sequence of walk actions.

注意: 由於 SpriteKit 不容許重複的actions 被嵌套循環.

In the animation CapGuy walks without moving forward. We need a move action to move the sprite from left to right, and back. The action gets the same duration as the animation itself:

SKAction *moveRight  = [SKAction moveToX:900 duration:walkAnim.duration];
SKAction *moveLeft   = [SKAction moveToX:100 duration:walkAnim.duration];

We have only an animation with CapGuy walking from left to right, but not in the other direction. So we use a scale action with scaling factor -1 to get a mirrored animation. Another action is needed to set the scaling back to 1:

SKAction *mirrorDirection  = [SKAction scaleXTo:-1 y:1 duration:0.0];
SKAction *resetDirection   = [SKAction scaleXTo:1  y:1 duration:0.0];

All action which are put into a group are executed in parallel. We are not only adding the walk and move actions to a group, but also the mirror / reset actions. They have a duration of 0 and are executed at the beginning of the group, so their scaling factor has direct impact on the walk / move actions:

全部的action 是並行執行的. 經過在開頭加入 mirror/reset 來實現改變方向.

SKAction *walkAndMoveRight = [SKAction group:@[resetDirection,  walkAnim, moveRight]];
SKAction *walkAndMoveLeft  = [SKAction group:@[mirrorDirection, walkAnim, moveLeft]];

Now we combine walk & turn actions into a sequence, and repeat this sequence forever:

self.sequence =
  [SKAction repeatActionForever:[SKAction sequence:@[walkAndMoveRight, turn, walkAndMoveLeft, turn]]];
上面咱們把走和轉向混合起來.而後一直執行它.

Applying SKAction to multiple SKSpriteNodes

SKAction objects can be used for many sprites in parallel. In our example we want to create a new CapGuy sprite each time the user touches the screen. We have to create a new SKSpriteNode only, and run the action on it which we created in the section above:

SKAction做爲數據能夠給多個SKSPrite對象來使用. 下面的例子實現了每次點擊新建一個自動走的精靈的.

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithTexture:SPRITES_TEX_CAPGUY_WALK_0001];
    sprite.position = CGPointMake(100, rand() % 100 + 200);

    [sprite runAction:sequence];
    [self addChild:sprite];
}