手冊 · 03 — Pixel Mode

像素模式

同一個編輯器,另一種人機協作模式。標註是把話說在圖上;像素動畫是從一格都沒有的黑底開始,匯入現有的動畫進行優化或親手畫出一段會動的腳本——然後透過可機讀格式(JSON)把資訊無損送給 AI 進行下一步協作,可以燒錄進裝置,也可以讓他接手動畫特效。

另外提供單幀的像素畫模式,支援自由長寬的畫布選擇、提升顏色數量上限、特化的圖表輸出模式,專為拼豆或織圖設計。

動畫為 Tauri 專屬像素畫兩個版本都有;裝置動畫(燒進 Clawdmeter 那種)是 Tauri(付費版)專屬,免費下載版只提供像素畫。

編輯模式

繪製、預覽、影格、顏色、匯出匯入。把滑鼠移到下方任一項,對應的區塊會在圖上亮起來。

VAS
實機預覽500 ms · 20 秒內 40.0 輪
全螢幕 splash 預覽
全螢幕 splash · 每格 6 px
角落徽章預覽
角落徽章 · 每格 2 px
✓ 剛好在插槽邊界結束
JSON 檔處理
動畫資訊
動畫名稱
vas
名稱要唯一,之後要填進 splash.cpp 才會顯示
分類
Idle
40×40 像素畫布
影格
1影格 1
125
2影格 2
125
3影格 3
125
4影格 4
125
這支動畫的顏色7 / 36
1105 144 127 45 40 51 88
⚠️ 顏色要亮 — 裝置面板是純黑,暗色在上面等於隱形
選色 內建 256 色盤
#RRGGBB
1500% 40 × 40 格
左欄 · 實機預覽與匯出匯入裝置上實際播放起來的樣子、播放、預設 20 秒動畫可以輪播的次數,以及 JSON 的貼上/複製/存檔與動畫資訊。
中間 · 畫布純黑底加格線,一格一格畫。格線與洋蔥皮只在這裡作為輔助參照,不出現在實機輸出。
右欄 · 影格與顏色影格列、每格毫秒以 20 ms 為間距進行設定、每支動畫的顏色上限為 36,以及 256 色的內建選色盤。
底欄 · 顯示比例與儲存顯示目前縮放比例、格子尺寸,「完成並儲存」可選擇儲存單一影格為圖片或 JSON 檔。

顏色跟影格是最常交錯使用的兩件事,所以它們相鄰;實機預覽釘在左欄不收合,因為調影格時你隨時要看它。

四支工具,兩個動作,一個開關

繪製、擦拭、選取、取色等基礎設施,鏡像工具方便複製相對的另一半。洋蔥皮讓你看得出與上一格的動作差異。

工具
畫筆預設

點一格、或按著拖過去,填上目前選取的顏色。

橡皮擦

把格子清成透明——也就是 0 號索引。透明在裝置上等於「不點亮」,不是「畫成黑色」。

選取

框一塊出來,可以搬、可以翻、可以複製到別的影格。

選取中時方向鍵是推一格;沒有選取時方向鍵才是切換影格——同一組鍵,看你手上有沒有東西。

滴管

點一格,取出它的顏色索引。點到空格取到的是透明。

動作
左右翻 / 上下翻

翻的是選取範圍;沒有選取的時候,翻的是整張畫布。

這兩顆不是工具是動作——按下去就發生一次,不會停在「選中」狀態。

開關
洋蔥皮預設開

前一格淡淡地墊在目前這格底下,讓你知道上一格的手停在哪裡。第一格墊的是最後一格——因為動畫是循環的,第一格的「前一格」本來就是最後一格。

只有畫布會畫洋蔥皮。實機預覽刻意不畫:那裡要呈現的是裝置真正會亮的樣子。

影格與毫秒

右欄上半是影格列。每一格都有自己的停留毫秒——不是整支動畫共用一個速度,是逐格給值。想讓某一格多停半拍,就只改那一格。

  • 在目前這格之後插入一張空白格。
  • 在目前這格之後插入一份複本——微調式的動畫多半是這樣長出來的。
  • 🗑 刪除目前這格。只剩一格時停用:一支動畫不能沒有影格。
  • / 與前一格/後一格交換位置。到邊界會自動停用。

沒有選取範圍的時候,鍵盤 直接切換影格——這是判斷動作讀不讀得出來最快的方法:來回按,看它動起來像不像。

顏色:36 個名額,256 個候選

「這支動畫的顏色」是這支動畫實際用到的色票,上限 36 色。這個數字不是設計偏好,是裝置韌體的調色盤大小——超過的部分在那邊沒有位置可放,所以編輯器在這裡就擋住。

