※ [本文转录自 C_Chat 看板 #1XUDLb9d ]
作者: dogluckyno1 (lucky) 看板: C_Chat
标题: [闲聊] OPUS：龙脉常歌 游戏开发—游戏插图设计
时间: Wed Oct 27 12:28:18 2021
原文标题：《OPUS：龙脉常歌》游戏美术开发—游戏插图设计
原文网址：https://bit.ly/3nwbFaL
https://medium.com/@sigono/opus-%E9%BE%8D%E8%84%88%E5%B8%B8%E6%AD%8C-%E9%81%8A
%E6%88%B2%E7%BE%8E%E8%A1%93%E9%96%8B%E7%99%BC-%E9%81%8A%E6%88%B2%E6%8F%92%E5%
9C%96%E8%A8%AD%E8%A8%88-e7e3a5aa3d7b
嗨大家好，我们是 SIGONO 的美术设计团队，龙脉常歌作为一款着重剧情与叙事的游戏，
在游戏中的关键剧情等时间点会出现游戏插图来协助营造沉浸感、推动剧情。
阅读本文，你会学到插画设计师如何与团队协作，制作出栩栩如生的游戏插画！
https://i.imgur.com/AeeJHf0.png
事情是这样开始的…
| 制作人：（丢）
| ＭＥ：这个有 17MB、厚达两百页、有一堆字的文件是‥‥
| 制作人：这是剧本初稿，作画前要全部看过一遍喔。
| ＭＥ：(‧-‧)
事前准备：阅读剧本
为了做到准确传达游戏氛围，事前研读剧本是必要的。
除了台词之外，场景的大致外观、场景配置、情境与角色情绪等在剧本里都有标注。
以故事中，女配角驾驶太空船“红楼”，接走众人的这一张插图为例，它在剧本上的描述
是这样的：
https://i.imgur.com/rrn3Thq.png
绘制草图
这边描写的是太空船第一次在男主众人前登场时的景象，想营造出一种在巨大的风暴与灰
尘后看清来者的视角，所以一开始采用了仰视角构图。
https://i.imgur.com/lszok58.png
下面的黑影是女主角，还有揹著受伤的男配角的主角，超明显的吧（？
| 制作人：…
| ＭＥ：好，我会测试效果
| 制作人：我什么都还没说啊XD
接下来我们要进入一个团队成员们都很熟悉的环节
原型测试
是的！有了草图之后，我们就可以马上放进游戏引擎中，与台词、头像、游戏流程、音乐
等串接在一起测试效果。这时候，所有素材都还是很粗糙的草案，但经过整合测试之后，
可以早期发现许多在完成之前需要改进的地方，并立刻进行修正。
https://i.imgur.com/SRrFr39.gif
把各部门制作的草案素材放到游戏引擎里面兜起来进行测试
这张草稿我们测试后发现以下几个缺点：
．只能看到众角色的后脑，无法呈现逃亡的慌乱情绪与张力
．仰望的视角与前一幕游戏视角有些类似，运镜显得单调
经过讨论后决定调整构图，变成这样：
https://i.imgur.com/im1TPgx.png
第二版的草图，也就是玩家现在在游戏中可以看到的构图
我们把构图改成从菈米亚的视点俯瞰停机坪，这么做有以下好处：
．能清楚看到逃亡三人的身影与表情，彰显落难、弱势的感觉
．镜头上从游戏的仰望转换到俯瞰视角，视觉上更加丰富
正式完稿
好的，上一个草稿我们同样在引擎中进行确认，一切看似都没问题后马上开始进行完稿：
https://i.imgur.com/dWdZYCg.gif
看，很简单吧？一下就画好了呢（？
等等，好像哪里不对！
https://i.imgur.com/2ZOaYOK.png
看看场景模拟图的颜色，好像不太一样？
由于进行测试的插图还是黑白草稿，所以千万别忘了参考模拟图与测试场景的色彩，对整
体颜色进行调整。色调与光线必须要与关卡有连贯性，才能让玩家更能够带入整体的氛围
之中，简单的说就是要“连戏”。
比对概念图之后发现整体火光的亮度不足，因此在各处加了一些火焰的环境光。
https://i.imgur.com/LOilZkf.gif
（左边）原始版本光影偏灰色接不起来（右边）色调与关卡的灯光较为一致
到这边，就算完成了吧？
| 制作人：插图如果动起来，一定更代入吧。
| ＭＥ：嗯，图层如果分清楚，动起来会满漂亮的
| 制作人：妳都这么说了，应该都有整理吧？
| ＭＥ：…(‧︶‧)
| 制作人：…妳有好好整理吧？
| ＭＥ：……(‧︶‧)
于是乎，团队还有下一个阶段要进行
为插图加上动态效果
图层管理
图层管理在协作上是非常重要的一环，因为插图并不是画完就完成了，后续可能会经过各
种调整、再利用、交接，没有经过整理的话这些过程将会变得非常困难重重。
https://i.imgur.com/AsBsTUL.png
未经整理的图层档案在交接时会产生不少困扰
错位（Parallax）
错位是游戏开发很常用的一个技巧，简单的说就是利用不同层次的卷动速度差异营造出远
近的错觉，进而型塑空间的立体感。首先我们将插图分为三层：
．前景：菈米亚，卷动速度快
．中景：艾妲，卷动速度中等
．远景：李莫＆大魁，卷动速度慢
https://i.imgur.com/TaRA4Xh.gif
在这个案例中我们在根据要错位的原件分为前、中、后景，特效的部分独立拆出来，并设
定不同的位移速度
接着只要把各层设定好远近距离的参数，就能透过我们自家开发的工具自动套用事先设计
好的公式，呈现出各种不同的视差效果。
https://i.imgur.com/45Q7VCy.gif
动起来大概像这个样子，除了平移以外，相同原理也可以套用在缩放上，模拟镜头拉远拉
近的效果。
\最后再加上特效就大功告成啦/
插图在绘制的时候会先将烟尘、灯光等等特效分开绘制，最后再由 3D 美术在游戏引擎中
制作出更有动感的特殊效果，让画面更加生动。
https://i.imgur.com/uAnWNTi.gif
整段游戏流程的演示，在这边企划还加上了对话框、转场、上下黑边等效果，让整段演出
更加完善
附带一提，相信眼尖的玩家应该有发现游戏中部分插图角色的眼睛是会闪动的。这些其实
也是特效的一部分。
https://i.imgur.com/TVGXxlu.gif
瞳孔与睫毛的抖动效果
如果拿掉特效的话就会变成这样
https://i.imgur.com/sGWEglO.png
！？
还有这样
https://i.imgur.com/ibKIssm.png
啊啊啊啊啊啊啊啊啊啊啊啊！
嗯，总之谢谢大家的观赏，看了上述的介绍相信你会发现，要完成游戏中的插图不只是画
出一张美丽的图片就完成了，它同时也包括了：
．理解剧本并反复在游戏中测试，使其融入游戏情境与氛围
．确保图片符合规格，能顺利交棒给其他伙伴增添更多效果
本文由 SIGONO 的美术设计团队多人共同撰写。对于插画有兴趣的话，你还可以到
DeviantArt、ArtStation 看看好作品；关于错位（Parallax）想了解更多的话，可以参
考以下影片：
The Beauty of Parallax
https://www.youtube.com/watch?v=z9tBce8eFqE
关于 OPUS：龙脉常歌
一个结合太空探索与冒险解谜的叙事游戏。未知的小行星“龙脉”由于其矿藏蕴藏的巨大
能量，成为众人争夺的目标，能唱出龙脉之歌的少女——艾妲，将与立志探索龙脉的少年
一同冒险，揭露宇宙的远古神话。
如果有兴趣，欢迎看看我们的游戏
https://store.steampowered.com/app/1504500/OPUS/
SIGONO 讲堂
关于游戏开发还想了解更多吗？欢迎阅读其他 SIGONO 讲堂的文章：
《OPUS: 龙脉常歌》游戏美术开发 — 角色设计
https://bit.ly/3nLNo2b
《OPUS: 龙脉常歌》游戏开发精华 — 关卡设计
https://bit.ly/2YasdfT
《OPUS: 龙脉常歌》游戏美术开发 — 机械设计
https://bit.ly/3ACofcL