Game:Bit 教學系列(五):創建遊戲元素

Game:Bit 教學系列(五):創建遊戲元素

一、介紹

對於構成遊戲的重要元素,網路上大家各有各的看法,對小編來說要設計一個簡單的遊戲,需要具備角色、遊戲目標、故事和場景。學習完前面四個單元後,我們已經能設計自己的角色,並使用遊戲控制器操控角色移動,以及建立提示訊息與對話框功能。

基本上已經達成角色和故事的要素,目前還缺少「目標」和「場景」的部分。

🎯遊戲目標:即是這套遊戲的過關條件,例如要打敗大魔王😈才算勝利🥳,或是要蒐集到一定數量的寶石💎才能破關,可以說是成就感的來源。

🌄遊戲場景:是指背景畫面🏜與音效🔊構成,用來豐富遊戲過程的元素,對的背景可以讓玩家知道所處的環境,例如我現在是在地牢探險,還是在城鎮準備採買。音效則是可以輔助感官體驗,例如在地牢探險可以放一些緊張的音樂,攻擊敵人或撿到寶物則可以有些提示音效。

接下來我們就從設計場景開始,帶大家繪製背景,並學習如何加上音效。

二、目標

1. 設計背景

2. 增加音效

三、內容

1. 背景製作

首先請大家進到 MakeCode Arcade 並開啟自己的角色,如下圖所示:

Game:Bit 教學系列(五):創建遊戲元素

大家可以看到在「積木程式列表」中,有個「場景」的選項,點開後就能在清單中看到不少關於場景設置的積木程式。

Game:Bit 教學系列(五):創建遊戲元素

首先我們來試試「背景顏色設為( )」這個積木程式,您可將它拖拉到「當啟動時」內,點選積木程式尾端的色塊可以開啟「顏色選單」。

Game:Bit 教學系列(五):創建遊戲元素

背景顏色設為( )」這個積木程式相當單純,可以快速將背景變成單一顏色。適合用在一些需要凸顯角色的場合,或是角色、物品很多的場景,簡單的背景才不會顯得畫面過於雜亂。

Game:Bit 教學系列(五):創建遊戲元素

但很多時候會需要豐富的背景,來營造遊戲的氛圍,所以我們需要自己繪製。在「場景」的內容清單內,可以找到「背景圖像設為( )」這個程式積木。

Game:Bit 教學系列(五):創建遊戲元素

我們用「背景圖像設為( )」這個積木程式取代原先的「背景顏色設為( )」,點選程式尾端的色塊可以開啟我們熟悉的編輯器。與設計角色相同,我們也可用這些工具來繪製背景。

Game:Bit 教學系列(五):創建遊戲元素

背景繪製的介面同樣也有「素材庫」可以選擇,大家可以自行繪製背景,小編這次就偷懶直接選用一個素材來使用😝。

Game:Bit 教學系列(五):創建遊戲元素

有些背景素材或是自己繪製的背景,可能會有高低或遠近之分,以下圖為例,場景是一個陰森的城堡外頭,小編的橘色恐龍似乎站在一個奇怪的位置,彷彿飄在空中一般,這時候我們得要調整角色的位置,以符合背景的配置。

Game:Bit 教學系列(五):創建遊戲元素

先讓我們來看看遊戲機畫面有多大,以及座標配置如何?

螢幕大小以「160 x 120 像素點」,左上角座標是(0, 0) 而右下角則是(160, 120)。也就是說目前我們橘色恐龍的位置在正中間(80, 60) 的座標上。

Game:Bit 教學系列(五):創建遊戲元素

明白座標配置之後,我們可以從「積木程式列表」中,「角色」的選項內找到「角色( mySprite )的位置設為 x( 0 ) y( 0 )」的積木程式。

Game:Bit 教學系列(五):創建遊戲元素

藉由這個積木程式,可以幫我們調整角色的位置。我們可以在積木程式後方的「x、y座標欄位」中輸入數字,或是藉由彈出的拉桿調整位置。彈出的視窗也非常貼心,藉由圖片表示設定座標坐落的位置供我們參考。

Game:Bit 教學系列(五):創建遊戲元素

調整過後畫面就合理多啦,橘色恐龍目前站在陸地上,而不是飄浮在空中,如下圖所示。

Game:Bit 教學系列(五):創建遊戲元素

2. 加入音效

有了酷炫的背景,接下來我們嘗試加上音效,在「積木程式列表」中,有個「音效」的選項,清單內除了預設好的音效積木程式,您也能自行設定。

Game:Bit 教學系列(五):創建遊戲元素

關於內建音效的部分,大家可以自行操作看看,主要有分為三個使用方式,「觸發就重頭播放」、「觸發會等待播放完畢」或是「無限循環播放」。

Game:Bit 教學系列(五):創建遊戲元素

小編主要教大家如何編寫自己的音樂,畢竟預設的音效數量有限,並不能滿足大家的需求。常用的方式有兩個積木程式可以幫大家創作音樂,如下圖所示:

Game:Bit 教學系列(五):創建遊戲元素

先說明「演奏旋律…」這個積木程式,第一個欄位可以讓您編寫「演奏音符」,第二個欄位可以設定「演奏速度」。彈出的編輯介面相當親民,大家只要點選格子就可以編寫旋律,並且有素材庫可以選擇,下方還有撥放按鍵,可以用來聆聽編輯成果。

如何?是不是很有趣呢?

但這個演奏的旋律有一個缺點,那就是它沒有允許在背景重複撥放的功能,編寫完成只能做為一般音效使用,有些可惜。

這時候就輪到第二個積木程式「start song…」,這個積木程式帶有背景循環播放的功能,您可自由切換是否循環撥放。

Game:Bit 教學系列(五):創建遊戲元素

同樣點選積木程式的第一個設定選項,也有方便的編輯器,但它沒有現成的素材庫可以取用,且聲音類似合成器的效果。使用方式請從上排選一個「音效選項(例如:鴨子)」,並在下方「五線譜」上,對應自己要發出聲音的地方按下滑鼠左鍵。

Game:Bit 教學系列(五):創建遊戲元素

如果想要正常一點的音色可以選擇小狗(左邊數來第三個),小編覺得小鴨很適合詭異的氣氛,剛好很配剛剛設定的背景。

設定完自己的背景音樂後,別忘記替積木程式設定「looping」為「true」,使音效能一直循環撥放喔。

Game:Bit 教學系列(五):創建遊戲元素

四、結論

以上就是如何設定背景與音效的教學,大家可以試著將程式下載到 micro:bit,並用 Game:Bit 體驗看看。雖說遊戲機上的喇叭與電腦上的喇叭有明顯的不同,導致原先在電腦上優美的音色,一用 Game:Bit 就顯得有些掉漆,但只要不是太複雜的音色,就不會差太多囉。

下個單元將會針對遊戲的目標做講解,像是獲勝的條件與用來觸發挑戰的動機,又或是生命值❤、分數、倒數計時⏲……這些耳熟能詳元素。