電子工程系車用電子與資訊組
教學(2)
使用 設計程式
吳錫修
August 30, 2017
shapethefuture
 mBlock是⼀款以Scratch 2.0為藍本的圖形化編程環境
 擴充50多個Makeblock機器人控制指令
 支援連結Arduino控制板及Makeblock公司機器人套件
 透過拖曳、組合各種「指令積木」就能完成程式
mBlock簡介
2 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 下載mBlock安裝程式
 http://www.mblock.cc/
 執行所下載的執行檔
 選擇安裝語言,其餘使用預設值安裝即可
安裝mBlock IDE
3 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 開發Scratch-Like的多媒體應用程式
 開發mBot應用程式
 電腦互動模式 (連線)
 將mBot與電腦連接,在電腦上寫程式即時測試mBot控制板的輸出入 ,
但程式並未上傳到mBot控制板,斷開連線後就無法執行
 自主控制模式 (離線)
 將程式上傳到mBot控制板,斷開連線後, mBot控制板可獨立執行程
式內容
 不能使用動作模組、外觀模組、聲音模組、畫筆模組、偵測模組及資料
與指令模組中的清單
mBlock應用模式
4 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 使用某種程式語言,根據你的想法,讓電腦幫你完成特定作業
 找出年紀最小的同學?
 兩兩相比,年紀小的繼續兩兩相比
 分成幾組,各組年紀最小的同學再出來比
 設臨界值篩選,調整臨界值再篩選
 …
認識程式設計 1/5
5 Wu, ShyiShiou Dept. of E.E.
可使用不同的程式語言 可用不同的方法 滿足功能需求
shapethefuture
 三種基本程式邏輯
 循序 (sequence)
依先後順序,⼀個步驟接著⼀個步驟依序執行
認識程式設計 2/5
6 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 反覆 (iteration)
部分解題步驟需要反覆執行,直到符合或是不符合某⼀條件式時,才會
離開重複執行的部份;也常被稱為「迴圈 (Loop)」
認識程式設計 3/5
7 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 分支選擇 (branch)
依據不同的條件值,選擇不同的解題步驟執行
認識程式設計 4/5
8 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 訓練邏輯思考能力
 https://blockly-demo.appspot.com/static/apps/maze/index.html
認識程式設計 5/5
9 Wu, ShyiShiou Dept. of E.E.
shapethefuture
mBlock操作介面
10 Wu, ShyiShiou Dept. of E.E.
舞台區
角色區
舞台背景區
程式區
指令區
/造形作業
/音效作業
工具列
shapethefuture
 就是角色展演的地方 (動畫場景)
 角色依據程式區的指令積木組合 (腳本),展現程式腳本的執行結果
 舞台大小480*360,正中央為座標中心點
舞台區 1/3
11 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 舞台作業窗格
舞台區 2/3
12 Wu, ShyiShiou Dept. of E.E.
(0,0)
(0,180)
(0,-180)
(-240,0) (240,0)
執行程式
停止執行程式
切換為全螢幕顯示
中心點
shapethefuture
 切換小舞台
 選單命令「編輯>小舞臺佈置」
 隱藏舞台
 選單命令「編輯>隱藏舞臺模式」
舞台區 3/3
13 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 預設為空白背景
 新增舞台背景方式:
 選擇背景
由背景範例庫中選擇新背景
 畫新背景
自己繪製背景
 上傳背景檔案
 從相機擷取新背景
舞台背景區
14 Wu, ShyiShiou Dept. of E.E.
新增舞台背景
shapethefuture
 切換到背景頁籤
舞台背景編輯
15 Wu, ShyiShiou Dept. of E.E.
刪除背景
背景來源
shapethefuture
 切換到音效頁籤
 新增音效方式:
 從音效庫中選擇聲音
 使用麥克風錄製新音效
 上傳音效檔案
舞台音效編輯
16 Wu, ShyiShiou Dept. of E.E.
音效來源
刪除音效
shapethefuture
 管理程式專案中所有的角色 (如同拍電影時演員人物或道具等)
 點擊角色左上角 圖示變更角色的屬性
 新增角色方式:
 從角色倉庫中選擇裝扮
 畫新角色
 上傳角色檔案
 從相機擷取新角色
 每⼀角色可以擁有多個造型 (分鏡動作)
 可為每個角色分別撰寫腳本程式
角色區
17 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 每個角色可擁有多張圖片,每張圖片稱為「造型」
角色造型編輯
18 Wu, ShyiShiou Dept. of E.E.
設定造型中心點
顯示比例
造型名稱
造型來源
刪除造形
shapethefuture
 每個角色可加入不同的聲音資源
 由音效庫中選擇聲音
 使用麥克風錄製新音效
 上傳音效檔案
