創(chuàng)建一個(gè)動(dòng)畫馬里奧時(shí)鐘的教程分享

　　《超級馬里奧世界》可能是我兒時(shí)玩得最多的游戲之一。所以我與這個(gè)小小的水管工——馬里奧有著深厚的情感聯(lián)系。該系列的第一款游戲在 NES 上具有革命性意義，為 80 年代上半葉正處于糟糕階段的游戲行業(yè)帶來了極大的解脫。

　　本文將指導(dǎo)您以非常簡單的步驟創(chuàng)建一個(gè)動(dòng)畫馬里奧時(shí)鐘，它可以成為任何環(huán)境的復(fù)古裝飾物。

　　補(bǔ)給品

　　ESP32 開發(fā)板（速賣通）

　　如果您想要一個(gè)即用型顯示控制器板，請考慮ESP32 Trinity

　　RGB LED 矩陣 64x64

　　固件

　　電源5v（推薦3A以上）

　　第 1 步：概念

　　我看到一些制造商正在使用 LED 矩陣制作幾個(gè)項(xiàng)目，并認(rèn)為也許我可以用這個(gè)矩陣制作掛鐘，然后順時(shí)針的想法就出現(xiàn)了。Clockwise 的概念是成為一個(gè)智能掛鐘，我們可以在其中更改屏幕主題并添加對您的上下文有意義的小部件。把它想象成一個(gè)智能手表，但在墻上（并且分辨率較低）。

　　我最想擁有的表盤之一是馬里奧兄弟的表盤，他站在舞臺(tái)上敲擊積木來改變小時(shí)和分鐘。我記得在 Pebble 手表的美好時(shí)光看到并喜歡這種皮膚，并且一直想要類似的東西。我的意思是，這個(gè)想法太好了，我想在其他地方使用它。

　　除了這個(gè)表盤之外，我還制作了一個(gè)以文字顯示時(shí)間的表盤，另一個(gè)顯示世界地圖上的時(shí)間的表盤，以及另一個(gè)模擬模擬時(shí)鐘的表盤。所有這些都可以在順時(shí)針的網(wǎng)站上找到。除了時(shí)鐘的外觀，我還想添加一些功能，例如：電子郵件通知、天氣預(yù)報(bào)、新聞、交通、向順時(shí)針發(fā)送短信的可能性以及無數(shù)其他想法。但是對于這篇文章，讓我們關(guān)注馬里奧的時(shí)鐘。

　　LED 矩陣由 ESP32 控制，這就是我在開發(fā)初期使用的，如上圖所示。對于那些有興趣創(chuàng)建這個(gè)項(xiàng)目并且無法創(chuàng)建或購買將控制顯示器的 PCB 的人來說，一個(gè)簡單的 ESP32 開發(fā)板將像一個(gè)魅力一樣工作，并且取決于你如何組織這束電線，它可能是最終的版本也是。只需按照顯示驅(qū)動(dòng)程序的 GitHub 上有關(guān)接線的說明進(jìn)行操作，或者下一節(jié)中的接線圖可以提供幫助。

　　第 2 步：我自己的 PCB

　　完成時(shí)鐘的基本代碼后，我需要一塊 PCB。我真的很想把時(shí)鐘掛在墻上，所以我開始制作我的第一塊 PCB 的原型。我買了一臺(tái)低功率激光器并將其安裝到我的 3D 打印機(jī)上，這樣我就可以設(shè)計(jì)控制顯示器的電路板。這個(gè)設(shè)計(jì)工作得很好，雖然它需要一些改進(jìn)。你可以在Github上找到它。

　　讓我們的 PCB 更專業(yè)

　　Tindie 一直是一個(gè)很棒的平臺(tái)，來自世界各地的制造商可以在這里創(chuàng)建和銷售他們的項(xiàng)目。Brian Lough 就是其中之一，幾年前我在社交網(wǎng)絡(luò)上認(rèn)識(shí)了他，從那時(shí)起，他一直在 ESP32 Trinity 上工作，這是一個(gè)經(jīng)過測試且隨時(shí)可用的板來控制這些顯示器。在這種情況下，它再合適不過了，您所要做的就是將電路板插入顯示器，上傳固件，瞧。正因?yàn)槿绱耍乙呀?jīng)淘汰了我開發(fā)的 PCB，Trinity 已經(jīng)擁有我需要的一切，甚至更多，它甚至帶有觸摸感應(yīng)按鈕、LDR（我們可以用它調(diào)節(jié)顯示器的亮度）、USB-C、電源控制等等，您可以點(diǎn)擊這里查看更多詳細(xì)信息

　　第 3 步：固件

　　如果您不想詳細(xì)了解代碼的工作原理、設(shè)置、配置，而只是想看看它是否正常工作。您可以使用 Mario Bros. Clock 安裝程序來上傳固件，而無需安裝任何東西，也無需任何努力，因?yàn)樗呀?jīng)編譯。只需將 ESP32 插入 USB 端口，然后單擊 P-Switch 即可閃爍。點(diǎn)擊這里安裝程序。

　　配置 WiFi

　　第一次運(yùn)行時(shí)，你需要配置WiFi，通過智能手機(jī)或筆記本電腦連接到密碼12345678的“Clockwise-Wifi”接入點(diǎn)，點(diǎn)擊“配置WiFi”并選擇你的AP，輸入你的密碼和您的時(shí)區(qū)并保存。然后時(shí)鐘可以連接到 NTP 服務(wù)器以獲取正確的時(shí)間。使用 2.4GHz WiFi 很重要，它不適用于 5G。

