SPARKFUL
閲覧しようとしているページの翻訳が完了していません。現在対応中のため、もうしばらくお待ちください!

Blog

Insights from the SPARKFUL teams

遊戲視覺的法則:遊戲機制與視覺重心

Wei-Fan Chenexperience-design
name

我最近常覺得玩遊戲是一件很累人的事,想到小時候有一台 PS,我總是狂熱的拼命的在玩遊戲,日文看不懂也沒關係,畫面上的資訊量永遠不嫌少,那是為了玩遊戲而玩遊戲啊!對比到現在拿起手機、按進遊戲就開始發呆的我,就像是站在市中心裡看著五顏六色的招牌,人來人往的行人一樣的迷失(暈)

從紅白機開始到現在的家用主機中,許多遊戲機制都留存在很多玩家的頭腦裡。對資深一點的玩家來説,雖然已經是進入了專家模式,但這僅僅可能代表少數族群。那大部分的玩家呢?在智慧型手機遊戲發展的過程,許多玩家是極少接觸傳統家用主機遊戲的家長或新一代族群。在玩遊戲的時候,他們是靠得是畫面上的圖像訊息或過去的遊玩體驗去判讀什麼可以動、什麼不可以。

遊戲是一個互動式的體驗,創作者在替遊戲製作圖像時需要注意訊息是否表達正確。

在現在講求體驗的年代,玩家都希望可以一目瞭然的知道我接下來可以體驗到的內容。遊戲是一個互動式的體驗,創作者在替遊戲製作圖像時需要注意訊息是否表達正確。在圍棋上黑與白的表現足以為遊戲機制表達正確訊息,西洋棋裡的形狀各自代表兵種特性,也如同象棋用的是刻在上面的字,為了機制而出現的傳達方式,過多或過少即會讓玩家對於遊戲有錯誤的理解。

遊戲機制與視覺外型

遊戲所需要的視覺外型,會因為各種不同的遊戲機制來進行改變:從圍棋的對立邊設定黑白兩色、到西洋棋、象棋裡棋子的特性設定出不同的形象、再到皇室戰爭把它們角色化,不同的機制需要各種不同抽象程度的視覺來配合,才能正確地表達其意義。

*圍棋、西洋棋、象棋 與《皇室戰爭》

想像把《蘑菇隊長》這個角色放在《紀念碑谷》裡,大部分的玩家都可以很明顯的感覺出不搭。但若認真探討起背後的原因,比起《紀念碑谷》的主角,《蘑菇隊長》的設定細節過多會讓玩家覺得在遊戲中可以做更多的事,例如他的背包和他清楚的臉,讓玩家感覺他好像可以對玩家做表情以產生更深度的互動。相對的,穿著一身白色洋裝、頭頂著尖頭帽子的《紀念碑谷》主角,只需要做一件事清楚地讓玩家知道他在哪裡。因為在畫面裡,他是少數的那個白色視覺重心。

*《蘑菇隊長》、《紀念碑谷》與 《Lara Croft Go》

機制決定了風格的採用

遊戲的風格應該要跟隨著遊戲機制走,製作者們可以試著避免讓某些圖像太用力。我之前常玩一款遊戲 《Reigns》,完全可以感受到遊戲想帶給我什麼樣的體驗。在遊戲中,玩家扮演一位國王,要平衡維持王國的四個力量。遊戲風格很幾何(風格化),玩家大致上只知道他們是什麼樣角色,這些角色的設計上都有著像是被切半的效果。遊戲機制在於同意或否決他們帶來的故事,為得也是要解決圖像再搭配故事時的不足,所以過多細節的設計也會造成不必要的聯想。另外,遊戲裡也有需要打鬥的部分,同樣是利用左翻右翻的機制去遊玩。圖像沒有因此再去擴張這點是一種非常聰明的表現手法。我認為,圖像跟玩家之間的互動,應該要先解決遊戲機制所產生的問題,再讓玩家從中感受到樂趣。

*《Reigns》的遊戲機制是從《Tinder》身上得到靈感(笑)

遊戲與完形心理學

除了風格以外,完形心理學中的整體性(Emergence)也是能夠協助玩家專注的重要元素。當我們要去分辨一個物體時,我們的眼睛試圖去找出輪廓,然後去比較對過去腦中的記憶,快速的分辨出物體,這就人類視覺的整體性。下面這張圖是一張很常被用來解釋整體性的圖片,在圖片中你會看到很多黑點,而且能透過輪廓,辨視出一隻像是大麥町犬的物體。當我們觀察物體時,我們的視覺是整體的,而不是從一條腿、一顆頭的方式將所看到的物體給組合起來。我們對一隻狗的感知,並非純粹單單從對狗的形狀、顏色、大小等感官資訊而來,還包括我們對狗過去的經驗和印象,加起來才是我們對一隻狗的感知。

