撰写了文章更新于 2019-01-05 13:02:03

《孙悟空大战机器金刚》开发日志 #17

更新：Steam 页面上线了，可以加愿望单了：https://store.steampowered.com/app/1008830/__Sun_Wukong_VS_Robot/

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

游戏信息

试玩链接：https://retrodaddy.itch.io/svr
爱发电链接：https://afdian.net/@Bitca
Q群：828762202
奶牛关开发日志：http://t.cn/EPh4D4R （indienova同步更新）
作者微博：https://weibo.com/u/5624992490
B站：https://space.bilibili.com/10792087

其实 Tigsource 也没怎么更新，把链接去掉了，倒是放了不少内容到B站上，所以加个B站链接。

各方面的调整和完善

感觉上来说游戏是真的做完了，试玩版本也不打算更新了，各方面的修补和调整并没有最终完成，这些工作就不细讲，有些工作还进行了直播和录屏，感兴趣可以到上面的 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 像素：

太昊开发日志 2018.45 | 主角动态

Steam好评率95%:《死亡细胞》美术师教你用3D模型做2D动画

所以最好的方法就是把各个角度都画出来，人工处理是最棒的，老游戏基本都是这么处理，比如索尼克：

为了实现旋转画了很多角度：

不过，说了这么多，为了图省事，我还是对像素进行了旋转，其实在游戏里已经用到一些了，正在这里为了效率，也不管这么多了。

逐帧

很多镜头的元素都是逐帧画的，主要是一些特效。因为特效不像人物，对型准要求这么高，加上低像素来画特效的话要求其实是没这么高的。而且加上一些特效整个片子的气势都不一样了。

程序化

前面说到，用代码来生成动画太不直观，但是有些时候是需要一些程序化的效果的，比如速度线和葫芦的火，这些都可以通过粒子来实现，我也正好看看 Godot 的 2D 粒子可用性如何，事实证明还是不错的。

音效和音乐

整个片子本来打算只用音效的，后来成品感觉有点干巴巴的，所以还是套了个背景音乐，但还是音量较低，尽量不要太抢，因为音乐都是拿素材库里现成的，不一定很合适。而音效主要从我买的两个音效库里面挑：一个是 universal sound 一个是 humble bundle 的 RPG 音效包。挑音效的时候用的是 xnview，因为它的浏览器可以自动播放音效文件，而我用来剪辑的 Vegas Pro 也包含有浏览声音的功能。整个过程就基本上是逐条听可能用到的目录分类里的声音，然后放到 Vegas 的时间轴里面去试试。有趣的是我在做动画的时候，5岁半的女儿也在一旁看，最爱看和说的就是“贵宾狗迟到了”那段。找音效的时候，遇到她觉得合适的还煞有介事的说：“嗯～这个好，这个合适”。

配音效的时候，我觉得 Vegas 的时间轨道不好操作，像我要密集的编排和整体移动一组音效的时候就没这么方便，比如开头的一串脚步声，后来我发现在 blender 里面很好操作，所以连同雨伞转动打击这样的需要大量密集编排的音效都先在 blender 的 vse 里面弄好再导出。

这里每个绿条都是成组的声音，在这里可以方便地大规模移动复制。

我发现声音还可以对画面做很多补充，比如一开加入的脚步声就可以让观众立即感受到“追”和“逃”的画外空间。而且人物动画基本上只画一帧，所以声音可以补充那些没画出来的帧。

媳妇说你这音效配出来就像做毕业设计的学生猛放音效的效果。我这也是没办法，画面贫瘠总得想点办法补充，有限能力范围内做得最好就行了。而且这是动作戏，有声音和没声音，力度的感觉都不一样了。

我觉得做游戏和做动画都是一样，有时候我们不是不知道最高水准是什么，我们只是要清楚自己现在的水平和条件是怎样的。

而且我发现，对于一场紧张的战斗戏，如果你发现时间轴上某个时间段是一点音效都没有的，你就得看看是不是真的在那个地方是不需要音效的，不然就得想办法补上，不然那个地方就会是情绪的冷场。

配音现场：

镜头

一切都是为了节省，我需要尽量的选只用一个画面就能表现动作和情节的镜头，基本上就是按照漫画的方法，只不过我们可以让里面的元素动起来，连贯的动作分解到不同的镜头中，这样就能避免角色作出转体等动作。然后，这些手法完全来自日本动画，连美术风格也是按照 80/90 年代的日式机械动画的风格来的。最后合成的时候加入了扫描线和辉光以及球面屏的 CRT 效果，加强复古的感觉，同时掩盖一些不够像素化感觉的地方，统一全片整体。

Directing

虽然做了很多年动画，但主要工作角色都是技术和流程。故事，分镜和导演都没有得到太多的锻炼，这次只好硬着头皮上了，还好这是我自己的游戏，我当然很想把这件事情做好。整体我是这么考虑的：首先片子说的就是孙悟空是怎么样被抓的，情节很简单就是跟这几个 Boss 的一场大战。故事为王在这里是不算数的，那些是评论家的用词，在这里是角色为王。而我这个游戏本来就是一个很简单的打打打的动作游戏，游戏的片头也应该这么简单直接，而里面各个 Boss 本身的特性都能得到展示，悟空也是使出浑身解数，各种能力和技能在里面都得到了动画表现。我想这在8位甚至16位时代都已经的顶配的动画了。

开头就选那个体型最大的 Boss，黑暗的远景中，Boss 的轮廓慢慢的被勾勒出来（正好它的部件都是圆形，勾勒出来是比较好看的），占满了屏幕，让你感到一种压迫感，然后眼睛射出探照灯，照到了悟空，悟空立即用自己的火焰金睛“怼”了回去，就在这时一只机械小狗慢慢靠近…

成片可以在我的微博上看到，也可以等游戏发售了买一份～