Pixel Canvas

キャンバスサイズ連動

ジェネレータノードとして、新規作成時に width / height がプロジェクトのキャンバスサイズ（_canvasWidth / _canvasHeight）に自動バインドされます。

インスペクターの 🔗 ボタンからバインドの解除・再登録ができます。

描画エディタ

インスペクターの「✏️ ドット絵を編集」ボタンを押すと、EditorShell ベースのポップアップエディタが開きます。

ツール

操作

• マウスホイール: ズーム（1〜32倍）
• Alt+ドラッグ: パン
• 選択ツール: 矩形 / 投げ縄 / ポリゴンを ▼ で切替
• 選択中の表示: どのツール中でも 範囲選択中 バッジと 選択解除 ボタンが表示される
• 図形ツール: 矩形 / 円を ▼ で切替
• ペン / 消しゴム: ツールバーでブラシサイズを 1〜16 に変更可能
• 主色 / 副色: ツールバーの2色スウォッチで管理。入れ替えボタンで交換可能
• インデックスカラーモード: # ボタンを ON にすると、描画色はローカルパレットの色として扱われる
  • 通常モードから切り替える時、キャンバス内にパレット外の不透明色があれば、追加色数を確認してからローカルパレットへ自動追加する
  • 切り替え時は、透明色スウォッチをローカルパレットの末尾に追加する。透明色は通常の色番号ではなく、透明専用の扱い
  • 主色 / 副色を直接変更した時、その色がパレットに無ければ自動で末尾へ追加する
  • スポイトで拾った色がパレットに無い時も、自動で末尾へ追加する
  • パレット色をダブルクリックして色を変えると、キャンバス内の同じ色のピクセルもまとめて置き換わる
  • 使われているパレット色の削除は防止される。消したい場合は、先にキャンバス側を消すか別色へ置き換える
  • palette 入力の Follow 中に新しい色を追加する必要が出た場合は、入力パレットをローカルへ取り込んだ状態に切り替えてから追加する
• ローカルパレット: 左サイドバーの内蔵パレットを参照し、左クリックで主色、右クリックで副色へセット
• 共通パレット取り込み: ツール共通 / プロジェクト共通パレットを選択して、ローカルパレットへコピーできる
  • 取り込み後は共通パレットとは同期しない。Pixel Canvas 内で色調整しても、元の共通パレットは自動変更されない
  • 共通パレットへ反映したい場合は、パレット編集ノードなどから明示的に書き戻す
• 外部パレット連携: palette 入力がつながっている時は L(Local) / F(Follow) / I(Import) が使える
  • Local: PixelCanvas 内蔵パレットを使う
  • Follow: 入力パレットをそのまま editor のパレットとして使う
  • Import: 入力パレットをローカルパレットへコピーして以後は独立編集する
    • 実行前に、現在のローカルパレットが置き換えられる確認ダイアログを出す
• ローカルパレット編集: + で現在色を追加、ペンアイコンで選択色を上書き、- で選択色を削除
• パレットファイル読込/保存: ローカルパレットは file import / export に対応
  • first wave の対応形式は GPL / ASE / PAL (JASC) / TXT-HEX
  • file import は現在のローカルパレットを置き換える前に確認ダイアログを出す
