同时也发到我的公众号了。
计划写个系列小教程——“火柴人跑酷”小游戏。
涉及工具列表：
ShoeBox：切图
TexturePacker：合图
Cocos Creator：制作游戏动画
Photoshop：画火柴人
今天先让“火柴人”动起来。
1. 新建项目
image
2. 切图合图
为什么切开又合成？
-
画图时为了对比动作，画都在一张图，切开是为了得到每个“火柴人”小图
- 小图再合成大图，软件帮生成一个坐标文档plist（含小图名、坐标等）。根据坐标，不用切割大图，也能找到是哪个小图。既方便了管理（只存一个大图），又能找到小图
image
image
3. 新建游戏场景，场景可以理解为一个环境
Cocos Creator 中，场景由节点树组成。默认包括“ Canvas > Main Camera ”（下图）。
image
image
节点（Node）是承载组件的实体，各种功能的 组件（Component） 挂载到节点。（啥意思？立刻讲）下图创建空节点（就是不带组件）。节点只有位置坐标、旋转角度、大小等信息。
image
要插入图片怎么办？就在节点“添加组件”叫Sprite（显示图像组件）
拖动就能关联，超级简单
image
要插入动画怎么办？就在节点“添加组件”叫Animation（驱动动画组件）
image
组件有了，但是没有动画剪辑数据（Animation Clip）啊，新建个呗。
image
image
下图剪辑动画还挺复杂。为啥叫序列帧动画，最惨的就是，动作一帧一帧全画出来，我不会其他的，只能这样做了。
image
image
做完啦！
录的gif，中间暂停是，播放完了又重头来。
image
