《非常英雄》製作人路楊分享：遊戲畫面開發的關鍵要素

在今年中國Unity線上技術大會<遊戲專場>分享上，Magic Design Studio創始人路楊分享了《非常英雄》遊戲開發過程中在畫面表現上做了哪些努力和嘗試，踩了哪些坑。以下是分享實錄：


大家好！我是《非常英雄》的製作人路楊。很榮幸能夠受邀參加這次活動。感謝Unity中國提供這樣一個平臺，能夠在這裡和大家相互地交流學習。我覺得小團隊屬實，但是大製作實在是不敢當。

主題主要想分享一下《非常英雄》在整個開發過程當中遇見了哪些問題，背後團隊做了哪些選擇，以及這些選擇所帶來的一些影響。

《非常英雄》是一款《西遊記》為故事背景的2D橫板動作冒險遊戲。遊戲的玩法根據劇情的發展，融合了格鬥、平臺跳躍、解謎等多種元素。這其中唯美的畫風和角色動作表現是我們做得相對比較出色的地方。所以，我們先進入一段視訊，邊看邊聊。


整個故事是以大家熟悉的《西遊記》為背景，這裡有火焰山、白骨嶺，包括一些山川、河流，一些大大小小的我們知道的和不太熟悉的小怪等等。

整個場景我們選擇的畫風是相對比較唯美，但是融和了一些西方化色彩的特點，整體的顏色色調比較飽和。

玩法上面也是根據師徒四人各自的特點做了一些延展性的開發。比如說師傅的法師屬性，悟空主要還是武功擔當的角色。在這裡師徒四人也可以附體於敵人，完成一些相應的解迷類的遊戲玩法。

在故事層面，其實我們大量做的還是改編，主要想讓這款產品看起來有點搞笑、閤家歡的方向。所以說對原作做了大量的改編。

《非常英雄》目前已經登陸了主機和PC平臺，發售之後獲得了包括安妮獎最佳角色動畫大獎在內的多個國際獎項和提名。其實主要集中於最佳美術以及動畫表現這個領域。同時，遊戲也得到了很多玩家和媒體的肯定，在這裡我由衷地感謝大家的支援！謝謝大家！

我們現在進入整個開發的製作過程。這裡主要想和大家介紹一下《非常英雄》在畫面表現上做了哪些努力和嘗試，踩了哪些坑。

畫面表現本身涉及的內容比較廣泛，包括硬體、軟體的支援，美術設計、動畫特效、介面等等，前前後後有很多很多的內容。因為時間的關係，這裡我想集中介紹一下這款產品做得相對比較出色的，像畫面場面美術、動畫設計這兩點。


我將通過四個方面介紹整個開發過程中我們是如何一步步地從最初的設想和願景，到最終實現整個遊戲的。

從第一點動畫設計的角度上來講，我們其實並沒有做特別大的流程創新，基本上也是按照常規的怎麼樣確定角色的形態特徵，草圖階段，動畫設計階段，如何融合，最終到調整QA的階段。在整個過程當中，我們有一個比較大的理念就是希望能夠在表現形式上有一個更豐富的體現，基本上我們最初的設計理念是按照2D動畫片的理念進行的。我們通過一個視訊來了解一下。


大家可以看到，首先我們是以線稿手繪的形式對整個動畫的設計定一個大的方向，這些工作主要都是由我們的動畫總監一個人獨立完成的。首先確定角色的形態特點和在遊戲當中出場的需要，然後動畫總監根據這些資訊設計角色的初稿，並開始整個動畫的設計，比如它的鏡頭感，動作特性、個性等等。

其實初稿最主要的目的是確定角色的PD，在這個階段中，我們並不規定這個角色到底穿什麼樣的服裝，有哪些細節，只是把比例確定下來。

