電子工程系應 用 電 子 組電 腦 遊 戲 設 計 組

教學(2)使用 設計程式

吳錫修

Feb 20, 2017

shap

e th

e fu

ture

mBlock是⼀款以Scratch 2.0為藍本的圖形化編程環境

擴充50多個Makeblock機器人控制指令

支援連結Arduino程式語言及Makeblock公司機器人套件

透過拖曳、組合各種「指令積木」就能完成程式

mBlock簡介

2 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

下載mBlock安裝程式

http://www.mblock.cc/

執行所下載的執行檔

選擇安裝語言，其餘使用預設值安裝即可

點擊mBlock選單命令「連接>安裝Arduino驅動」，完成Arduino驅動程式安裝 (要開發Arduino或Makeblock系列應用程式才需要)

安裝mBlock IDE

3 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

Scratch - Like的多媒體應用程式

mBot應用程式

電腦互動模式 (連線)

將mBot與電腦連接，在電腦上寫程式即時測試mBot控制板的輸出入 ，但程式並未上傳到mBot控制板，斷開連線後就無法執行

自主控制模式 (離線)

將程式上傳到mBot控制板，斷開連線後， mBot控制板可獨立執行程式內容

使用mBlock設計mBot程式時只能使用事件、控制、運算、機器人模組，及資料與指令模組中的變數與積木指令

mBlock應用模式

4 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

使用某種程式語言，實現你的想法，讓電腦幫你完成特定作業

找出年紀最小的同學?

兩兩相比，年紀小的繼續兩兩相比

分成幾組先找各組年紀最小的同學，再出來比

設臨界值篩選，調整臨界值再篩選

…

認識程式設計 1/5

可使用不同的程式語言 可用不同的方式 滿足功能需求

Wu, ShyiShiou Dept. of E.E.5

shap

e th

e fu

ture

三種基本程式邏輯

循序 (sequence) 依先後順序，⼀個步驟接著⼀個步驟依序執行

認識程式設計 2/5

6 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

反覆 (iteration) 部分解題步驟需要反覆執行，直到符合或是不符合某⼀條件式時，才會離開重複執行的部份；也常被稱為「迴圈 (Loop)」

認識程式設計 3/5

7 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

分支選擇 (branch) 依據不同的條件值，選擇不同的解題步驟執行

認識程式設計 4/5

8 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

訓練邏輯思考能力

https://blockly-demo.appspot.com/static/apps/maze/index.html

認識程式設計 5/5

9 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

mBlock操作介面

10

舞台區

角色區

舞台背景區

程式區指令區

工具列

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

就是角色展演的地方 (動畫場景)

舞台大小480*360，正中央為座標中心點

角色依據程式區的積木程式組合 (腳本)，展現執行程式的結果

舞台區 1/3

11 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

舞台座標

舞台區 2/3

12

(0,0)

(0,180)

(0,-180)

(-240,0) (240,0)

執行程式

停止執行程式

切換為全螢幕顯示

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

切換小舞台

選單命令「編輯>小舞臺佈置」

隱藏舞台

選單命令「編輯>隱藏舞臺模式」

舞台區 3/3

13 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

預設為空白背景

新增舞台新背景的方式：

1. 從背景範例庫中選擇新背景

2. 自己繪製背景

3. 上傳背景檔案

4. 從相機擷取新背景

加入背景之後，也可為背景設定音效

舞台背景區

14 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

舞台背景編輯器

15 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

管理程式專案中所有的角色 (如同拍電影時演員人物或道具等)

點擊角色左上角 圖示變更角色的屬性

新增角色的方式：

1. 從角色倉庫中選取

2. 利用繪圖工具 (自己畫新角色)

3. 上傳角色檔案

4. 從相機擷取新角色

每⼀角色可以擁有多個造型 (分鏡動作)

可為每個角色撰寫腳本程式

角色區

16 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

每個角色可擁有多張圖片，每張圖片稱為「造型」

角色造型編輯器

17

造型名稱

設定造型中心點

顯示比例

造型來源

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

可為每個角色加上獨特的聲音資源

音效編輯器

18 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

方便對舞台上角色進行下列操作

複製

刪除

放大

縮小

使用方式

選取工具後在程式區的角色身上點⼀下，每點⼀次就作用⼀次

工具列

19

複製 放大

刪除 縮小

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

共分十大類，並以顏色區分

mBlock指令區

20 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

使用滑鼠將指令積木拖曳到程式區組合即可

刪除指令積木

將指令積木拉曳回積木區

指令積木快顯功能表>刪除

複製指令積木

指令積木快顯功能表>複製

mBlock程式區

