マニュアル · 03 — Pixel Mode

ピクセルモード

同じエディターの、もうひとつの人機協作モード。注釈は言葉を画像の上に置くこと。ピクセルアニメーションは、一マスもない黒地から始めて、既存のアニメを取り込んで最適化したり、動くスクリプトを自分の手で描いたりします——そして機械可読な形式(JSON)で情報を無損失のまま AI に渡し、次の協作へ進めます。デバイスへ書き込むことも、AI にアニメーションの演出を引き継いでもらうこともできます。

さらに単一フレームのピクセル画モードもあります:縦横自由なキャンバス、引き上げた色数上限、そして専用の図案書き出し——アイロンビーズや編み図のために設計されています。

アニメーションは Tauri 専用ピクセル画は両方の版にあります。デバイスアニメーション(Clawdmeter に書き込むほう)は Tauri(有料版)専用で、無料版はピクセル画のみです。

編集モード

描画、プレビュー、フレーム、色、読み込みと書き出し。下のいずれかにマウスを乗せると、対応する領域が図の上で光ります。

VAS
実機プレビュー500 ms · 20 秒で 40.0 周
全画面スプラッシュのプレビュー
全画面スプラッシュ · 1 マス 6 px
隅のバッジのプレビュー
隅のバッジ · 1 マス 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 ファイルとして保存できます。

色とフレームは最も頻繁に行き来する二つなので、隣り合わせに置いています。実機プレビューを左カラムに固定して畳まないのは、フレームを調整するあいだ、いつでも見たいからです。

4 つのツール、2 つのアクション、1 つのスイッチ

描く、消す、選ぶ、色を採る——といった基礎に加え、反転ツールで対になるもう半分を手早く複製できます。オニオンスキンは、前のコマとの動きの差を見えるようにします。

ツール
ペン既定

1 マスをクリック、または押しながらドラッグして、現在選択している色で塗ります。

消しゴム

マスを透明に戻します——つまり 0 番のインデックスです。透明はデバイス上では「点灯しない」であって、「黒く塗る」ではありません。

選択

一塊を囲んで、移動・反転・別のフレームへコピーできます。

選択中は方向キーで1 マスずつ動かし、選択がないときの方向キーはフレームの切り替えになります——同じキーでも、手に何かを持っているかどうかで変わります。

スポイト

1 マスをクリックして、その色のインデックスを取り出します。空のマスをクリックすると透明を取ります。

アクション
左右反転 / 上下反転

反転するのは選択範囲です。選択がないときは、キャンバス全体を反転します。

この二つはツールではなくアクションです——押すと一度だけ実行され、「選択中」の状態にとどまりません。

スイッチ
オニオンスキン既定でオン

前のコマを薄く現在のコマの下に敷き、前のコマの手がどこで止まったかを分かるようにします。最初のコマの下に敷かれるのは最後のコマです——アニメは循環しているので、最初のコマの「前のコマ」はもともと最後のコマだからです。

オニオンスキンを描くのはキャンバスだけです。実機プレビューはあえて描きません。そこで見せるのは、デバイスが実際に点灯する姿だからです。

フレームとミリ秒

右カラムの上半分がフレーム列です。各コマにはそれぞれの表示時間(ミリ秒)があります——アニメ全体でひとつの速度を共有するのではなく、コマごとに値を与えます。あるコマだけ半拍長く止めたければ、そのコマだけを変えます。

  • 現在のコマの後ろに空白のコマを挿入します。
  • 現在のコマの後ろに複製を挿入します——微調整型のアニメは、たいていこうして育っていきます。
  • 🗑 現在のコマを削除します。残り 1 コマのときは無効:アニメにフレームがないわけにはいきません。
  • / 前のコマ/後ろのコマと位置を入れ替えます。端に達すると自動的に無効になります。

選択範囲がないときは、キーボードの でそのままフレームを切り替えます——動きが読み取れるかを判断する一番速い方法です。行ったり来たり押して、動いて見えるか確かめます。

色:36 の枠、256 の候補

「このアニメの色」は、このアニメが実際に使っている色見本で、上限 36 色です。この数字はデザインの好みではなく、デバイスファームウェアのパレットサイズです——超えた分はあちらに置く場所がないので、エディターはここで止めます。

下の「色を選ぶ」は内蔵の 256 色パレットです。16 段階のグレーに、24 の色相 × 10 のバリエーション(濁 5・鮮 5、それぞれ 5 段階の明度)。明度はあえて両端を取りません——暗すぎる色は真っ黒の画面では見えず、純白はすでにグレースケール列にあるからです。

追加 vs 置換
追加

この色を「このアニメの色」に追加して選択します。すでに使っている色はクリックするとそのまま選択され、枠を重複して占有しません。

置換

どちらの端からでも始められる2段階のモードです。カラーコード欄にすでに新しい色があるときは、まず「置換」を押してから、消したい色をクリック——キャンバスのマスでも色見本の列でも構いません。まだ何も選んでいないときは、先に古い色見本を選んでから「置換」を押し、パレット・グラデーション・カラーコードの直接入力のいずれかで新しい色を与えます。

画面全体でその色を使っているマスがまとめて変わります。枠が埋まったとき、または全体の色調を変えたいときに使います。途中でやめたくなったら Esc で取消。

0 番は透明で、色に置き換えることはできません。

⚠️ デバイスの画面は真っ黒です。編集中に白いインターフェース上でちょうど良く見える暗い色は、デバイスに載せると消えてしまいます——だからアニメ全体で、明るい側から色を選んでください。

対応するキャンバス仕様

