Hex Mask UI Icons Arrow Down Arrow Left Arrow Right Arrow Up Brackets Calendar Checkmark Chevron Down Chevron Left Chevron Right Chevron Up Clock Close Connect Copy crown download Ellipsis External URL Favorite (off) Favorite (on) Fullscreen Help Home Info Live Minus Mobile Menu Mobile Overflow Paginate Dot (filled) Paginate Dot (empty) Pin Placeholder Icon Play Video Circle Play Video Plus Search Team No-Team-Logo_Fallback_003 Ticket Trophy User Input Video Video Play Icon World X Game Mode Icons Hero Icons Map Icons Platform Icons Exclusive on Battle.net Social Icons Mobile Discord Facebook Instagram Reddit Twitch Twitter VK Youtube Weibo WeChat Workshop Icons WorkshopControl WorkshopShare WorkshopInfinite

《鬥陣特攻 2》的「環境狀態」:程式開發團隊帶你了解幕後祕辛

《鬥陣特攻 2》的「環境狀態」:程式開發團隊帶你了解幕後祕辛

大家好!我是 Marco Alamia,在《鬥陣特攻》遊戲團隊中擔任軟體工程師。《鬥陣特攻 2》的新技術最近剛剛完工,我們認為可以利用這個機會跟廣大的玩家分享,帶領各位搶先了解我們如何改良遊戲引擎。在開發這項新技術的過程中,我還延攬了另外兩位來自《鬥陣特攻》遊戲團隊的開發者幫忙,他們分別是Bruce Wilkie 和 Fabien Christin。

我們這次替遊戲引擎新增的這項技術稱作「環境狀態」,這項新技術雖然才問世沒多久,但已經成為我們在製作和設計地圖時最愛用的工作流程。雖然說這項功能是利用《鬥陣特攻 2》遊戲內的引擎和工具加以開發並改良的,但是該功能最主要的設計理念其實源自於我們的燈光美術設計師 Fabien。Fabien 的這個創意對於遊戲團隊設計地圖的方式影響深遠,我這次特別邀請他來跟我們分享他當初想到這個點子的契機以及這個功能的設計流程。

就讓我們一起來深入了解「環境狀態」這項功能吧!


點子與契機

Fabien:《鬥陣特攻》的遊戲世界色澤明亮且鮮豔,這款遊戲的特色主要透過地圖來呈現。在設計地圖時,首先由關卡設計師使用大型灰色方框擬定地圖的整體構造與格局,以創造出有趣且平衡的遊戲性。這個階段最重要的任務就是設計出一張饒富樂趣的地圖!在經過好幾個小時的測試之後,會轉交由環境美術設計師將暫時性的灰色方框改造成手工精心打造的建築和環境物件,讓遊戲地圖變得活靈活現、栩栩如生。

除了環境物件之外,我們也要兼顧遊戲燈光與色調,以符合地圖的主題和風格。我們在打造《鬥陣特攻 2》的地圖時,希望能夠呈現出引人入勝的景象,藉此透過遊戲地圖傳達有別以往的感覺。想像一下,你正在前往努巴尼,然後看見色調溫暖的夕陽點亮這座位於非洲的未來都市;或是降落在下著雨的巴黎,沿街的商店紛紛散發出溫暖的亮金色燈光,邀請你入內品嚐美味的可頌麵包,等到雨停之後再繼續上路。

這正是環境狀態的設計初衷。在這個新系統的輔助之下,我們順利拆分了燈光、音效和特效的所有大型組件,將其改造成獨立素材,能夠跟建築物互相結合,以形成我們所謂的環境場景。不同的地圖可以共用同一批素材,或是我們也可以在同一張地圖內使用好幾個不同的場景。

我們以節奏快速的死鬥地圖「墓室」來舉例說明。你應該有在這張地圖看過夜晚的景色,晚上的冰藍色調與建築物周圍的亮橘色火炬形成鮮明對比。

但假設我們想要創造出另一個不同的場景,把這張地圖的色調改變成阿努比斯神廟的那種炎熱沙漠呢?在環境狀態這個新系統的輔助之下,只要把阿努比斯神廟的環境狀態複製到墓室,就大功告成了。

看起來棒呆了!不僅如此,我們還可以進一步調整太陽的所在方位,藉由陰影營造出更特殊的氛圍。為了達成這個目標,我們製作出只會改變太陽所在方位的全新環境狀態,然後搭配剛剛的阿努比斯神廟地圖色調。

搞定!

多虧環境狀態的使用彈性和便利性,我們只需要短短幾個小時,就可以替遊戲地圖打造出全新燈光的雛型。能夠快速替換的這種功能,讓我們得以進行更多的實驗與測試、發揮更狂野的創意,並打造出更豐富多變的遊戲地圖。

