LED Matrix Editor × Scratch 積木控制完整教學：從 HEX 轉十進位，打造 8×8 點陣動畫（超實用步驟與範例）

導言

8×8 LED 點陣是最經典也最親民的硬體學習素材。它小巧、便宜、觀察結果直觀，搭配 Arduino、micro:bit 或 mBot 都能快速上手。不過，只靠在板上逐點點亮來畫圖或做動畫，效率非常低，而且很容易出錯。於是，許多人希望先在瀏覽器裡畫好圖，再把結果轉成程式或積木指令貼到專案裡。這正是本文要解決的核心：如何把 LED Matrix Editor 網站的匯出內容，毫不費力地轉換成 Scratch／mBlock 的「行總和／列總和」積木，並在實體點陣上還原同樣的圖案與動畫。

接下來你會看到：工具概覽、兩個積木的運作邏輯、HEX 與二進位的關係，以及一套可複製的轉換流程。文中提供兩個完整演練：一個是具體的 HEX 字串（7e1818181c181800），另一個是「心型跳動動畫」。讀完後，你就能把網站裡的每一幀圖案，都穩穩地轉成積木輸入，從靜態圖到流暢動畫一次搞定。

LED Matrix Editor 是什麼？核心功能與介面導覽

LED Matrix Editor 是一個免費、免安裝的線上 8×8 點陣編輯器。你可以直接在 8×8 網格上繪製像素，新增多幀、調整順序、播放預覽，完成後按一下就能匯出 C/C++ 用的陣列（支援 byte[8] 或 uint64_t，也常見以 HEX 呈現每列的位元組）。

這個網站最大的價值在於「可視化」。對初學者來說，眼睛所見即所得；對教學者來說，能專注在圖案與節奏設計，最後再把資料帶到目標平台。

Scratch／mBlock 積木介紹：行總和與列總和怎麼用

在 Scratch 或 mBlock 的某些擴充（如對 MAX7219 或自家 LED 模組的擴展）裡，常見兩個關鍵積木：

運作方式：輸入的 V 是 0～255 的十進位數字。控制器會把它轉為 8 位二進位，例如 170 變成 10101010₂，再把每一位對應到該行或該列的 8 顆 LED 是否點亮。於是只要 8 次設定（0～7 行），就能畫出一幅完整圖案；同理，若以列為主，也是一口氣更新 8 列即可。

這種「一次設定 8 顆」的概念，正好和網站匯出的每列位元組一一對應，這就是兩者能無縫轉換的關鍵。

HEX 是什麼？為什麼 8×8 點陣最適合用十六進位

HEX（十六進位）用 0–9 與 A–F 表達數字，其中 A～F 代表 10～15。它的優勢是：每一個十六進位位元（1 個 HEX 字元）剛好對應 4 個二進位位元（bits）。而一列 8 顆 LED 正好需要 8 個 bits 來描述，因此用兩個 HEX 字元就能寫出一列的亮滅情形（範圍 00～FF）。

因為可讀性與濃縮度都很高，網站自然會以 HEX 顯示每列資料；同時，Scratch／mBlock 雖習慣用十進位，但轉換起來非常簡單，只要把 0xNN 轉成十進位 0～255 即可。

轉換流程總覽：從網站匯出 → 轉十進位 → 進積木

1. 在網站完成設計：畫好單幀或多幀，並確認預覽效果。
2. 匯出程式碼：複製每幀的 8 個 HEX（對應 8 列）。
3. HEX → 十進位：把每個 0xNN 轉成十進位（0～255）。
4. 貼入積木：依列（或行）順序，將十進位值填入「第 N 行／列總和為 V」。
5. 多幀動畫：依序貼 8 行 × 幀數的設定，中間加入等待（例如 0.1～0.3 秒）形成動畫。

實作演練（一）：以 HEX 7e1818181c181800 為例

這是一個常見的 8×8 圖案字串，依序代表 8 列資料。我們先將它切成兩位一組：

7e 18 18 18 1c 18 18 00

接著轉成十進位，並標出列編號（0 在上、7 在下）：

將上述十進位值依序填入積木（以「行」為例）：

設定 LED 矩陣的第 0 行總和為 126
設定 LED 矩陣的第 1 行總和為 24
設定 LED 矩陣的第 2 行總和為 24
設定 LED 矩陣的第 3 行總和為 24
設定 LED 矩陣的第 4 行總和為 28
設定 LED 矩陣的第 5 行總和為 24
設定 LED 矩陣的第 6 行總和為 24
設定 LED 矩陣的第 7 行總和為 0

