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

作者:bitca.cn
2019-01-07
31 14 4

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

各方面的调整和完善

感觉上来说游戏是真的做完了,试玩版本也不打算更新了,各方面的修补和调整并没有最终完成,这些工作就不细讲,有些工作还进行了直播和录屏,感兴趣可以到上面的 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 的轮廓慢慢的被勾勒出来(正好它的部件都是圆形,勾勒出来是比较好看的),占满了屏幕,让你感到一种压迫感,然后眼睛射出探照灯,照到了悟空,悟空立即用自己的火焰金睛“怼”了回去,就在这时一只机械小狗慢慢靠近…

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

最后

说到发售,我家正好有个亲戚是业界的,他说这个你可以自己发,不需要找发行。

那就自己来吧,现在正在折腾 Steam 中。

整个动画的制作过程我是直播着做的,到 B 站 可以看加速的录屏。这个类型的工作进行直播,整个会让你过程全神贯注,不信你可以试试看。

好,这次就到这里,动画说了这么多,游戏可说的已经不多了,下次没个 Steam 页面是不敢出来的,顺祝各位新年快乐!

游戏信息

  • 试玩链接: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 站链接。

孙悟空大战机器金刚

@indienova 去看看

本文为用户投稿,不代表 indienova 观点。

近期点赞的会员

 分享这篇文章

您可能还会对这些文章感兴趣

参与此文章的讨论

  1. erufu 2019-01-08

    你媳妇画的小猴子挺可爱的

  2. 浑身难受 2019-01-08

    新闻报道看到了,也看到有“大佬”在讨论《孙悟空大战机器金刚》,但是底下的评论……给人感觉就是“云评测”

  3. Cariole 2019-03-10

    很佩服开发者,这就去 Steam 支持一下

  4. reekin 2019-05-06

    很多有帮助的经验,学习了

您需要登录或者注册后才能发表评论

登录/注册