《逃离永明岛》制作实录：场景美术篇

摘要：大家好，我最近打算做一系列游戏开发流程实录，也就是把自己制作《逃离永明岛》的几个典型工作流录屏，加以编辑整理，分别输出文字版和视频版内容。主要目的一是记录归档，以后自己看看也会很有意思；二是最近一直埋头开发赶进度，觉得偶尔也应该出来刷刷存在感。我是真不知道走小

大家好，我最近打算做一系列游戏开发流程实录，也就是把自己制作《逃离永明岛》的几个典型工作流录屏，加以编辑整理，分别输出文字版和视频版内容。主要目的一是记录归档，以后自己看看也会很有意思；二是最近一直埋头开发赶进度，觉得偶尔也应该出来刷刷存在感。我是真不知道走小众路线的悬疑类文字剧情游戏该怎么宣发：好玩的点都嵌在故事里，但情节设定很难不剧透。个人也不喜欢搞故作玄虚的吸睛噱头，总之很伤脑筋......

今天分享的是“场景美术”。示例是连结两个大场景之间的一条非常简单的短路，永明岛上的海边步道。内容梗概：

1. Midjourney 作图选图

2. Photoshop 修图拆图

3. 用 Spine 让树枝树叶随风动起来

4. 添加 2.5D 视差（天空，云，前景）

5. 设置关卡参数（人物缩放比例、移动边界、出入口等）

6. 海水和阳光视效（Claude 修改的着色器代码）

用延时录像记录了 3 到 6 的流程（现实时间两个半小时），最后剪辑的视频版有 3 分 45 秒。前 2 步加起来大概也有 2 到 3 小时，不过没录像。视频里动画效果比较明显，而后方文字版的解说会多一些。写文章加做视频，花了 7 个多小时……一些诚心诚意的、本末倒置的成果送给大家。

需要说一下，本期内容所涉的这些步骤只是粗糙地把简单场景搭建起来，可以打磨的东西很多，并不是成品。我是新手，流程肯定不够高质高效，请海涵。

欢迎观看，以下是分享内容的文字版。

原图生成

Midjourney 提示词如下。方括号里面是本场景独有的描述，两个风格参照是之前迭代产生的图，其它都是《逃离永明岛》里生成场景的模板。

2d side scrolling game parallax background scene, left to right horizontal panoramic view, frontal angle, uniformly staged. [Tiny island rocky beach. Close-up narrow rocky shoreline scene with stone steps ascending the cliff face. Crystal-clear turquoise waters with gentle sun reflections rippling on the surface. Sparse coastal vegetation and small trees clinging to the rocky outcrops. Minimalist modern architecture partially visible at the top of the frame.] Digital anime illustration, subtle sci-fi, sharp clean stroke outlines, expressive brushstrokes, solid bold rich colors, natural white balance, highly detAIled textures. --ar 7:3 --sref https://s.mj.run/aaa https://s.mj.run/bbb --v 6.1

中文意思是：

2D 横版游戏视差背景场景，从左到右的水平全景视图，正面角度，统一分层。[微型岛屿岩石海滩。近景的狭窄岩石海岸线场景，悬崖面上有石阶向上延伸。清澈的绿松石色海水，水面上有柔和的阳光反射波纹。稀疏的沿海植被和小型树木依附在岩石突出部分。画面上方隐约可见极简现代建筑。]数字动漫插画风格，带有微妙的科幻元素，轮廓线条清晰简洁，笔触富有表现力，色彩饱满浓郁，自然的白平衡，纹理细节丰富。--宽高比 7:3 --参考图片 --版本 6.1

几番迭代，大概生成了 240 多张图：

一些落选但整体感觉还行的：

因为这是一个连结场景，所以除了美观和风格一致外，有些方位和细节需要与两侧的场景大致吻合（地势高低）。最终选中的是下面这张：

修图拆图

比起人物图，场景图需要修改的地方相对较少：

Photoshop 选区功能方便，一般用它的创成式填充来修正原图小细节，大问题还是 Midjourney 改；

手动调整色彩平衡图层或使用 AI 协调智能滤镜，使图的色彩搭配与邻近场景保持一致；

手动把图拆出前景/背景图层，并用 AI 填充背后遮挡的部分。这是最费时间的一步，以后应该可以更好地自动化。

刚好这张图的内容和视觉结构相对简单，生成得比较合适，所以修改很轻量，前后对比不太明显（海的部分用之前一张图替了）：

部分图层：

场景动画

如果是室内静态场景，就没有这一步。岛上的风不大，但室外的树叶还是需要微妙地飘动的。虽说有些着色器可以实现同样的效果，但既然我已经为了做人物动画买了 Spine，那么就可以杀鸡用牛刀了。

动画效果在视频里会展现得直观、详细、清楚一些，但文字版可以稍解释一下背后的原理：

1. 要让树叶看上去自然地动起来，我们先标注骨骼，大致描述这棵树的物理结构；

