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

本文系用户投稿，不代表机核网观点

⚠️ 未经作者授权禁止转载

 
大家好，我最近打算做一系列的游戏开发流程实录，也就是把自己制作《逃离永明岛》的几个典型工作流录屏，加以编辑整理，分别做出文字和视频版内容。主要目的一是记录归档，以后自己看看也会很有意思；二是最近一直埋头开发赶进度，觉得偶尔也应该出来刷刷存在感……我是真不知道走小众流的悬疑类文字剧情游戏该怎么宣发：好玩的点都嵌在故事里，但情节设定很难不剧透。个人也不喜欢搞故作玄虚的吸睛噱头。总之很伤脑筋。
今天制作的是「场景美术」。例子是连结两个大场景之间的一条非常简单的短路，永明岛上的海边步道。内容梗概：
Midjourney作图选图
Photoshop修图拆图
用Spine让树枝树叶随风动起来
添加2.5D视差（天空，云，前景）
设置关卡参数（人物缩放比例，移动边界，出入口等）
海水和阳光视效（Claude修改的着色器代码）
视频版3分45秒，用延时录像记录了3到6的流程（现实时间两个半小时）。前两步加起来大概也是2-3小时，没录。视频里动画效果比较明显，文字版的解释会多一些。写文章加做视频，花了七个多小时……一些诚心诚意的本末倒置送给大家。
本期内容里这些步骤只是粗糙地把这个简单场景搭建起来，可以打磨的东西很多，这不是成品。
（如果你没看过我之前的开发日志，前情提醒：一个人第一次做游戏，不会画画，《逃离永明岛》的绝大多数美术原图、音乐、音效素材都是AI生成。）
视频版链接：
下面是文字版。
 
原图生成
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，那么就可以杀鸡用牛刀了。
动画效果在视频里会详细清楚很多，但文字版则可以解释一下背后的原理：

要让树叶看上去自然地动起来，我们先标注骨骼，大致描述这棵树的物理结构
方形的透明png图片会被转化为网格mesh图片，即仅保留物体实际占有的像素轮廓
网格内部的节点多少决定了图片变形时的「柔软程度」，相当于折纸时的折痕，越多就越灵活
如果直接手动改节点位置来生成形变动画就太麻烦了，所以我们把「软」节点绑定到「硬」骨骼上，这样我们做动画只需要移动几根物体关键的骨头，就能让所有节点一起运动。一个节点可以受多个骨骼运动影响，相当于裙子正面的下摆会同时受到两只腿的位置影响。这样可以做出软性材料物理形变效果
如果是人物动画，一般就可以开始摆弄骨骼位置来做姿势关键帧了。但我们这里是要做风吹树叶的动画。Spine有物理引擎功能，风力就是其中之一。模拟一股水平方向的风时，受到物理约束的骨骼都会被同时「吹动」。给不同位置的骨骼加上不同的惯性和阻力数值，就能模拟真实的风力。
由于上面已经做了很多层抽象，最后的动画关键帧只有风力这一项属性。从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. <shader code>

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缩放)在底部要更大,在顶部要更小；请为以上两个参数分别提供最小值/最大值参数
调整完后的最终测试效果（阳光束+海波光）：

 视差和动画实际效果可以看视频版的最后几十秒。 
最后卖货：