遊戲開發日誌2|《傾聽畫語 Behind the Frame》360環景演繹的唯美視覺

由曙光工作室(Silver Lining Studio)開發的《傾聽畫語 Behind the Frame》,是一款關於繪畫、拼湊和修補的敘事解謎遊戲。 預計將在2021年發行,於Steam平台推出PC版,以及在 Google Play Store和 Apple Store推出手機版。

這篇文章將除了分享遊玩核心設計的誕生背景之外,更以美術設計觀點出發,跟大家分享何謂 2D 360度環景特效,以及實際運用後在畫面呈現上的挑戰與學到的經驗,希望提供給喜歡這種美術風格的團隊一些參考。

「為什麼選擇以 2D 呈現 360 度環景?」

為什麼選擇以 2D 畫面,來構成遊戲中各章節的主要環景場景呢?

首先關於選擇「2D」,就要回溯到我們一開始的點子來源。我們參考了一些經典的解謎遊戲,像是「Zero Escape」或「槍彈辯駁」,它們的主要玩法是以在一個主要畫面的場景上,尋找解謎線索。其次就是結合「環景」,由於在單純的 2D 解謎遊戲中,難以做到如同 3D 遊戲中往身體側邊或轉頭到背後的這類行為,除非特地為了側身、背後等獨立製作對應的場景。但是若透過全景的技術,我們可以讓玩家在一個房間中,透過360 度旋轉視角進行探索,也可以更生動地從環境中營造角色或者氛圍,像是:

主角是一個什麼樣的人?
她喜歡收集哪些東西?
她的生活是如何度過的?
對於她收集、購買或繪製的這些物品,有什麼想法等。

此外,各位也不妨思考一下,在現實生活中,什麼時候會做出環視的行為呢?例如,當發現地上有水,你可能就會讓視線循著水的方向,找出漏水的源頭;又或是當你被蚊子咬了,你會開始往四周找尋蚊子的蹤跡等。這些「搜尋特定目標」或者是「檢視周遭風險」的動作,都可以被作為關卡設計時採用的手段。

或許上述的這兩點同樣能在單純的 2D 畫面實現,但是效果不會像使用全景技術這麼好。在單純的 2D 畫面中,這些操作往往被切分成數個場景,玩家要點擊無數的場景移動按鈕後,觀看枯燥反覆的移動動畫,沒辦法「直接前往」自己有興趣的地方。

接著,我們也思考如何在這之上能夠讓玩家更有沉浸與探索感,這邊開始,就要討論針對畫面呈現的一些心得收穫了。

場景的製作與辨識度的處理

我們選擇保留 2D 手繪的風格,並應用 Photoshop 的模擬環景技術,如此一來,就能達成我們前述想要結合 2D 與環景的目標,在重現經典的 2D 解謎的同時,也能保有 3D 的探索感。

而在這個手繪環景場景中,玩家會處於整個場景的中心,在之中去探索自己感興趣的物件,這之中也包含了我們希望玩家去察覺的物件,所以如何確定能讓玩家去看到這些物件就很重要,在我們經過幾輪的測試後,大致將提示物件的方式歸類為以下 3 個準則:

  1. 用較鮮豔的顏色呈現房間中畫架
《傾聽畫語》開發中遊戲畫面

2. 使用動畫常見的賽璐璐風格表現咖啡機

《傾聽畫語》開發中遊戲畫面

3. 利用場景的打光

《傾聽畫語》開發中遊戲畫面

基本上都是照著這些準則去構成畫面,當然,主要還是要建立在整個畫面協調跟好看的前提上,因此實際製作時還是花了不少時間反覆修改跟測試,希望玩家除了解謎過程外,也能夠沉浸在唯美的場景之中。

解謎畫面與動畫背景的平衡與連貫性

對於解謎場景跟動畫背景的要求,我們也是講求極細緻和平衡,特別是由於目前的行動裝置種類繁多,為了讓背景的規格盡可能符合各種尺寸,與玩家實際上能看到的畫面相比,我們使用更大的規格去製作,因此針對這類型的畫面調整,有時也會花上較多時間。

在16:9與4:3畫面下,會呈現出蠻大的觀感落差

相較下,動畫則因為規格必須統一就沒有這方面問題,需要留意的反倒是各個關聯場景之間,如何讓色調和情緒的傳達連貫。例如,從環景場景(房間的窗前)轉場至動畫中的場景,如何讓下雨的氛圍延續,並讓色調互相配合就十分重要:

《傾聽畫語》開發中遊戲畫面(房間窗前)
《傾聽畫語》開發中遊戲動畫
《傾聽畫語》開發中遊戲動畫

最後,則是如何以劇情呈現加深說服力與帶入感了!以我們很欣賞的動畫界翹楚「吉卜力工作室」為例,其闡述追求愛情時的畫面敘事方式,便是我們希望可以達到的境界!期待未來遊戲上市後,除了透過劇情本身的橋段編排之外,也能透過畫面場景的設計巧思,帶領玩家走入故事深處、體驗角色的心境。

《傾聽畫語》開發中動畫場景
《傾聽畫語》開發中動畫場景

《傾聽畫語 — 最美好的景色》故事序章

一如往常,暖和的晨光伴隨著輕快的鳥鳴聲,畫家再度執起她的畫筆,只有在偶爾休息片刻時,仰望窗外的風景。

然而,如此平凡不過的日常,偶然萌生了一些小變化。迷路的小貓、同樣在作畫的鄰居老先生、泛黃的手寫紙條⋯⋯看似毫無關聯,卻又如此熟悉⋯⋯

更多資訊,歡迎至官網與社群平台:http://linktr.ee/silverlining_ww

作者介紹

美術Kaguya

超愛貓但嚴重貓過敏。
因為這個遊戲大概畫上了一生量的背景(吧)。

--

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Silver Lining Studio 曙光工作室

Silver Lining Studio 曙光工作室

Indie Game Brand / Developer

More from Medium

Teach Your Kids About Integrating the Many Parts of Themselves — Woodmam

How Animatrix Created a Wonderful World of Food for Just Eat | LBBOnline

SkyWeaver, a Leading Card Trading Game: Incentivizing the Community with Progressive Ethos and Card…

KeyCue 10 is a Game Changer for Keyboard Warriors