第二步，角色設計師開始繪製在這個比例狀態下它的一些服飾上的特點，面部的特點、色彩等等的。動畫師根據最初的比例開始設定骨骼，比如說骨骼的數量。這一部分也涉及一些與程式以及遊戲設計師溝通的部分，因為骨骼的數量最終會影響整個產品在記憶體以及GPU方面分配上的資源。


第三個部分就是根據角色在遊戲當中出場的需要，對所有的動作要進行合理地分組、規劃，並且要跟特效、操控融合起來，達到一個最終我們想達到的效果。

最後一點，合理編排資源。我們大家經常在講好鋼要用在刀刃上，也不斷地在強調，但是在整個過程中總是會有做一做就控制不住的這種情況出現。所以在這裡，我們在整個開發的過程中還是要不斷地提醒自己，這一部分的開發對於整個產品的表達到底起到什麼樣的作用，是不是合理地運用了所有的資源，而不是將很多工作量包括很多團隊的熱情用在了一個在遊戲當中看起來並不是特別起眼，或者是玩家根本很難發現的部分。所以，這一點我認為在整個開發過程中是要不斷地審視，不斷地提醒自己，一定要把最優質的表現放到最合理的資源分配的優先順序裡。

以上第一段動畫的視訊主要是更多地表現如何進行設計。下面我們看一下在遊戲最終的實現過程中是如何一步步來完成的。我們也是通過一段視訊來了解一下。

這是最初我們角色設計的原稿，主要是跟劇情的需要，有動畫總監和角色設計師來確定下來的初稿。接下來我們使用了一款Spine 2D骨骼動畫製作軟體來進行各個動作的編排。


接下來就要進行動作的分組，和遊戲設計師共同把這些動畫能夠按照我們既定的節奏在整個遊戲當中體現出來。鱷魚這一部分大家可以看到是對貼圖怎麼樣進行切分的。這裡面主要都是通過設計師個人的能力來進行一些動畫上的表現、設計以及調整。

這裡面我們可以看到同一套骨骼可以對貼圖做不停的更換，這樣增加整個角色的豐富性。這裡面沙和尚大家可以看到它的貼圖和最終在遊戲當中完成後的貼圖並不是一套內容，這個就是在中間過程中角色設計師以及動畫師同時進行專案的開發。我們在最後階段再進行整合，整合之後再反覆地不斷打磨。

這裡面有一個比較好的優勢，算是在2D平面裡面在貼圖方面的更替，包括打磨階段是比較方便，而且比較隨性的，因為有的時候不需要太多的技術支援，而且設計師會按照自己的感覺進行一些範圍內的調整。


接下來我們要講一些場景方面做了哪些方面的努力。首先第一點就是在畫面表現方面我們要有一個大的願景或者是一個方向。目前在2D表現方面有兩個比較主流的陣營，一個是以馬里奧為代表的堆盒子的方式。堆盒子的方式優點是比較明顯的，在這個品類裡面有很多優秀的作品，包括我們熟悉的《馬里奧》，包括《空中騎士》等等。優點最主要的是體現在方便開發人員進行遊戲設計上。因為它非常好量化。不管是我們跳動的距離、移動的距離、高度等等的都可以通過每一個方格來進行量化。對於玩家來說，他也比較好判斷這種反饋。比如說我這個角色可以跳兩個方格或者三個方格遠，這樣的話玩家可以很容易地判定這個地方能跳過去，這個地方我跳不過去。我們說相對有所欠缺的可能就是畫面它不如曲線編輯來得那麼生動。尤其是在表現自然場景方面有可能沒那麼生動。

右邊這個是以《雷曼》為代表的曲線編輯的方式。這種方式大家可以看到表現起來的整個畫面會比較豐富，而且特別適合表現自然類的場景，比如說不平整的自然的地面、森林、山川等等的題材。優點是畫面表現力上。缺點就是它會增加遊戲設計以及開發的難度。因為所有的地形都是曲線編輯的，所以說有很多的比如說跳躍的距離、高度等等的是很難得到一個特別準確而具體的反饋的，同時對玩家也經常會出現這種問題。所以，這一塊在遊戲開發最開始的時候需要開發團隊在這方面做一個取捨。

