the level design techniques: Composition — part 1

[技術宅] 淺談 Level Design 關卡設計— 構圖 (上)

在虛擬世界中建構這個結構,「設計師有絕對的場景掌控權」,要搭構出什麼樣子的環境,可以決定物體要擺在什麼位子…

上一篇文章“淺談Level Design”中稍微介紹了什麼是Level Design,以及一些技巧。這邊繼續來聊一聊Level Design中其他的構圖。

這概念跟攝影或是美術中的構圖有一點類似,拍照時利用現實場景中的物件,取景的角度,方向,去引導人的目光去關注作者想傳達的。或是在畫圖時,畫家會去先對畫作構圖,找到適合的構圖去彰顯畫作,讓作品達到一定的美感,然後傳達或是要欣賞者聚焦在畫作上的某一個位子。

images from Wikipedia, Rule of thirds & Ballet Rehearsal on Stage by Edgar Degas with the Sinister-Diagonal-duo (Source)

唯一的差別是我們要在虛擬世界中建構這個結構,然後呈現出一個具和諧的構圖在玩家的螢幕上。這當中的差別是「設計師有絕對的場景掌控權」,要搭構出什麼樣子的環境,可以決定物體要擺在什麼位子,攝影機要如何運作。然後使場景中的物體構成你期望的形狀或是線條來提示玩家,進而強化玩家對於關卡的動線與目標方向。

雖然說設計有絕對的掌控全,但是必須是在有秩序且規則原則下構圖,不然,混亂跟和諧也只是一線之隔而已。如同在畫家在作畫時,也是會循用一定的規則跟秩序來建構出他們的想法,或是強化他所要從畫中傳達的感覺,比如說線條、顏色、材質、色彩強度、形狀、空間等。而在遊戲中常見的我們會看到構圖概念運用在大環境構圖、場景元素構圖、導引與回饋。相同的在遊戲中我們也可以用以下這幾種方法來建立關卡構圖:線條、顏色、燈光、層次、角度。

線條 Leading Line

設計師會用場景中不同的物件來建立一些線條,來引導玩家的視線或注意力,又或者是利用環的線條來帶呼應遊戲故事中所傳達的情境與感覺。

垂直線:

垂直線條可以強調出物體的巨大與感覺,同時可以強化玩家與物體之間的對比感。很多遊戲都會將直線的概念運用在凸顯場景中的建築物、雕像、或是玄關之類的地方。同時也可以塑造出宏偉、嚴肅的氣氛。Valve在三月推出的《Half-Life: Alyx》當中,在一開場就使用的這個手法。尤其是在Virtual Reality當中,能更體現出場景中垂直線帶給玩家的巨大感。

Uncharted 4: A Thief’s End by Naughty Dog, images from Youtube IGN channel(左), & Half-Life: Alyx by Valve(右).

水平線:

常常會在比較緩和的場景,或是平靜的氣氛下時容易出現的一種線條。也可能多為大環境中自然形成的,這樣的場景常常會帶給玩家一種深度感或是廣闊無邊的感覺。大家都喜歡去海邊,那種廣闊與舒適感,就如同每當玩家在《Assassin’s Creed》系列中到達viewpoint的時候,總是會有種解脫的感覺。

Marvel’s Spider-Man by Insomniac Games(左), & Assassin’s Creed Origins by UbiSoft(右).

曲線:

最常見到曲線被使用在自然環境當中,而且常常都會是以「S」形呈現。這是一種最常見到的引導性線條,這完全跟攝影的構圖一樣,利用曲線來比達一種美感跟張力。它同時會帶給玩家一種「想要一探究竟」的感覺。就如下方兩款遊戲《God of War》與《The Vanishing of Ethan Carter》,在基本的視覺表現上已經是幾乎完美的地步,而構圖更是能讓人感受到這場景的張力!

God of War by Santa Monica Studio(左), & The Vanishing of Ethan Carter by The Astronauts(右)

斜線:

在視覺上斜線會帶給人一種不安感、不確定性、活躍地。在遊戲中同樣使用這種線條的時候,大多數都是會給玩家一種處於一種危險、動態的場景中。我印象最深刻的就是《Uncharted 2: Among Thieves》中的直升機對戰的經典橋段。在最後房子坍塌前,你可以看到房子傾斜去強調緊張刺激的對戰。

