Game:Bit 教學系列(四):設計提示與對話

Game:Bit 教學系列(四):設計提示與對話

一、介紹

在遊戲製作中.為了方便玩家理解規則或是增加遊戲體驗,我們通常會給予「提示」🔔視窗,作為介紹、詢問、告知與過場使用。像是在遊戲開始前說明規則,告訴玩家按鍵的意義,又或是遊戲過程中,提示玩家相關訊息(寶藏的秘密、任務需求、獲得的獎勵……等),「提示」可說是增加遊戲體驗度不可或缺的功能。

對於故事劇情的遊戲來說,與提示同等重要的就是「對話」💬功能,這類的遊戲主要是扮演故事中的主角,透過每次的對話與玩家的選擇,拼湊出完整的劇情。

這個單元就是要教大家關於「提示」和「對話」功能,在 MakeCode Arcade 中使用這兩個功能相當簡單,操作並不複雜。上個單元我們已經製作好自己的角色(Sprites),還沒有的同學請趕快回去閱讀,角色搭配上「提示」與「對話」,馬上就會變得有模有樣,就讓小編帶大家體驗與認識接下來的內容吧!╮/(>▽<)人(>▽<)╭

二、目標

1. 學習使用「提示」顯示訊息

2. 可用「對話」與角色互動

三、內容

1. 提示功能

在開始前請大家準備好自己創造的角色(Sprites),當然也可以從素材庫中選一個,下方是小編在上個單元製作的角色,看起來很酷對吧!😎相信您的角色也是。

Game:Bit 教學系列(四):設計提示與對話

關於「提示」的功能,它位於「積木程式列表」中的「遊戲」選項內,點開後可以在右側彈出的清單內,找到相關的積木程式。

Game:Bit 教學系列(四):設計提示與對話

我們首先選擇「醒目提示(“ ”)」這個積木程式,並將它放到「當啟動時」排列第一的位置。

Game:Bit 教學系列(四):設計提示與對話

我們可以在這個積木程式中填寫一些訊息,中文英文都可以

這裡示範填寫上一些介紹角色的內容,如下圖所示:

Game:Bit 教學系列(四):設計提示與對話

在「遊戲模擬器」中可以看到遊戲啟動後,一開始會跳出「提示」,並等待玩家按下「A按鍵」,提示中顯示的訊息就是我們剛剛輸入的文字。

Game:Bit 教學系列(四):設計提示與對話

在還沒有按下 A 按鍵之前,「提示」畫面會一直存在,必須得等到按鍵被按下後,才會執行後續的程式。

若是您設定的訊息比較長,它會採用滾動式呈現的方式來顯示,顯示的開始會停頓一段時間,之後會開始滾動到訊息尾端,並在您按下按鈕前不停重複,如下圖所示:

Game:Bit 教學系列(四):設計提示與對話

除了有顯示訊息的功能之外,「提示」還附帶了三個「詢問的功能」,我們先從第一個「詢問(“ ”)」開始介紹。

Game:Bit 教學系列(四):設計提示與對話

如果您是熟悉 MakeCode 的玩家,應該對這種「左右尖尖形狀的積木程式」或是「左右圓圓形狀的積木程式」不陌生,這類的積木程式通常還需要搭配其他程式才能使用,「左右尖尖形狀的積木程式」通常具備判斷的功能,執行時會得到「True」或「False」這兩種結果。

請點選「積木程式列表」中的「邏輯」,並選擇「如果<true>那麼…否則…」這個積木程式。

Game:Bit 教學系列(四):設計提示與對話

將它們組合起來並放在「當啟動時」內排列第二個,如下圖所示:

Game:Bit 教學系列(四):設計提示與對話

在「詢問(“ ”)」這個積木程式內填入訊息,例如詢問是否觀看我們製作的角色。

Game:Bit 教學系列(四):設計提示與對話

當我們使用「詢問」的時候,畫面會跳出要您選擇「OK」或「CANCEL」的選項,選擇「OK」的時候,會得到「True」的結果,反之則是「False」。

Game:Bit 教學系列(四):設計提示與對話

我們可以將後續提示訊息,填入相對應的位置,如下圖所示:

Game:Bit 教學系列(四):設計提示與對話

