最近在做一个2D的iOS小游戏,里面有一个战斗场景,如下图:


(感谢村长的设计)

首先简单地介绍一下这个场景中会发生的事情:

两个玩家在制定好一回合中的策略之后,游戏中播放相对应的动画。

比如:某个回合中的动画可能是:左边的人物进行攻击,右边的人物进行阻挡。
(以下均由这个例子来说明)

这样的动画要怎么实现呢?iOS自带动画的实现方式大概有以下三种:

  1. UIView animation 动画。
  2. UIImageView.images 形式的帧动画。
  3. CoreAnimation的一些3D动画。

每种的作用与大概原理如下:

  • 第1种实际上是改变空间的一些属性,通过设定改变的终点(起点是当前值),以及过渡的时间与差值函数来实现动画。
  • 第2点的本质和GIF图一样,通过逐帧播放图片,让人的视觉感觉到动画的效果。PS:一般视频中的动画是24帧/秒。
  • 第3种方法把第1种中的类进行封装,从而可以用来制作一些复杂的动画,比如水波波动效果。

一般的2D动画用1,2两点结合的方法都可以实现,上述说到的例子:左边人物攻击,右边人物防御就是用1,2结合的方式,其中第2种方法,帧动画是主要的方法。

我们的设计师辛苦完成帧动画以后是这样的:

第一眼看上去觉得,( ⊙o⊙ )哇,好棒啊............昨晚哭着切完图的时候,我就不这么觉得了。

首先我采用了最传统的隐藏图层->裁切->保存这个方式,鼠标点击了上千下以后OK了,然后我用GIF生成工具试了一下,结果出来的结果是这样的:

当时我的表情是这样的

简直不能看...那么问题在哪呢?

其实很简单,之前的切图方法让每帧的尺寸不一样,并且每相邻的两帧中,没有变化的位置(比如头部),相对位置不一样。

我们可以回想一下,小时候,那时天还很蓝,风还很轻,我们用自己心爱的铅笔,在本子上的每一页画上小人,然后快速翻动本子,就会看到一个活动的小人。

每一页纸代表着一帧,每一页中的小人大小都是一样大的,并且如果小人的头部一直不动,那么他的头在每页的相对位置就不会变。

根据上面的思路,我把每一帧动画的画布大小都设为一个固定值,相邻两帧中的下一帧都会对比上一帧来进行相对位置的调整。具体做法不再叙述。

然后,我们得到的结果是这样的:

再进行一些补帧,应该就没有问题了~

追根溯源,在刚开始设计之前,我们就应该约定好帧动画的设计细节:

  1. 每一帧都要有一个相同大小的画布。
  2. 每一帧一个图层,不要放在同一个图层上。
  3. 下一帧的设计应该对比上一帧进行,防止掉帧或者错位。

最后,我们的游戏会在6月中旬提交审核,不出意外下旬就会上线了~大家敬请期待~