大家好，我最近打算做一系列的遊戲開發流程實錄，也就是把自己製作《逃離永明島》的幾個典型工作流錄屏，加以編輯整理，分別做出文字和視頻版內容。主要目的一是記錄歸檔，以後自己看看也會很有意思；二是最近一直埋頭開發趕進度，覺得偶爾也應該出來刷刷存在感……我是真不知道走小眾流的懸疑類文字劇情遊戲該怎麼宣發：好玩的點都嵌在故事裡，但情節設定很難不劇透。個人也不喜歡搞故作玄虛的吸睛噱頭。總之很傷腦筋。
今天製作的是「場景美術」。例子是連結兩個大場景之間的一條非常簡單的短路，永明島上的海邊步道。內容梗概：
- 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縮放)在底部要更大,在頂部要更小；請為以上兩個參數分別提供最小值/最大值參數
調整完後的最終測試效果（陽光束+海波光）：
視差和動畫實際效果可以看視頻版的最後幾十秒。
最後賣貨：