替 MakeCode Arcade 復古遊戲編輯器打造一個 DIY 掌上創客遊戲機 — — 使用 Adafruit ItsyBitsy M4 Express

Alan Wang
10 min readAug 23, 2020

MakeCode 編輯器是微軟投身程式教育領域所打造出來的一系列圖形編輯器 — — 它們的主要語言為 TypeScript(相容 JavaScript),但透過特殊方式將之轉換成可拖拉和拼接的「積木」(這源自 Google 的 Blockly,在早期時兩者風格是一樣的)。這些編輯器可在網頁上開啟,編譯後下載的程式檔可下載到支援的硬體上。

除了搭配 BBC micro:bit 的最知名、最積極發展的版本外,MakeCode 還有提供給 Adafruit Circuit Playground、Lego Mindstorm EV3、Minecraft 之類的對象。不過,近年來有另一個 MakeCode 編輯器開始獲得更多注意,並逐漸出現在坊間的兒童程式課程裡 — — 以打造復古風遊戲為主軸的 MakeCode Arcade

不只是在電腦上玩

當然,如何用 MakeCode Arcade 寫一個遊戲,這就是另一個(龐大的)主題了。本篇所要講的,是如何替製作一個能搭配這個編輯器的硬體 — — 一個 DIY 式的掌上遊戲機。你甚至不必擔心沒有遊戲可玩,因為官網其實有些完成度頗高的範例可供下載。

Adafruit PyBadge

MakeCode Arcade 本身內建模擬器,可以立即看到遊戲的執行狀況,也可以用鍵盤來玩。但是,能在實體裝置上玩遊戲,感覺就非常不同了。而且身為創客愛好者,DIY 豈不更有 fu?將來若有機會的話,說不定還能加上外殼、弄成想要的遊戲機造型哩。

目前確實有人替 MakeCode Arcade 設計專用的遊戲機,與微軟關係甚好的 Adafruit 自己就出了至少三款(PyBadge、PyGamer、EdgeGamer,將來或許還有 Clue);與台灣最接近的是 KittonBot 出的 Meowbit。但是,這裡要講的是如何完全自己用相關零件 DIY。

Photo by Roselyn Tirado on Unsplash

準備材料

首先,你需要一塊 Adafruit ItsyBitsy M4 Express 或 Adafruit Feather M4 Express 開發板。

我知道 — — 這兩樣都不是台灣容易買到的產品。不過,最近我發現在貿澤電子(Mouser)買得到,而且下單金額只要達到約 NT $1500 左右就免運。在有貨的情況下,下單後不到一星期就收到了,你也可以順便敗一些台灣平常不易買到的東西。(附帶一提,我沒有拿任何贊助。)

在筆者寫這篇時,ItsyBitsy M4 Express 售價是 NT$482.89,Feather M4 Express 則是 NT$741.29。這兩塊用的都是 SAMD51 處理器,據我所知兩者的核心規格幾乎沒有分別,差異只有 Feather 比較大、多一個電源供電插座並有個 NeoPixel RGB led(ItsyBitsy 則裝比較小的 DotStar RGB led)。於是我個人買的自然是 ItsyBitsy 啦,便宜且在麵包板占用的空間也較小。

切記,不要買錯型號了,畢竟 MakeCode Arcade 官方支援的板子種類仍然有限。

接著湊齊以下材料:

  1. 1 個 ST7735 全彩 LCD,尺寸 128 x 160 像素(1.8 吋)
  2. 7 個按壓式按鈕或任何形式的開關
  3. 1 個喇叭(不是蜂鳴器;選擇性)
  4. 1 塊 800 孔麵包板或 2 塊 400 孔麵包板,杜邦線、單芯線若干(或者看你想用什麼方式接線)

筆者的 ST7735 是在光華商場附近的電子材料行買的(個人推薦地下電子城的「祥昌電子」),甚至還買到一塊 1.44 吋 128x128 的版本。接上去其實也能用,只是畫面會被截掉一塊,顏色也有點不太一樣。所以,還是乖乖找 1.8 吋的型號吧。

按鈕部分,只要按壓後會接通線路的就可以,你甚至能自己 DIY。這就看個人喜好了,基本上成本很低。喇叭也一樣,買個小小的低瓦數的就行了。

台灣網路上的 ST7735 售價約 210 元,因此單純就製作這裝置的成本來說,會比購買 Meowbit(NT $1280)或其他現成「遊戲機板」便宜不少。以後想要還可以將零件挪作他用,一舉兩得。

Photo by Alexander Mils on Unsplash

燒錄 Arcade 韌體

不論 ItsyBitsy 或 Feather 開發板,出廠時都安裝有 UF2 bootloader(想多知道一些細節的話可見這裡),這使得我們能很快的將 Arcade 韌體替換上去。

首先,在這個頁面下載對應板子的韌體,比如 ItsyBitsy 就是 itsybitsy-arcade-bl-v3.2.2.uf2