下方的「選色」是內建的 256 色盤:16 階灰,加上 24 個色相 × 十個變體(五濁五鮮,各五階明度)。明度刻意不取到兩端——太暗的在純黑面板上等於隱形,而純白已經在灰階列裡了。

加入 vs 取代
加入

把這個顏色加進「這支動畫的顏色」並選取它。已經在用的色點下去就是直接選取,不會重複佔一個名額。

取代

兩步的模式,從哪一頭開始都可以:色碼框裡已經有新顏色,就先按「取代」,再點要被換掉的舊色——畫布上的格子或色票列都行;什麼都還沒挑,就先選中要換掉的舊色票,再按「取代」,然後從色盤、漸層或直接輸入色碼給它新的顏色。

整張圖裡用到那個顏色的格子會一起變。名額滿了、或想整體換個色調的時候用這個。中途反悔,按 Esc 就取消。

0 號是透明,不能被換成顏色。

⚠️ 裝置面板是純黑。編輯時在白色介面上看起來剛好的深色,貼到裝置上會直接消失——所以整支動畫請往亮的那半邊挑。

支援的畫布規格

裝置動畫目前支援 20×20、40×40、60×60 三種尺寸,以開源裝置韌體支援的尺寸規格為主。拼豆、織圖那類不進裝置的用途,走的是另一種文件——像素畫,格數自己打。

20×20 格線20 × 20每格最大格子少、每格大。適合徽章、符號、極簡表情——少少幾格就要說完一件事。實機上全螢幕每格 12 px、徽章 4 px。
40×40 格線40 × 40常用細節與工作量的平衡點。全螢幕 splash 動畫多半畫在這個尺寸,每格 6 px、徽章 2 px。
60×60 格線60 × 60每格最小格子多、每格小。畫得下曲線與漸層,但一格一格填完也最花時間。

實機預覽與 20 秒動畫限制

同一支動畫在裝置上會出現在兩個位置,所以這裡同時給你兩個動畫預覽大小:

  • 全螢幕 splash——開機或待機時佔滿整片面板。
  • 角落徽章——縮在畫面左上角的小圖示也可以讓它動起來。40×40 的動畫在這裡每格只有 2 px,細節會整個糊掉。畫的時候就看得到,不必等燒進去才發現。

預覽所見即裝置所得。

讀數怎麼讀

裝置輪播每支動畫的時間是固定的 20 秒。編輯器會把「每格毫秒 × 影格數」換算成 20 秒裡能跑幾輪,然後告訴你會不會被切斷。上面那張圖是兩格、每格 125 ms,一輪 250 ms,20 秒剛好 80 輪——所以它顯示的是下面的第一種狀態。

✓ 剛好在插槽邊界結束整輪跑完才換下一支,看起來最乾淨。
⚠️ 會在第 N 格切斷(多出 X%)最後一輪跑到一半就被換掉。編輯器會附上一組候補時間,按一下就調好。

會不會被切斷不是對錯,是取捨。有些動畫切在中間也無所謂(例如下雨的場景),有些切了就毀了(例如放到一半的煙火)——所以編輯器只告訴你事實,不替你決定。

像素畫:拼豆與織圖

前面整章講的是裝置動畫——白名單尺寸、36 色、20 秒插槽,每一道界限都是裝置韌體能力的副本。但像素圖不只有那一種用途:拼豆、十字繡、織圖要的是一張圖,不進裝置、不需要動,格數由紙張跟材料決定。

所以像素模式有第二種文件:像素畫。從工具列「新開畫布」的預設選單選「自由像素圖(自訂格數)」,寬高各自打字,長方形也可以。它跟裝置動畫共用同一個編輯器、同一套色票與工具,但界限換了一組——因為它不承諾要進裝置。

VAS
這張圖的顏色4 / 255
選色 內建 256 色盤
色盤不夠用時,點漸層取自己的顏色
#RRGGBB
JSON 檔處理
×33 / 格

同一個編輯器,少了一整排東西:沒有影格列、沒有洋蔥皮、沒有實機預覽、沒有動畫名稱與分類。單張文件不需要它們,留著只會讓人以為自己漏設了什麼。

  • 格數自訂——每邊 1 到 512 格,非正方形可以。50×80 的織圖就打 50×80。
  • 顏色上限 255——不是 36。拼豆色號多,36 個名額不夠用。色盤仍是內建那 256 色;不夠用時點色盤下方的漸層區,自己取一個色進來。
  • 底恆透明——沒有背景色這一列。空格就是空格,意思是「這一格不放豆子/不下針」。
  • 畫中加減欄列——格紙右緣與下緣各有一組 / ,邊畫邊改格數,左上角固定不動。長出來的格是空的、剪掉的那排直接消失,⌘Z 還原得回來。
  • 行列標尺——格紙上緣與左緣印行列號,游標移到哪一格,該行該列就亮起來。數格子不必用手指。
  • 底欄讀數——「W × H 格 · 已畫 N」常駐,畫一格就跳一次。