在遊戲裡,畫面裡的可動物件也好、裝飾物件也好應該都要有各自的整體性,清楚地讓玩家在第一眼辨識出來誰與機制本身緊密結合,負責讓你與遊戲互動的主角、誰是讓玩家欣賞的配角。

如同電影一般,遊戲把你從現實的世界帶出來放進另一個世界裡,它的視覺專注著在敘述故事與情境。電影裡的配色最能直接表達畫面上的訊息,誰是視覺的重心誰是配角。根據主題內容不同去增加或減少色盤能夠更有效地傳達訊息,例如《紀念碑谷》,或《Journey》如果過於豐富的顏色還能清楚地保有遊戲性嗎? 《紀念碑谷》如果用了像《蘑菇隊長》的場景顏色,玩家還能有線索的找出可移動的方塊嗎?適當的顏色設定在遊戲上極為重要,其機制是設計者想讓大家玩的 ,如何避免使用者從圖像上讀取過多或錯誤的訊息。

遊戲裡顏色的運用較為複雜,它幫助我們辨識區別畫面裡的人物景。例如《Uncharted》 裡畫面上稀少的黃色是引導玩家可抓取的範圍。在製作遊戲美術時,常常會糾結好多在創造角色時會有許多設定的顏色,雖然可能放在遊戲畫面上時很吸睛,但其實仔細想想,是不是與其他畫面上的圖像的關係欠缺了整合。

*《Uncharted》中的黃色暗示著可以互動的物件

*《Lara Croft Go》中主角身上的藍衣,與象徵危險的紅色怪物們

*《Journey》用顏色用來區分每個章節的情緒

結語

Josef Albers 說道:「在樂曲中,如果只聽到單一樂音,我們就聽不到音樂。聽到音樂的先決條件是,聽出介於樂音與樂音之間的東西,它們的位置與留白。寫作時,懂得拼字不代表能理解一首詩。能辨識畫中的色彩也不等同於敏銳的觀看能力,也不代表能理解色彩在畫中的作用。」

遊戲是一個空間,不同的動作會形成不一樣的結果造成畫面上多樣的組合。在製作遊戲時,很常要去考慮玩家看到它時想到了什麼、是否知道要怎麼玩?在這樣的框架下如何把遊戲機制與圖像創造之間的關係做到最緊密,實在是一件很有趣的事。


References:

  1. Image via Evonne, grotos, and Ronald Sarayudej
  2. The Art of Journey, Matthew Nava, 2012
  3. Dan, (2018), 格式塔體系的整體性 [ONLINE]
  4. Uncharted, Naughty Dog, 2015
  5. 蘑菇隊長, Nintendo, 2014
  6. Journey, thatgamecompany, 2013
  7. Lara Croft Go, Square Enix Montreal, 2015
  8. Reigns, Devolver Digital, 2016
Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
喜歡開發與創作各種有意義且有目的的遊戲以改變社會。 《玩心設計》作者、偶爾寫部落客與擔任講師。樂於參與大學和行業活動,興趣涵蓋遊戲設計、遊戲理論、行為設計、人機介面和交互設計。熱衷於雲端運算,同時也是一個活躍的獨立遊戲開發者 🎉
divider
関連記事
name

如何為產品注入玩心?Fourdesire 遊戲化設計的五個心法

Sammy 是 Fourdesire 的助理製作人,在 2017 年底加入 Fourdesire 後,開始參與遊戲化產品設計,目前負責經營《記帳城市》以及研發新產品。這篇文章會有這幾年在 Fourdesire 參與產品設計的正面和側面觀察,一...もっと記事を読む
name

配樂與音效,在互動作品中該扮演什麼角色?

多數影像的配樂與音效都是在作品完成之後,再交給配樂師進行後製,或許你會說這是專業分工和業界流程,亦可以減少修改的問題,那如果配樂、音效與作品同時開始進行製作呢?3 月 6 日(三)以「配樂與音效在作品製作上,該扮...もっと記事を読む
name

接案還是創作?李百罡:「滿足他人也是一種能力。」

3 月 6 日(三)由 FourdesireU 主辦的「配樂與音效在作品製作上,該扮演什麼樣的角色?」講座,邀請到製作獨立遊戲《返校》配樂與原聲帶的作曲家張衞帆,以及 App《Walkr》、《記帳城市》配樂音效製作人李百罡...もっと記事を読む