角色音效編輯
19 Wu, ShyiShiou Dept. of E.E.
音效來源
刪除音效
shapethefuture
 方便對舞台上角色進行下列操作
 複製
 刪除
 放大
 縮小
 複製/刪除作業方式
 選取工具後,點擊所要作業的角色
 放大/縮小作業方式
 選取工具後,點擊角色,每點擊⼀次就作用⼀次
工具列
20 Wu, ShyiShiou Dept. of E.E.
複製 放大
刪除 縮小
shapethefuture
 共分十大類,並以顏色區分
mBlock指令區
21 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 使用滑鼠將指令積木拖曳到程式區組合即可
 刪除指令積木
 將指令積木拉曳回積木區
 指令積木快顯功能表>刪除
 複製指令積木
 指令積木快顯功能表>複製
mBlock程式區
22 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 控制角色的移動、方向、旋轉及位置
mBlock動作指令 1/2
23 Wu, ShyiShiou Dept. of E.E.
使角色移動指定的位移 (預設值10步,即10單位)
使角色順時針旋轉,預設旋轉15度
使角色逆時針旋轉,預設旋轉15度
使角色面向指定方向
使角色面向滑鼠游標或其它角色的位置
使角色移動到指定位置
使角色移動到滑鼠游標或其它角色的位置
使角色在指定時間內移動到指定位置
使角色x座標改變指定值
將角色x座標重設為指定值
使角色y座標改變指定值
將角色y座標重設為指定值
shapethefuture
mBlock動作指令 2/2
24 Wu, ShyiShiou Dept. of E.E.
設定角色碰到邊界時自動反彈
設定角色旋轉方式
取得角色x座標值;勾選時,會在舞台上顯示座標值
取得角色y座標值
取得角色方向值
shapethefuture
 使角色在舞台上左右移動
mBlock動作指令練習
25 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 控制角色造型、特效、大小、文字顯示等
mBlock外觀指令 1/2
26 Wu, ShyiShiou Dept. of E.E.
以說話框顯示指定訊息n秒鐘 (預設值2秒)
以說話框顯示指定訊息
以思考框顯示指定訊息n秒鐘 (預設值2秒)
以思考框顯示指定訊息
設定角色為顯示模式
設定角色為隱藏模式
設定角色造型
設定角色使用下一個造型
設定舞台背景
調整角色特效值,包括顏色、魚眼、旋轉、濾鏡等
設定角色特效值
將所有特效清除
shapethefuture
mBlock外觀指令 2/2
27 Wu, ShyiShiou Dept. of E.E.
調整角色大小
以百分比調整角色大小
將角色移到最上層
將角色上下移動n層次
取得角色的造型編號
取得舞台的背景名稱
取得角色的大小
shapethefuture
 切換角色造型來產生走路動畫
mBlock外觀指令練習
28 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 播放聲音,可指定音符、節拍、音量,直接彈奏出樂曲
mBlock聲音指令
29 Wu, ShyiShiou Dept. of E.E.
播放指定音效
播放指定音效,播放完畢才會往下執行
中止音效播放
以選定的打擊樂器播放指定拍數
音效暫停撥放n拍
播放指定的音符n拍
指定撥放樂器
調整音量大小
以百分比調整音量大小
取得目前音量設定值
改變節奏速度
設定節奏為每分鐘n拍
取得目前節奏設定值
shapethefuture
 加上腳步聲及延遲,使角色走路動畫更自然
mBlock聲音指令練習
30 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 設定繪圖顏色、大小等進行繪圖工作
mBlock畫筆指令
31 Wu, ShyiShiou Dept. of E.E.
清除舞台上的所有繪圖輸出
將角色印製一份在舞台上
將角色畫筆放下,角色移動時即可繪圖
將角色畫筆提起,因此角色移動時並不會繪圖
設定畫筆顏色為目前滑鼠指標取様顏色
調整畫筆顏色值
設定畫筆顏色值
變更畫筆的亮度
設定畫筆的亮度
變更畫筆的粗細
設定畫筆的粗細
shapethefuture
 讓角色在舞台上左右走動,並描繪移動路徑
 將造型中心點設定到熊猫腳底處
mBlock畫筆指令練習
32 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 建立變數及清單來儲存資料
mBlock資料和指令 1/4
33 Wu, ShyiShiou Dept. of E.E.
變數名稱
變數指令積木
shapethefuture
mBlock資料和指令 2/4
34 Wu, ShyiShiou Dept. of E.E.
清單指令積木
清單名稱
shapethefuture
 建立新指令 (副程式)
