像素模式
另外提供單幀的像素畫模式,支援自由長寬的畫布選擇、提升顏色數量上限、特化的圖表輸出模式,專為拼豆或織圖設計。
動畫為 Tauri 專屬像素畫兩個版本都有;裝置動畫(燒進 Clawdmeter 那種)是 Tauri(付費版)專屬,免費下載版只提供像素畫。
編輯模式
繪製、預覽、影格、顏色、匯出匯入。把滑鼠移到下方任一項,對應的區塊會在圖上亮起來。
顏色跟影格是最常交錯使用的兩件事,所以它們相鄰;實機預覽釘在左欄不收合,因為調影格時你隨時要看它。
四支工具,兩個動作,一個開關
繪製、擦拭、選取、取色等基礎設施,鏡像工具方便複製相對的另一半。洋蔥皮讓你看得出與上一格的動作差異。
✏畫筆預設
點一格、或按著拖過去,填上目前選取的顏色。
▱橡皮擦
把格子清成透明——也就是 0 號索引。透明在裝置上等於「不點亮」,不是「畫成黑色」。
⬚選取
框一塊出來,可以搬、可以翻、可以複製到別的影格。
選取中時方向鍵是推一格;沒有選取時方向鍵才是切換影格——同一組鍵,看你手上有沒有東西。
◍滴管
點一格,取出它的顏色索引。點到空格取到的是透明。
⇋左右翻 / 上下翻
翻的是選取範圍;沒有選取的時候,翻的是整張畫布。
這兩顆不是工具是動作——按下去就發生一次,不會停在「選中」狀態。
◨洋蔥皮預設開
把前一格淡淡地墊在目前這格底下,讓你知道上一格的手停在哪裡。第一格墊的是最後一格——因為動畫是循環的,第一格的「前一格」本來就是最後一格。
只有畫布會畫洋蔥皮。實機預覽刻意不畫:那裡要呈現的是裝置真正會亮的樣子。
影格與毫秒
右欄上半是影格列。每一格都有自己的停留毫秒——不是整支動畫共用一個速度,是逐格給值。想讓某一格多停半拍,就只改那一格。
- + 在目前這格之後插入一張空白格。
- ⧉ 在目前這格之後插入一份複本——微調式的動畫多半是這樣長出來的。
- 🗑 刪除目前這格。只剩一格時停用:一支動畫不能沒有影格。
- ← / → 與前一格/後一格交換位置。到邊界會自動停用。
沒有選取範圍的時候,鍵盤 ← → 直接切換影格——這是判斷動作讀不讀得出來最快的方法:來回按,看它動起來像不像。
顏色:36 個名額,256 個候選
「這支動畫的顏色」是這支動畫實際用到的色票,上限 36 色。這個數字不是設計偏好,是裝置韌體的調色盤大小——超過的部分在那邊沒有位置可放,所以編輯器在這裡就擋住。
下方的「選色」是內建的 256 色盤:16 階灰,加上 24 個色相 × 十個變體(五濁五鮮,各五階明度)。明度刻意不取到兩端——太暗的在純黑面板上等於隱形,而純白已經在灰階列裡了。
+加入
把這個顏色加進「這支動畫的顏色」並選取它。已經在用的色點下去就是直接選取,不會重複佔一個名額。
⇄取代
兩步的模式,從哪一頭開始都可以:色碼框裡已經有新顏色,就先按「取代」,再點要被換掉的舊色——畫布上的格子或色票列都行;什麼都還沒挑,就先選中要換掉的舊色票,再按「取代」,然後從色盤、漸層或直接輸入色碼給它新的顏色。
整張圖裡用到那個顏色的格子會一起變。名額滿了、或想整體換個色調的時候用這個。中途反悔,按 Esc 就取消。
0 號是透明,不能被換成顏色。
⚠️ 裝置面板是純黑。編輯時在白色介面上看起來剛好的深色,貼到裝置上會直接消失——所以整支動畫請往亮的那半邊挑。
支援的畫布規格
裝置動畫目前支援 20×20、40×40、60×60 三種尺寸,以開源裝置韌體支援的尺寸規格為主。拼豆、織圖那類不進裝置的用途,走的是另一種文件——像素畫,格數自己打。
實機預覽與 20 秒動畫限制
同一支動畫在裝置上會出現在兩個位置,所以這裡同時給你兩個動畫預覽大小:
- 全螢幕 splash——開機或待機時佔滿整片面板。
- 角落徽章——縮在畫面左上角的小圖示也可以讓它動起來。40×40 的動畫在這裡每格只有 2 px,細節會整個糊掉。畫的時候就看得到,不必等燒進去才發現。
預覽所見即裝置所得。
讀數怎麼讀
裝置輪播每支動畫的時間是固定的 20 秒。編輯器會把「每格毫秒 × 影格數」換算成 20 秒裡能跑幾輪,然後告訴你會不會被切斷。上面那張圖是兩格、每格 125 ms,一輪 250 ms,20 秒剛好 80 輪——所以它顯示的是下面的第一種狀態。
會不會被切斷不是對錯,是取捨。有些動畫切在中間也無所謂(例如下雨的場景),有些切了就毀了(例如放到一半的煙火)——所以編輯器只告訴你事實,不替你決定。
像素畫:拼豆與織圖
前面整章講的是裝置動畫——白名單尺寸、36 色、20 秒插槽,每一道界限都是裝置韌體能力的副本。但像素圖不只有那一種用途:拼豆、十字繡、織圖要的是一張圖,不進裝置、不需要動,格數由紙張跟材料決定。
所以像素模式有第二種文件:像素畫。從工具列「新開畫布」的預設選單選「自由像素圖(自訂格數)」,寬高各自打字,長方形也可以。它跟裝置動畫共用同一個編輯器、同一套色票與工具,但界限換了一組——因為它不承諾要進裝置。
同一個編輯器,少了一整排東西:沒有影格列、沒有洋蔥皮、沒有實機預覽、沒有動畫名稱與分類。單張文件不需要它們,留著只會讓人以為自己漏設了什麼。
- 格數自訂——每邊 1 到 512 格,非正方形可以。50×80 的織圖就打 50×80。
- 顏色上限 255——不是 36。拼豆色號多,36 個名額不夠用。色盤仍是內建那 256 色;不夠用時點色盤下方的漸層區,自己取一個色進來。
- 底恆透明——沒有背景色這一列。空格就是空格,意思是「這一格不放豆子/不下針」。
- 畫中加減欄列——格紙右緣與下緣各有一組 + / −,邊畫邊改格數,左上角固定不動。長出來的格是空的、剪掉的那排直接消失,⌘Z 還原得回來。
- 行列標尺——格紙上緣與左緣印行列號,游標移到哪一格,該行該列就亮起來。數格子不必用手指。
- 底欄讀數——「W × H 格 · 已畫 N」常駐,畫一格就跳一次。
圖表輸出:印出來照著數的那一張
拼豆與織圖真正要的檔案不是螢幕上的圖,是一張印得出來、照著數格子的圖表。所以像素畫的存檔窗多一個「圖表」格式(裝置動畫沒有這個選項——它的分享出口是 GIF 與 JSON),按下去得到一張 PNG:
| 色票 | 色號 | 數量 | % |
|---|
- 格線與行列標尺——黑字,印在白紙上讀得清楚。
- 格內印色號序號——從 1 起,只給真的用到的顏色編號。序號的黑白由對比自動決定,不會出現印出來看不見的數字。
- 空白格留白——不印任何東西。
- 材料表——色票、序號、色號(hex)、格數、佔比。買豆子、配線的時候照這張表。
- 標題——存檔時填的檔名;空著就印預設的
VAS_pixel。 - 版面自動選——以 A4 為基準:寬大於高走橫式、上圖下資訊;高大於寬走直式、上圖下資訊;正方形則右圖左資訊。
「已畫 N 格」報的是實際有畫的格數,不含空白——那是你要準備的材料總量,不是紙的面積。
除了圖表,像素畫也存得出一般圖片:PNG/WebP/TIFF 是放大後的格子圖、空格保持透明,JPG 會鋪白底;倍率跟 GIF 共用同一組尺寸控制。單張文件存 GIF 得到的是一張不含格線的像素圖,不是動畫。
可機讀檔案介面:JSON
像素動畫在存檔可機讀格式是 JSON,不是圖片。貼上讀入現有動畫、複製把整支動畫丟進剪貼簿、存檔寫成檔案。讓你匯出匯入都方便。
◎動畫名稱必填
裝置靠名字找動畫,所以名稱必須唯一,存檔前空著會被擋下來。
但匯出不等於會出現。名字還得填進裝置韌體的分組清單裡,那支動畫才會被輪播到,所以請記得分組。
▤分類
Idle/Work/Dance/Expressions。這四個值是格式常數,四種語言介面下都顯示英文原文——因為裝置那邊吃的就是這幾個字。
匯入的檔案帶進清單外的分類時,編輯器會照原樣保留它再帶出去。原樣進、原樣出,優先於名單潔癖。
匯出的 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], … ] }, … ] }
AI 不一定能完美畫出你的意圖,但你可以透過跟他說同一種語言的介面讓他看見你的意圖。