程式設計 x 遊戲畫面運鏡:2D橫向捲軸遊戲的運鏡變化

《Within 迴憶之間》,是由曙光工作室(Silver Lining Studio)所推出的一款以黑暗童話風格為背景的敘事遊戲。目前可以在Google Play跟TapTap上下載Beta測試版本。

【過去其他主題】

1.《Within迴憶之間》一場瑰麗的黑暗冒險
2. 遊戲開發 x 美術設計ー建立在有限效能上的最大創意
3.《Within 迴憶之間》遊戲視覺設計:如何讓玩家忘懷地沈浸在遊戲之中?

若要用畫面訴說一段浪漫的冒險故事,但又無法使用文字對話的時候,我們可以怎麼做?想像看電影的時候,即時演員沒有說話我們卻能感受到當下的情感,是什麼原因呢?其中一點便是配合不同的「運鏡呈現」。 本次文章即是分享在「迴憶之間」中團隊所選擇的一些運鏡規則、選擇它們的原因,以及在程式方面,該如何去實作這些運鏡。

跟隨角色的運鏡

對於2D橫向捲軸遊戲來說,最重要也最為普遍的運鏡方式是跟隨於角色後方的「跟隨攝影機」。這看似簡單的運鏡原則,其實也需要不少規則優化。

舉例來說,最基本的運鏡方法是讓玩家操縱的角色一直維持在畫面正中間,就程式上也非常容易實現ー只需將攝影機的 x, y 位置對準操縱角色所在的 x,y 位置,即可將角色維持在畫面的正中間。雖然這是簡單又直覺的運鏡規則,但是對於我們想要追求的沈浸感以及敘事需求來說,如此單一的運鏡手法是無法滿足的,,因此我們加入了以下的嘗試。

降低攝影機運動的頻率

在「迴憶之間」,我們相當重視遊戲畫面中「探索」, 遊戲進程也不時會出現一些關鍵的故事資訊誘使玩家停下腳步、探索其中所蘊含的故事,基於這樣的規劃,我們並不希望玩家在原地跳躍,或是於小範圍移動的時候讓攝影機不斷跟隨,所以我們設定了一個角色移動時不會帶動攝影機的「安全區(Safe area)」,讓玩家在範圍內移動角色時,攝影機並不會隨之移動。具體來說,我們可以使用角色的「碰撞框」和想要的「攝影機範圍」去實作「AABB法(Axis-Aligned Bounding Box)」。

AABB法:以紅色方塊在xy軸上的投影作為最大最小值,來檢查綠色方塊是否包含在紅色方塊之中,如果超出紅色方塊範圍,再修正紅色方塊位置,並且帶動攝影機

在面向的方向看得更遠

在冒險遊戲中,玩家通常需要更關注於前方出現的事物或是挑戰,更甚於背後已經歷的地區,為此,我們設定讓角色的面向方向能夠看見更大的範圍,讓玩家能在遊戲途中更加專注於接下來出現的線索、故事元件以及謎題關卡等。

人物在畫面的左側,能更好觀測前方的變化

除此之外,為了保持移動時攝影機的跟隨能更加流暢,攝影機的起步會比角色移動來得更慢一點,這樣的設計能避免角色走到畫面的右邊時,導致畫面平衡被破壞。同時,為了不讓前方的視野變得過於狹窄,當角色超過畫面的中線時,攝影機會加速到和角色等速,來維持玩家能有足夠的視野。

不規則的地圖邊界處理

一般來說,當遊戲走到邊界時,會讓攝影機停在畫面的邊緣,而不是讓遊戲留下一大塊的黑邊,為了這樣的處理,通常會使用前面也提過的AABB法,來判斷畫面是不是包含在地圖裡面,但因為「迴憶之間」的地圖範圍相當不規則,且地圖範圍也是由Polygon Collider來組成,所以無法簡單的使用AABB法來判斷畫面位置。為此,我們使用畫面的上下左右四個點位判斷是否超出地圖邊界,利用OverlapPoint這類方法取得是否在範圍內之後,再計算距離地圖邊界的距離,將攝影機設定回正確的位置。

利用Polygon Collider進行地圖邊界的設定

混合不同的規則創造屬於自己的運鏡

前面所述的幾個運鏡規則,其實都只是「迴憶之間」中的冰山一角,運鏡的設計需要組合各種不同的規則,進而達成想要的運鏡效果,沒有辦法用一套通則來套用到所有的2D橫向捲軸遊戲中。推薦大家一篇2015年的GDC演講,這篇演講中將2D橫向捲軸的運鏡方法分析得出神入化!( Scroll Back : The Theory and Practice of Cameras in Side-Scrollers。)

希望大家也能從這些運鏡的方式中獲得一些靈感,為自己的遊戲設計出自己最喜歡的運鏡方法,來訴說出生動的故事。

最後,歡迎大家參與我們的 Beta 測試,提供給我們更多意見和想法。
詳細資訊可以參考下方所附的連結↓↓↓

Google Play Store : https://silvrlin.pse.is/KRZD4
TapTap:
https://www.tap.io/app/172594
Official Website:
https://thegamewithin.co
Facebook:
https://www.facebook.com/silvrlin.within
Twitter:
https://twitter.com/official_within

Indie Game Brand / Developer

Love podcasts or audiobooks? Learn on the go with our new app.

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

10 Examples of Highly Successful Web Apps on Angular to Watch Out in 2022

React Native: View config getter callback for component

Working Experience With Oasis Infobyte as an Intern

How to use vector icons in React Native iOS and Android