Wu, ShyiShiou Dept. of E.E.21

shap

e th

e fu

ture

控制角色的移動、方向、旋轉及位置

mBlock動作指令 1/2

22

使角色移動指定的步數 (預設值10步)使角色順時針旋轉，預設旋轉15度使角色逆時針旋轉，預設旋轉15度

使角色面向指定方向

使角色面向滑鼠游標或其它角色的位置

使角色移動到指定位置

使角色移動到滑鼠游標或其它角色的位置

使角色在指定時間內移動到指定位置

使角色x座標改變指定值

將角色x座標重設為指定值

使角色y座標改變指定值

將角色y座標重設為指定值

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

mBlock動作指令 2/2

23

設定角色碰到邊界時自動反彈

設定角色旋轉方式

取得角色x座標值；勾選時，會在舞台上顯示角色x座標值

取得角色y座標值

取得角色方向值

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

使角色在舞台上左右移動

mBlock動作指令練習

24 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

控制角色造型、特效、大小、文字顯示等

mBlock外觀指令 1/2

25

以說話框顯示指定訊息n秒鐘 (預設值2秒)以說話框顯示指定訊息

以思考框顯示指定訊息n秒鐘 (預設值2秒)以思考框顯示指定訊息

設定角色為顯示模式

設定角色為隱藏模式

設定角色造型

設定角色使用下一個造型

設定舞台背景

調整角色特效值，包括顏色、魚眼、旋轉、濾鏡等

設定角色特效值

將所有特效清除

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

mBlock外觀指令 2/2

26

調整角色大小

以百分比調整角色大小

將角色移到最上層

將角色上下移動n層次

取得角色的造型編號

取得舞台的背景名稱

取得角色的大小

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

切換角色造型以產生走路動畫

mBlock外觀指令練習

27 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

播放聲音，可指定音符、節拍、音量，直接彈奏出樂曲

mBlock聲音指令

28

播放指定音效

播放指定音效，播放完畢才會往下執行

中止音效播放

以選定的打擊樂器播放指定拍數

音效暫停撥放n拍

播放指定的音符n拍指定撥放樂器

調整音量大小

以百分比調整音量大小

取得目前音量設定值

改變節奏速度

設定節奏為每分鐘n拍取得目前節奏設定值 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

加上腳步聲及延遲，使角色走路動畫更自然

mBlock聲音指令練習

29 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

設定繪圖顏色、大小等進行繪圖工作

mBlock畫筆指令

30

清除舞台上的所有繪圖輸出

將角色印製一份在舞台上

將角色畫筆放下，角色移動時即可繪圖

將角色畫筆提起，因此角色移動時並不會繪圖

設定畫筆顏色為目前滑鼠指標取様顏色

調整畫筆顏色值

設定畫筆顏色值

變更畫筆的亮度

設定畫筆的亮度

變更畫筆的粗細

設定畫筆的粗細

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

讓角色在舞台上左右走動，並畫下移動路徑

將造型中心點設定到熊猫腳底處

mBlock畫筆指令練習

31 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

建立變數及清單來儲存資料

mBlock資料和指令 1/3

32 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

mBlock資料和指令 2/3

33 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

建立新指令 (副程式)

mBlock資料和指令 3/3

34

點擊加入指令參數

輸入積木指令名稱

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

以副程式方式播放下課鐘聲

mBlock資料和指令練習

35 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

設定特定事件發生時所要執行的程式

mBlock事件指令

36

按一下舞台區右上角綠旗時觸發執行

按下指定按鍵時觸發

放開指定按鍵時觸發

滑鼠點選角色時觸發

當舞台切換為指定背景時觸發

當選單事項大於指定值時觸發

收到指定訊息時觸發

送出廣播給所有角色

送出廣播給所有角色並等待

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

功夫熊猫與爆走企鵝對話

熊猫角色程式腳本

mBlock事件指令練習 1/2

37 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

企鵝角色程式腳本

mBlock事件指令練習 2/2

38 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

設定程式流程控制，如判斷、迴圈等

mBlock控制指令 1/2

39

等候指定時間才繼續執行

重複執行指定次數

不停重複執行

當條件成立時就執行

當條件成立時執行A，不成立時執行B

等待指定條件成立時才繼續執行

重複執行直到指定條件成立

中斷程式執行

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

mBlock控制指令 2/2

40

製造角色分身時執行

製造指定角色的分身

刪除角色分身

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

讓角色在舞台上左右走動60步

建立step變數

mBlock控制指令練習

41 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

判斷角色是否發生特定狀況

mBlock偵測指令 1/2

42

偵測是否碰到滑鼠或邊緣

