1. 让“火柴人”动起来-通过序列帧动画

同时也发到我的公众号了。

计划写个系列小教程——“火柴人跑酷”小游戏。

涉及工具列表：

• 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