原文标题：
老车站、铁皮屋、大同电锅、记忆里的梦中故乡：《OPUS：心相吾山》美术团队的视觉创
作幕后
原文网址：https://bit.ly/43S3fjt
https://medium.com/@sigono/%E8%80%81%E8%BB%8A%E7%AB%99-%E9%90%B5%E7%9A%AE%E5%
B1%8B-%E5%A4%A7%E5%90%8C%E9%9B%BB%E9%8D%8B-%E8%A8%98%E6%86%B6%E8%A3%A1%E7%9A%
84%E5%A4%A2%E4%B8%AD%E6%95%85%E9%84%89-opus-%E5%BF%83%E7%9B%B8%E5%90%BE%E5%B1%
B1-%E7%BE%8E%E8%A1%93%E5%9C%98%E9%9A%8A%E7%9A%84%E8%A6%96%E8%A6%BA%E5%89%B5%E4
%BD%9C%E5%B9%95%E5%BE%8C-28db9d3e9f58
看概念美术如何用色彩做指引，让游戏世界看起来更有说服力
https://images.plurk.com/1I1rJNwiRd0ipxxvZw2aKZ.png
嗨大家好，我们是 SIGONO 的美术团队。这篇由鹦鹉（主美／概念设计）和 Tommy（场景
美术）共同撰写。
阅读本文，你会了解：
●概念设计师如何找寻“有乡愁感”的游戏视觉风格
●如何用 ColorScript（色彩脚本）控制一整部游戏的氛围
●画面里还藏了哪些密码？颜色系统的隐喻
如果你玩过《OPUS：心相吾山》，可能会记得在游戏世界里的景色：长满杂草的铁轨、被
遗忘的车站和工厂。看起来有点像你见过的某个地方，但又比记忆里更美一些。
这种感觉不是偶然的
https://images.plurk.com/619WoekRMpjC0ds2OeKaug.png
https://images.plurk.com/6IApv2p8smEi3HkDj5xC5f.png
氛围与风格的定调：让现实的记忆变成“梦中故乡”
游戏里的场景大量参照了现实世界：铁皮屋顶、电车车厢、铁轨，这些都是一般人在现实
生活中可能看过的东西，玩家第一眼应该就会觉得熟悉
https://images.plurk.com/5G0oq3HiRK61vMJE6GDbok.png
但普通的“写实”，少了一层让人着迷的距离感。哪些部分该保留现实、哪些该修正？
这个平衡点花了不少时间反复尝试、最后美术团队得出了一个结论：
| 元件比例与编排尽可能贴近真实，再透过光影让它变得奇幻。像是拿摄影照片去改，创
| 造一种“我曾经看过这里但这里比记忆更美”的乡愁错觉。
总之先做得像真的，再用光影和色彩让他套上一层美好、如梦似幻的滤镜。
举例来说，台湾到处都有的铁皮屋顶
https://images.plurk.com/70TXKgAW4NPksXIpmlPjvE.png
在游戏中满多地方都有使用到
https://images.plurk.com/3iEH1J6t2zudgano2l94nz.png
在设计这个铁皮屋工厂的概念图时给他套上滤镜：
加上颜色艳丽的黄花风铃木、奇幻的巨大生物、纷飞的花瓣、强烈对比的阳光与刻意强调
对比光影，在常见的景物上创造出美丽又奇幻的感受。
https://images.plurk.com/5G0oq3HiRK61vMJE6GDbok.png
游戏中铁皮工厂呈现的场景：
https://images.plurk.com/57QU06PG0DiGwL5U019mWK.png
电车车厢也是从现实搬进游戏的（游戏中参照的是比较老的型号，照片仅示意用）
https://images.plurk.com/6v8RRtuYXxQxAelosMutiz.png
光影和色调一换，同一个空间的感觉就完全不同了
https://images.plurk.com/cOn0p9LAGjQykezX19oeI.png
风格定调解决了游戏世界长什么样子，但整个游戏的场景不能仅限于此。
更重要的是需配合剧情，去传达整体的情绪氛围，游戏的整体色调会在此扮演着重要的角
色。
因此接下来要解决的是：怎么让整部游戏的色调随着剧情起伏？
用色调控制情绪节奏：ColorScript是什么？
ColorScript（色彩脚本）是用来控制整部游戏色调节奏的蓝图：定义每个场景用什么色
调、明暗、冷暖。
游戏开发还只有初期故事构想、其他东西都还不明确时，美术团队就会先参照这个构想，
用参考图和照片拼凑每个场景大致的感觉，形成了最早期的 ColorScript 。
https://images.plurk.com/2uvKFOhaKkyaJHyOP9qzk9.png
这些模糊的视觉化可以让游戏团队对于游戏长什么样子、氛围如何有个初步的想像。
接下来随着故事越发完善，剧情精细拆分成多个段落，每一幕的氛围和情绪目标都会更加
明确。
企划此时根据剧情设计场景的详细规划资料，记载每个地点的氛围、重点空间、时间，甚
至光线角度等资讯。
https://images.plurk.com/2hwQr6Ipi9R3Xw5tR7bh9h.png
概念设计师依据规划资料，参考光线、需传达的氛围等等，画出每个场景的 Thumbnail（
小草图），意在简单快速的抓住整体关卡的色彩氛围感。
多数情况下我们使用互补色让画面有层次，如果有明确情绪要传达，例如要表达危机感、
闭塞感，就改用相近色来强化。
https://images.plurk.com/4VC1EI02WU8QFLxnQdFUMl.png
将这些 Thumbnail 排列组合，调整游戏过程的 ColorScript 变化。
https://images.plurk.com/1RJdemvNvJbmyNu1b2vvDr.png
我们把所有 Thumbnail 排成一面墙，就能看出整部游戏的色彩变化：
色调从冷到暖、从暗沉到明亮的转换，对应着剧情的起伏，轻松欢快的场景光线明亮鲜艳
，情绪压力大的段落色调沉重浓稠。
ColorScript 之后概念美术会制作完整概念图，在剧本与分镜中确认重点画面，完善先前
的草图，让团队更能想像游戏整体细节与场景气氛。
https://images.plurk.com/6YKPxnvhjcFOU1EcTAReWl.png
https://images.plurk.com/6r1nMpIlhZ33pfmnvWYmZJ.png
ColorScript 概念图的实际使用
这些 ColorScript 和衍伸出来的概念图通常就是整个团队的视觉指引，动画师、作曲家
从中读到节奏和张力、3D 建模会从这里出发拆解元件、场景美术从也可以此安排色调和
光源方向，达成企划设计的情感目标。
以这段夜晚场景为例：ColorScript 定义了整体色调和光源配置。
https://images.plurk.com/33VfdT2t58EeiISaJhkUwv.png
场景的重点概念图
https://images.plurk.com/1qmKhn0tXrFpRcrmaBGCt3.png
场景美术拿到概念图后，可以更简单地在游戏引擎里参照打光。
https://images.plurk.com/41W2KywUOyAx94nrp1DE1i.gif
让游戏中的构图和色调延续概念图的方向
https://images.plurk.com/1M6ckizyo70LkM4wHBIa6D.png
但是概念图延伸到最终游戏，画面一定会有差异：
| 概念设计师：概念图完成了，这角度很漂亮，搬进 3D 一定没问题吧。
| 场景美术：('Ｖ')
| 概念设计师：对吧？！
| 场景美术：('Ｖ')
常见情况是概念图描绘的特定角度很漂亮，但 3D 世界里如果完全照做，玩家从其他角度
观看时，有可能反而会变得很丑。
需要靠着场景美术调整构图跟光源，验证出所有角度看都不会崩的版本。
3D 世界有它的限制，完全还原 2D 图不一定是最佳解，设备效能也是个限制：
| 场景美术：这里要有草这里再洒一点美观又兼具实用引导性，赞赞(つ′ω`)つ
|
| 技术美术：求放过Switch (′･_･`)
有时候不得不选择没那么理想的方案，但色调规划的方向会尽量延续下来。
游戏某一段的场景概念：
https://images.plurk.com/36eESeCemfhZ8hVv6yy3Ho.png
最后游戏里的样子：
https://images.plurk.com/1hPGvhh7i0e7MjGVxmYPDQ.png
画面里藏的颜色隐喻
ColorScript 控制的是整体色调节奏。但在这个节奏之下，我们还藏了另一套系统：给特
定颜色固定的意义，用它们去暗示玩家。
心相吾山建立了红、蓝、金三组颜色，各自有不同的寓意。暗示的不只是氛围，有时候是
解答，有时候是提示。
https://images.plurk.com/1sbiOuiMHPLw1TjkcHqu9Z.png
红色代表危险、阻挡
在游戏中遇到危险时，场景画面色调都会偏红
https://images.plurk.com/6gJ9tmnF2wSlF8oWArDSST.png
https://images.plurk.com/3IO1fACffOKDQUEf1GN5m3.png
开场男主角红色的车子，其实暗示玩家跑回车子并非正解
https://images.plurk.com/7JU0AtM5gxNnPynHuYUlxz.png
蓝色代表真实
跟红色不一样，整个场景用蓝色调隐喻的情况很少，主要用来标记特定物件。
例如女主角小涟的衣服，这个蓝色代表前去和小涟互动能推进主线或是获得提示。
https://images.plurk.com/6qrXRhrdKdNr9FL6iYDKLE.png
场景中不少元件也都以蓝色标示，暗示互动、解谜、重要回忆物件等等。
https://images.plurk.com/4yBoUT6HDw6XOX27Z9MZER.png
有时候红色和蓝色会共存在同一个画面里，像是下面这个场景暗示在危险空间中寻找真实
https://images.plurk.com/6PaKuXJ04LXkZI6fDxl0dL.png
金色代表超越
主要使用在游戏后半段，不过也作为引导玩家前进的颜色。
其中一个例子就是在游戏贯穿全场、引导主角前进的金柚兰。
https://images.plurk.com/1hC5xLiVsoj6pYYAdO5nvX.png
通常跟着花瓣走的话就会是正确的路线
https://images.plurk.com/7n2wSKkcLCHCfgyZF4y92z.png
有金色光芒的山顶，意示著两人即将前往的方向。
三组颜色并没有完全套用到所有场景，而是在合适且洽当的时机运用，起到在游戏中给予
玩家小小暗喻与推力的作用。
但不是所有效果都如预期：
我们曾想让蓝色兼任所有互动指示，把关卡中可互动、可拍照的物件都涂成蓝色。
但测试后觉得效果不好：
●元件设计以现实物品为基础，太多东西强行变蓝不合理。
●单靠颜色吸引注意力的效果也不够。
●再加上打光后全场色调一变，根本看不出是蓝色！
| 实话是测试后玩家根本没有发现！无动于衷！
关卡原型中刻意涂成蓝色的提示元件
https://images.plurk.com/tbsVY4th70eQckDM3Eyf9.png
最后蓝色的指示用途缩小到只用在最重要的位置，例如火车站的狗狗坐着的长椅，或部分
有蓝色也不会太突兀的地方。
https://images.plurk.com/22NsrV0bN6aZMOgxm6O6bn.png
https://images.plurk.com/76hQHIVeyzYpphGQf1Sr01.png
https://images.plurk.com/1zhnFY7eq6WUZiTduq2ZT8.png
最后放几张完成的游戏画面
贴近现实的火车车厢，加上光影色调，给场景带入一种既熟悉又美丽的怀旧氛围。
https://images.plurk.com/1jBBpLdWowP7ZS9GC9WNHp.png
同样车厢换了时间和光线，气氛完全不同，整体猩红的色调显示了场景的危险感。
https://images.plurk.com/2EkeoffmzLRlTbaKBi4qZT.png
大多数人应该会见过的车站月台，混合上颜色极为醒目的金色树木，让游戏呈现既熟悉、
但又和记忆中不同的氛围。
对面月台上的蓝色长椅，同时还隐含了提示。
https://images.plurk.com/HKMexfRiFbNQCVkBASHXg.png
最后总结一下整篇文章提到的美术概念团队在设计《OPUS：心相吾山》时，为达成画面氛
围效果所做的事：
●风格定调：使用现实的物品制造熟悉感，再透过光影和色彩让他变得奇幻
●ColorScript：从最早期的参考图拼贴，一路到最后的概念图，使整部游戏的色调节奏
符合氛围、也辅助团队其他部门完成整个游戏成品
●颜色暗示：红色暗示危险与阻挡、蓝色标记真实与提示、金色代表超越与引导，增加游
戏画面意义上的深度
每一步都有不同的困难要克服，但一一走过之后，回过头来也发现走了这么远了。
最难的地方在不止要把世界做的好看，还要让每一个视觉决策都指向同一件事：让玩家觉
得“我好像来过这里，但这里比记忆里更美。”
本文由鹦鹉（《OPUS：心相吾山》主美，还画过几本漫画）和 Tommy（场景美术）共同撰
写。

有料 学到了