Aseprite+Cocos：打包像素畫圖，導入到cocos裏並動起來

前言：Aseprite入門教程

           Aseprite入門：第一個gif動圖

一、製做像素畫：

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

　　

　　如果導出gif動態圖，效果以下：

　　

　　可是在保存圖片時，不要導出gif格式，選擇save as...：

　　

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

　　

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

　　

　　保存以下：

　　

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

　　打開軟件，看到界面：

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

　　點擊Add Sprites:

　　

　　在彈出的選擇文件框裏按住Ctrl把要添加的圖片所有點選：

　　

　　

　　選擇格式：

　　

　　點擊Publish生成：

　　

　　

　　生成的圖片和plist文件以下：

　　

三、創建cocos項目：

　　

　　

　　

　　

四、在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 }

　　運行以下：

　　

　　裏面的圖片是動態的，這裏直接放的截圖。

五、打包apk:

　　在pro.android文件夾下：

　　按住shift並右擊鼠標，調出管理員的命令行窗口：

　　

　　使用python2.7（python3.6的版本過高，語法差別大，可能會編譯失敗）運行build_native.py文件：

　　

　　

　　

　　將apk在手機上安裝，運行結果如圖：

　　

六、錯誤實例：

　　使用試用版TexturePacker打包出的圖片：

　　

　　這個軟件是能夠免費註冊的，不過須要一兩天處理時間，不是試用版就不會出現亂碼問題，這個估計也是軟件做者故意設置的，仍是要多支持正版。