37个图层与1200行代码：视觉小说的“手K演出”到底在肝什么？

欢迎大家关注《Sign：碎冠篇》，也希望大家多点点关注！ 意义不明的封面喵 大家好！我是猫猫毛工坊的主催木人，有很多朋友在体验了我们新品节版本的demo之后发现开场的演出相较于早期的纯图文描写有了翻天覆地的变化。这一内容的制作一直在我们的计划之中，苦于开发安排直到新品节节前才将将完成。 （其实由于这部分我个人负责演出制作，但是我有拖延症.jpg） 开头演出的节选（加速ver.） 之前一直有朋友跟我说想看点开发相关的内容，那么借着这个机会，我就以《Sign：碎冠篇》的开幕演出为例，给大家汇报一下演出管线的开发幕后。虽然其实我自身也是个刚刚入门的初学者，有谬误的地方还请专业的大家批评指正。 一、到底啥是AVG的演出？ 在ACG及游戏行业中，有一个大家耳熟能详的词汇叫“演出”。 很多玩家在玩视觉小说（AVG/ADV/Visual Novel）时，常有一种直观感受：有些游戏哪怕原画再精美，玩起来也像是在“点鼠标看PPT”；而有些游戏，即使是纯2D画面，却能让你感受到呼吸感、空间感和电影般的张力。 史上最强 有些玩家会误以为“演出”就是“图像动态表现”或者“角色立绘移动”。但实际上，游戏领域的“演出”是一个从电影工业和动画产业引进的专业术语。 简单来说，剧本负责写下“发生了什么事，说了什么台词”。美术负责画出“角色长什么样，背景是什么场景”。演出负责决定这一切在屏幕上如何呈现，才能最打动玩家。 如果用大家最熟悉的PPT来打个比方： 普通点鼠标（无演出）： 你按一下，下一页幻灯片生硬地切出来。图变了、字变了，这就叫“点PPT”。 有演出的呈现（仅随便举例）： 在文字出现前，背景画面先变暗，伴随着一声隐约的音效，文字缓缓浮现，镜头产生了一个轻微的推焦，背景音乐的鼓点恰好在这一瞬间停下。 相信大家这样就能理解了，并非只是单纯的画面和声音，而是时间、空间、节奏、镜头和情感的综合调度，或者是我在其他文章中提到的音画文的一致性。在2D视觉小说中，没有3D模型动作和动画短片，如何表现打斗的冲击力、少女流泪的酸楚或者复仇时的颤抖，全靠演出去“无中生有”。 很多玩家也体验过我们最新版本的DEMO，开场的演出部分正是靠着37个有效图层和1200行代码来控制完成的。 二、37个图层：多个图像在画面中的均衡感如何调节？ 在早期的讨论中，我们决定使用类似幼儿绘画的方式来制作这个开场的回忆。这就要求画面不仅要极具风格化，还要像连环画一样，在切换画面和镜头平移时通过类似卡帧的效果实现压抑感。 不要停下来啊 首先负责演出的我与画师R1老师先根据剧本和想要表现的效果，讨论出最原始的分镜草稿（这里辛苦R1老师连草稿也承包了）。在这一步，我们不仅要决定画面上有什么，更要规划“镜头的轨迹”。（关于美术设计方面的内容就废话太多啦，这里先省略） 为了让画面动起来，我们不能直接贴一整张图或者多张图片，那就真成PPT了，而是需要把一幅画面拆解成几十个独立的图层。在我们这段开幕演出中，画面被精细地拆分成了超过40个图层（最终保留了37个）。 最终保留了37个图层部件 但图层变多，随之而来的巨大挑战就是：画面很容易失衡。在动态的视觉小说里，画面是随剧本动态流动的。当37个图层在屏幕上交错运动时，如果每个图层都在乱动，玩家的眼睛根本不知道该看哪里，画面就会显得杂乱、没有节奏。如何让它们不抢戏、不杂乱，且精准地服务于那一刻的剧本，就成为了“演出”的工作。 为了调节这37个图层在画面中的“均衡感”，其实至少有这些方向的工作需要去做： 1. 建立视觉层级和图像选取 在视觉小说引擎中，我们无法依靠物理相机去自动对焦。为了保证玩家的视线始终落在叙事核心身上。对于不同的分镜，我需要对37个图层进行强制的“取舍”和“定位”，并根据剧本台词的不同安排整体的节奏。 （由于游戏引擎本身不具备可视化功能，对于不同图像的定位和排列需要耗费巨大的精力） 这种取舍不是生硬的“显示/隐藏”，因为图层突兀地消失会造成视觉闪烁。负责演出的人员必须用代码，为每一个被关闭的图层根据交互节奏编写平滑的渐隐曲线，让它们在玩家察觉不到的情况下悄然隐退，始终保持画面的视觉平稳。 大人真可怕 2. 多级视差的运动速率控制 37个图层中有一部分是环境层。当“摄像机”移动时，如果所有图层移动速度一样，画面就会像一张纸在飘。以我负责的开场演出为例： 我为背景（氛围、中景、近景）设计了运动速率的规则——即越靠近镜头运动得越快。这种通过速度差建立起来的几何均衡，能一定程度上实现多级视差，令单调的图像表现出节奏的写停下。 这一手段在游戏其他演出中运用的更多，这里差点意思 三、1200行代码：那么复杂的“硬啃”带来了什么？ 在为大家介绍这部分内容之前，可能有人会问，标题中的“手K”是什么意思。其实就是在没有现成套组或一键生成工具的情况下，开发者需要像传统二维动画师一样，手动去调每一个物件的坐标、缩放、透明度、旋转角度，一帧一帧地设置关键帧（Keyframe），并为它们拉出运动曲线。这一过程被我们戏称为“手K”。 回到这部分标题，既然“手K”那么费事，为什么不直接播一段视频呢？ 确实有通过视频播放来实现华丽演出的做法，在《魔法使之夜》和《DEEP ONE》等作品中就不乏通过播片来展示精彩战斗的桥段。 神奇木人含泪手搓1200行 这就涉及到了视觉小说部分演出的一个底层逻辑：交互性。 视频是“死”的，一旦播放就无法暂停和分支。 但用代码在游戏引擎内实时渲染，意味着演出可以完美配合玩家的鼠标点击。玩家一旦点击，演出的下一个分镜、台词、音效就会跟随玩家通过点击鼠标产生的心理预期，无缝、丝滑地切入，不会有任何视频卡顿或黑屏来破坏沉浸感。 当剧情停留在某一页时，背景的风沙、角色飞舞的发丝、空气中的光晕，都会在代码的控制下呈“无限循环”状态。无论你停下来看一分钟台词，还是去倒一杯水，画面都在自然地呼吸，在这份呼吸感中给玩家更多的消化信息的时间。 通过用代码控制，我们可以让画面去适应玩家的阅读节奏，而不是让玩家去追赶画面的速度。 此外，在一些游戏中，从对话切入剧情演出时，屏幕往往会黑一下，或者出现一个转圈的加载界面，这是因为系统正在后台加载庞大的视频文件。而通过代码完成，因为这37个图层在对话时就已经存在于内存中，当演出伴随对话进行时这种同步、丝滑的反馈。对于这类高频率交互性演出，视频在大多数情况下是无法给予的。 四、花絮：一些比想象要花时间的边角演出 1、文本的交互叙事 台词文本的浮现速度不应该是恒定的。当角色感到惊恐、结巴或者陷入沉思时，文本的弹出速度、字与字之间的停顿时间，都会在代码中被重新定义。文本本身的节奏、位置，都是演出需要细心考虑的一部分。 哎哎？！ 2、快进模式 受了朋友所制作游戏的启发，为碎冠篇的快进模式也制作了动效。 谁在窥视 3、移动视差效果 实验性的演出，随着鼠标的移动画面如同“摄像机”一般可以探索画面，增强第一人称的沉浸感。 鼠ki 4、章节转场的演出 这个没啥特别的，就是好看给大家看看。 美丽 五、为什么坚持这种“笨办法”？ 在如今这个讲求效率、ai技术迭代极快的时代，用1200行代码去手K一个2D演出的片段，无异于一种“吃力不讨好的笨办法”。 很多时候，反复调试、敲代码修改了整整一天的运动曲线和图层顺序，在游戏里呈现出来的可能只有短短的十几秒钟。 但现在作为开发者，我始终相信视觉小说这一品类的醍醐味，恰恰就藏在这些大家会默默感受到的细节里。 正因为我们想讲好这个故事，所以才希望用最严苛的态度，去雕琢它的每一个分镜的视觉效果、每一句台词带来的情绪、角色每个表情和动作给大家留下的感动。 本篇文章展示的开幕演出实则是一些非常非常基础的演出技巧的运用，后续的内容碍于并未发售没有举例展示，我也希望我自己能在游戏正式版里做出更多让大家印象深刻的演出，目前《Sign：碎冠篇》正在紧锣密鼓地制作中，大家愿意看我们废话的话，后续我们还会分享更多关于开发背后的细节。 如果你觉得我们这个“笨办法”做出来的演出还挺有诚意，也欢迎大家关注我们，这对于我们这样的社畜牛马独立小团队来说，就是最实实在在的支持！ PS：此处是完整的开头演出。