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

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

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

Image for post
Image for post

不只是在電腦上玩

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

Image for post
Image for post
Adafruit PyBadge

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

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

Image for post
Image for post
Photo by Roselyn Tirado on Unsplash

準備材料

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

Image for post
Image for post

我知道 — — 這兩樣都不是台灣容易買到的產品。不過,最近我發現在貿澤電子(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)或其他現成「遊戲機板」便宜不少。以後想要還可以將零件挪作他用,一舉兩得。

Image for post
Image for post
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 的版本。

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

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

Image for post
Image for post

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

接線

上圖為 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 接線正確的話,螢幕上應該會出現這樣的圖案:

Image for post
Image for post

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

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

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

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

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

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

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

其他硬體支援

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

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

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

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

尾聲

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

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

Image for post
Image for post
Photo by Kelly Sikkema on Unsplash

Former translator and currently a tech-book editor based in Taiwan. https://krantasblog.blogspot.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store