任天堂在1980年推出掌上型遊戲:Game&Watch,一時之間風靡大街小巷,小朋友為之瘋狂。這裏介紹如何用Scratch程式復刻一款Game&Watch遊戲。
首先用google 圖片搜尋功能找一張自己喜歡的Game&Watch遊戲截圖,因為液晶螢幕有個特色,所有的角色動作都是一個固定的圖片,所以要找的截圖必須能夠看到所有角色動作的位置。建議到google 圖片的「工具」點選圖片類型為「GIF」,這樣可以比較容易找到。
以下以「章魚」為例。
主角
首先新增一個Scratch專案,把預設的貓咪角色刪除。然後以「繪畫」方式新增一個角色。將角色名稱設為「Game & Watch」。將角色座標設為0,0。定義為遊戲主角。
點擊角色的「造型」,以「上傳」的方式上傳網路找到的那張GIF動圖,然後只要留下一張造型,其餘刪除。
接著把圖案以對角線方式等比例拉大,讓他充滿整個舞台。過程使用「選取」工具圈選整張圖,然後滑鼠點著角落節點,往舞台邊緣拖拉。
接下來用油漆桶「填滿」功能,選擇透明色,把灰色部分填成透明色。因為章魚部分只有觸手有變化,所以章魚的身體部分留下來不用填透明色。
觀察主角的動作,可以分為七個位置,。主角一開始會在船上,然後會一步步往海底寶藏前進,到了寶藏的位置會拿取寶藏,接著回頭回到船上,這裏會用到六個位置的圖案。如果過程不幸被章魚抓到,就會變成在章魚的位置做掙扎的動作,這裡是第七個圖案。如果取到寶藏,則主角的手上會多一個袋子。以下整理主角所有可能的動作畫面,計算總共要幾張圖片。
規劃一下主角的動作流程:從船上出發,空手下海,走到寶藏處,自動抓取寶藏同時計數寶藏數目,回程時要帶著寶物袋,回到船上,計數寶藏。根據上述規劃,需要把這些圖片一張張做出來,總共要做14張。
將第一張整理好的空白圖片複製出14張,總共15張,第一張保持空白,其餘根據前一步規劃的流程安照順序把主角著色上去,為了色調一致,可以取用章魚的顏色。
接著到程式的部分。為了要能夠計數寶藏的數目,要先建立一個變數用來記錄。因為是主角專用,所以設定為「僅適用當前角色」。
接著依序建立下列積木:
把上述左右鍵的處理邏輯,拉進去第一個積木的「重複無限次」裡面。接著建立第二個「重複無限次」用來處理其他的邏輯狀態。
把上面最後三個「如果」放進去第二個「重複無限次」的迴圈裡面
好了,這樣就可以先測試看看,用左右鍵操作主角前往海底寶藏再回到船上。
章魚
觀察一下章魚的行為,發現觸手可以分成一個個獨立的動畫,所以就先複製主角角色,xy座標設為0,然後造型部分留下第一張其餘刪除,程式內容也刪除。角色命名為tentacles。
造型部分也要把主角圖案用透明色填入。
藉由觀察發現章魚有五隻觸手,其中左上第一隻觸手會隨機出手兩個位置,其餘觸手都是個別動作,因此可以先來實作左上位置的第一隻觸手,其他觸手再用複製後改造型的方法就可以了。
依照主角的邏輯一樣,先觀察左上第一觸手有哪些圖案,先把這些圖案一張一張製作出來。
處理觸手可以用一個技巧把程式複雜度降低,觀察觸手的動畫會伸出去再縮回來,所以總共要製作的圖案就會是12張,程式只要需要不斷更換下一個造型,就可以達到動畫效果了。這裏就不多說,詳情可以到原始碼理解。
其餘觸手可用複製方式將第一觸手修改而成,因為第一觸手有兩個分支,其他觸手的程式就不需要分支判斷,只需要造型做修改,程式中改變造型編號的計數次數就可以,詳見程式碼。
喔!糟糕!!被章魚抓到了!!!
那麼被章魚抓到要怎麼處理呢?這就要回到剛剛製作章魚觸手的地方,找出章魚觸手伸最長的那個造型編號,用一個迴圈包判斷,判斷是否與主角在該位置的造型編號相遇,如果有那麼就執行章魚抓到主角的動畫。
這裏先製作主角被章魚抓到的動畫,首先複製隨便一個章魚觸手角色,接著把程式碼刪掉,造型留下第一張,名稱取為「tentacles_caught」。被抓到的動畫只需要製作兩張,主角手腳一開一合的樣子。
程式碼部分需要一開始的時候指定為空畫面,而當主角被抓時,會用「事件」中的「廣播」通知,所以這裡只要用「當收到訊息」再作動動畫就可以了。動畫結束後,要再發出一個caught_finish訊息,以便通知主角這時候要重新從船上開始。
再來,在每一個觸手程式裡面要增加一個新的迴圈,裡面要不斷偵測該隻觸手有沒有跟主角相遇,主角會跟觸手相遇會有兩個時間點,一個是下傳那一次,另一個是回頭那一次,這兩次判斷要用「或」邏輯相連起來,結果會是一個巢狀迴圈。
當條件成立時,必須發出一個「廣播訊息」caught通知「tentacles_caught」角色(剛剛上面提的),以及通知主角角色要暫時不顯示,因為這個時候被抓到了嘛!
每隻觸手與主教相遇的造型編號不一樣,稍微注意一下修改就可以了。
主角的程式積木要增加兩個「當訊息收到」,當caught訊息收到時,要把主角造型切換成空畫面,以便讓tentacles_caught顯示主角被抓到的動畫。另外當收到caught_finish時,要重置主角的造型回到船上,從頭開始。
分數
接下來要處理遊戲畫面上的七段顯示器,以便顯示分數。
首先複製任一個角色,新命名為digit0,準備要來處理個位數的顯示。把裡面的造型留下第一張空白,以及把程式碼清空,角色座標xy要設為0。
新增一個「適用於所有角色」的變數名為score用來存放分數。
接著製作個位數的造型,也就是0到9的圖案。
程式的部分需要把Score變數經過計算後得到分數的個位數之後,再把對應的造型顯示出來。因為要把對應的數字依照位數挑選圖案顯示,因此需要用數學式將答案求取出來,例如56這個數字,就是十位數為5個位數為6,所以程式必須在十位數的地方挑選5這個圖案出來顯示,而在個位數的地方挑選6這個圖案出來顯示。
在求取多位數的個別位數值的時候,一般來說會用餘數算式取得,就這裏的個位數來說沒有問題。
但是在十位數以上的數值就必須注意Scratch程式在計算除法的時候會四捨五入,例如為了求取56的十位數,會把56除以10得到5.6,這時候我們想要的是5這個結果,但是Scratch會把0.6進位,因此造成最得到的答案是6。因此必須強制告訴Scratch要「無條件捨去」。
最後回到船上數寶藏的時候要記得每數一次寶藏就把分數Score加1。
這樣就完成了!
後記
這只是這個復刻遊戲的一部分,其他還有可以變化的地方,例如隨著分數的增加,如何增加難度?分數顯示的地方要如何遮蔽高位數為零的情況?如何增加不同的遊戲模式?主角的生命數等等。有待大家去練習完成囉~
文中範例程式碼在此:
https://scratch.mit.edu/projects/390463995/