手册 · 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 不一定能完美画出你的意图,但你可以透过跟它说同一种语言的接口让它看见你的意图。