• ローカルパレット色編集: パレット色をダブルクリックすると、共通カラーピッカーでその場編集
• サイドバー: 左のパレットと右のレイヤーはどちらも折りたたみ可能。境界をドラッグして幅も変更可能
• 図形ツール + Shift: 縦横比固定で確定（四角 / 円）
• 円モードの中心作成: ツールバーのコンパスボタンで、開始点を中心にして円を作成
• 図形の色: 塗りのみ / 線のみ / 両方 を切替。両方 の時は塗りが主色、アウトラインが副色
• 図形アウトラインのPP: 円や曲線輪郭で PP を ON にすると、アウトラインの L 字重なりを補正
• ペンのピクセルパーフェクト: 1px ブラシ時に、ストローク中の L 字重なりを検出して角ドットを戻す
• Shift + クリック（ペン / 消しゴム）: 直前の描画点から現在位置まで直線を引く
• Shift + Ctrl + クリック（ペン / 消しゴム）: 直線を 45° / 2:1 / 3:1 系のきれいな比率へスナップして引く
• 選択範囲内ドラッグ: 選択中ピクセルを移動
• 選択中の変形ボタン: 左右反転 / 上下反転 / 2倍拡大 / 1/2縮小 / 選択解除
• 選択の可視レイヤー操作: ON の時、選択範囲の移動 / 反転 / 拡大縮小を可視レイヤー全体へ一括適用
• 塗りつぶし境界モード: 現在レイヤーだけを境界に使うか、可視レイヤーの合成結果を境界に使うかを切替
• ESC: エディタを閉じる

レイヤー

• 右側パネルで layer / folder tree を管理
• + で新規レイヤー追加
• フォルダ追加ボタンでフォルダを作成
• レイヤーやフォルダを ダブルクリック で名前変更
• クリックで active layer 切替
• Ctrl / Cmd を押しながらクリックで複数選択
• 複数選択した状態でドラッグしてまとめて並び替え
• フォルダの上へドロップして、フォルダ内へ移動
• フォルダ単位の展開 / 折りたたみ
• フォルダ単位の表示 / 非表示切替
• 削除（最低 1 レイヤーは保持）
• 描画・塗りつぶし・消しゴムは active layer のみに適用
• 選択範囲がある時は、描画・塗りつぶし・消しゴムはその範囲内だけに適用
• 選択ツールでは 可視レイヤー操作 を ON にすると、選択範囲の移動 / 変形が visible layer 全体を対象にする
• 塗りつぶしツールでは 境界モード を 可視 にすると、visible layer の合成結果を境界判定に使い、実際の描き込みは active layer だけへ行う

フレーム

• 下部の frame strip でフレームを管理
• + でフレーム追加
• 複製ボタンで現在フレームを複製
• - で現在フレームを削除（最低 1 フレームは保持）
• サムネイルをクリックして active frame を切替
• 再生ボタンで全フレームをループ再生
• FPS は frame strip 右側でグローバルに設定
• output は現在フレームだけを返し、spritesheet は全フレームをまとめて返す
• SpriteSheetPlayback や SpriteSheetToAseprite にそのままつなげる

技術詳細

• 現在の正本保存形式は v6 JSON envelope
  • document.width / height
  • document.colorMode: "direct" | "indexed"
  • items[]
  • frames[]
  • cels[]
  • document.fps
  • editorState.activeLayerId / activeFrameId
• items[] は layer / folder の tree 構造
• frames[] は横方向の frame identity、cels[] は frameId + layerId の交点に置かれる pixel data
• 旧 1 枚絵データは読込時に自動で frame 0 へ migrate
• legacy の base64 PNG も読込互換あり
• editorState.activeLayerId、activeFrameId、mode を保持
• document.palette
  • sourceMode: "local" | "follow"
  • localColors: RGBA[]
• undo/redo は envelope 単位で layer-aware に管理
• ノード出力は visible layer を canonical order で flatten した current-frame Image
• あわせて全フレームを SpriteSheet 契約へ pack して出力
• indexed_image 出力は、現在フレーム画像を有効パレット順で IndexedImage 化したもの
  • 透明ピクセルは IndexedImage 専用の透明スロットとして扱われ、通常パレット色数には含まれない
  • 有効パレットに無い色が画像内に残っている場合は、出力時に末尾へ追加してインデックス化する
• palette 出力は、editor が現在使っている有効パレット
• プロジェクト保存/読込で自動保持
• ズーム4倍以上でピクセルグリッド表示
• debounce（150ms）でパフォーマンス最適化