mBlock資料和指令 3/4
35 Wu, ShyiShiou Dept. of E.E.
點擊加入指令參數
輸入積木指令名稱
shapethefuture
 建立新指令 (副程式)
mBlock資料和指令 4/4
36 Wu, ShyiShiou Dept. of E.E.
編輯指令內容
shapethefuture
 以副程式方式播放下課鐘聲
mBlock資料和指令練習
37 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 設定特定事件發生時所要執行的程式
mBlock事件指令
38 Wu, ShyiShiou Dept. of E.E.
按一下舞台區右上角綠旗時觸發執行
按下指定按鍵時觸發
放開指定按鍵時觸發
滑鼠點選角色時觸發
當舞台切換為指定背景時觸發
當選單事項大於指定值時觸發
收到指定訊息時觸發
送出廣播給所有角色
送出廣播給所有角色並等待
shapethefuture
 功夫熊猫與爆走企鵝對話
 熊猫角色程式腳本
mBlock事件指令練習 1/2
39 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 企鵝角色程式腳本
mBlock事件指令練習 2/2
40 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 設定程式流程控制,如判斷、迴圈等
mBlock控制指令 1/2
41 Wu, ShyiShiou Dept. of E.E.
等候指定時間才繼續執行
重複執行指定次數
不停重複執行
當條件成立時就執行
當條件成立時執行A,不成立時執行B
等待指定條件成立時才繼續執行
重複執行直到指定條件成立
中斷程式執行
shapethefuture
mBlock控制指令 2/2
42 Wu, ShyiShiou Dept. of E.E.
製造角色分身時執行
製造指定角色的分身
刪除角色分身
shapethefuture
 讓角色在舞台上左右走動60次
 建立step變數
mBlock控制指令練習
43 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 判斷角色是否發生特定狀況
mBlock偵測指令 1/2
44 Wu, ShyiShiou Dept. of E.E.
偵測是否碰到滑鼠或邊緣
偵測是否碰到指定顏色
偵測兩種顏色是否碰撞
取得角色與選單項目之距離
顯示問題並等待使用者輸入答案
勾選時,會在舞台上顯示使用者輸入的答案值
偵測指定按鍵是否被按下
偵測滑鼠鍵是否被按下
取得滑鼠的x座標
取得滑鼠的y座標
取得麥克風音量值
取得視訊影像變化值,高數值表示影像變化越快
開啟或關閉視訊影像做為舞台背景
設定視訊影像透明度
shapethefuture
mBlock偵測指令 2/2
45 Wu, ShyiShiou Dept. of E.E.
取得時間計數值
將時間計數值歸零
取得角色或舞台相關屬性值
取得目前時間值
取得2000年到今天的天數
shapethefuture
 讓角色在舞台上來回走動,碰到邊緣時,顯示訊息
mBlock偵測指令練習
46 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 進行運算式操作,例如取得亂數、數值運算、字串運算等
mBlock運算指令 1/2
47 Wu, ShyiShiou Dept. of E.E.
將兩數相加
將兩數相減
將兩數相乘
將兩數相除
在兩數之間隨機取一個亂數
是否第一數小於第二數
是否第一數等於第二數
是否第一數大於第二數
是否兩個條件同時成立
是否兩個條件至少一個條件成立
是否條件不成立
shapethefuture
mBlock運算指令 2/2
48 Wu, ShyiShiou Dept. of E.E.
將兩個字串合併
取得字串中的第n個字元
取得字串長度
將數值轉成字串
取得兩數相除之餘數
將數值四捨五入
取得數值之函數值
shapethefuture
 讓球在舞台上彈跳
 刪除m_Panda,加入Soccer Ball
 調整球大小約為40*40
mBlock運算指令練習
49 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 機器人模組下為依據「控制板」選單及「擴充」選單設定而衍生的
控制指令
mBlock機器人模組指令
50 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 玩家使用滑鼠引導蝙蝠飛行,巫婆會自動追蝙蝠,躲避巫婆超過20
秒即過關
綜合練習I -巫婆追逐戰 1/5
51 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 程式流程
綜合練習I -巫婆追逐戰 2/5
52 Wu, ShyiShiou Dept. of E.E.
巫婆 蝙蝠
shapethefuture
 設計舞台
 刪除貓熊角色
 加入desert背景
 新增Bat1、Witch角色,調
整角色至適當大小
 將巫婆及蝙蝠旋轉方式設為
