用Scratch復刻超級瑪利歐兄弟

pondahai
7 min readSep 16, 2020

--

響應超級瑪利歐兄弟35週年紀念

超級瑪利歐兄弟是一種橫向捲軸的平台遊戲

橫向捲軸:就是遊戲過程畫面背景會跟隨主角做橫向移動
平台遊戲:就是主角角色會在場景中跳上跳下與其他角色或背景互動

以下的說明請搭配程式碼服用:
https://scratch.mit.edu/projects/372461541/

關卡

這一次的遊戲復刻主要是超級瑪利歐兄弟的1–1關,所以一開始要到網路上找到1–1關的全景圖。

超級瑪利兄弟1–1全景圖

Scratch角色需要空白的背景,讓主角可以在空白的地方活動,並且與背景互動。所以背景圖需要做成分分離,然後以多層背景的方式,讓主角只跟其中的一個背景互動,通常是地面(以下稱為互動背景)。然後其他背景只做顯示不做互動(以下稱為不互動背景),例如天空。因為Scratch會以圖層中的顏色成分作為碰撞偵測的依據,因此圖層中透明的部分就會成為主角活動的區域。

左邊的背景不與主角互動,右邊的才會與主角互動(地面)

因為Scratch無法一次將全景圖載入,所以這裡必需使用小技巧:將全景圖切割成一小塊一小塊的圖檔。用工具程式XnVIEW做分割圖檔,將1–1的全景圖切割成60像素寬的圖檔。

XnVIEW有分割圖片的功能

回到Scratch創建兩個角色,一個是不互動背景圖,取名:Background 1–1,一個是互動背景圖,取名Ground 1–1。將上述切割好的圖檔載入。

將切割好的全部圖檔載入,會形成一片片的圖層

切割好的關卡圖,要讓他正確顯示在舞台區,就要一張一張地顯示、位移再顯示,直到關卡圖填滿整個舞台區。因為關卡圖遠大於舞台區的寬度,所以要根據主角的移動並且同時更新舞台區的關卡畫面,這樣就可以形成橫向捲軸的效果。

主角Catrio

主角的設計需要一些複雜程序,首先理解一下主角的行為有哪些?

  1. 上下左右的移動
  2. 跳躍
  3. 與其他角色的互動,例如:地面、寶物箱等(今天求和😊不談敵人)

在傳統瑪莉兄弟的設計中,關卡只能往右走,無法回頭,這其實讓事情變得單純,所以為了要讓角色移動時能夠時時更新背景,這裡要先設個變數,名為:world total x,這是用來記錄目前背景運作到大地圖的哪一個位置,以便讓背景圖角色Background 1–1以及Ground 1–1產生對應的背景圖。

為了讓主角的移動看起來自然一些,要讓移動變成是有「加速度」的,就是當一開始按下右鍵要讓角色移動,一開始只會動一點點,然後才是越來越快越來越快,一直到每次移動的上限。雖然移動的時候是將角色的座標上加一個值(這裡最大是8個座標值),但其實畫面上的感覺就是角色移動很快而已。除了角色的左右移動有加速度,跳躍與落下也同樣有加速度的變化,並且,跳躍時還會根據跳躍鍵(這裡是用空白鍵)按下時間的長短來決定跳躍的高度。

角色的移動可在大迴圈內以判斷式的方式檢測方向鍵是否按下來做對應動作,但要處理主角能夠踏踏實實的站在地面上這就需要一點技巧。

首先理解一下Scratch的副程式方塊,裡面可以看到一個選項叫做:Run without screen refresh,意思是指這個副程式在處理時不要更新畫面,這樣的技巧可以讓程式運作非常快速,因此可以用來判斷主角目前與地面的關係,並且做出處置。

副程式裡面有個Run without screen refresh選項

對於主角而言,這個世界是有萬有引力的,因此會讓主角角色不斷的下墜,但是遇到實體的地面時,主角必須穩穩地站在上面。所以,主角大迴圈裡面會有不斷地讓主角下墜的程式,但是每一次迴圈執行時,都要執行一次「地面偵測」看看主角是否碰到了地面,如果是,就要讓主角的位置往上提,這一切的動作如果發生在一瞬間,即使他是不斷地在偵測-碰撞-提高,但是因為螢幕沒有刷新,所以我們就不會看到主角站著的時候一直抖動!(可以把範例程式裡面的touch ground副程式 裡面的選項關掉看看。)

遊戲就像人生,就是不斷地沈淪然後想辦法提升

這個處理萬有引力的方式其實跟真實人生一樣,不管何時只要在地球上,我們無時無刻都在對抗萬有引力,身上每根肌肉的副程式都在不斷的調控,才能讓我們好好站著,而且你感受不到它的存在。

對於主角跟其他角色的互動,可以依據角色的特型來決定處理的方式,舉例來說,寶物箱,適當主角跳起來碰到時才處理,因此可以在碰撞偵測副程式touch ground裡面判斷是否正在跳躍,並且碰到某寶物箱(因為寶物箱會有好幾個),然後以發出事件的方式通知被碰撞角色做對應處理,而寶物箱那邊因為是以「分身」方式存在,因此必須在事件對應程式的地方判斷是否碰到主角,這樣真正被碰到的寶物箱做出的對應才會是正確的。

接下來要的處理角色:寶物箱

根據觀察,會發現寶物箱在問號狀態會呈現閃爍變化,因此先到網路上找到一個寶物箱的gif動圖。創建一個角色,將動圖gif載入,他會自動分開多個造型,到時候將動圖造型一張一張地顯示出來,就會形成寶物箱的閃爍動畫。

寶物箱在世界中有很多個,因此需要用到「分身」技巧。同時寶物箱所在位置都有不同,因此需要在世界移動時不斷判斷該在何處出現。再來,當主角碰到寶物箱時,需要與主角傳過來的事件訊息之後做「交叉驗證」這樣才能做出正確對應動作:把金幣在對的位置跳一下!(這裡可以把驗證是否為主角的判斷式拿掉,再看看會發生什麼事)

接著處理最後一個角色:過關旗竿

過關旗杆也是一個角色,但屬於簡單的程式邏輯,這個部分與「隱藏寶物箱」就到程式碼裡面看,程式碼會自我解釋!

「移動世界!!」

當主角移動超過畫面中間往右移動,世界就必須跟著移動,這時候會發出moving world的事件訊息,而所有畫面上除了主角角色外,如果收到世界移動訊息,就必須做出對應動作,其實就是一起往左邊移動,這樣就可以造成畫面上世界移動的現象!

而一旦角色往做移動到邊界後,就讓角色自我消失,這樣一方面就不會在畫面上有殘影留在邊界,一方面也是節省電腦程式記憶體的資源使用。

看看上面說的原理以及設計出來的程式就會發現,前面說的傳統瑪莉兄弟讓世界固定往右移動是一件讓事情變簡單的設計。

結語

「程式會自我解釋」,其實這裡的說明很籠統,如果能親自遊玩並且去修改它,可以更快更好理解程式的邏輯,祝你好玩!

--

--

pondahai
pondahai

Written by pondahai

有容乃大 海納百川 我是彭大海 以前是工程師 現在不是工程師 贊助鏈結: https://www.paypal.me/pondahai

No responses yet