《非常英雄》選擇了第二種曲線編輯的方式。因為這個比較符合我們對這款產品的願景，而且我們希望在畫面表現力上能更上一層，能夠有更好的表現。而且，根據整個產品前期的設計以及故事的需要，自然風光比較多，所以這種方式我們在第一時間基本上是沒經過什麼討論就確定下來的。

接下來，我們要做的事情就是開發一個怎樣的工具。這個工具我們最開始的想法是希望它像Photoshop一樣特別方便使用，把很多後臺需要的技術、點選的各個細節儘量簡化，也儘量用圖層的概念，符合設計師在創作原畫過程中或者是創作過程中的使用習慣。基本上是一種在畫畫的感覺。


在實際開發的時候，我們要規定好在這裡面有哪些素材是我們要使用的，並且把這些素材進行分類，並且把所有可加入的這些效果都做一個規範化，做成各個不同的元件，這樣的話第一個是方便我們使用，這樣有一個比較完整的素材庫之後方便使用。第二個是方便控制整個產品的質量。

接下來我們看一下具體是怎麼樣通過這個工作流程一點點地實現最初的場景建立以及到最後的畫面最終的視覺表現。

第一點，大家都比較熟悉，我們用的是Unity的引擎。這個基本上是我們在專案伊始的時候沒怎麼討論就決定的事情。其中有兩方面的原因：一個是我們想實現的效果Unity完全可以實現。第二個就是我們團隊所在的位置，包括周邊人才市場對這個工具的熟悉程度。這樣的話，我們招收人才也比較方便一些。

第二個，我們這裡提到了一個地形編輯器。我這裡特別用了一個30%的螢幕面積。這個其實是一個概數，基本上地形大時候在畫面裡面佔30%的畫面面積，所以說地形編輯器對我們來講就是一個重中之重，不光是要兼顧畫面的面積，同時它也涉及到表現的效果，同時，它還兼顧了這個效率，三個方面的內容。所以說編輯器在整個開發過程中是一個重點開發的工具。


第三個方面，色彩編輯更符合設計師的使用習慣，方便使用，這個我在之前也提到了，就是儘量能夠簡化工具的複雜程度，儘量簡化工作流程。所以，在我們整個開發過程中基本上整個美術場景是由一位設計師來獨立完成的，也就是說他從前期建立整個場景，然後到校色，到新增細節，到最後優化，一整套流程就是一個設計師來完成。

我們在整個開發過程中一共有4位設計師，每位設計師會兼顧1個大的場景。比如說火焰山有一位設計師來完成。白骨嶺有一位設計師來來獨立完成。等最終完成之後我們再有一個整體的統籌。而且有的時候設計師之間會互相地更換一些工作場景，看一下對方都在哪些方面做得更好，哪些方面他有更多新的想法，可以新增進去。這樣的話，每個設計師既保持了獨立，也保持了相互之間可以借鑑學習的這麼一個氛圍。從整體的結構上來看，還是比較不錯的。

接下來，我們通過一個相對比較完整的視訊為大家簡單介紹一下整個開發的工作流程，視訊稍微有點長，我會邊解說邊讓大家觀看。


首先大家可以看到這是一個最小的地形單位，是一個小的模組，這個就是之前我們提到的要規範工作的素材庫也好或者是元件也好。當我們確定下來之後，我們就開始了一個地形的編輯。這裡面主要的比較大的概念是兩個，第一個是我們先確定一下這個場景是個什麼樣的題材，比如說是森林，比如說溶洞內部，比如說火焰山，比如說是水下等這些場景。當我們先確定好之後，第二個就是要確認它的光源的效果，就是我們所說的大環境。在這個場景當中，我們一般會想這個光源是來自於上方還是來自於遠景的部分。遠景要亮過前景，還是前景要亮過遠景？這個在整個設定過程中是兩個最先要確定下來的一個內容。


