《黑帝斯》的動效簡析

遊戲《黑帝斯》是一款由Supergiant Games開發併發行在macOS、Microsoft Windows和Nintendo Switch平臺上的Roguelike動作角色扮演遊戲，於2020年9月17日公開發售。

Supergiant Games就是超級巨人遊戲工作室，這是一家美國的電子遊戲開發商及發行商。公司成立於2009年，由前EA僱員Amir Rao與Gavin Simon創立。他們遊戲的特點是多采用等距視角。著名的《電晶體》便是出自這家公司。

這家公司截至目前共開發併發行了四款遊戲，它們分別是發行於2011年的《堡壘》（Bastion）、發行於2014年的《電晶體》（Transistor）、發行於2017年的《柴堆》（Pyre）和發行於2020年的《黑帝斯》（Hades）。最後者便是本文要討論的這款遊戲。

它們的遊戲不僅都保持著等距視角的特點，還在某些程度上保持著美術風格的一慣性。縱向來看，其遊戲介面和動效的設計也隨時間而逐漸趨向於成熟，但總體上保持了一慣性。這種一慣性讓這些遊戲都帶有強烈的超級巨人遊戲工作室特色。

比如，雖然《電晶體》的世界觀設定與其他幾款遊戲大有不同，而且屬於廣義概念的“科技感”風格，但它的介面動效與後期的《柴堆》和《黑帝斯》都有著相似的特徵。這些相似特徵中最突出的就是材質動畫的巧妙使用，以及複雜的動畫元素結構構成。

如下圖的《電晶體》中“函式介面”的開啟動畫，就有多層結構構成的前奏動畫設計：


以及它的“OVC皮膚”開啟動畫，就層疊了多個材質動畫效果，並且也結合了多動畫結構，最後構造出擁有豐富結構的前奏動畫：


而下圖是《柴堆》中的一些介面動效：




明顯能看出，這款遊戲的動效也喜歡使用多層材質動畫來構造介面控制元件的出入場動畫，並且都有豐富的結構動畫來構成動效的前奏甚至拖尾動效。

透過它們不同的美術風格外表，我們看到的是一脈相承的動態設計思維。

那麼《黑帝斯》幾乎一定也是繼承了這種設計思維，它會怎麼做呢？

二、美式漫畫風格畫面

在此之前，我們有必要看下對應的美術風格是不是能夠與這種設計思維相吻合。

先來看一看以下圖片所展示的《黑帝斯》遊戲畫面：





可以看到，它的遊戲場景設計、人物立繪以及介面設計。都帶有濃重漫畫式表現方式。由於它相對來說明亮度較高的設計，使這種風格有別於更偏暗黑的哥特式漫畫風格，比如類似《暗黑地牢》這樣的美術風格。


兩者其實有一定的共性，如都使用黑色邊線等。但它們的線條造型方式有比較大的差別，而且色彩使用上也不一樣。所以《暗黑地牢》看起來更不像“美式漫畫”風格，而《黑帝斯》更像。而且《黑帝斯》也保有和它的前輩《柴堆》相似的美術調性。

至於我們在這裡稱呼這種風格為“美式漫畫”的原因，大部分在於它在結構細節刻畫，排線方式以及經典的黑色描邊、全黑暗面的繪製手法上，都極具美式漫畫特徵。為了描述方便，我們暫且就叫它美漫風格。

通常來說，動效設計師在面對類似這樣的美漫風格的介面設計時，腦海中首先出現的大致是“彈動”、“誇張”、“戲劇化”之類標準詞彙。這些都代表著直覺上的美式漫畫的動態表達語言。

但顯然《黑帝斯》並不是簡單得將這些動態語言用於介面動效設計之中。接下來我們來看看它用的是什麼獨特的動態方式。

三、有特點的動效設計

首先可以確定的是，《黑帝斯》的介面動效依然繼承了以往自家遊戲介面動效中的“材質動畫”效果。如下圖所示的“NPC對話”介面入場動畫：


為了看清細節，下圖為慢放處理的效果：


而且，這些動效也都依然設計成了多結構前奏構成的動畫節奏，比如下圖所示的“夜之聖鏡”介面入場動效：


下圖是上圖的慢放版本：


這種豐富的動畫結構似乎是該遊戲的動效設計師最喜歡的設計手法，在諸多重要介面或者皮膚裡層出不窮，如下圖所示的“祝福選擇”介面入場動效：