而且好戲還在後頭。我們剛才所舉的例子都是跟地圖的外觀有關,但其實環境狀態這項新技術也能夠動態結合並開發出全新且有趣的遊戲性內容。想像一下,你被派去墓室修復捍衛者衛星的連線,然後你在阻擋零度象限的攻勢時,你所在位置的周圍突然颳起沙塵暴!除了艷陽高照的場景之外,我們還可以新增沙塵暴環境狀態,進一步提升任務難度,比方說沙塵暴就會慢慢增加雲霧的覆蓋範圍以及塵土效果的密度。

 

在這項新技術的輔助之下,我們可以打造各式各樣的天氣效果,例如:雷電風暴、降雪和其他有趣的環境場景,如此一來,每場遊戲的體驗都有新意。

接下來,我們把麥克風交給 Marco,他將為我們介紹環境狀態這個功能背後的技術性內容。

實裝環境狀態

Marco: Fabien 的這個想法很有野心,所以我們必須設計出足夠強大的系統,才有辦法實現這個理念並打造出《鬥陣特攻 2》的遊戲環境。在經過一番腦力激盪之後,我們決定整理並結合幾個環境狀態,並讓這些環境狀態常駐在遊戲內,形成一個環境狀態合集。這個合集可能會動態改變,也就是說遊戲在任何時間點都能夠新增或移除環境狀態。當遊戲引擎在計算合集並結合所有的環境狀態時,就能夠呈現出充滿魔幻與驚奇的最終外觀。如果你曾經使用過 Photoshop,那麼你可以把這個功能想像成是把好幾個圖層結合在一起製作成最後的圖片。

我們的設計理念是,每個環境狀態都能夠呈現出遊戲環境的某個面向,比方說風速、風向或太陽的顏色。當我們在合集內加入一個新的環境狀態時,該環境狀態只會針對它所負責呈現的面向改變遊戲環境。舉例來說:這是路西歐在里約的俱樂部的合集,其中有一個環境狀態負責改變鏡頭的曝光程度和顏色分級這兩個面向。

 

最下面的那個環境狀態替這張地圖提供了全部的面向,上方的那個環境狀態則會覆蓋掉顏色分級,營造出《暗黑破壞神》區域那種可怕詭異的氛圍。在遊戲進行的過程中,合集可以動態新增或移除環境狀態,讓地圖出現更多變化,並且變得更加活靈活現、更加充滿生命力。

面向

在美術設計團隊和 Fabien 的帶領下,我們找出了幾個環境狀態必須要能夠定義的重要面向。舉例來說:後處理就是第一個被改造成面向的遊戲引擎功能。後處理是所有現代遊戲引擎都普遍存在的功能,這個功能可以套用各種濾光和特效,比方說控制最終圖片的對比度、亮度和飽和度。依照遊戲進行的狀況動態調整圖片的對比度和亮度,能夠使最終呈現出來的圖片看起來更逼真寫實且充滿變化,多虧有環境狀態技術的存在,《鬥陣特攻 2》才能夠辦到這一點。

迷霧面向是我們新系統的另一個強大工具。藉由改變參數的方式,我們可以控制迷霧的外觀和體感,美術設計團隊也可藉此打造出有別以往的遊戲環境,讓遊戲環境能夠依照遊戲模式、玩家的所在位置甚至是時間而在視覺上有所變化。舉例來說:我們可以讓萬聖節主題的地圖看起來更嚇人;或是讓地圖的某些區域的迷霧變得更濃厚;又或者是在其中一個新的英雄任務中,讓沙塵暴會隨著時間經過而越演越烈。

此外,還有好幾個面向會對其他的視覺特性產生影響,比方說會在地圖上投射出陰影的雲朵,甚至是風速與風向等等視覺上不可見的特性。其中兩個我們所能夠改變的重要面向是太陽與天空。誠如其名,這兩個面向能夠改變環境中的幾個重要特色,比方說太陽的所在位置和顏色、雲朵的樣式、白晝黑夜等。不難想像,這是環境狀態系統中威力非常強大的內容,因為我們能夠透過這些面向以動態的方式改變地圖的外觀與體感。

這兩個面向(太陽與天空)涉及遊戲引擎中最進階的領域,也就是燈光系統。燈光在《鬥陣特攻 2》中扮演著非常重要的角色,因為燈光能夠營造出遊戲環境的外觀、體感和氣氛。 不過,對於燈光系統的任何改變都會影響到記憶體和遊戲運行效能,因此我們在設計燈光的時候必須如履薄冰般地小心謹慎。幸運的是,我們的遊戲團隊中有個很厲害的程式設計師 Bruce Wilkie,他在燈光系統這個領域擁有相當豐富的經驗,能夠協助我們設計出外觀華麗且不會影響到遊戲運行效能的內容,恰恰符合《鬥陣特攻 2》這種競技型射擊遊戲的需求。