所以說這方面我們開發了一整套工具，大家可以看一下視訊。這個是地形編輯器。大家可以看到整個地形編輯是通過節點來完成的。這裡面給大家簡單介紹一下我們做了哪些節點上的控制。第一個是曲線節點，每一個節點是可以控制它的平滑程度的。第二個是可以進行縮放。第三個是可以控制節點周圍的頂點色。通過這三個方面的調節，就可以帶來一個相對來說比較豐富的地形。比如說這個地形會有一些起伏的變化，會有一些光和暗影之間的變化，而且會有一些色相上的變化。比如說在這個範圍受到一些環境的影響，有一點藍光，但是其他的地方還是暖色調的。


大家可以看到當我們編輯完第一個地形之後就可以新增一些小的細節。同時，我們可以用複製的方式產生前景的地形。前景地形我們可以先換一下貼圖，換成另一個材質的表現形式，這樣的話跟中景有一個區分。

大家可以看一下這部分是植入了植被。植被的植入，首先我們先建立好一個植物的素材庫。植物有的屬性我們全部放到素材庫裡面。比如說什麼樣的植被，顏色，以及它受風擺動的頻率跟節奏。這樣的話，再通過我們的地形編輯器把它加到整個地形當中。這一部分是自動來完成的。我們是通過它的密度、大小、頻率自動種到這個地形編輯器上。同樣的系統，不光是植被，包括火焰山，我們基本上看不到植被，但是會有很多可以破壞的岩石的效果，也是通過同樣的工具去完成的。首先我們先做好很多可以破壞的石柱，再把它按照相應的比例以及密度種到地面上去。


在這裡大家可以看到雖然畫面還比較簡陋，但是這個場景裡面只有一個背景，加上地形，基本上已經填滿了整個畫布。接下來的工作就是要為這些畫布上新增更多的細節，遠景、中景、近景，來增加整個畫面的感染力。可以看到移動的光影我們是通過一個材質球來實現的，其實這是一個三張疊加的貼圖在不停地滾動來實現的。這一部分稍後會給大家做一些具體的講解。


大家可以看到在填好整個畫布之後我們做了一個整個場景色調的調整，速度很快。這個並不一定是代表最終的效果，但是，首先會有點像作畫一點，先給畫面一個大的基調。然後我們開始新增一些畫面上的細節。

這裡面大家可以看到我們是通過一個簡單的方式來新增霧效的，用來區分遠景和中景之間的過渡。霧效這部分我們一共做了3套系統來實現。第一套系統就是遠景。整個遠景我們是按照距離劃分設定了整個霧效過渡的色彩條，用來調節不同距離霧的濃度、密度以及色彩，這是對於整個場景大環境的調整。


第二個就是通過我之前提到的整體的色彩是背景要亮，還是前景要亮。明暗程度也是通過攝像機的距離來進行調整的。除了這兩個大的環境調整，一個是控制霧的色彩、密度，第二個是控制整個場景燈光的強度，第三個就是用一個比較簡單的方式，比如說以面或者點的方式來增加場景上的一些過渡。

大家可以看到這一部分的視訊主要是為場景當中新增相應的一些素材。大家可以看到在中景的時候這個植物是比較亮的，當我們移到近景的時候自然而然就暗下來了，這一部分就是之前提到的燈光的設定，就是這個大環境的設定。這一部分是自動的。因為在我們之前做的一些專案中這一部分是需要設計師逐個進行調整的。如果是內容量比較少相對還好，我們可以調整一張貼圖、兩張貼圖或者是對物件進行色彩上的調整，但是，如果我們要不斷地堆加圖層的數量，場景的豐富程度，這個工作量是相當驚人的，雖然每一個點選滑鼠都很簡單，但是，有可能我們因為這一件事情要反反覆覆重複同一個工作上萬次，所以在這一點上設定一個大的場景環境的工具就非常非常重要。因為這樣的話設計師只要調整圖層的距離就可以了。