下圖是上圖的慢放版本：


重要介面的動效設計中，前奏設計不僅重要，也是必要的。它會促使介面的動效效果富有層次和節奏感。《黑帝斯》這種設計手段不僅是一種一以貫之的手法，而且實際效果也極具視覺衝擊力。

看起來和以往的自家遊戲介面中的動效設計一脈相承，但這次又有所不同。除了這些“傳統藝能”外，《黑帝斯》的動效顯得更加誇張。這恐怕也是我們前文中所提到的那些動效設計師在面對美漫風格設計時蹦出的詞彙中，唯一被《黑帝斯》所傳達的。

如下圖所示的“祝福選擇”介面點選效果，通過極具爆發效果的光效與背景層上的材質動畫，將整個點選確定的感受表現到非常誇張的程度：


下圖是上圖的慢放版本：


類似的手法多處可見，如“新武器解鎖”的提示出場動效：


下圖是上圖的慢放版本：


這種設計效果由兩部分構成：在材質動畫的基礎上，特定的誇張式的動畫設計；以及光效的細膩使用。

在戰鬥介面中，設計師亦利用了同種設計手法來表現各種狀態變化，如血槽上的狀態提示：


以及武器欄的狀態提示：


事實上，這些誇張的效果並不偽和。原因主要在於遊戲本身所塑造的一種美漫風格氛圍。其次還在於遊戲的玩法以及爽快的打擊感設計，讓玩家感覺這種誇張是情理之中的。

四、動效的細節

其實，僅僅利用多材質動畫、多結構前奏設計以及誇張的動作設計，並不能使《黑帝斯》的介面動效變得完整。

讓它們變得完整的，是這些看似“粗暴”、“誇張”的動態設計中，所滲入的點滴細節。

細節之一。光效的充分合理利用。如果你注意觀察，會注意到一些光效細節。在快速播放的動效中這些通常不太會被注意到。如下圖所示的介面“獎勵獲得提示”介面的入場效果：


在這整個動態效果中，光效分別起到了引子、演繹和落腳的作用。通過細膩的嵌入，參與了這個三段式結構動效的完整過程。

而最容易被觀察到的光效就是滑鼠經過時的掃光，以及可點選框周圍的彩色緩動邊框：


另外，流光設計也經過細節處理。它們的型體和光芒效果都有不易覺察的細節。在遊戲開頭的Logo入場動畫中表現最為明顯：


細節之二。速度線的使用。雖然有很多效果都是充分利用材質的結果。但類似漫畫速度線表現手法，讓《黑帝斯》的很多介面動效顯得具備手繪逐幀動畫特徵，如“地圖名稱提示”這類控制元件的入場動畫中的一些細節：


細節之三。特別NPC的動態細節。在一些特別的角色立繪上，不僅會有簡單的入場動畫，也還為它們賦予各具特點的光效，甚至是類似表情的“顏藝”，如下圖所示：


其他還有針對特定場景設計的動效，如帶有“水”概念的彈窗，自始至終貫穿著水波紋的動態元素：


如卷軸式的彈窗的特定入場動作，從下到上然後展開：


如橫向左右結構的彈窗，入場動畫的形式是從左至右展開：


林林總總，才構成效果與功用具備的，風格與節奏完整的介面動效設計。

總結

總體上來說，《黑帝斯》的美術風格非常“穩固”且自成一體。

一般情況下，這種體量的開發者和遊戲，通常不會在介面設計與介面動效上投入過多的精力。

我們現在能看到這種品質，至少說明兩件事：

開發者對介面有足夠的重視，充分認識到遊戲介面在表達遊戲本身意圖上的重要性；

開發者有足夠高的審美和相應的技術能力，足以將這種品質的設計變為現實。

總結來看，通過觀摩《黑帝斯》的動效設計，能看到的不僅是它為我們展現的暢快淋漓的遊戲體驗，也不僅是一個美漫風格介面的動效設計手法，而是他們設計這種動效的思維方式：

1.利用美術風格中的核心意圖展開設計。這裡就是“誇張”。

2.對材質動畫的充分利用，並結合特定風格的動作設計。

3.更多樣化的利用光效動態，它有時可以構成動效主軸。

以及充分必要的動效細節設計。

以上。


來源：COTA五號
原文：https://mp.weixin.qq.com/s/kWzbtMg8yv7Du_WQxPEyng