micro:bit Retro Arcade 彩色手柄式擴展板|奧斯丁國際有限公司 OURSTEAM Internationl

產品介紹

micro:bit Retro Arcade是專為micro:bit V2打造的彩色螢幕手柄式擴展板，它包含一個TFT 160*128彩色螢幕、4個方向按鈕、AB兩個按鈕和一個複位按鈕。它外觀小巧，手感舒適。microbit Retro Arcade搭配micro:bit V2可以在微軟Arcade編程平台實現遊戲的在線編程及玩耍。透過簡單趣味的方式幫助孩子自己編寫遊戲、了解遊戲背後的奧義。它還可以自定義遊戲角色、多樣化場景和劇情設計，使用圖形化編程軟件，讓每個人都能輕鬆實現有趣的電子創作和無限的遊戲創意。Microbit Retro Arcade除了作為遊戲編程學習機，還可以作為遙控手柄。

特點
可作為遙控手柄，與機器人小車通訊控制
可作為擴展遊戲掌機，透過圖形化編程創作個性遊戲

基礎參數

Retro Arcade 組裝步驟

一、組裝零件清單：

* 按鈕扣、尼龍材質圓柱、螺帽、螺絲皆有多附 1 顆備品

二、組裝步驟：

1. 將白色搖桿中間螢幕的保護膜撕除，並將螢幕扣住黑色底座固定，參考如圖：

2. 將 6 顆按鈕扣分別安裝於左側上下左右鍵＆右側Ａ、Ｂ鍵上，參考如圖：

3. 先將一顆圓柱放置孔洞中，再將有 6 個孔洞之透明塑膠保護殼的保護膜撕除後放上，並將螺絲放入，參考如圖：

4. 接著將另一個保護殼的保護膜撕除，手壓住尚未鎖上之螺絲處，將此保護殼放在最後側，並將螺帽鎖上固定螺絲，參考如圖：

5. 其餘三處仿照上步驟完成（先將圓柱卡入正面保護殼與搖桿之間，再放螺絲，最後背面鎖上螺帽固定），完整組裝成果如圖：

遊戲編程指南

micro:bit V2與擴展板結合，microUSB連接在micro:bit V2上。

此時如果電源從micro:bit V2端供給，擴展板的電源開關無論開關都會導通。
擴展板電源開關將控制的是從擴展板端供電的情況。

編程平台
Arcade遊戲編程平台地址：https://arcade.makecode.com

編程頁面介紹

編號1的部分 : 輸入項目名稱建立一個項目開始編程
編號2以下的部分 : 是一些平台提供的簡單教程和社區分享的遊戲作品

編程界面介紹，對於基礎入門來說大致先分為3部分需要了解
(1) 線上模擬器：按照編程的邏輯模擬運行效果
(2) 編程積木欄：我們從這裡拖入編程代碼進行編程
(3) 代碼編輯區：我們將代碼從積木欄拖出後在這裡拼接，完成遊戲的形象、界面和邏輯構建

快速創作
點擊新建項目。

輸入項目名稱新建項目。

創建精靈並點擊積木塊中的灰色矩形打開圖片編輯器。

自己設計精靈圖案或者從圖庫中選擇預設精靈即可。透過使用按鍵移動精靈積木塊控制精靈移動。

設置畫面背景顏色。

為了防止精靈移動時走出螢幕畫面外，設置精靈處於屏幕範圍內。

遊戲下載

下載步驟
由於目前對於Arcade平台官方而言，micro:bit V2（nRF52833）還在測試階段，所以我們需要首先去到平台的設置頁面將還在試驗版本的硬件選項開放出來。

確保Expermental Hardware是已啟用狀態（只需要設定一次即可）

接著返回到編程主頁，點擊左下角的下載按鈕，在彈出的選擇硬件窗口拉到最底部選擇N3

會得到一個.hex格式的文件，將它拖入到MICROBIT磁碟機下即可在micro:bit V2 + Microbit Retro Arcade上運行。

遙控手柄指南

材料準備
本次案例需要用到以下材料：
(1) micro:bit V2 × 2
(2) Microbit Retro Arcade × 1
(3) Cutebot × 1

【小車端程序】

編程平台
軟件編程平台: https://makecode.microbit.org/#

新建項目進入編程主頁

添加擴展
添加Cutebot智能賽車擴展軟件庫，點擊擴展。

在搜尋欄位輸入“cutebot”，點擊搜索，添加擴展庫。

編寫程序

程序連結：https://makecode.microbit.org/_gC9gJDET83xd

【遙控端程序】