因為《非常英雄》這個專案是從2015年開始啟動，2016、2017年開始前期的開發、準備，包括這些工具。有一些內容其實在Unity的後續版本中已經有了很多類似這樣的工具，稍後我會給大家介紹一下。


這裡大家可以看一下左邊的小的檢視。裡面有一些比較有意思的事情，大家可以看到前景是比較暗的，第二，它會有一個自動的虛化。這一部分其實是跟燈光系統相結合的。我們在前景和遠景方面設定了這種虛化的效果，也是由設計師自己來判定比如說哪個景深我需要虛化到什麼程度，他會做一個相應的調節，基本上這樣的方式有助於平衡特別豐富的畫面，因為有時候內容太多我們很難看到角色的一些打鬥，或者遊戲玩法相關的一些內容。通過這種虛化的效果，能夠更好地突出主題。

這一部分引數的設計是跟燈光比較類似的。基本上也是設定在場景當中。

新增完了細節之後，我們接下來就是對整個場景的效果做一個整體的調整。這個方面我們主要是開發了一整套的色彩調整工具。在這裡大家可以看到。不過，這個是我們在2016年的時候開發的一整套工具，在新版的Unity裡面，比如Unity 2019已經有Post Process這個功能了，所以說和我們當時開發的Art Setting（Unity中的一個C#指令碼）的這一部分內容是很接近的。如果大家用新版的Unity，就可以很方便地進行調節了。


大家可以看到通過濾鏡的方式，首先是可以調整整個畫面色調關係的變化。因為整個地形是地形編輯器，所以說我們在開發的同時可以對地表、立面、棚頂逐個進行調整，不管是色彩、明暗變化還是色相變化。更小的細節可以通過節點來進行控制。同時，我們也可以控制霧的效果。

以上就是整個場景的開發過程，從最開始一直到最後進行調整的過程。

這裡除了整個工作流程之外，還有一個方面比較重要，就是在後期的QA方面。因為當時在開發工具的時候我們更多地是考慮怎麼樣簡化工作流，怎麼樣簡化這些不必要的環節，簡化工具，但是，因為沒有真正地進入到專案後期的開發包括Debug階段，所以說整個工具在最開始並沒有考慮到這一部分內容。但是，好在是在之前的工作流的管理上我們強調需要把所有的東西要優化，要元件化，並且要把每一個圖層分得比較清晰，雖然沒有強調最後的QA、優化，包括到後期我們做手機版移植這部分的內容，在最開始的時候沒有考慮，但是還好前期我們做了這部分工作，現在來看是非常有必要的。因為整個場景我們一共分了6層，其中的4層是必要層，遠景，然後是遠景和我們說的中景就是遊戲玩法的那一層，中間的一個過渡層，然後遊戲玩法的層，最後是近景，一共分了這4層。其中還有2層是屬於修飾層。一層是特效。有的時候這個特效是分佈在這四個層之中的。有的時候是單獨的，一些部分比較耗費資源的特效。還有一層是在特定的過程動畫一些比較特殊的場景轉換中會出現的一個圖層。之所以做這些，是因為它對整個產品後期的移植和優化是至關重要的。


這一部分內容其實主要想介紹的是解決開發工具耗費資源的平衡，以及如何尋求一個比較適合的點，什麼樣的工具是適合的，開發到什麼程度我們可以暫時先停下來，然後考慮一下這個工具是不是已經夠用了。因為大家一定要了解到一點，沒有完美的工具，也沒有什麼都能幹的工具，只有比較適合的工具。所以這一點上不管是各個開發組，大團隊也好，還是小團隊，尤其對於小團隊要儘量做到適可而止，覺得差不多，我們能實現這個效果了，要把更多的精力專注到遊戲的設計、情感的體驗這方面，而不是過度地強調這個工具要如何多完善，包羅永珍，因為這個其實都是根據需求來進行調整的。