燈光

Bruce:《鬥陣特攻》活靈活現、明亮鮮豔的視覺效果是遊戲團隊投入心血精心製作的成果。我每次在景色宜人、風光明媚的地圖中進行對戰時,都會不禁想到我們對於遊戲環境燈光的用心講究與深入琢磨。太陽光會反射到房間裡面、泛光燈會照亮廢墟內部,夜晚的熱鬧景點也有不少色澤點綴,而且這還只是其中幾個例子而已,燈光對於這款遊戲的外觀和體感來說,都扮演著舉足輕重的關鍵角色。在打造《鬥陣特攻》的遊戲引擎時,我們會跟美術設計團隊密切合作,以打造出相關的燈光功能,讓 2D 的概念美術作品能夠進入 3D 世界,比方說光線遇到表面要能夠反射(一般稱作全域照明)、金屬要能夠映出周遭環境的倒影,而且動態物件的光線要能夠跟靜態環境無縫接軌。 這些功能需要很複雜的運算,通常會消耗掉不少 CPU 的效能,導致遊戲引擎達不到我們預期中的幀數。為了讓《鬥陣特攻》能夠以高幀數運行,並同時擁有這些進階的燈光功能,我們會事先計算出盡可能多的燈光資訊、將結果整理成封包,並將相關數據用於遊戲客戶端程式。

我們會進一步研究用於《鬥陣特攻》的數據,藉此實現一部分的燈光功能。針對牆壁、地板和天花板等等不會移動的物件,我們會製作出幾組數據。第一組數據會告訴遊戲引擎有多少光線照射在表面上以及光線來源的所在方位。一般來說,這組數據會被稱作「光照貼圖」,且不同的遊戲引擎會將不同的數據「風格」儲存在光照貼圖裡面。 

 

在這張圖片範例中,你可以看出遊戲地圖內的表面如何生成光照貼圖。 左側是所有燈光的最終組合物。 中間是只有製圖被渲染在表面上方。 我們的美術設計師會透過這個畫面來判斷表面是否有儲存足夠的燈光數據,以達成他們預期中的視覺成果。 右側則是遊戲引擎把光照貼圖打包在一起以最小化所需記憶體的範例。

在《鬥陣特攻》當初上市的時候,我們採用的方式是替所有碰觸到表面的光線生成顏色與方位。 接著,遊戲會使用方位的數據來判斷照射到凹凸不平的表面的光線顏色要出現什麼樣的變化,表面與光線方位越是垂直,顏色就會越鮮豔。但是在《鬥陣特攻 2》中,遊戲改為生成三個燈光方位,這樣子就能針對三原色(紅綠藍)獨立做變化。因為擁有更多方位的關係,環境燈光的色彩變得更加鮮明,進而提高了圖形品質。

至於靜態物件的部分,遊戲會生成相關的數據來判斷該物件周遭環境的可見度高低。一般來說,這樣的數據被稱作環境光遮蔽。我們在《鬥陣特攻》問世之後,有針對巴黎和哈瓦那等地圖開始生成這類的數據。在《鬥陣特攻 2》中,所有的地圖現在都會生成此類數據,藉此提高視覺效果的品質。

 

 

至於遊戲角色等會移動的物件,我們則會在遊戲世界中生成許多取樣位置,並針對每個取樣位置的燈光數據(與靜態物件所使用的數據類型相同)進行編碼。 當移動物件靠近其中一個取樣位置時,該物件就會取用其中的數據來替自己打光。在《鬥陣特攻 2》中,我們會生成數量更多的取樣位置(尤其是在空中的部分),也就是說移動物件的外觀看起來會比以往還要精緻許多。 

 

如果你有收到 BlizzConline 座談會,你應該還記得搶先揭露的地圖中有著許多不同的燈光環境。我們希望每個環境都能夠共用盡可能多的數據,這樣子下載與安裝所需的硬碟大小才不至於變得過大。環境狀態的這項技術能夠幫助遊戲引擎組合出多個地圖專用的燈光環境,讓很大一部分上述所提到事先運算完成的數據能夠給這些燈光環境共同使用。此舉可以大幅降低數據足跡,也就是說玩家針對每種版本的地圖所需下載和安裝的數據並不會太多。多虧有環境狀態這個功能,我們才可以使用更少的數據打造出更高品質、更多不同版本的燈光效果。


在環境狀態這個技術的輔助之下,《鬥陣特攻 2》感受起來會變得更加豐富多變,同時還能改良美術設計師的工作流程,讓他們有足夠的時間和心力打造出色彩繽紛的遊戲世界供玩家享受。敬請期待,《鬥陣特攻 2》橫跨全球的冒險之旅擁有變化萬千的遊戲環境以及震撼感官的視覺效果,包準能帶給你身臨其境的遊戲體驗!
0 則留言