《孙悟空大战机器金刚》开发日志：片头动画的制作分享

来indienova官网，挖掘独立游戏的更多乐趣

引言

离上一篇日志也有一个月了，是时候汇报一下情况了。

各方面的调整和完善

感觉上来说游戏是真的做完了，试玩版本也不打算更新了，各方面的修补和调整并没有最终完成，这些工作就不细讲，有些工作还进行了直播和录屏，感兴趣可以到上面的 B 站链接看看。

操作方面，既然平台重点放到了 PC 端，那就增加技能的切换可以使用 L R shoulder 按钮。

关卡设计上，调整了一些 Boss 战完成后回程路径，能力增加了可以用经验值换取的方式后，有些用能力通过的房间也做了调整。

UI 的调整主要集中在暂停菜单这里，最后把标题的 Option 也去掉了，里面需要的设置都可以在暂停菜单中进行。

修补了一些 Bug，比如你有多段跳跃的能力后，存在有在 boss 战途中离开房间的可能性，这个就要保证回来后 boss 战还能正常进行了。

大多数的音效都进行了添加和调整，4 个 boss 战的战斗背景音乐都加上了，但是各个关卡房间的音乐还得分配一下。

重点：动画片头

前半个月是在做上面的这些事情，后半个月我都花时间在做游戏的片头动画上了。起因是前段时间有做动画的朋友说想做这个游戏的动画短片，那时分镜草稿我都画好了，本来打算把几个人物详细设定一下交给他们去做，结果就在设定这个事情上耽搁很久。

后来有人问这个游戏的开头不会就那字幕上去就完了吧，其实我本来也没有考虑太多，想是最多加几幅像素图。后来，我还是怕这游戏出来卖相太过清寡了，所以决定做一个类似 FC 上的忍者龙剑传那样的过场。想想应该花不了多少时间吧。

这是原来的灵魂分镜，和成片的对比，有些按照镜头连接改了方向，雨伞那里我是改为让那个小的 boss 从大的 boss 身上跳下来，开始忘了大机器人头上是有破洞的，后来补上了。最后一个镜头本来是几个 boss 的正面镜头，现在改为侧面的，镜头逻辑更丰富和有趣了。最终镜头增加了挺多成片有25个镜头的样子：

两个月前一边跟朋友讨论，一边画下这些草图，只有这几张纸片，但这个项目就这么拍板决定要做了。

不过当我在画动画的像素资源的时候，媳妇也看不下去了，说要参与，她简单的学了下 Aseprite，帮忙画了很多镜头的像素资源，所以你看到画得好的都是她画的,包括所有的悟空，当然，剩下的部分和动画都是我来做了。

我原来是做动画的，所以，首先讲做动画是件非常耗时的工作，远比做游戏耗时。所以在这次就要选择一些技术来简化工作，实现需要的表达了。这里有几个关键点：

时间轴

时间轴是现代动画制作不可或缺的，我可不想完全用代码来编排动画。大多数引擎都没有时间轴，这个时候游戏开发者都要自制时间轴编辑器。但是如果你用的引擎是很注重编辑器的，那么一般都会带有时间轴工具，所以如果你正在用的游戏引擎有时间轴编辑器，那么请好好爱它。这次我用的 Construct 3 是没有时间轴的，所以动画要用视频的形式来呈现了，也就是说这个动画的占用的容量会比本体大几倍。而要把像素元件动起来，只输出视频的话，可用的软件还是很多的，可以用 spine 这样的游戏专用工具，也可以用 moho 这样的专门的动画软件，还可以用 after effect 这样的后期软件，不过这次我用的是 Godot 这个游戏引擎里面的时间轴。

原因主要是下个游戏打算用这个引擎，而且初接触就已经印象很好了。虽然比起 unity 的时间轴来还有所欠缺，但实际使用下来总体感觉还是利大于弊的，而且也增加了我对这个引擎的熟悉度。动画镜头完成后，需要写个简单的程序在运行时把屏幕显示的画面输出成图片文件，然后放到剪辑软件里面去处理。剪辑完成后输出转换成更小和兼容性更好的 webm 格式导入到 Constuct 3 中（2 分钟的动画约 10m 左右）。

元件动画

这个用过 spine 的人都知道了，用在人物上就是把身体各部分分割开来，然后通过移动旋转缩放来实现葫芦娃那样的纸片/皮影的效果。其实这种对像素直接旋转的做法是会被“原教旨”的像素画派唾弃的。因为非常的难看。技术上的实现路径大致有两种：

在现代的游戏引擎里，2D 也是通过 3D 贴图来实现的，我们在旋转一张 2D 的像素图时，引擎可能会在超出原始分辨率的画布上进行旋转，其结果就是，像素点非但不对齐网格，而且有可能是斜着的(请看图)。

那另外一种方法呢，是可以完全对齐网格的，主要就是在原始分辨率进行旋转，而往往像素的原始分辨率是很低的（我这个游戏的桌面端原始分辨率是 320x180，主角只有 16x16），在这么低的分辨率下旋转像素出来的结果往往是支离破碎的，一根一个像素的线经常会断掉，这个情况在新算法和 AI 介入之前很难改变。

对这个问题感兴趣的，推荐两篇文章，两者的共同点都是在于使用 3D 实现 2D 像素：