よつばゲームズ

Pixel Canvas(ピクセルキャンバス)

エディタで直接ドット絵を描画し、ノードグラフに出力します。

中級
Since P00

入力ポート

Reference(参照)

参照レイヤー（オプション）

Image
Palette(パレット)

editor の follow mode で参照する外部パレット

Palette

出力ポート

Image(画像)

現在フレームを flatten した画像

Image
SpriteSheet(スプライトシート)

全フレームをまとめた spritesheet

SpriteSheet
Frame Count(フレーム数)

spritesheet の総フレーム数

Int
FPS(FPS)

spritesheet metadata の再生 FPS

Int
Columns(列数)

spritesheet の実際の列数

Int
Rows(行数)

spritesheet の実際の行数

Int
Frame Width(フレーム幅)

1 フレームの幅

Int
Frame Height(フレーム高さ)

1 フレームの高さ

Int
Fill Order(配置順)

spritesheet の配置順（v1 は `row_major` 固定）

Text
Palette(パレット)

editor が現在使っている有効パレット

Palette

パラメータ

名前型デフォルト説明
Width幅Int32キャンバス幅
Height高さInt32キャンバス高さ
ParameterピクセルデータCustomDataeditor 管理の保存データ（旧 base64 PNG / 単フレーム JSON / frame-cel JSON、非表示）

キャンバスサイズ連動

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

状態width/height の値
デフォルト（新規作成時）プロジェクトキャンバスサイズにバインド（自動追従）
ユーザーが手入力 or バインド解除ローカル値（キャンバスサイズと独立）
インスペクターの 🔗 ボタンからバインドの解除・再登録ができます。

描画エディタ

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

ツール

ツール動作
✏️ ペンブラシサイズ付きで描画（ドラッグで連続描画）
🧹 消しゴムブラシサイズ付きで透明化
🪣 塗りつぶし4方向フラッドフィル
💉 スポイトクリック位置の色を取得
⬚ 選択矩形 / 投げ縄 / ポリゴンで選択範囲を作る。範囲内ドラッグで移動、ツールバーから左右反転 / 上下反転 / 2倍拡大 / 1/2縮小が可能

操作

  • マウスホイール: ズーム（1〜32倍）
  • Alt+ドラッグ: パン
  • 選択ツール: 矩形 / 投げ縄 / ポリゴンを ▼ で切替
  • ペン / 消しゴム: ツールバーでブラシサイズを 1〜16 に変更可能
  • 選択範囲内ドラッグ: 選択中ピクセルを移動
  • 選択中の変形ボタン: 左右反転 / 上下反転 / 2倍拡大 / 1/2縮小 / 選択解除
  • 選択の可視レイヤー操作: ON の時、選択範囲の移動 / 反転 / 拡大縮小を可視レイヤー全体へ一括適用
  • 塗りつぶし境界モード: 現在レイヤーだけを境界に使うか、可視レイヤーの合成結果を境界に使うかを切替
  • ESC: エディタを閉じる

レイヤー

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

💡 ヒント

  • •現在の正本保存形式は `v5 JSON envelope`
  • •`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`
  • •undo/redo は envelope 単位で layer-aware に管理
  • •ノード出力は visible layer を canonical order で flatten した current-frame `Image`
  • •あわせて全フレームを `SpriteSheet` 契約へ pack して出力
  • •`palette` 出力は、editor が現在使っている有効パレット
  • •プロジェクト保存/読込で自動保持
  • •ズーム4倍以上でピクセルグリッド表示
  • •debounce（150ms）でパフォーマンス最適化
ノード一覧に戻る
Pixel Canvas (ピクセルキャンバス) — PixPipeline ノード解説