デバイスアニメーションは今のところ 20×20/40×40/60×60 の 3 サイズ。オープンソースのデバイスファームウェアが対応するサイズに合わせています。ビーズや編み図のようにデバイスへ入らない用途は、もうひとつの文書種——ピクセル画を使い、マス数は自分で打ち込みます。

20×20 グリッド線20 × 201 マス最大マスが少なく、1 マスが大きい。バッジ、シンボル、ミニマルな表情に向きます——わずかなマスで一つのことを言い切ります。実機では全画面で 1 マス 12 px、バッジで 4 px。
40×40 グリッド線40 × 40よく使うディテールと作業量のバランス点。全画面スプラッシュのアニメは、たいていこのサイズで描かれ、1 マス 6 px、バッジで 2 px。
60×60 グリッド線60 × 601 マス最小マスが多く、1 マスが小さい。曲線やグラデーションも描けますが、一マスずつ埋めきるのに最も時間がかかります。

実機プレビューと 20 秒のアニメーション制限

同じアニメはデバイス上で二つの場所に現れるので、ここでは二つのプレビューサイズを同時に見せます:

  • 全画面スプラッシュ——起動時や待機時に画面いっぱいを占めます。
  • 隅のバッジ——画面左上に縮んだ小さなアイコンも、動かせます。40×40 のアニメはここでは 1 マスがわずか 2 px で、ディテールはすっかり潰れます。描いているときに見えるので、書き込んでから気づく必要はありません。

プレビューで見えるものが、そのままデバイスの結果です。

読み取り数値の見方

デバイスが各アニメをループする時間は 20 秒に固定されています。エディターは「1 コマのミリ秒 × コマ数」を、20 秒で何周できるかに換算し、切れてしまうかどうかを教えます。上の図は 2 コマ、1 コマ 125 ms、1 周 250 ms、20 秒でちょうど 80 周——なので、下の最初の状態を表示しています。

✓ スロットの境界でちょうど終わる1 周を走り切ってから次のアニメへ移るので、最もきれいに見えます。
⚠️ 実機では N コマ目で切れます(X% 超過)最後の 1 周が半分まで進んだところで切り替えられます。エディターは候補の時間を一組添えるので、クリックすれば調整できます。

切れるかどうかは正しさではなく、取捨です。途中で切れても構わないアニメもあれば(たとえば雨のシーン)、切れたら台無しになるものもあります(たとえば半ばまで上がった花火)——だからエディターは事実だけを伝え、あなたの代わりに決めません。

ピクセル画:ビーズと編み図

ここまでの章はすべてデバイスアニメーションの話——ホワイトリストのサイズ、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。この 4 つの値はフォーマット定数で、4 言語のインターフェースでも英語の原文のまま表示されます——デバイス側が受け取るのが、まさにこの語だからです。

読み込んだファイルが一覧外のカテゴリを持ち込んだときは、エディターはそれをそのまま保持して書き出します。そのまま入って、そのまま出す——これがリストの潔癖より優先されます。

書き出した JSON は、オープンソースのデバイスのアニメ形式に流し込めます——たとえば ESP32 上で動く Clawdmeter などのデスクトップ小型デバイスです。VAS 側で JSON ソースをコピーし、あちら側で貼り付けて AI に処理させるだけで、変換ツールは要りません。

ピクセル画は同じ出入口を通りますが、文書種は別です

ピクセル画の貼り付け/コピー/保存はデバイスアニメーションと同じ三つのボタンで、書き出されるのも JSON です——ただしファイルの先頭に固有の文書種マーカーとバージョンを持っています。だからエディターは手元のファイルがどちらの種かを一目で判別し、推測しません。保存したファイルはマスも色もそのまま読み戻せます:途中でやめて別のことをして、戻ってきて続けられます。

二つの種が取り違えられることはありません:ピクセル画のファイルをデバイスアニメーションのキャンバスに貼る(あるいはその逆)と、エディターは「これは別の種のファイルです、対応するキャンバスを開いてください」と声に出します。黙って飲み込んで崩れた画像にはなりません——誤判定の症状は静かなので、形から推測せず明示のマーカーで判別しています。

そして「JSON はただのテキスト」はピクセル画にも成り立ちます——次の節の AI との協作は、ビーズ図や編み図にもそのまま使えます。

AI と一緒に描く

ここがピクセルモードと他の章の最も違うところです:その保存データは、対話できるテキストなのです。

フレームは二次元配列で、各値は色のインデックス、0 は透明です。この構造は人にも読め、AI にも読めます——だからアニメ全体を AI に貼り付けて、「まばたきするように 3 コマ足して」と言い、返ってきた JSON をエディターに貼り戻せます。

// アニメ 1 本の骨組み
{ "name": "vas", "category": "Idle",
  "palette": ["transparent", "#F4ECE0", "#C471F5", "#4A9EFF"],
  "frames": [ { "hold": 125, "grid": [ [0,0,1,1,0,0], … ] }, … ] }
01口火を切る自分で 2〜3 コマ描いて、キャラクター・配色・リズムを決めます。真っ白な出だしでは AI も手伝えません。あなたが何を求めているかを見せる必要があります。
02コピー「コピー」を押すと、アニメ全体がクリップボードに入ります。
03AI に渡す貼り付けて、望みを伝えます——中割りを数コマ足す、色を 36 色に収める、左右対称の版を作る。
04貼り戻す「貼り付け」で読み込み、プレビューで動きを見ます。違えばもう一度言うだけ——どの周回も可逆です。

AI があなたの意図を完璧に描けるとは限りませんが、同じ言語を話すインターフェースを通じて、あなたの意図を見せることはできます。