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

今天制作的是「场景美术」。例子是连结两个大场景之间的一条非常简单的短路，永明岛上的海边步道。内容梗概：

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

本期内容里这些步骤只是粗糙地把这个简单场景搭建起来，可以打磨的东西很多，这不是成品。

（如果你没看过我之前的开发日志，前情提醒：一个人第一次做游戏，不会画画，《逃离永明岛》的绝大多数美术原图、音乐、音效素材都是AI生成。）

视频版链接：

下面是文字版。

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

中文意思是：

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

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

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

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

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

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

部分图层：

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

动画效果在视频里会详细清楚很多，但文字版则可以解释一下背后的原理：

逃离永明岛是一个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把上述链接里的源代码改了一下，使用的提示词如下：

中文意思：

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

调整完后的最终测试效果（阳光束+海波光）：

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

最后卖货：