接著將板子接上電腦,這時它應該會跳出一個「磁碟區」(bootloader 模式,畢竟現在板子上沒有使用者的程式)。裡面的 INFO_UF2.TXT 會記載目前 UF2 bootloader 的版本。

如果沒看到這畫面,很快按兩下板子上的 RESET 小按鈕看看。

現在把剛才下載的韌體檔拖拉或複製貼上到這磁碟區內,等待片刻,板子重開後就會看到新韌體已經上線:

如果你將來想復原成標準 UF2 bootloader,到此下載對應的版本如 update-bootloader-itsybitsy_m4-v3.10.0.uf2,用同樣的方式上傳即可。

接線

要注意圖中的 ST7735 為 Adafruit 的自家版本,因此有多 SD 槽腳位

上圖為 Adafruit 在網站上提供的接線圖,這邊就直接拿來用吧(來源)。當然,你得先焊接好 ItsyBitsy 的針腳。(最前頭那排 En, RESET, 3, 4 可以不用管。)若是 Feather 的版本可看這裡

ST7735 的腳位接線如下(它以 SPI 控制,使得某些腳位名稱有點讓人困惑):

  • GND → GND
  • VCC → 3.3V
  • SCL → SCK
  • SDA → MO(MOSI)
  • RES(REST) → A4
  • DC(D/C) → A3
  • CS → A2
  • BL(Back Light) → A5

按鈕接線如下:

  • 上 → D10
  • 下 → D12
  • 左 → D11
  • 右 → D9
  • A → SCL
  • B → D7
  • 選單 → SDA

如果有喇叭的話(我使用手邊一個 8Ω 0.5W 喇叭),其中一極接在 A0,另一極接 GND 即可。

連線板子並下載遊戲

接著就來燒錄個遊戲玩玩看吧。首先,將板子接上電腦。

LCD 接線正確的話,螢幕上應該會出現這樣的圖案:

這表示板子正處於 bootloader 模式,準備好燒錄遊戲。

現在打開 MakeCode Arcade 首頁和往下捲,找個你想要的遊戲。我們以 Jumpy Platformer 這個仿超級馬力歐的小遊戲為例:

點「打開範例」
你可以先在電腦上玩玩看遊戲 — — 上下左右是箭頭或 WSAD,A 是空白鍵,B 則為 X
在下面的「下載」旁邊的「…」選「Choose hardware」(選擇硬體)
在出現的一長串硬體清單中,選擇底下的 D5(即 SAMD51)
這時下載旁邊的選單會出現「配對裝置」
繼續點選「配對裝置」
板子有接上電腦和進入 bootloader 模式時,就會出現在這個視窗中。選擇它和按「連線」。
下載/燒錄程式到板子上。

其實也不一定得對板子連線,你可以直接下載 .uf2 程式檔,然後把它拖曳或貼到板子的 bootloader 磁碟區。

還有,出於某種原因,目前在下載程式到板子時,仍會下載一份到電腦裡。

等待片刻後,板子會重開機。小遊戲在你的 DIY 遊戲機上運行了!

板子重新通電時,會再度進入 bootloader 模式。按一下板子上的 RESET 就能進入一般模式(執行遊戲),再按一次便回到 bootloader 模式。

其他硬體支援

MakeCode Arcade 的這篇文章列出了如何用其他硬體來打造遊戲機硬體(微控制器必須是 SAMD51、特定的 STM32F4 或 nRF52)。不過,這就是進階得多的主題了。

微軟其實有提供一個 CF2 patcher 網頁工具,能讓你直接修改 UF2 韌體的內容,網頁上也提到如何修改參數來使用更大型的 ILI9341 LCD(320x240)。不過,筆者測試發現修改並下載的 UF2 無法順利燒錄,板子會直接卡住無反應,所以目前這方向似乎仍然無解。

不過,倒是有另一個有趣的可能性存在:用樹梅派 Zero 當作 MakeCode Arcade 遊戲機。只要下載樹梅派 Zero 用的韌體(一個特製的 Raspbian 作業系統)放進 SD 卡,開機就會變成遊戲機了。而且還附有選單、能安裝多個遊戲上去。不過,本篇就不多講細節了。

用樹梅派 Zero、4 吋 LCD 和復古造型電視機(原本是用來看手機影片用的)製作的遊戲機版本

尾聲

我知道,我知道 — — 這篇完全沒有介紹 MakeCode Arcade 本身的程式功能或任何遊戲設計的面向。雖然現在連台灣也已經有些私人機構將 MakeCode Arcade 當成兒童程式課程,但只要看看範例程式碼就能發現,想將遊戲製作到某種規模是需要時間與心力的。筆者目前還沒有時間做那麼深入的研究。

不過,現在有了一台實體的掌上遊戲機後,就可以拿來當成測試平台了。而且也不見得一定要寫小遊戲,像官網的範例那樣製作煙火動畫也是挺不錯的。隨著 MakeCode Arcade 熱門度日益增高,也許很快的就會有更多人接觸和分享作品了。

Photo by Kelly Sikkema on Unsplash

--

--

Alan Wang

Technical writer, former translator and IT editor.