Uncharted 2: Among Thieves by Naughty Dog

透視線條:

在建構場景中很自然就會出現的一種視覺線條,遊戲是在First Personal View的遊戲中。但透視性線條會更常在環境狹小、深度長的空間中出現。這同時可以強化玩家的視覺感,聚焦在某一些事物上。我感覺這手法在《P.T.》中用的非常邪惡😱,卻是非常有效!強迫玩家一定要往前看,且前進。

P.T. by Konami Digital Entertainment(左) & Doom Eternal by id Software(右)

顏色 Color Coding

這技巧是一個以鮮明的顏色或材質在場景中突顯出來,簡單地給予玩家提示,並順利的導引玩家穿梭在場景中。而在遊戲中建立的規律圖案,型態,讓玩家與設計師可以理解的Design Language。

這一技巧同時會出現在不同的用途上。這可以是在場景中使用同一顏色材質來傳達同一件事情。比如某一款遊戲中所有危險的物品都是以紫色作為代表;前往下一個關卡的門都是同一個樣式。由此也可以讓玩家一到場經中就可以立刻分辨出不同物件在遊戲中跟角色構成的關係。

簡單的以生活為例子:在炎熱的夏天中,缺水的你想要去7–11買飲料補充電解質。第一件事一定是環顧四周,有沒有綠白相間的7–11招牌。當你發現在馬路對面時,守法的你再來就是尋找斑馬線。因為斑馬線的黑白相間條紋材質已經被定義為是行人通過去。因此你可以很快地在車水馬龍的環境中找到斑馬線,然後往斑馬線的方向前進。穿過斑馬線,然後前往你的目的地7–11去補充你的生命值。這例子中7–11的顏色招牌,成為場景中的明顯指標,大多的人會透過顏色去尋找,而並不會用閱讀每一個招牌上的字來尋找7–11。斑馬線就是一個場景中特殊的符號,讓你可以安全地穿越馬路。

在所有遊戲中,一個最為典型且大膽的例子大概就是由EA D.I.C.E所開發的《Mirror’s Edge》。這是一款第一人稱視角的跑酷動作遊戲。為了讓玩家可以體驗在場景中順暢地施展各種跑酷的姿勢,場景中的某些物品以鮮明優雅的顏色,再搭配上幾乎同一色調的建築/背景,而凸顯出來,由此來指引玩家方向,跟可以施展跑酷的位子,讓玩家可以更直覺的享受gameplay與跑酷的樂趣。在《Mirror’s Edge》中,紅色物體主要為玩家當前需要前往的目標或是位置。讓玩家可以在快速的移動中,藉由顏色分辨方向,以及明確地做出決定,而不影響遊戲想實施跑酷的流暢度。對我而言,這是一個很好的很巧妙結合了美術視覺與Level Design來呼應Game Design的例子。

Mirror’s Edge by EA DICE, images from Kotaku Australia

Color Coding並不一定只說是用顏色。它也可以是用不同的材質在場景中表達,以避免單純只使用顏色而與場景產生強烈的違和感,因而避免破壞玩家的沈浸感。我們也可以常常在Action-adventure games(動作冒險類)的遊戲中看到,用來指引玩家環境中哪一些地方可以互動,比如說在牆壁,山壁上以顏色或是材質去標記,讓玩家明確了解可以攀岩。至一類的設計技巧可以在《God of War》、《Uncharted》、《Tomb Raider》等等之類的遊戲中看到。即是最近才釋出最新的Unreal Engine 5 demo的Epic Games,也在展示影片中善用了color coding技巧。

God of War by Santa Monica Studio(左), Uncharted 4: A Thief’s End by Naughty Dog(右). Both published by Sony Computer Entertainment.
Unreal Engine 5 Demo by EPIC Games, images from Unreal Engine on Youtube.

下集預告:

因為篇幅過長,不想讓讀者們資訊量過大無法吸收。(自以為是很乾貨的文章…🤣)。所以我會在下篇繼續討論Level Design中的其他構圖方法,會包含有燈光、層次、角度。這三個也是在遊戲中常常見到的Level Design技巧,甚至會更有效地讓玩家體驗到Level Designer的用心與場景的設計的巧妙!

如果有任何建議或是問題歡迎留言指教!🙏🏻

延伸閱讀:

Originally published at http://lucis543.design.blog on June 20, 2020.

--

--