2. 方形的透明 png 图片会被转化为网格 mesh 图片，即仅保留物体实际占有的像素轮廓；

3. 网格内部的节点多少决定了图片变形时的“柔软程度”，相当于折纸时的折痕，越多就越灵活；

4. 如果直接手动改节点位置来生成形变动画就太麻烦了，所以我们把“软”节点绑定到“硬”骨骼上，这样一来，我们做动画只需要移动几根关键的骨头，就能让所有节点一起运动。一个节点可以受多个骨骼运动影响，相当于裙子正面的下摆会同时受到两条腿的位置影响。这样可以做出软性材料物理形变效果；

5. 如果是人物动画，一般就可以开始摆弄骨骼位置来做姿势关键帧了。但我们这里是要做风吹树叶的动画。Spine 有物理引擎功能，风力就是其中之一，模拟一股水平方向的风时，受到物理约束的骨骼都会被同时“吹动”。给不同位置的骨骼加上不同的惯性和阻力数值，就能模拟真实的风力。

6. 由于上面已经做了很多层抽象，最后的动画关键帧只有风力这一项属性：从 0 到 +2 到 -2 再回到 0，一共 160 帧的左右摆动循环动画。

《逃离永明岛》是一款 2D 游戏，使用 2.5D 视差效果。视差效果的意思是，人物平移时，画面上远处的图层（天/海/云）会比近处的图层（地面/石头/灌木）离开得慢一些，造成透视的错觉。同理，比人物离镜头更近的物体（近处的树）会离开得快一些。

之前 Photoshop 的图层已经部分导入 Spine 做动画。没有动画的图层就以正常的 png 文件导入游戏引擎。Godot 会将这些图像节点插入多个视差节点（ParallaxLayer），每个节点可以调节远近关系以及自动滚轴效果（云随时间缓慢飘动）：

这里的海暂用一张旧图，所以形状有些奇怪。云的节点被复制了一次，因为云要无限循环滚动。

眼尖的朋友会发现，场景里已经加入了一些透明的蓝色形状：方形是控制人物移动碰撞的障碍，即空气墙；圆形是游戏里用来判定人物接近时显示互动按钮的监听器；场景左右各有一个出口按钮。

还有一些关卡的参数需要调整，例如人物近大远小的缩放，BGM 音效，脚步音效等等，不详述。

这个简单场景的“硬件部分”大致做好了，还缺少光影等动态效果。这是一个室外阳光强烈的场景，不大需要人造光源营造局部氛围。光照系统这部分，等下次记录人物美术制作流程时再说，因为要涉及到法线贴图。《逃离永明岛》采用了人物脚下假影子贴图，因为真正使用光照的 2.5D 物理阴影太难了……感觉上需要引入 3D 光照和遮挡才能做得自然，而我目前还没有做好进入 3D 游戏开发的准备。

另一种后期处理是粒子视效，但和本场景关系不大。下面美术馆场景里的风中落叶就是一种常见的粒子效果。

海边场景有两个明显可以添加视效的地方，一个是强阳光的光束效果，一个是海面的波光。这两项都有开源的 Godot 着色器实现：God rays 和 Cosine water。后者是非商业许可的代码，但我这里先随便当 Placeholder 用着，之后再换效果更好的。

针对不知道着色器（Shader）是什么的朋友，简单提下：这是一种直接写给 GPU 的底层视效程序代码，可以生成效率很高的几何图形动画，比如你的屏保。我个人对着色器实在没有什么兴趣去学，所以都是交给 Claude 去写，效果还不错，很多时候可以直接上手用，之后写“AI 辅助写代码的开发日志”时再讲讲。

Cosine water 的实现没有考虑《逃离永明岛》的 2.5D 透视效果，也没有提供动画速度之类的精确调整选项，所以我让 Claude 把上面提到的源代码改了一下，使用的提示词如下：

modify the below attached sea water reflection godot 4 shader so that (1) it has a parameter to control water reflection animation speed; (2) it has finer grain control of alpha value, instead of 0.1 step; (3) it has larger dynamic range control of the uv scale compared to current.

can you add some affine transformation/perspective effect, aka the bottom part of the shader has faster animation, while the top part has slower? also the reflection texture (uv scale) should be larger at bottom and smaller at top. you can give me two shader parameter min/max for the above two parameters.

中文意思：

修改下面附带的 Godot 4 海水反射着色器，使其：添加一个参数来控制水面反射的动画速度；对 alpha 值有更精细的控制，不要限制在 0.1 的步长；相比目前的版本，让 UV 缩放有更大的动态范围控制。[代码插入]另外，能否添加一些仿射变换/透视效果，具体来说：着色器底部的动画速度要更快，而顶部的动画速度要更慢；反射纹理(UV 缩放)在底部要更大，在顶部要更小；请为以上两个参数分别提供最小值/最大值参数。

调整完后的最终测试效果（阳光束+海波光）如下图，视差和动画的实际效果可以看视频版的最后几十秒。