若你的積木庫是以「列」為主，就把「行」兩字改成「列」即可，數值不變。若顯示方向顛倒，請在網站端旋轉 90° 或 180° 後再匯出，或在程式端做矩陣轉置（例如把第 i 列、位元 j 轉成第 j 行、位元 i）。

實作演練（二）：心型跳動動畫（兩幀切換）

在網站畫出兩幀心型，假設匯出結果如下（每幀 8 列）：

// 幀 1（大心）
{0x18,0x3C,0x7E,0xFF,0xFF,0x7E,0x3C,0x18}
// 幀 2（小心）
{0x00,0x18,0x3C,0x7E,0x7E,0x3C,0x18,0x00}

轉成十進位陣列：

// 幀 1 → [24, 60, 126, 255, 255, 126, 60, 24]
// 幀 2 → [ 0, 24,  60, 126, 126,  60, 24,  0]

在 Scratch／mBlock 中寫法示意（以行為例）：

重複無限次：
  （套用幀 1 的 8 列）
  設定第0行總和=24
  設定第1行總和=60
  設定第2行總和=126
  設定第3行總和=255
  設定第4行總和=255
  設定第5行總和=126
  設定第6行總和=60
  設定第7行總和=24
  等待 0.2 秒
  （套用幀 2 的 8 列）
  設定第0行總和=0
  設定第1行總和=24
  設定第2行總和=60
  設定第3行總和=126
  設定第4行總和=126
  設定第5行總和=60
  設定第6行總和=24
  設定第7行總和=0
  等待 0.2 秒

只要將等待時間縮短或延長，就能調整跳動速度。若要更平滑的動畫，可增加幀數並插入過渡圖案。

常見錯誤與除錯清單

• 圖案左右顛倒或上下顛倒：網站與硬體的列／行方向不同。解法：在網站端旋轉或在程式端做矩陣轉置。
• 亮的位置不對：HEX 轉十進位時抄錯，或把第 i 列貼到第 j 列。解法：建立表格逐列核對。
• 動畫閃爍或卡頓：等待時間過短，或每幀重複繪製多次。解法：調整延遲、避免不必要的重複設定。
• 積木數值超出範圍：每列應為 0～255。若出現 256 以上，表示轉換或拷貝出錯。
• 硬體接線問題：若完全無顯示，請檢查 VCC、GND、DIN、CS、CLK 連線與驅動庫初始化。

進階技巧：批次轉換、RGB 通道、即時互動

1）批次轉換（以 JavaScript 為例）

const hexArray = ["7e","18","18","18","1c","18","18","00"]; // 8 列
hexArray.forEach((h, i) => {
  const dec = parseInt(h, 16);
  console.log(`設定LED矩陣的第 ${i} 行總和為 ${dec}`);
});

若有多幀，可用二維陣列包起來迭代輸出；或將輸出串接成可直接貼入積木的文字。

2）RGB 點陣的三通道思維

若你的模組是 RGB 8×8，概念是一樣的，只是需要三組資料（R/G/B）。你可以把每一幀拆成三個 8 列陣列，分別寫入紅、綠、藍通道，即可組成彩色畫面。若要做漸層或混色，調整各通道的圖案疊合即可。

3）即時互動與資料串流

進一步的玩法是將 LED Matrix Editor 的原始碼 fork 後，加入 postMessage 或 WebSocket，把在瀏覽器中編輯的每一幀即時送到電腦本地的接收程式，再由 Scratch 擴充模組或序列埠橋接轉給硬體。這需要前端與通訊的經驗，但一旦建好，就能在課堂上做「所見即所得 → 立刻上板」的示範。

FAQ

檢查清單

• 已在網站確認每幀圖案與播放節奏？
• 已正確抄錄 8 列 HEX，並逐列轉成 0～255 的十進位？
• 積木的「行／列」方向與網站一致？必要時已旋轉或轉置？
• 多幀之間有加入合適的等待時間，動畫不閃爍也不過慢？
• 硬體接線、驅動庫初始化與供電穩定？
• 若是 RGB 模組：三通道資料皆準備妥當並同步更新？

結語

只要掌握「網站可視化編輯 → HEX 資料 → 十進位 → 行／列積木」這條流水線，你就能無痛把腦中的圖案快速落地到實體點陣。LED Matrix Editor 讓設計更自由，Scratch／mBlock 讓實作更友善；兩者搭配，從課堂示範到個人創作都能受益。建議將本文的表格與步驟複製成你的專用模板，之後做任何圖案與動畫都能在幾分鐘內完成。現在就開啟編輯器，畫出你的第一個圖案吧！