《新神》開發筆記:像素風格和多圖層渲染

《新神》剛開始開發的時候,考慮到成本和能力限制,我決定做成 2D 像素風格遊戲。不過,像素風格不代表容易或簡陋,實際上可能比非像素還難做。現在的像素風格已經不是 FC 時代那種淳樸的像素風格了,比如 17 年 E3 上驚艷世界的《The Last Night》就用到了光照、反射、景深、體積光等現代 3D 遊戲技術。雖然此遊戲至今都沒做完,但憑借優秀的美術已賺足了關注。

《新神》開發筆記:像素風格和多圖層渲染

《The Last Night》給了我啟發,我決定在像素風格基礎上加入 PBR 光照,同時啟用 HDR 渲染。渲染時使用原始解析度,僅讓物體像素化。這樣一來,2D 物體就有了「厚度」感,簡潔的像素配上光照也顯得很精緻。

《新神》開發筆記:像素風格和多圖層渲染

但要實現這一點並不輕松。《新神》是雙搖桿射擊遊戲,這意味著物體是可以旋轉的。另外為了更好的相機控制,畫面需要支持縮放。一般遊戲實現旋轉和縮放都不是問題,但像素遊戲就麻煩了,因為像素圖案可能變得邊緣模糊、難以辨識。這與貼圖的采樣原理有關。

下左圖是直接放大三倍的原始像素圖,看起來沒問題;將它旋轉一定角度後就變成了下中圖,這時我們發現它的像素輪廓變得雜亂;您可能發現這是使用最近點采樣的結果,於是我換成了 雙線性過濾,結果就是下右圖,雖然看不到雜亂的輪廓,但物體也變得模糊了,因為原圖解析度不足。

《新神》開發筆記:像素風格和多圖層渲染

最直接的解決辦法是,將原始圖像放大幾倍再渲染,但這會占用放大倍數的平方倍的顯存,對工作流也會產生巨大影響。因此我沒有這樣做,我的做法是將像素圖矢量化。

在商店資源 Pixel Mesh Builder 的基礎上,我加入了法線、自發光和平滑度的支持,並且將所有信息存儲在一個 Mesh 上。在渲染時,開啟 MSAA 即可產生既銳利又平滑的像素邊緣,也可以不受限制地旋轉和縮放了。

《新神》開發筆記:像素風格和多圖層渲染

《新神》開發筆記:像素風格和多圖層渲染

至此像素風格的技術問題基本解決了,但畫面表現力仍然不足。對比《The Last Night》就可以發現,它的畫面富有層次。於是,我決定加上更多的 2D 圖層。

這方面很多 2D 遊戲都做得不錯,其中《Ori》系列給我留下了深刻的印象。之前看過一篇文章,《Ori》的開發者分享了他們的多圖層實現方案。他們將不同的圖層分別獨立渲染然後混合起來,而不是放在一起渲染。

《新神》開發筆記:像素風格和多圖層渲染

將不同圖層分別獨立渲染的好處是,可以分別設置每個圖層的渲染質量、渲染縮放以及整體顏色係數,還可以將圖層模糊以模擬鏡頭虛化。因為虛化的圖層並不需要渲染的很清晰,因此解析度不必太高。通過調節每一層相機的渲染縮放,可以讓每個圖層運動速度產生差異,模擬出透視效果。整體顏色係數可以用來微調各層的亮度和顏色,甚至可以讓前景半透明,以免擋住玩家視線。

《新神》開發筆記:像素風格和多圖層渲染

在《新神》里,我通過改造 Unity 的通用渲染管線實現了多圖層渲染。這里有幾個細節值得一提。

  • 支持透明通道的模糊算法。比方說求兩個顏色的平均色,正確結果應該是 (x.rgb*x.a+y.rgb*y.a)/(x.a+y.a)。
  • 解析度無關的模糊半徑。為了在不同解析度的螢幕上保持鏡頭虛化程度一致,你需要實現一種解析度無關的模糊。
  • 半透明圖層的渲染和混合。遊戲的渲染機制決定,半透明圖層的渲染,以及將圖層混合起來都需要預乘 Alpha 通道。
  • 《新神》開發筆記:像素風格和多圖層渲染

    來源:機核