　　關(guān)于時(shí)區(qū)

　　WiFi Manager 負(fù)責(zé)收集時(shí)鐘中使用的時(shí)區(qū)參數(shù)以正確顯示時(shí)間。實(shí)例化 NTP 客戶端時(shí)，默認(rèn)時(shí)間為 UTC，我們需要在 Wifi 設(shè)置過程中告知正確的時(shí)區(qū)。此處列出了所有可用的時(shí)區(qū)名稱，例如 America/New_York、Asia/Dubai、Europe/Paris 等。就我而言，我在 WiFi 管理器的時(shí)區(qū)字段中輸入“America/Sao_Paulo”，僅此而已。如果您想了解更多關(guān)于 NTP 服務(wù)器的工作原理，我建議您閱讀這篇文章。

　　第 4 步：源代碼

　　我通常使用 PlatformIO 為我的項(xiàng)目開發(fā)固件。如果你還不知道，我建議你試一試。但是對于這篇文章，我決定使用 Arduino IDE 來讓事情變得更簡單。存儲(chǔ)庫中的代碼已準(zhǔn)備好與ESP32-HUB75-MatrixPanel-I2S-DMA庫一起使用，但我也使用了 PxMatrix并且一切正常。我相信您只需要替換庫而無需進(jìn)一步更改代碼，因?yàn)榛愂?a target="_blank">Adafruit_GFX。

　　為了讓它在 Arduino IDE 中工作，我不得不稍微修改一下項(xiàng)目結(jié)構(gòu)，所有文件都與mariobros-clock.ino一起進(jìn)入了根目錄，當(dāng)你第一次看到它時(shí)可能會(huì)有點(diǎn)混亂。我會(huì)試著在這里整理東西。但在我忘記之前，源代碼可點(diǎn)擊這里找到。

　　該結(jié)構(gòu)由以下三個(gè)文件夾和文件樹組成。

　　clockface ：包含圖形、字體、圖標(biāo)等以及馬里奧的實(shí)現(xiàn)

　　commons：包含通用實(shí)用程序，例如日期/時(shí)間和 Wifi 配置

　　engine ：包含一般顯示使用的實(shí)現(xiàn)，如繪制風(fēng)景、精靈、事件等的函數(shù)。

.
├── 表盤
│ ├── Clockface.cpp
│ ├── Clockface.h
│ └── gfx
│ ├── assets.h
│ ├── block.cpp
│ ├── block.h
│ ├── mario.cpp
│ ├── mario.h
│ └── Super_Mario_Bros__24pt7b.h
├── 公地
│ ├── CWDateTime.cpp
│ ├── CWDateTime.h
│ ├── IClockface.h
│ └── WiFiConnect.h
├── 發(fā)動(dòng)機(jī)
│ ├── EventBus.cpp
│ ├── EventBus.h
│ ├── EventTask.h
│ ├── Game.h
│ ├── Locator.cpp
│ ├── Locator.h
│ ├── Object.h
│ ├── Sprite.cpp
│ ├── Sprite.h
│ └── Tile.h
└── mariobros-clock.ino

　　有了這種結(jié)構(gòu)，就可以組裝看起來像所附圖像的時(shí)鐘?；旧衔覀冇徐o態(tài)物體的風(fēng)景。我們有兩個(gè)元素，馬里奧和積木。馬里奧每分鐘跳躍一次并擊中積木，事件順序如下：

　　1) mario.jump() ? ? ? ? ? ? ?// changes the sprite and starts the jump animation

2) mario.collidesWith(block) // if collision is detected, mario reverses the movement and starts to fall,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// the blocks starts an upward movement already with the new time set
3) Block reaches the ascent limit and starts to fall until it reaches the starting position.
4) Mario hits the ground and returns to the initial state

　　第 5 步：IDE 設(shè)置

　　在運(yùn)行之前需要安裝一些庫，所有這些都可以從 Arduino Library Manager 安裝。

　　ESP32-HUB75-MatrixPanel-I2S-DMA：搜索“ESP32 HUB75 MATRIX”

　　Adafruit GFX - 搜索“Adafruit GFX

　　FastLED - 搜索“FastLED”

　　Fabrice Weinberg 的NTPClient - 搜索“NTPClient”。

　　Adafruit BusIO - 只需搜索相同的名稱

　　Michael Margolis 的時(shí)間- 搜索“timelib”。

　　WiFi Manager by tzapu - 一起搜索“wifimanager”

　　ezTime - 搜索同名

　　安裝所有庫并選擇正確的板后，只需上傳它，它應(yīng)該可以工作。之后，按照固件部分提供的說明配置 wifi。

　　第 6 步：3D 打印

　　為了讓掛鐘更容易掛在墻上，我在 TinkerCAD 上創(chuàng)建了一個(gè)簡單的外殼。說實(shí)話，3D建模不是我的強(qiáng)項(xiàng)，但效果很好。只是一個(gè)建議，這個(gè)案例是在我家里的顯示器中建模的。不知道會(huì)不會(huì)兼容所有的顯示器型號，孔位可能不一樣。我喜歡這個(gè)案例，因?yàn)樗菀撞僮黠@示器。

　　第 7 步：改進(jìn)計(jì)劃

　　創(chuàng)建通知小部件并在手表上顯示它們，它們可以在網(wǎng)絡(luò)應(yīng)用程序本身中進(jìn)行配置

　　將 MQTT 集成到手表中，以便您可以從任何地方接收這些通知

閱讀全文