編程平台
軟件編程平台: https://arcade.makecode.com/# 新建項目進入編程主頁

添加擴展
添加無線通信擴展庫，點擊擴展。

在搜尋欄位輸入“radio”，點擊搜索，添加擴展庫。

編寫程序
程序連結：https://makecode.com/_1HCLTf71TFJk

編程案例遊戲

(一）追逐Pizza 小遊戲

目標 : 您將創建一個包含 2 個精靈的遊戲，一個玩家精靈和一個食物精靈。
遊戲的目標是在時間用完之前盡可能多地吃披薩！每次您的玩家抓到披薩時，您都會獲得積分並重新開始倒計時。

程式設計說明

【設計遊戲背景】
在ToolBox中的[Scene]找出set background color，並把積木拉入on start的積木裡面

在設置的背景色塊中，點擊灰色橢圓打開調色板並選擇背景色。可以在模擬器中試看遊戲實際呈現的樣子。

【設計微笑精靈】

在Toolbox[Sprite]並拖動第一個積木 set [mySprite] to sprite [ ] of kind [Player]到on start的積木裡的最後一個

點擊灰色方塊以打開 Sprite編輯器來繪製您的玩家角色。
使用調色板和設計工具在畫布上繪製圖像，完成後點擊Done完成。

在Toolbox的[Controller]中拉出 move [mySprite] with buttons並拉到工作區中的On Start積木中的最後一個
可以藉由Make Code Arcade的模擬器的操縱桿或鍵盤上的WASD鍵移動。

【設定Pizza精靈】
在Toolbox[Sprite]並拖動第一個積木set [mySprite] to sprite [ ] of kind [Player]到on start的積木裡的最後一個(這個是我們遊戲中的披薩精靈)。

點選[mySprite2]來拉出選單，接者選擇Rename variable重新命名變數
輸入"pizza"作為新精靈名稱，並點擊Ok。

在設置的披薩選項中，點擊玩家種類打開選單，並選擇"食物"作為披薩精靈種類。

點擊pizza的灰色框，再選擇Gallery視圖，找到披薩的圖像(也可以選擇其他圖案！)並選擇它以加載到圖像編輯器中。

在ToolBox的[Sprites]找到 on [sprite] of kind [Player] overlaps [otherSprite] of kind [Player]

在on sprite overlaps otherSprite塊中，點擊otherSprite之後的第二個Player kind打開菜單。選擇食物作為它的種類。

【設定當玩家碰到Pizza時，玩家得分+1分】
當我們的Player與披薩精靈重疊時，玩家得分+一分。

在Toolbox中的[Info]並將更改分數塊change score by [1]拖曳到on sprite overlaps otherSprite的積木中。

【設定Pizza的位置會隨機出現在遊戲畫面中】
把Pizza的位置設置為遊戲畫面的隨機位置。

在ToolBox的[Sprites]找到set [mySprite] position to x [0] y [0]拖到工作區的on sprite overlaps otherSprite中。

點擊[mySprite]變數以打開選單，然後選擇Pizza披薩精靈。

從ToolBox中[Math]找到pick random[ ]to[ ]
拖曳pick random[ ]to[ ]積木放入x坐標、y坐標裡。

Arcade 遊戲螢幕畫面為160像素寬x120像素高。
在set pizza position塊坐標中的第一個pick random塊中，將最大值設定為160。
在坐標中的第二個隨機選取積木中，將最大值從設定為120。

【設定倒數時間】
每吃到一次Pizza就會重新開始倒數計時。

打開信息工具箱抽屜並將開始倒計時塊拖到工作區上的on sprite overlaps otherSprite塊中。

恭喜，您已經完成了遊戲！使用遊戲模擬器在螢幕上移動Player，在時間結束之前吃盡量多吃披薩。

範例程式連結

(二）太空船射擊遊戲

目標 : 操控太空船躲避連續攻擊或射擊敵人

程式設計說明

【建立太空船】

首先我們需要先建立一艘太空船精靈✈️

從[Sprites]類別中，點擊[mySprite] to sprite [ ] of kind [Player]並拉到工作區中的On Start積木中。
從[mySprite]中的選單中點選"Rename"重新命名變數為[spacePlane]。
點選灰色框單以打開圖像編輯器。畫一個太空船或從畫廊中選擇圖案。

【操控太空船】
在Toolbox的[Controller]中拉出 move [mySprite] with buttons並拉到工作區中的On Start積木中的最後一個
將變數mySprite名稱選取為"spacePlane"。

點選積木中右側的➕號，就可以將vx和vy的移動速度更改為200。
可以藉由Make Code Arcade的模擬器的操縱桿或鍵盤上的WASD鍵移動。

【把太空船鎖在螢幕範圍中】
如果飛機離開螢幕，飛機就會消失！因此為防止您的太空船消失不見，我們需要將太空船的飛行範圍鎖在螢幕中

在ToolBox的[Sprites]找到 set [mySprite] [stay in screen] 的工作區中的On Start積木中的最後一個。

點擊變數[mySprite]把名稱選擇為[spacePlane]。

【增加太空船的生命數】
預設的生命數是 2。讓我們將其更改為3個。

在ToolBox的[Info]找到Set life to [3]的積木，並將它拉到工作區中的On Start積木中的最後一個。

【替太空船建立攻擊按鈕】
為了保護太空船，我們需要建立按下一個按鈕發射砲火來攻擊迎面而來的敵人。

在ToolBox的[Controller]找到on [A] button[pressed]的積木，並將它拉到工作區中。

接者，在在ToolBox的[Sprites]找到Set [projectile] to projectile [ ]from [mySprites] with vx [ ] vy [ ]的積木
並將它拉入on [A] button[pressed]的積木裡

點選灰色框後繪製砲火的圖片，將變數mySprite名稱選取為"spacePlane"，並將vx的數值調整為200、vy數值調整為0

【建立怪物】

我們接下來要開始建立怪物了，每隔一段時間怪物就會飛過來攻擊太空船
在ToolBox的[Game]找到on game update every [ ] ms的積木，並將它拉到工作區中。

將遊戲更新秒數調整1000ms 毫秒(1秒鐘)
在ToolBox的[Sprites]找到 [mySprite] to sprite [ ] of kind [Player] 的工作區中的on game update every [1000] ms積木中。

點選 [mySprite]後，點New Variable新增變，來新增"bogey"怪物的變數名稱

點選灰色框後繪製砲火的圖案，並將[Player]調整為[Enemy]

【設定怪物攻擊的方位】

接者我們要開始設定怪物攻擊的方向，應該是從右邊飛往左邊
在ToolBox的[Sprites]找到 set [mySprite] velocity to vx [50] vy [50]，並把積木拉到最後一個
點擊變數[mySprite]把名稱選擇為[bogey]
將水平速度 ( vx ) 更改為-100 ，讓怪物往螢幕的左方加速前進，並將垂直速度 ( vy ) 更改為0，這樣太空船不會上下漂移。

【設定怪物隨機出現在任意高度】

接者我們要讓怪物隨機出現在任意高度
在ToolBox的[Sprites]找到 set [mySprite] position to x [0] y [0]，把x數值調整為160
再從ToolBox中[Math]找到pick random[ ]to[ ]，把積木拉入y值中，並把數值調整為5到115。
這麼做的話，可以在螢幕高度內盡情的隨機出現怪物
點擊變數[mySprite]把名稱選擇為[bogey]

【設定怪物被消滅後需從遊戲畫面中消失】
為了要讓遊戲畫面維持清楚，因此我們要設定當太空船消滅怪物後怪物會消失
ToolBox的[Sprites]找到 set [mySprite] auto destroy
點擊變數[mySprite]把名稱選擇為[bogey]，把切換至

【設定當砲火打到怪物時，新增加射擊效果】
1. 在ToolBox的[Sprites]找到 on [sprite] of kind [Player] overlaps [otherSprite] of kind [Player]

2. 把第一個 [Player] 更換成 [Projectile]；第二個 [Player] 更換成 [Enemy]
3. 再從ToolBox的[Sprites]找到destroy [mySprite]，接者拖曳[otherSprite]到 [mySprite]

4. 將效果[spray]更換成[fire]

【每消滅一個怪物，太空船得分+1分】
當太空船成功消滅一個怪物就可以得分+1分
從ToolBox的[Info]找到 change score by [1]，並把積木拖曳到最後一個

【每當怪物碰到太空船1次，太空船的生命數-1】
當太空船躲避不及，被怪物碰到時生命數會扣1
1. 在ToolBox的[Sprites]找到on [sprite] of kind [Player] overlaps [otherSprite] of kind [Player]

2. 把第二個 [Player] 更換成 [Enemy]
3. 再從ToolBox的[Sprites]找到destroy [mySprite]，接者拖曳[otherSprite]到 [mySprite]
4. ToolBox的[Scene]找到 camera shake by [4] pixels for [500] ms，並把積木拉入其中

5. 從ToolBox的[Info]找到 change score by [1]，並將數值調整為-1

你已經完成了你的遊戲！
您現在可以使用方向按鈕移動您的太空飛機，使用Ⓐ按鈕發射飛鏢！

範例程式連結

(三）落鴨遊戲【進階】

遊戲初始值：分數為0 (右上角的數字為分數)，每出現一個障礙物(1.5秒)就加1分。
遊戲背景：背景為淺藍色，並使用【暴雪】效果作為遊戲開始畫面。
各角色說明：一共有2個角色，拆解如下：
- 鴨子：因重力的關係鴨子會往下掉，按任何鍵讓鴨子往上移動躲開障礙物。為了讓鴨子的飛動更逼真，因此鴨子的角色有【動畫】的呈現效果。
- 障礙物：障礙物會從右一直往左移動，並且每隔1.5秒就會再出現另一個障礙物。其實鴨子只有在中心位置上下移動，由於障礙物由右往左移動，就會有種鴨子由左往右向前飛的錯覺！為了讓障礙物的缺口有上下不同位置，因此程式中設有4種不同的障礙物圖形。
遊戲玩法說明：利用任何按鍵以讓鴨子往上移動以躲開障礙物，不然鴨子將因重力一直往下掉。同時控制鴨子通過障礙物的缺口，如果鴨子碰到障礙物就GAME OVER(遊戲結束)。

程式設計說明

【當啟動時】

程式一開始，設定背景顏色為淺藍色，

設定起始分數為0，以及暴雪效果用於開始畫面中。

接著利用變數創建鴨子角色圖案及類別，

設定鴨子往下墜落(y軸)的加速度數值為300。

設定變數anim為當角色 Walking 時會產生間隔25ms的動畫 (每25ms切換一個影格)
(除了Walking，還可設定Jumping、Idle)(此類動畫積木要透過擴充才可得到)，

添加鴨子角色 walking 走動時的動畫影格積木(可以有多個影格)，

並將這個動畫 anim 附加到角色鴨子上。

【當任何按鍵被按住時】

效果：按下任一鍵讓鴨子往上移動，並有鴨子動畫的產生

想要呈現的效果是往上移動，因此設定y方向的速度為負值，此設-100
激活鴨子角色的 Walking 動畫(除了 Walking，還可設Jumping、Idle)，
這時鴨子就會有上一程式設定的動畫。
同時鴨子角色啟動 rings 圈圈的效果，持續300毫秒。

由上可知變數有：
- 角色變數 (如 mysprite)
- 動畫變數 (如 anim)
- 動畫動作 (如 Walking)
- 障礙物 (分上下兩個變數) 由右往左移動

【當遊戲更新每隔 1500 毫秒】

效果：障礙物 (分上下兩個變數) 由右往左移動

得分改變 1
設定變數隨機選出一個圖案，共有4種可能性
以變數 topImage 代表上障礙物，變數 bottomImage 代表下障礙物

設定4種可能性，上下節數不同以讓障礙物圖形有隨機出現高低起伏的畫面效果
接著設定障礙物之間的空隙 gapimage，
而這之間的空隙也是我們主要遊戲的範圍，會設定變數 gapSprite來進行控制，
為了讓角色鴨子在跨越障礙物圖片之後獲得分數，
我們必須設定隱藏線，從從右到左(x軸負數)，
讓鴨子跨過這個設定在障礙物前面的分數線，就可以獲得加分。

因此設定障礙物的變數為 projectile，
在此只有用一個變數來代表上障礙物 topImage 及
下障礙物 bottomImage，因為兩個障礙物移動的方向需相同。

當上障礙物 topImage 由右往左移動時，設定上障礙物位置 top 為0；

當下障礙物 bottomImage 由右往左移動時，設定下障礙物位置 bottom 為畫面高度。

【當角色精靈和我們所設定的 gap 重疊時】

確認角色是否有跨過所設定的遊戲線，
如果鴨子跨過遊戲線，增加分數1，
為了確保分數可以正常運算，我們需要把這個角色的距離設定為少過2像素，
這樣鴨子跨過遊戲線的時候才不會產生錯誤的分數，
因為我們想要的效果是跨過1個障礙物空隙，加1分。

【當角色精靈和我們所設定的其他角色(這裡指障礙物)重疊時】

當鴨子碰到上下任何障礙物時，
這時遊戲就GAME OVER了

【當遊戲更新】

如果我們的鴨子在起點(y軸) 數值0時，將確保維持我們所設定的 Walking 動畫效果。
如果角色鴨子碰到螢幕高度超過120 或是碰到螢幕底部少於0，
遊戲將結束 GAME OVER。

範例程式連結