接下來我們講一下剛才提到的分層優化。分層優化其實剛才我介紹了一共分了4個必要層，2個調整層。第二個就是我們整個的後期QA調整是怎麼樣完成的。這一段我們也進入一個視訊瞭解一下。

大家可以看到在剛才的頁面中有一張貼圖，那張貼圖就是在這個視訊裡面的原始貼圖。大家可以看到這裡面有更多燈光的效果，後期渲染的效果，並且有光的變化。這裡面我簡單介紹一下這種效果的實現和最開始的選擇。在這方面燈光其實對整個畫面的表現是至關重要的。但是，我們通過之前一些專案的積累發現有兩個問題。第一個是如果要通過2D的方式來表現特別豐富的燈光效果，難度第一個是比較大的，因為這是一個平面，所以說我們想要的一些具體的效果是希望它是可控的，而且，需要整個暗影是比較柔和的，而且有的時候色彩是過於強烈的，現實當中的物理燈光有時候很難達到這種效果。通常我們是通過幾張貼圖來完成的。感興趣的朋友也可以看一下奧日的分享視訊，他們在燈光系統上的開發以及選擇基本上是非常非常前沿的，而且做得也非常非常棒。但是，他們的實現過程是通過不同的貼圖的圖層來實現的，也就是說要規定光的範圍，光的顏色，這樣的話對美術設計師會成幾何倍數增加他的工作量。

早年我們在做《雷曼》那個專案的時候大部分是通過兩張貼圖完成的，一張是原始貼圖，另一張是光效貼圖進行完成的，其實是增加一個遮罩。這次在製作《非常英雄》的時候我們是希望能夠降低美術設計師的工作量，又想讓畫面看起來動感、豐富，而且這個光源是有變化，而且是可控的，所以在這兩點之間我們就特別掙扎地反反覆覆地不停地找這種解決方案。最終的解決方案就像這個視訊裡面大家所看到的這種效果，總體看起來還不錯，基本上是我們想要的目標實現了，是通過一張貼圖完成的。通過一張貼圖，控制頂點色，以及動態的頂點色的變化來實現的。優點是表現力還可以。然後大量地節省了記憶體顯示卡的佔有率，同時也節約了開發時間和預算。最關鍵的是我們的設計師都比較高興，因為之前他們對重複地畫一張貼圖，而且都要堆的很急這件事情非常非常頭疼。


第三部分主要就是講一下優化的部分。QA這部分對小團隊來講確實是很有挑戰性的，而且特別巨大的工作。我們在最開始的時候還沒有發現這件事情這麼艱鉅，因為以前大家在大公司做的時候是有專門的團隊很多人在測試這個產品。但是，等到我們工作室規模很小的時候這個測試就是個很頭疼的事情。尤其是遊戲時間在不斷地增加，但是，我們的團隊規模又不能增加，所以從始至終我們只有4個測試員，一開始他們說也沒什麼可測的，等著到了後期之後跑一遍遊戲需要6、7個小時，他說一個測試什麼也不幹，一天只能跑一遍。所以說他們到後期就沒日沒夜，有的時候一個人要同時測試兩個畫面，所以就特別地辛苦。

在這種背景下，我們去開發一些能夠自動跑圖的工具，比如自動跑圖，就是角色，晚上下班之後，我們可以把這個遊戲設定在這兒，讓這個角色在裡面自動跑，後來測哪些問題。比如自動UI不停地截各種各樣的UI。第二天我們把各種測試報告收集起來，分發下去，看看怎麼樣進行Debug的操作。這一部分對於小團隊來說我覺得還是很有必要的，即使花一點時間在開發的前期和中期的時候把這個東西準備好，我覺得是會大大降低遊戲Debug的痛苦程度。

非常感謝大家的觀看，最後我們也是通過一個短片來結束這次分享。《非常英雄》的移動版已經完成開發了，其中我們做了大量的優化和改善，效果基本上可以保證和主機平臺一致，希望近期能夠等來久違的版號，把這款產品帶給大家。