概要
複数のサブパスをレイヤーとして1ノードで管理するパスエディタです。
剣なら「刃・鍔・柄」のように、1つのモチーフを複数の形で構成するとき、
bezier_path を並べる代わりにこれ1つで描けます。全レイヤー結合の path 出力に加え、
各レイヤーを個別のPath出力としてピン化できます。
- バージョン: 1
- インタラクティブ: はい（ダブルクリックでエディタを開く）
- エディタ:
MultiPathEditor - 日英対応: はい（
useI18nによる完全ローカライズ）
使い方のポイント
bezier_pathとの使い分け: 単独の形→bezier_path、部品の集合(1モチーフ複数形)→こちら- 各レイヤーを個別ピン化(
layer_N)してpath_stroke/path_fillに別々の色で流すと、 「刃は白・柄は茶」のような部品別彩色ができる - 結合出力(
path)をpath_stroke(sub_path_scope: Single)に渡してインデックスで 選ぶ方法もある(ピン化せずに済む) .pxpath(単パス)と.pxmpath(全レイヤー)の保存・読込に対応。bezier_pathで作った資産もレイヤーとして取り込める
よくある失敗
- どのレイヤーを編集しているか分からなくなる: 左のレイヤーパネルでアクティブ レイヤーを確認。👁️で他レイヤーを一時非表示にすると作業しやすい
- 全部同じ色で塗られてしまう: 結合
path出力を1本の path_fill に流すと 当然単色になる。部品別の色はレイヤーピン化か Single 選択で分ける - 壊れた
path_dataが読み込めない: 空文字は正常な空エディタとして扱う。 空でないJSONの構文またはマルチパス形式が不正な場合は、空パスへ置き換えず NodeErrorを表示する
エディタ機能
ツールバー
| ツール | アイコン | 説明 |
|---|---|---|
| フリー | 🔀 | 制御点の移動 + 末尾追加 + 曲線上分割の統合ツール |
| 追加 | ➕ | 新しい制御点をクリックで追加 |
| 移動 | ✋ | 制御点をドラッグで移動 |
| 削除 | ❌ | アンカーをクリックで削除 |
| 選択 | ⬚/〇/⬣ | 範囲選択（ドロップダウンでモード切替） |
範囲選択ツール（ドロップダウン）
| モード | アイコン | 操作 |
|---|---|---|
| 矩形選択 | ⬚ | ドラッグで矩形範囲を作成 |
| 投げ縄選択 | 〇 | ドラッグでフリーハンド範囲を作成 |
| ポリゴン選択 | ⬣ | クリックで頂点追加、ダブルクリックで確定 |
選択した制御点はドラッグで一括移動可能。Shift+クリックで個別追加、Shift+ドラッグで軸拘束。
その他のツールバー機能
- 🔒/🔓 閉/開: アクティブレイヤーのパスを閉じる/開く
- 💾 保存: ドロップダウンメニューで選択
- 📄 アクティブレイヤーを保存 (.pxpath) — 選択中レイヤーを単一パスとして保存
- 📦 全レイヤーを保存 (.pxmpath) — 全レイヤー構造を一括保存
- 📂 読込: ドロップダウンメニューで選択
- 📄 レイヤーとして読込 (.pxpath) — 既存に新規レイヤーとして追加
- 📦 全レイヤーを読込 (.pxmpath) — 全レイヤーを置換して読込
- 🔍 N×: 現在のズーム倍率表示
ファイル保存/読込
パスデータをプロジェクトとは独立してファイル管理できます。2つの形式に対応:
| 拡張子 | 用途 | type フィールド | 説明 |
|---|---|---|---|
.pxpath |
単一パス | bezier |
1レイヤー分のパス（ベジェパスノードと互換） |
.pxmpath |
マルチパス | multipath |
全レイヤー構造の一括データ |
レイヤー読込 (.pxpath) では既存レイヤーは保持され、ファイルの内容が新規レイヤーとして末尾に追加されます。全体読込 (.pxmpath) では既存レイヤーは全て置換されます。
ベジェパスノードで保存した .pxpath ファイルもレイヤーとして読込可能です（クロスエディタ互換）。
レイヤーパネル（エディタ左側）
- ➕ ボタンで新規レイヤー追加
- クリックでアクティブレイヤー切替
- 👁️ ボタンで表示/非表示切替
- ✕ ボタンでレイヤー削除（1レイヤー以上は必ず残る）
キャンバス
- アクティブレイヤー: 通常の色で描画（操作可能）
- 非アクティブレイヤー: 半透明（25%）で描画（操作不可）
- 各レイヤーは固有の色で表示（緑、紫、オレンジ、水色...）
キーボードショートカット
- Ctrl+Z: Undo（レイヤー全体を復元）
- Ctrl+Y: Redo
- Shift+クリック: 16方向ピクセルスナップ
操作ヘルプ（エディタ下部）
各ツールの操作方法がエディタ下部に自動表示されます（日英対応）。
ベジェパスノードとの違い
| 機能 | ベジェパス | マルチパス |
|---|---|---|
| パス数 | 1パス | 複数パス（レイヤー） |
| セグメントの出力ピン化 | ✅ seg_N | ❌ |
| レイヤーの出力ピン化 | ❌ | ✅ layer_N |
| 複数パスの視覚的編集 | ❌ | ✅ |
| 範囲選択ツール | ✅ | ✅ |
| ファイル保存 | .pxpath | .pxpath + .pxmpath |
| 用途 | 単一パスの細かい制御 | 複数パスの組み合わせ |
使用例
基本的な使い方
- ノードをダブルクリックしてエディタを開く
- Layer 1 にパスを描く
- ➕ で Layer 2 を追加し、別のパスを描く
- 全レイヤーが重なった状態で位置関係を確認しながら編集
path出力を PathStroke / PathFill に接続
個別レイヤーの加工
- Inspector で
layer_Nの📤で出力ピン化 - 取り出した Path を PathTransform で加工
- PathCombine で他のパスと再結合
パスの再利用・共有
- 💾ドロップダウンから「アクティブレイヤーを保存」で
.pxpathに保存 - 別のプロジェクトで📂ドロップダウンから「レイヤーとして読込」
- ベジェパスノードで作成したパスも同じ
.pxpathから読込可能
プロジェクト間でのマルチパスデータ移行
- 💾ドロップダウンから「全レイヤーを保存」で
.pxmpathに保存 - 別プロジェクトで📂ドロップダウンから「全レイヤーを読込」で復元
関連ノード
bezier_path— 単一パス版path_stroke/path_fill— レイヤーの画像化(Single選択でレイヤー指定可)path_combine/path_split— パスの結合・分解をグラフ側で行うpath_transform— 描いた部品の配置調整