圖表輸出:印出來照著數的那一張

拼豆與織圖真正要的檔案不是螢幕上的圖,是一張印得出來、照著數格子的圖表。所以像素畫的存檔窗多一個「圖表」格式(裝置動畫沒有這個選項——它的分享出口是 GIF 與 JSON),按下去得到一張 PNG:

VAS_pixel
材料
色票色號數量%
  • 格線與行列標尺——黑字,印在白紙上讀得清楚。
  • 格內印色號序號——從 1 起,只給真的用到的顏色編號。序號的黑白由對比自動決定,不會出現印出來看不見的數字。
  • 空白格留白——不印任何東西。
  • 材料表——色票、序號、色號(hex)、格數、佔比。買豆子、配線的時候照這張表。
  • 標題——存檔時填的檔名;空著就印預設的 VAS_pixel
  • 版面自動選——以 A4 為基準:寬大於高走橫式、上圖下資訊;高大於寬走直式、上圖下資訊;正方形則右圖左資訊。

「已畫 N 格」報的是實際有畫的格數,不含空白——那是你要準備的材料總量,不是紙的面積。

除了圖表,像素畫也存得出一般圖片:PNG/WebP/TIFF 是放大後的格子圖、空格保持透明,JPG 會鋪白底;倍率跟 GIF 共用同一組尺寸控制。單張文件存 GIF 得到的是一張不含格線的像素圖,不是動畫。

可機讀檔案介面:JSON

像素動畫在存檔可機讀格式是 JSON,不是圖片。貼上讀入現有動畫、複製把整支動畫丟進剪貼簿、存檔寫成檔案。讓你匯出匯入都方便。

動畫資訊
動畫名稱必填

裝置靠名字找動畫,所以名稱必須唯一,存檔前空著會被擋下來。

但匯出不等於會出現。名字還得填進裝置韌體的分組清單裡,那支動畫才會被輪播到,所以請記得分組。

分類

IdleWorkDanceExpressions。這四個值是格式常數,四種語言介面下都顯示英文原文——因為裝置那邊吃的就是這幾個字。

匯入的檔案帶進清單外的分類時,編輯器會照原樣保留它再帶出去。原樣進、原樣出,優先於名單潔癖。

匯出的 JSON 餵得進開源裝置的動畫格式——例如 Clawdmeter 等跑在 ESP32 上的桌面小裝置。VAS 這邊複製 JSON 源碼,那邊貼上給 AI 處理,不需要轉檔工具。

像素畫走同一套出入口,但是另一種檔種

像素畫的貼上/複製/存檔跟裝置動畫是同三顆按鈕,存出來的也是 JSON——但它的檔案開頭帶著自己的檔種標記與版本,所以編輯器一眼認得出手上這份是哪一種文件,不用猜。存出來的檔讀回去是逐格逐色相同:畫到一半去做別的事,回來接著畫。

兩種檔種不會互相誤吃:把像素畫的檔貼進裝置動畫的畫布(或反過來),編輯器會出聲說這是另一種檔、請先開對應的畫布——不會靜默吞下去變成一張走樣的圖。誤判的症狀是安靜的,所以這裡靠明確標記分辨,不靠猜形狀。

而「JSON 是一段文字」這件事對像素畫同樣成立——所以下一節那套跟 AI 協作的做法,拼豆圖與織圖也用得上。

跟 AI 一起畫

這是像素模式跟其他章節最不一樣的地方:它的存檔是一段可以對話的文字。

影格是一個二維陣列,每個值是顏色索引,0 是透明。這種結構人讀得懂,AI 也讀得懂——所以你可以把整支動畫貼給 AI,說「再多加三格讓它眨個眼」,把回來的 JSON 貼回編輯器。

// 一支動畫的骨架
{ "name": "vas", "category": "Idle",
  "palette": ["transparent", "#F4ECE0", "#C471F5", "#4A9EFF"],
  "frames": [ { "hold": 125, "grid": [ [0,0,1,1,0,0], … ] }, … ] }
01起個頭自己畫兩三格,把角色、配色、節奏定下來。空白的開頭 AI 幫不上忙,它需要看到你要什麼。
02複製按「複製」,整支動畫進剪貼簿。
03交給 AI貼給它,說你要什麼——補幾格中間動作、把顏色收進 36 色、做一個左右對稱的版本。
04貼回來按「貼上」匯入,在預覽裡看它動。不對就再說一次——每一輪都是可逆的。

AI 不一定能完美畫出你的意圖,但你可以透過跟他說同一種語言的介面讓他看見你的意圖。