完成後在「遊戲模擬器」測試看看。

Game:Bit 教學系列(四):設計提示與對話

另外兩個詢問的功能大同小異,但他們執行時得到的是使用者輸入的內容,我們以「詢問(“ ”)後回答的文字」為例。

為了方便接下來的操作,我們先將剛剛使用的「詢問(“ ”)」刪除。

首先點選「積木程式列表」中的「邏輯」,並選擇下圖框選的程式,這個程式可以讓我們用來比較文字與文字之間是否符合。

Game:Bit 教學系列(四):設計提示與對話

接著將剛剛的「文字比較文字」與「詢問(“ ”)後回答的文字」組合後,放到「如果…那麼…」內,如下圖:

Game:Bit 教學系列(四):設計提示與對話

我們可以在詢問的積木程式內填上我們要問的問題,並在「等號」右側填上答案,文字輸入的部份只支援英文

如果輸入的內容與答案比對相符合的話,會執行「沒問題!」這個提示。

Game:Bit 教學系列(四):設計提示與對話

完成後在「遊戲模擬器」測試看看,也可以輸入錯誤的訊息看看結果。

2. 對話功能

在開始「對話」功能之前,為了讓呈現更加簡潔,小編將程式回到一開始的狀態。

Game:Bit 教學系列(四):設計提示與對話

對話」的功能同樣位於「積木程式列表」中的「遊戲」選項內,點開後可以在右側彈出的清單內,找到相關的積木程式。

Game:Bit 教學系列(四):設計提示與對話

前三個程式都是設定的部分,只有第四個才是真正顯示內容的積木程式,關於設定的積木程式我們一口氣拉出來講,請大家將這三個設定的積木程式全都放在「當啟動時」內。

Game:Bit 教學系列(四):設計提示與對話

對話視窗的文字顏色設為( )」這個積木程式可以改變顯示文字的顏色,點選後方「灰色圖案」時會彈出「顏色區塊」,可以自行選擇喜歡的顏色。

Game:Bit 教學系列(四):設計提示與對話

對話視窗的游標設為( )」這個積木程式可以自行繪製對話視窗右下角的游標,當然您也可從素材庫中選擇一個來使用。

Game:Bit 教學系列(四):設計提示與對話

set dialog frame to( )」這個積木程式有點類似繪製對話視窗的背景,但它只是繪製一個區塊,並自動幫您複製排列以填滿視窗。若想要視窗背景單一顏色可以全部塗滿,它會自動排列(可以繪製一個簡單的圖案自己實驗看看)。

Game:Bit 教學系列(四):設計提示與對話

依序完成設定後我們接著講「對話內容(“ ”)版面位置[ 下 ]」這個積木程式,將它排列在剛剛那些積木程式下方。後方的選單可以選擇位置,小編以預設的「」做示範。

Game:Bit 教學系列(四):設計提示與對話

接著我們可以填上想要呈現的對話內容,小編填上「大家好,我是一隻橘色的小恐龍.」。

Game:Bit 教學系列(四):設計提示與對話

完成後在「遊戲模擬器」測試看看,「對話視窗」開啟後與「提示視窗」相同,需要按下按鍵才會關閉對話視窗,並執行之後的程式。

Game:Bit 教學系列(四):設計提示與對話

大家可以自行增加「對話內容(“ ”)版面位置[ 下 ]」這個積木程式,讓對話內容更加豐富,有了對話視窗之後是不是感覺小恐龍活起來了呢!(*´∀`)~♥

四、結論

雖然這次的內容相較之前的單元多出了不少,但其實還有幾個小細節沒提到,大家可以在練習的時候自行探索。

多多練習相當重要,認識每個積木程式的用法更重要,例如:我們觀摩官方範例程式學習時,雖然看範例程式短短的好像很簡單,但若仔細研究,會發現有很多設計者的巧思在裡面,他們善用了積木程式的功能與組合技巧,巧妙地用最少的程式碼,完成相當多的功能。

所以,在練習每個積木程式的時候可不能太馬虎喔!越了解每個積木程式的功能,越能減少錯誤的發生,並越快完成自己的遊戲。─=≡Σ((( つ•̀ω•́)つ