左-右
綜合練習I -巫婆追逐戰 3/5
53 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 巫婆角色程式腳本
綜合練習I -巫婆追逐戰 4/5
54 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 蝙蝠角色程式腳本
綜合練習I -巫婆追逐戰 5/5
55 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 噴火龍會隨機噴射火焰,玩家要利用鍵盤向上鍵讓小女孩跳躍以躲
避火焰攻擊,當小女孩被擊中5次後結束遊戲
綜合練習II - 女孩鬪火龍 1/9
56 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 程式流程
綜合練習II - 女孩鬪火龍 2/9
57 Wu, ShyiShiou Dept. of E.E.
女孩 噴火龍 火焰
開始
跳躍動畫
女孩初始狀態
按向上鍵碰到火焰
碰到火焰5次
是否
否
否
結束
是
是
shapethefuture
 設計舞台
 刪除貓熊角色
 加入woods背景
 新增Dragon、Ballerina、
Fire角色,調整角色至適當
大小
綜合練習II - 女孩鬪火龍 3/9
58 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 建立以下變數
 firing 記錄是否噴火中
 hit 記錄玩家被擊中次數
 Ballerina角色建立jump積木指令
綜合練習II - 女孩鬪火龍 4/9
59 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 Ballerina角色程式腳本
 當按下向上鍵,執行jump
綜合練習II - 女孩鬪火龍 5/9
60 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 跳躍指令
綜合練習II - 女孩鬪火龍 6/9
61 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 火焰擊中作業
綜合練習II - 女孩鬪火龍 7/9
62 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 Dragon角色程式腳本
綜合練習II - 女孩鬪火龍 8/9
63 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 Fire角色程式腳本
綜合練習II - 女孩鬪火龍 9/9
64 Wu, ShyiShiou Dept. of E.E.
shapethefuture
綜合練習III - 打磚塊遊戲 1/6
65 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 設計舞台
 刪除貓熊角色
 畫新角色
 名稱block
 ⻑方形 75 * 30
 4種顏色造形
綜合練習III - 打磚塊遊戲 2/6
66 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 畫新角色
 名稱ball
 圓形 25 * 25
 藍色
 畫新角色
 名稱bar
 圓形 60 * 10
 黑色
 在背景底部畫⼀條⽔平紅線
綜合練習III - 打磚塊遊戲 3/6
67 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 bar角色程式腳本
綜合練習III - 打磚塊遊戲 4/6
68 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 block角色程式腳本
綜合練習III - 打磚塊遊戲 5/6
69 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 ball角色程式腳本
綜合練習III - 打磚塊遊戲 6/6
70 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 由電腦隨機產生⼀組4位數不重複的數字,玩家輸入猜測值後會顯示
xAxB提示,A表示數值與位置都正確;B表示數值正確,但位置不正
確
綜合練習IV - 猜數字遊戲 1/7
71 Wu, ShyiShiou Dept. of E.E.
正確答案7428
猜測值1234
提示0A2B
shapethefuture
 程式流程
綜合練習IV - 猜數字遊戲 2/7
72 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 建立以下變數
 A 儲存比對結果
 B 儲存比對結果
 answer 儲存答案值
 guess 儲存使用者猜測值
 I 計數用
 j 計數用
綜合練習IV - 猜數字遊戲 3/7
73 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 建立2個清單變數
 hint 儲存猜測值及提示
 numbers 提供亂數產生答案用
綜合練習IV - 猜數字遊戲 4/7
74 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 主程式
 產生答案值
 讀取使用者輸入猜測值
 比對並顯示結果
綜合練習IV - 猜數字遊戲 5/7
75 Wu, ShyiShiou Dept. of E.E.
shapethefuture
綜合練習IV - 猜數字遊戲 6/7
76 Wu, ShyiShiou Dept. of E.E.
shapethefuture
綜合練習IV - 猜數字遊戲 7/7
77 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 選單命令「擴充>Communication」
擴充網路傳輸指令 1/5
78 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 建立網路連線
 選單命令「連接>網路連接」會自動列出同網段之mBlock
 點選所要連線之IP
擴充網路傳輸指令 2/5
79 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 程式區>機器人模組>通訊
擴充網路傳輸指令 3/5
80 Wu, ShyiShiou Dept. of E.E.
收到傳輸資料時觸發
檢查有沒有收到資料
比對是否收到指定資料
讀取一行資料
送出一行資料
送出「var=value」字串
讀取var對應的value值
清空傳輸佇列
shapethefuture
 傳送端  接收端
擴充網路傳輸指令 4/5
81 Wu, ShyiShiou Dept. of E.E.
shapethefuture
 傳送端  接收端
擴充網路傳輸指令 5/5
82 Wu, ShyiShiou Dept. of E.E.

mBot 教學2 mBlock積木式設計程式