《守墓人》主程序：如何用像素風做出真實的遊戲世界

8月份的時候，有一款叫做《守墓人（Grave Keeper）》的遊戲在Steam迅速成功，一天之內就進入了全球暢銷榜前三。作為一款像素風模擬遊戲，雖然《守墓人》開發商Lazy Bear Games只有兩人組成，但卻做出了非常真實的遊戲效果。最近，該遊戲主程序Svyatoslav Cherkasov在博客中講述了《守墓人》像素風藝術創作背後的技術解決方案，以下是詳細內容：

我希望與同行們分享的是我們在圖片製作方面的技術，比如下圖這張GIF：

我們對於遊戲的圖形非常熱衷，這也是我們投入很多時間把像素世界做到如此具有吸引力的原因，通過我們的方法，或許對你們未來的創作有幫助。

首先，我想要說的是組成我們遊戲視覺效果的幾個重要部分：

動態環境光線實際上只是根據每天的不同時段改變光源；

LUT顏色校正主要用於不同時間段的光影改變；

動態光源包括火炬、壁爐和燈光；

正常地圖：確保物體看起來有一個真實量，尤其是當光源移動的時候；

光線的3D分布：以屏幕為中心的光源要合理地照亮高處物體，而且不能照亮低處的物體；

陰影使用sprite做的，它們會隨著光源位置轉化和作出反饋；

物體高空模擬主要是為了讓霧氣分布看起來自然；

其他的東西，還包括雨、風、動畫（包括樹葉和草地的著色動畫）等等。

接下來是細節方面的內容：

動態環境光線

這一點實際上沒有什麼特殊之處，夜裡變暗、白天明亮，光線顏色使用Gradient編輯器做的，當夜幕降臨的時候，光源不僅會變暗，還會變成藍色調，如下圖：

LUT顏色校正

LUT（即Look-up table）是顏色變化表，簡單來說它就是一個三維RGB數組，每個元素都對應各自代表的RGB數值、包含與相應元素變化的顏色值。所以，如果坐標（1，1，1）有一個紅點，那就意味著圖片里的所有白色都會被紅色代替；但如果同樣的坐標（R=1，G=1，B=1）上還有一個白點，就意味著顏色不會發生改變。所以，LUT默認與特定顏色的坐標有關。我的意思是，坐標（0.4，0.5，0.8）與顏色（R=0.4，G=0.5，B=0.6）相對應。

這裡需要指出的是，為了方便期間，3D問題里都通過二維方式呈現，下圖就是默認LUT的視覺效果：

這樣做起來簡單、用起來也簡單，工作效率非常高。

這樣設置起來也很簡單，你把一張遊戲圖給美術師，告訴他，「把它做成夜晚的效果」，然後把所有顏色層加上默認LUT，就可以得到夜晚LUT了。

我們的美術師對此非常熱衷，他為一天當中的不同時間創作了10種不同的LUT，我們最終的LUT看起來是這樣的：

所以，即便是同一個位置，在每天的不同時段也會出現不同的視覺效果：

這張圖還展示了每天不同時段的光線密度變化。

動態光源和常規地圖

我們使用的是常規光源，也就是Unity默認光源，而且每個sprite都有自己的常規地圖：

這些常規地圖畫起來很容易，一個美術師通常只需要用色刷在四面畫出亮色就可以了：

隨後我們用腳本把它們放到常規地圖：

如果你想用一個著色器或者軟體實現，可以留意Sprite Lamp。

3D光線模擬

從這裡開始，製作起來就變得稍微複雜了，你不能只點亮sprite，一個sprite在光源前方還是後方位置非常重要，我們不妨看看下面這張圖：

這兩棵樹都和光源的距離相等，但後面這棵樹被照亮了，而前面的樹確沒有亮，因為攝像頭在前面這棵樹的暗面。

實際上這個問題很容易解決，有一個著色器可以計算垂直軸上的光源與sprite之間的距離，如果距離值為正（光源在前），我們就會像往常一樣照亮它，但如果為負值（即光源在後），那麼光照就會基於距離而不斷減弱。所以，光源照在不同位置的物體上是需要按比率的，並非簡單的照亮就可以。所以，如果物體背後的光源是移動的，那麼物體就會逐漸變暗，而不是立即變暗，如下面的動圖所示：

陰影處理

陰影都是圍繞一個點的sprite製作的，我曾經嘗試讓他傾斜，但後來發現完全沒有必要。

每個物體可能最多有4個陰影，太陽光照的陰影和另外三個從動態光源照出來的陰影，所以下面的圖形可以展示上述概念：

實際上，對於「如何找到最近的3個光源並且計算距離和角度」這個問題，只需要在Update（）運行一個腳本就能解決。

沒錯，考慮到加入的數學運算量，這並不是最快的方式，如果讓我今天重新做它的編程，我會使用Unity Jobs System，但當時還沒有這樣的工具，所以我們不得不優化常規的腳本。

這裡非常重要的是，我做物體旋轉並不是修改旋轉，而是在頂點著色器內完成的，所以旋轉並不是在此時發生。你只需要對一個物體加入參數（我使用了顏色通道，畢竟所有的陰影都是黑色的），著色器負責物體旋轉，我們發現這樣做的效率很高，因為你可以不再使用Unity幾何體。

當然，這種方式有一些不利影響，陰影是需要調整的（有時候需要你畫出來），而且與物體是相對獨立的，實際上，我們做了大概10中常用的物體（根據薄厚程度等因素）。

另一個不利之處就是在單軸拉伸的物體陰影比較難做，比如下圖的籬笆：

這個效果並不理想，如果讓它變成半透明，就會出現下面的結果：

這是需要注意的，物體是被高度垂直扭曲的（陰影物體原本看起來像個圓環），所以旋轉看起來並不像是簡單的旋轉，同時看著還像是做了扭曲。

迷霧與高度模擬

我們的遊戲里是增加了迷霧的，常規的霧氣下圖當中的上半部分，而大霧效果則如下半部分：

如你們所見，樹木和房屋的頂部是可以在霧氣中被看到的。實際上這種效果很容易做。霧氣是由所有圖片中分布的平面雲層組成，因此在上半部分，物體上的雲層較少，而下半部分就增加了密度：

風的效果

在像素遊戲里，風的效果製作完全和其他遊戲不一樣，因為你的選擇非常少。你可以手動製作動畫（由於美術師數量有限，這個方法不現實），或者做一個變形著色器，但隨後你要處理一些比較醜陋的扭曲，你也可以不做任何動畫，但畫面看起來就會是動態而且沒有活力的。

我們選擇了變形著色器，效果看起來是這樣的：

如果把著色器放到網格紋理中，或許就更容易看出這個效果是怎麼做的：

還需要補充的是，我們並沒有給整棵樹做動畫，而是只做了一部分特殊的樹葉動畫：

麥田裡的麥穗搖動的動畫製作也很簡單，頂點著色器改變X軸的形狀，並且把Y軸變化考慮在內，最高點的物體搖動密度最大。我們這麼做的目的是讓麥穗頭部搖動，但根部不動。另外，搖晃的效果會根據物體移動的差異而變化。

這個著色器還可以在你穿過麥田或者草叢的時候做出搖動的效果：

以上就是我要分享的內容，這裡我沒有提到場景打造以及幾何體的創作，因為內容量比較大，但除此之外，這些內容基本上涵蓋了我們研發遊戲過程中所使用的大多數主要解決方案，希望對你們有用。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！