程式設計 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