如何在LOL中成功製造一顆飛彈？

作者：Riot Game VFX首席藝術家Beardilocks
原文連結：
https://realtimevfx.com/t/anatomy-of-a-league-of-legends-missile-part-1-creating-areas-of-focus/11614


大家好，

我是英雄聯盟（League of Legends）皮膚特效首席藝術家奧利（Oli "Beardilocks" McDonald），今天我將在這裡和大家討論如何在LOL中成功製造一顆飛彈。

通常，在檢視學生作品，候選人的藝術測試或者新同事的作品時，總是會出現同樣的話題。我想在此提供一個全面拆解(Breakdown)，它來自於我為了改進他們工作的一些建議，希望它能夠幫助到大家。

對此我們將通過分析聯盟中一些設計非常成功的飛彈，並將其與可以改進的飛彈放在一起進行對比。

所以讓我們先來看看被我認為是聯盟中最成功的飛彈之一來開始：



這是長者之森維嘉的Q技能-黑暗祭祀。它會在一條直線上發射飛彈，從而傷害它所擊中的前兩個目標。這個皮膚的主題是充滿了德魯伊，仙子，妖精和森林精靈的神奇森林。這個宇宙中的維加是一隻淘氣調皮的森林精靈。

它的效果製作來自於聯盟VFX藝術家Kelvin Huynh

那麼，這枚飛彈成功的幾個方面是什麼：


這裡有很多需要考慮的地方，但首先我們需要定義在聯盟中什麼是成功的VFX，以及在遊戲中製作視覺效果時我們所需達到的目標：

英雄聯盟的視覺效果目標

• 視覺傳達遊戲玩法(GamePlay)，同時最大程度地減少資訊干擾或者雜亂。
• 促進皮膚的主題或者美感。
• 創造令人驚歎的視覺效果，讓我們的玩家感到驚訝和喜悅。
  

這就是我們的3個目標。最重要的是，這是一個精心安排的列表。作為世界上最優秀的電子競技之一，視覺清晰度(Visual Clarity)對於遊戲的健康至關重要。因此，對於我們的遊戲而言，最重要的目標是清晰明確地傳達遊戲玩法，但是我們也想實現我們促進皮膚主題的目標（在本例中為“ 長者之森”），並且創造一些令人驚歎的視覺效果。

最好的方法是在我們的效果中建立清晰的焦點區域(Areas of Focus)。

一、焦點區域

我將通過與插圖的對比來證明該點。

我希望你對一些藝術品進行對比。仔細觀察它們中的每一個，並告訴我你所認為的焦點區域在哪兒：


在這張圖片照片上，你很難知道要把眼睛放在哪裡，因為我還沒有建立出清晰的焦點區域。

如果一切都很重要，那麼什麼便都不重要

讓我們轉到另一個完全極端，告訴我此圖中的重要內容：


很顯然，這個圓圈非常重要，但是它一點也不有趣。沒有傳達主題資訊，也不會使你感到驚訝或喜悅。

現在，再來讓我們看看世界上最著名的畫作之一。


相比之下，讓我們看看德拉克洛瓦的畫作，你的眼睛馬上便被舉著國旗的自由女神所吸引。她站在與風格化的背景形成鮮明對比的地方，被光暈所籠罩，手裡拿著場景中唯一飽和的顏色：三色旗(紅色)。在這幅畫中你還有很多事情需要去做：主題被清晰地傳達出來，但是藝術家以一種使你立即知道其中最重要的人物的方式創作了它。自由女神便是焦點區域。

偉大的藝術具有焦點區域和休息區域。

讓我們看看另一幅名畫，分析藝術家創造焦點區域的方式：


同樣，這是一幅視覺上很吸引人的畫，它清晰地描繪了一個主題，但焦點清晰。前景和背景都是由人物組成的，但是我們會自然而然地首先關注前面的那些人物。讓我們看看這是為何如此：


這些是藝術家用來引導我們的視覺並建立焦點區域的工具：

• 1.灰度值（或亮度）
• 2.色彩（或飽和度）
• 3.形狀（或細節）
  

焦點區域具有以下屬性：

• 最高和最低值（嚴格來說，指最高對比度）
• 最高飽和度
• 大量細節（例如，形狀比背景更為銳利）
  

讓我們把這些知識應用到我們的VFX上。

