Pixel Canvas(ピクセルキャンバス)
エディタで直接ドット絵を描画し、ノードグラフに出力します。
中級
Since P00
入力ポート
Reference(参照)
参照レイヤー（オプション）
出力ポート
Image(画像)
描画したドット絵
パラメータ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
| Width幅 | Int | 32 | キャンバス幅 |
| Height高さ | Int | 32 | キャンバス高さ |
| ピクセルデータピクセルデータ | CustomData | (空) | base64 PNG（エディタ管理、非表示） |
キャンバスサイズ連動
ジェネレータノードとして、新規作成時に width / height がプロジェクトのキャンバスサイズ（_canvasWidth / _canvasHeight）に自動バインドされます。
| 状態 | width/height の値 |
|---|---|
| デフォルト（新規作成時） | プロジェクトキャンバスサイズにバインド（自動追従） |
| ユーザーが手入力 or バインド解除 | ローカル値（キャンバスサイズと独立） |
インスペクターの 🔗 ボタンからバインドの解除・再登録ができます。
描画エディタ
インスペクターの「✏️ ドット絵を編集」ボタンを押すと、ポップアップモーダルで描画エディタが開きます。
ツール
| ツール | 動作 |
|---|---|
| ✏️ ペン | 1px 描画（ドラッグで連続描画） |
| 🧹 消しゴム | ピクセルを透明にする |
| 🪣 塗りつぶし | 4方向フラッドフィル |
| 💉 スポイト | クリック位置の色を取得 |
操作
- マウスホイール: ズーム（1〜32倍）
- Alt+ドラッグ: パン
- ESC: エディタを閉じる
技術詳細
- 描画データは base64 PNG として CustomData パラメータに保存
- プロジェクト保存/読込で自動保持
- ズーム4倍以上でピクセルグリッド表示
- debounce（150ms）でパフォーマンス最適化
💡 ヒント
- •描画データは base64 PNG として CustomData パラメータに保存
- •プロジェクト保存/読込で自動保持
- •ズーム4倍以上でピクセルグリッド表示
- •debounce（150ms）でパフォーマンス最適化