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

前言：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方法：

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    auto* background = LayerColor::create(ccc4(255, 255, 255, 255));
    addChild(background);
    auto* sprite = Sprite::create("1.png");
    sprite->setPosition(480, 320);
    addChild(sprite);

    auto* m_frameCache = SpriteFrameCache::getInstance();
    m_frameCache->addSpriteFramesWithFile("qiu1.plist", "qiu1.png");
    Vector<SpriteFrame*> frameArray;
    for (int i = 1; i < 3; i++)
    {
        auto* frame = m_frameCache->getSpriteFrameByName(String::createWithFormat("%d.png", i)->getCString());
        frameArray.pushBack(frame);
    }
    Animation* animation = Animation::createWithSpriteFrames(frameArray);
    //表示無限循環播放
    animation->setLoops(-1);
    //每兩張圖片的時間隔，圖片數目越少，間隔最小就越小
    animation->setDelayPerUnit(0.1f);

    //將動畫包裝成一個動作
    auto* action = Animate::create(animation);
    sprite->runAction(action);
    return true;
}

　　運行如下：

　　

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

5、打包apk:

　　在pro.android文件夾下：

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

　　

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

　　

　　

　　

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

　　

6、錯誤實例：

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

　　

　　這個軟件是可以免費注冊的，不過需要一兩天處理時間，不是試用版就不會出現亂碼問題，這個估計也是軟件作者故意設置的，還是要多支持正版。