我們知道，VFX在比賽中的最重要的目標是視覺傳達遊戲玩法。因此，我們關注的焦點領域應該是傳達遊戲玩法的要素。在這種情況下，飛彈的正面是會傷害對手的區域，因此這應該是我們的“焦點區域”或者說是“首要元素”。飛彈的任何為了促進主題的部分，都應該是次要元素。


我們使用灰度值，對比度，飽和度和形狀，以確保遊戲區域為主要元素，所以我們已經實現了我們的目標：傳達遊戲玩法。但是我們仍在不斷地促進主題，因此我們實現了“ 促進主題”的目標，我們為角色增加了一個初始效果，增加了玩家的滿足感，而且效果一般都很不錯，所以我們實現了讓玩家驚喜和愉悅的目標。

前面我們討論瞭如何使用在我們的武器庫中的工具來製作“焦點區域”，吸引玩家的注意力到技能中最重要的部分。但是我們怎麼才能知道最重要的部分是什麼呢？在本文中，我們將向你介紹如何嘗試通過視覺效果傳達資訊。

二、我們正在嘗試通過VFX傳達什麼？

當我們為遊戲製作視覺效果時，很少有人會想到，我們的唯一目標是製作一些看起來很酷的漂亮糖果。通常，VFX代表一種能力或動作，無論是飛彈，火箭爆炸還是魔法。因此，我們通常會嘗試向玩家傳達一些有關這些技能或者特殊能力的重要資訊（以及使其看起來很酷）。所以，在聯盟中我們想用飛彈來傳達什麼？

• 這是什麼能力？
• 它有什麼作用？
• 它會帶來多少影響？
  

回答這些問題將有助於你設計視覺效果，以最有效地方式將這些資訊傳遞給玩家。讓我們進一步地來拆解

這是什麼能力？

你需要有效地傳達給玩家的資訊中，最重要的部分可能是該視覺效果所代表的能力。

因此對於遊戲中的每一種獨特能力，你都應該通過某種獨特的設計語言與該技能或效果所關聯，以便玩家可以一目瞭然地學習和辨識出該能力。

這是《英雄聯盟》中的一個例子。

莫甘娜這個角色會發射一枚飛彈，如果該飛彈命中你，你將在原地被禁錮幾秒鐘。


為了使得該能力變得容易辨識，它將具有一些特殊的設計元素，有別於聯盟中的所有其他飛彈：


這些元素共同為飛彈提供了只有莫甘娜的暗之禁錮才所具有的獨特外觀。

而到了現在，當我們製作皮膚時，除了角色設計之外，我們經常會更改視覺效果的外觀。這可能會帶來一定的挑戰性，因為我們需要在換色後仍然保持可辨別性。因此，在建立每個技能時我們都要為其建立一個強大且獨特的視覺標識，並且為每一種皮膚都堅持該設計語言，這一點尤為重要。這意味著我們可以更改視覺設計的顏色或者其他方面，並且仍然保持可辨識性。


譯者：riot近年來，通過大量出售皮膚的換色包。換個色系搭配便能恰錢，也是傳統異能。關於具體又是如何搭配，可以通過逆向解包遊戲檔案，得到VFX紋理的原始檔。可以看到，riot的shader通過了一張又一張的超小檔案體積Gradient Map，得以快速換皮。以下將提供兩篇官方文章以及末日使者的特效檔案參考，如果想要學習riot的換膚色系搭配，建議拆開相關紋理進行學習參考，其背後的shader為DX所寫，方便學習。




開發者基地 - 英雄聯盟官網 - 騰訊遊戲
https://lol.qq.com/nexus/pc/detail.html?tagtype=128&docid=6323488896084167623

Elementalist Lux: 10 Skins in 30 Megabytes
https://technology.riotgames.com/news/elementalist-lux

• 為每種能力建立一個獨特的視覺標識，允許玩家快速將角色與其玩法關聯起來
  

這些在實際比賽中尤其重要，因為能力通常具有著具有多重效果或者是獨特的互動作用。對於其他遊戲（例如射擊遊戲）也是如此，儘管獨特的提示有可能是子彈後面的獨特煙跡或者是槍口上特定形狀的閃光。

它有什麼作用？

即使每種效果都有著獨特的設計，但是玩家仍然需要玩遊戲或者閱讀技能說明來理解每種技能的作用。LOL是一款擁有近150個角色的遊戲，每個角色具有5（或更多）種能力，因此有750多種獨特能力，全部具有獨特的VFX！實在是有太很多需要學習和記憶的內容！

