Aseprite+Cocos:打包像素画图,导入到cocos里并动起来

前言:Aseprite入门教程html

           Aseprite入门:第一个gif动图python

一、制做像素画:android

  按照上一次的小球跳动制做过程,先制做一个像素画动画:python2.7

  

  如果导出gif动态图,效果以下:工具

  

  可是在保存图片时,不要导出gif格式,选择save as...:oop

  

  选择好路径后,选择png格式输出:动画

  

  会提示自动把每一帧的图片按照一、二、3···等数字的顺序保存:ui

  

  保存以下:spa

  

二、使用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打包出的图片:

  

  这个软件是能够免费注册的,不过须要一两天处理时间,不是试用版就不会出现乱码问题,这个估计也是软件做者故意设置的,仍是要多支持正版。

相关文章
相关标签/搜索