Android游戏中的动画制作

游戏中最常见的元素就是图片了，想让一个游戏中的角色看起来更生动，单靠简单的移动和旋转图片是远远不够的，我们应该为角色添加动画，“动起来”的角色看起来既生动又贴近现实，具有更好的用户体验。那么动画在游戏中是如何实现的呢？

我们拿当今红的发紫的【捕鱼达人】这个游戏来说明。

如果我们有这样一张图片，想让这只鲨鱼动起来是很简单的一件事情，我们只需要将这张图片再每帧绘制的时候改变坐标就可以了。

代码片段如下:

…
        matrix.setTranslate(x,y);
        canvas.drawBitmap(fish.getImg(),matrix,paint);
        x--;
        …

我们在一个循环中，一直改变变换矩阵的坐标，将x向左平移，这样在每次绘制鲨鱼的时候，看起来就可以游动了。

但是。这样的效果是不是很傻？为什么呢？一眼就能看出来，因为鱼没有动作嘛！看起来像是一条死鱼在顺流飘动而已。这样的用户体验是糟糕的。那么我们怎么解决这个问题呢？很简单，因为我们可以使用多张图片来完成这个。我们再绘制的过程中，一直变换鲨鱼的图片，这样就能使鲨鱼看起来更生动了。

我们先来准备一组图片~

图片就不一一举例了，当我们有了这样一组图片后，我们就可以绘制出看起来更加生动的鲨鱼了。

代码上我们来这样做。

…
        Bitmap acts[] = new Bitmap[4];

acts[0]= BitmapFactory.decodeResource(
                                gameActivity.getResources(),
                                R.drawable.shark01);
        acts[1] = BitmapFactory.decodeResource(
                                gameActivity.getResources(),
                                R.drawable.shark02);
        acts[2] = BitmapFactory.decodeResource(
                                gameActivity.getResources(),
                                R.drawable.shark03);
        acts[3] = BitmapFactory.decodeResource(
                                gameActivity.getResources(),
                                R.drawable.shark04);
…

有了这样一组表示鲨鱼动作的图片后，我们就可以在绘制图片的时候循环这个动作图片的数组，来让鲨鱼“活起来了”。

有经验的程序员一眼就能看出问题：这样做不好吧？创建鲨鱼的动作图片的代码是写死在程序上的，这样不利于维护。什么意思呢？如果后期我们发现鲨鱼的动作不够流畅，想添加一帧鲨鱼的动作，这时候怎么办？我们修改代码？加上下面这句话？

acts[4] = BitmapFactory.decodeResource(
                                gameActivity.getResources(),
                                R.drawable.shark05);

看起来很好，但是我们在做程序的时候，总不能每次做了一点点改动都要修改程序吧？这样会带来什么问题呢？关键在于用户，用户总不希望我们每次修改了一下游戏，就要重新下载一遍完整的程序不是么？他们更希望看到的是，一次简单的更新。那我们怎么做呢？

好吧，我们来通过配置文件，定义一下鲨鱼的动作有多少，还有一点，我们不要吧鲨鱼的图片分开成不同的文件，我们可以用一张图片来描述所有的鲨鱼动作，在初始化鲨鱼的时候，通过鲨鱼动作的配置文件来分割这张图，达到上面的效果。

配置文件我们采取xml文件格式，android有这完善的解析xml的工具，简单方便。

Xml配置文件片段如下：

…
        <key>010001.png</key>
                <dict>
                        <key>frame</key>
                        <string>{{378, 438}, {374, 144}}</string>
                        <key>offset</key>
                        <string>{-2, 7}</string>
                        <key>sourceColorRect</key>
                        <string>{{61, 51}, {374, 144}}</string>
                        <key>sourceSize</key>
                        <string>{500, 260}</string>
                </dict>
        <key>010002.png</key>
                <dict>
                        <key>frame</key>
                        <string>{{384, 294}, {380, 142}}</string>
                        <key>offset</key>
                        <string>{1, 7}</string>
                        <key>sourceColorRect</key>
                        <string>{{61, 52}, {380, 142}}</string>
                        <key>sourceSize</key>
                        <string>{500, 260}</string>
                </dict>
        …

我们在配置文件中规定了鲨鱼的每一帧图片的左上角坐标以及图片的宽度和高度。

<string>{{384, 294}, {380, 142}}</string>

这样就可以从鲨鱼的图片中将它裁剪出来做成一帧图片来存放在动作图片数组中。

鲨鱼的动作图片是这样的：

类似这样，我们就可以取到每一帧的动作了。

然后我们再循环这个动作数组，就可以改变鲨鱼的动作了。

那么，每次更新的时候，我们只需要将鲨鱼的动作图片上添加新的动作，再修改一下xml文件，就可以在不修改源程序的情况下达到添加鲨鱼动作的目的啦~这样不是很好么？