Aseprite+Cocos：打包畫素畫圖，匯入到cocos裡並動起來

我命傾塵發表於2019-03-22

前言：Aseprite入門教程

Aseprite入門：第一個gif動圖

1、製作畫素畫：

　　按照上一次的小球跳動製作過程，先製作一個畫素畫動畫：

　　若是匯出gif動態圖，效果如下：

　　但是在儲存圖片時，不要匯出gif格式，選擇save as...：

　　選擇好路徑後，選擇png格式輸出：

　　會提示自動把每一幀的圖片按照1、2、3···等數字的順序儲存：

　　儲存如下：

2、使用TexturePackerGUI工具進行處理：

　　開啟軟體，看到介面：

　　這裡要注意，使用試用版的話，打包的圖片會出現亂碼文字！我一開始就是因為這個，卡了半天。

　　點選Add Sprites:

　　在彈出的選擇檔案框裡按住Ctrl把要新增的圖片全部點選：

　　選擇格式：

　　點選Publish生成：

　　生成的圖片和plist檔案如下：

3、建立cocos專案：

4、在vs裡編輯程式碼：

　　將plist和png檔案複製到新建的test專案下的Resources資原始檔夾下：

　　用.sln開啟專案：

　　編輯HelloWorldScene.cpp裡的init方法：

 1 bool HelloWorld::init()
 2 {
 3     //////////////////////////////
 4     // 1. super init first
 5     if ( !Layer::init() )
 6     {
 7         return false;
 8     }
 9     auto* background = LayerColor::create(ccc4(255, 255, 255, 255));
10     addChild(background);
11     auto* sprite = Sprite::create("1.png");
12     sprite->setPosition(480, 320);
13     addChild(sprite);
14 
15     auto* m_frameCache = SpriteFrameCache::getInstance();
16     m_frameCache->addSpriteFramesWithFile("qiu1.plist", "qiu1.png");
17     Vector<SpriteFrame*> frameArray;
18     for (int i = 1; i < 3; i++)
19     {
20         auto* frame = m_frameCache->getSpriteFrameByName(String::createWithFormat("%d.png", i)->getCString());
21         frameArray.pushBack(frame);
22     }
23     Animation* animation = Animation::createWithSpriteFrames(frameArray);
24     //表示無限迴圈播放
25     animation->setLoops(-1);
26     //每兩張圖片的時間隔，圖片數目越少，間隔最小就越小
27     animation->setDelayPerUnit(0.1f);
28 
29     //將動畫包裝成一個動作
30     auto* action = Animate::create(animation);
31     sprite->runAction(action);
32     return true;
33 }