Pixel Canvas
Draw pixel art directly in the editor
intermediate
Since P00
Input Ports
Reference
参照レイヤー（オプション）
Output Ports
Image
描画したドット絵
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| Width | Int | 32 | キャンバス幅 |
| Height | Int | 32 | キャンバス高さ |
| ピクセルデータ | CustomData | (空) | editor 管理の保存データ（旧 base64 PNG / v2 JSON envelope、非表示） |
キャンバスサイズ連動
ジェネレータノードとして、新規作成時に width / height がプロジェクトのキャンバスサイズ（_canvasWidth / _canvasHeight）に自動バインドされます。
| 状態 | width/height の値 |
|---|---|
| default（新規作成時） | プロジェクトキャンバスサイズにバインド（自動追従） |
| ユーザーが手入力 or バインド解除 | ローカル値（キャンバスサイズと独立） |
インスペクターの 🔗 ボタンからバインドの解除・再登録ができます。
描画エディタ
インスペクターの「✏️ ドット絵を編集」ボタンを押すと、EditorShell ベースのポップアップエディタが開きます。
ツール
| ツール | 動作 |
|---|---|
| ✏️ ペン | ブラシサイズ付きで描画（ドラッグで連続描画） |
| 🧹 消しゴム | ブラシサイズ付きで透明化 |
| 🪣 塗りつぶし | 4方向フラッドフィル |
| 💉 スポイト | クリック位置のColorを取得 |
| ⬚ 選択 | 矩形 / 投げ縄 / ポリゴンで選択範囲を作る。範囲内ドラッグでTranslate、ツールバーから左右Flip / 上下Flip / 2倍拡大 / 1/2縮小が可能 |
操作
- マウスホイール: ズーム（1〜32倍）
- Alt+ドラッグ: パン
- 選択ツール: 矩形 / 投げ縄 / ポリゴンを
▼で切替 - ペン / 消しゴム: ツールバーでブラシサイズを
1〜16に変更可能 - 選択範囲内ドラッグ: 選択中ピクセルをTranslate
- 選択中の変形ボタン: 左右Flip / 上下Flip / 2倍拡大 / 1/2縮小 / 選択解除
- 選択の可視レイヤー操作: ON の時、選択範囲のTranslate / Flip / Scaleを可視レイヤー全体へ一括適用
- 塗りつぶし境界モード: 現在レイヤーだけを境界に使うか、可視レイヤーのComposited resultを境界に使うかを切替
- ESC: エディタを閉じる
レイヤー
- 右側パネルで layer / folder tree を管理
+で新規レイヤー追加- フォルダ追加ボタンでフォルダを作成
- レイヤーやフォルダを ダブルクリック で名前変更
- クリックで active layer 切替
Ctrl/Cmdを押しながらクリックで複数選択- 複数選択した状態でドラッグしてまとめて並び替え
- フォルダの上へドロップして、フォルダ内へTranslate
- フォルダ単位の展開 / 折りたたみ
- フォルダ単位の表示 / 非表示切替
- 削除（最低 1 レイヤーは保持）
- 描画・塗りつぶし・消しゴムは active layer のみに適用
- 選択範囲がある時は、描画・塗りつぶし・消しゴムはその範囲内だけに適用
- 選択ツールでは
可視レイヤー操作を ON にすると、選択範囲のTranslate / 変形が visible layer 全体を対象にする - 塗りつぶしツールでは
境界モードを可視にすると、visible layer のComposited resultを境界判定に使い、実際の描き込みは active layer だけへ行う
技術詳細
- 現在の正本保存形式は
v2 JSON envelope
- document.width / height
- items[]
- editorState
items[]はlayer/folderの tree 構造- legacy の base64 PNG も読込互換あり
editorState.activeLayerIdとmodeを保持- undo/redo は envelope 単位で layer-aware に管理
- ノード出力は visible layer を canonical order で flatten した
Image - プロジェクト保存/読込で自動保持
- ズーム4倍以上でピクセルグリッド表示
- debounce（150ms）でパフォーマンス最適化
💡 Tips
- •現在の正本保存形式は `v2 JSON envelope`
- •`items[]` は `layer` / `folder` の tree 構造
- •legacy の base64 PNG も読込互換あり
- •`editorState.activeLayerId` と `mode` を保持
- •undo/redo は envelope 単位で layer-aware に管理
- •ノード出力は visible layer を canonical order で flatten した `Image`
- •プロジェクト保存/読込で自動保持
- •ズーム4倍以上でピクセルグリッド表示
- •debounce（150ms）でパフォーマンス最適化