作為視覺設計師，我們希望幫助玩家在玩遊戲時能夠儘快瞭解某項能力，最好是在遊戲間隙進行研究。

因此，當能力擁有著彼此相似的效果時，我們希望建立並使用一套共享的視覺設計。

讓我們以莫甘娜的暗之禁錮技能為例。當它命中目標時，會將其禁錮在原地幾秒鐘，以防止它們移動。

請注意，被莫甘娜命中的目標，在她周圍的地面上有一個環，並且會有一個圓柱從上面冒出，這看起來會阻止她移動。這是我們在遊戲中為類似這樣的詞根，所建立起的視覺設計語言。在開發新的視覺效果或外觀時，如果是禁錮能力，我們將會嘗試使其看起來與其相似。這裡有一些例子：


我們還應用了許多其他規則來傳達我們的技能視覺效果。包括但不僅限於：

治療技能應該是綠色的，並且其形狀不應令人感到威脅




魔法護盾有脈衝線掃過它們




能夠將目標擊飛的能力具有強大的垂直元素

• 對具有類似效果的能力，保持一致的視覺設計將會幫助玩家更快掌握它們，並能更容易地理解遊戲機制
  

另一部分是利用現有電子遊戲中的比喻來傳達狀態效果，如中毒、沉默或眩暈。在儘可能的情況下，我們都應該使用更直觀更為令人理解的視覺設計，而不是試圖在每個效果上重新發明輪子。


它會帶來多少影響？

你的技能會造成大量傷害嗎？還是你的攻擊就像打檯球一樣？

作為VFX藝術家，總有一種誘惑力，讓你創造的一切成為你所能想象到的最為令人驚豔、令人滿意的視覺奇觀。

但是，關鍵的是要使用可用的視覺設計工具來傳達能力的強大程度。就像我在第一部分中所提到的那樣，如果一切都很重要，那麼什麼便都不重要。

因此，造成更大傷害的技能應該更大，更明亮，更有威脅性，形狀更尖銳，更加引人注目。


然而，有更多的因素需要考慮，而不僅僅是傷害。例如，如果一個技能會引起眩暈，禁錮或者其他狀態效果，它應該有一個比單獨造成傷害的能力更具影響力的視覺效果，因為禁錮將會導致一個玩家容易受到其他敵人的後續攻擊。另一個需要考慮的問題是，這個技能你是否可以躲避？或者是當施法者隱藏在視線之外時，這個技能很可能會突然彈出。

我們在遊戲中為新皮膚做的一個有用的練習是，讓設計師為我們提供一個視覺層次文件，他們將一個技能的重要等級從1-10分打分。這有助於我們在製作VFX時，確保視覺重要等級和遊戲玩法重要等級所匹配。下面是莫甘娜的視覺層次文件以及引用值的示例：


這為我們提供了在視覺上打造技能的重要等級的粗略指導。通過遵循這些指南，我們可以確保即使是在複雜的團戰中，一次可能發生大量VFX的情況下，我們遊戲中最重要的技能和能力也會馬上脫穎而出。


你可以在文件中看到，我們不僅對玩家，而且還針對他們的敵人和其隊友，評價了視覺上的重要等級；如果這些值相差很大，我們可能會考慮製作從不同角度觀看結果不同的視覺效果。莫甘娜只有一種能力，其重要性差異足以確保不同角度，能夠產生不同的效果：

讓我們來看她的R技能範圍圈：


在這種情況下，這是莫甘娜和受影響目標遊戲玩法的重要資訊-她的敵人需要離開圈，以免被鏈條所禁錮，莫甘娜必須設法確保敵人不會逃離自己。但是，對於她的隊友來說這些並不重要，因為該圓圈並沒有提供任何會影響他們遊戲的資訊。由於它只會給隊友增加視覺混亂，因此該圓圈僅顯示給莫甘娜和受鏈條影響的目標。這有助於我們最大程度地減少團戰中的視覺混亂。

• 瞭解遊戲中各種能力對於遊戲的影響後，你可以使用VFX建立清晰的視覺層次，以傳達技能的重要等級，並最大程度地減少不必要的混亂
  

因此，在著手製作效果時，你會提出一些問題，這些問題將會幫助你在設計視覺效果時指導你的創意決策。

（未完待續.....）

作者：Katana編譯
譯者專欄：https://zhuanlan.zhihu.com/c_1164910784064282624