偵測是否碰到指定顏色

偵測兩種顏色是否碰撞

取得角色與選單項目之距離

顯示問題並等待使用者輸入答案

勾選時，會在舞台上顯示使用者輸入的答案值

偵測指定按鍵是否被按下

偵測滑鼠鍵是否被按下

取得滑鼠的x座標

取得滑鼠的y座標

取得麥克風音量值

取得視訊影像變化值，高數值表示影像變化越快

開啟或關閉視訊影像做為舞台背景

設定視訊影像透明度Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

mBlock偵測指令 2/2

43

取得時間計數值

將時間計數值歸零

取得角色或舞台相關屬性值

取得目前時間值

取得2000年到今天的天數

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

讓角色在舞台上來回走動，碰到邊綠時，顯示訊息

mBlock偵測指令練習

44 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

進行運算式操作，例如取得亂數、數值運算、字串運算等

mBlock運算指令 1/2

45

將兩數相加

將兩數相減

將兩數相乘

將兩數相除

在兩數之間隨機取一個亂數

是否第一數小於第二數

是否第一數等於第二數

是否第一數大於第二數

是否兩個條件同時成立

是否兩個條件至少一個條件成立

是否條件不成立

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

mBlock運算指令 2/2

46

將兩個字串合併

取得字串中的第n個字元

取得字串長度

將數值轉成字串

取得兩數相除之餘數

將數值四捨五入

取得數值之函數值

Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

讓角色在舞台上來回走動1次

建立round變數

mBlock運算指令練習

47 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

機器人模組下為依據「控制板」選單及「擴充」選單設定而衍生的硬體控制指令

mBlock機器人模組指令

48 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

巫婆追逐戰

玩家使用滑鼠引導蝙蝠飛行，巫婆會自動追蝙蝠，躲避巫婆超過20秒即過關

綜合練習I 1/5

49 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

程式流程

綜合練習I 2/5

50 Wu, ShyiShiou Dept. of E.E.

巫婆 蝙蝠

shap

e th

e fu

ture

設計舞台

刪除貓熊角色

加入desert背景

新增Bat1、Witch角色，調整角色至適當大小

將巫婆及蝙蝠旋轉方式設為左-右

綜合練習I 3/5

51 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

巫婆角色程式腳本

綜合練習I 4/5

52 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

蝙蝠角色程式腳本

綜合練習I 5/5

53 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

噴火龍會隨機噴射火焰，玩家要利用鍵盤向上鍵讓小女孩跳躍以躲避火焰攻擊，當小女孩被擊中5次後結束遊戲

綜合練習II 1/9

54 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

程式流程

綜合練習II 2/9

55 Wu, ShyiShiou Dept. of E.E.

女孩 噴火龍 火焰

shap

e th

e fu

ture

設計舞台

刪除貓熊角色

加入woods背景

新增Dragon、Ballerina、Fire角色，調整角色至適當大小

綜合練習II 3/9

56 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

建立以下變數

firing 記錄是否噴火中

hit 記錄玩家被擊中次數

jumping 記錄玩家是否處於跳躍狀態

綜合練習II 4/9

57 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

小女孩角色程式腳本

當按下向上鍵且jumping變數為0時 (玩家為站立狀態)，發出jump命令

綜合練習II 5/9

58 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

跳躍動作

綜合練習II 6/9

59 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

火焰擊中作業

綜合練習II 7/9

60 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

噴火龍角色程式腳本

綜合練習II 8/9

61 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

火焰角色程式腳本

綜合練習II 9/9

62 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

猜數字遊戲

電腦隨機產生⼀組4位數不重複的數字，玩家輸入猜測值後會顯示xAxB提示，A表示數值與位置都正確；B表示數值正確，但位置不正確

綜合練習III 1/7

63 Wu, ShyiShiou Dept. of E.E.

正確答案7428

猜測值1234

提示0A2B

shap

e th

e fu

ture

程式流程

綜合練習III 2/7

64 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

建立以下變數

A 儲存比對結果

B 儲存比對結果

answer 儲存答案值

guess 儲存使用者猜測值

I 計數用

j 計數用

綜合練習III 3/7

65 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

建立2個清單變數

hint 儲存猜測值及提示

numbers 提供亂數產生答案用

綜合練習III 4/7

66 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

主程式

產生答案值

讀取使用者輸入猜測值

比對並顯示結果

綜合練習III 5/7

67 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

綜合練習III 6/7

68 Wu, ShyiShiou Dept. of E.E.

shap

e th

e fu

ture

綜合練習III 7/7

69 Wu, ShyiShiou Dept. of E.E.