よつばゲームズ
ノード一覧に戻る

ベジェパス

bezier_path

インタラクティブエディタでベジェ曲線パスを定義します。各セグメントは入出力ピン化して外部制御も可能です。

確認済み
解説あり

出力ポート

名前型説明
パス
path
Path
ベジェ曲線パスデータ

パラメータ

名前型既定値範囲説明・選択肢
幅
width
Int
641–1024

キャンバスの幅（ピクセル）

高さ
height
Int
641–1024

キャンバスの高さ（ピクセル）

パスデータ
path_data
CustomData
——

エディタが管理するベジェパスJSON。不正な非空JSONはエラーになります

セグメント数
segment_count
Int
00–64

エディタ管理の表示用個数。評価時はpath_data内の実セグメント数を使います

セグメント 1
seg_1
Map
{}—

ベジェセグメント #1 (始点, 制御点1, 制御点2, 終点)

セグメント 2
seg_2
Map
{}—

ベジェセグメント #2 (始点, 制御点1, 制御点2, 終点)

セグメント 3
seg_3
Map
{}—

ベジェセグメント #3 (始点, 制御点1, 制御点2, 終点)

セグメント 4
seg_4
Map
{}—

ベジェセグメント #4 (始点, 制御点1, 制御点2, 終点)

セグメント 5
seg_5
Map
{}—

ベジェセグメント #5 (始点, 制御点1, 制御点2, 終点)

セグメント 6
seg_6
Map
{}—

ベジェセグメント #6 (始点, 制御点1, 制御点2, 終点)

セグメント 7
seg_7
Map
{}—

ベジェセグメント #7 (始点, 制御点1, 制御点2, 終点)

セグメント 8
seg_8
Map
{}—

ベジェセグメント #8 (始点, 制御点1, 制御点2, 終点)

セグメント 9
seg_9
Map
{}—

ベジェセグメント #9 (始点, 制御点1, 制御点2, 終点)

セグメント 10
seg_10
Map
{}—

ベジェセグメント #10 (始点, 制御点1, 制御点2, 終点)

セグメント 11
seg_11
Map
{}—

ベジェセグメント #11 (始点, 制御点1, 制御点2, 終点)

セグメント 12
seg_12
Map
{}—

ベジェセグメント #12 (始点, 制御点1, 制御点2, 終点)

セグメント 13
seg_13
Map
{}—

ベジェセグメント #13 (始点, 制御点1, 制御点2, 終点)

セグメント 14
seg_14
Map
{}—

ベジェセグメント #14 (始点, 制御点1, 制御点2, 終点)

セグメント 15
seg_15
Map
{}—

ベジェセグメント #15 (始点, 制御点1, 制御点2, 終点)

セグメント 16
seg_16
Map
{}—

ベジェセグメント #16 (始点, 制御点1, 制御点2, 終点)

セグメント 17
seg_17
Map
{}—

ベジェセグメント #17 (始点, 制御点1, 制御点2, 終点)

セグメント 18
seg_18
Map
{}—

ベジェセグメント #18 (始点, 制御点1, 制御点2, 終点)

セグメント 19
seg_19
Map
{}—

ベジェセグメント #19 (始点, 制御点1, 制御点2, 終点)

セグメント 20
seg_20
Map
{}—

ベジェセグメント #20 (始点, 制御点1, 制御点2, 終点)

セグメント 21
seg_21
Map
{}—

ベジェセグメント #21 (始点, 制御点1, 制御点2, 終点)

セグメント 22
seg_22
Map
{}—

ベジェセグメント #22 (始点, 制御点1, 制御点2, 終点)

セグメント 23
seg_23
Map
{}—

ベジェセグメント #23 (始点, 制御点1, 制御点2, 終点)

セグメント 24
seg_24
Map
{}—

ベジェセグメント #24 (始点, 制御点1, 制御点2, 終点)

セグメント 25
seg_25
Map
{}—

ベジェセグメント #25 (始点, 制御点1, 制御点2, 終点)

セグメント 26
seg_26
Map
{}—

ベジェセグメント #26 (始点, 制御点1, 制御点2, 終点)

セグメント 27
seg_27
Map
{}—

ベジェセグメント #27 (始点, 制御点1, 制御点2, 終点)

セグメント 28
seg_28
Map
{}—

ベジェセグメント #28 (始点, 制御点1, 制御点2, 終点)

セグメント 29
seg_29
Map
{}—

ベジェセグメント #29 (始点, 制御点1, 制御点2, 終点)

セグメント 30
seg_30
Map
{}—

ベジェセグメント #30 (始点, 制御点1, 制御点2, 終点)

セグメント 31
seg_31
Map
{}—

ベジェセグメント #31 (始点, 制御点1, 制御点2, 終点)

セグメント 32
seg_32
Map
{}—

ベジェセグメント #32 (始点, 制御点1, 制御点2, 終点)

セグメント 33
seg_33
Map
{}—

ベジェセグメント #33 (始点, 制御点1, 制御点2, 終点)

セグメント 34
seg_34
Map
{}—

ベジェセグメント #34 (始点, 制御点1, 制御点2, 終点)

セグメント 35
seg_35
Map
{}—

ベジェセグメント #35 (始点, 制御点1, 制御点2, 終点)

セグメント 36
seg_36
Map
{}—

ベジェセグメント #36 (始点, 制御点1, 制御点2, 終点)

セグメント 37
seg_37
Map
{}—

ベジェセグメント #37 (始点, 制御点1, 制御点2, 終点)

セグメント 38
seg_38
Map
{}—

ベジェセグメント #38 (始点, 制御点1, 制御点2, 終点)

セグメント 39
seg_39
Map
{}—

ベジェセグメント #39 (始点, 制御点1, 制御点2, 終点)

セグメント 40
seg_40
Map
{}—

ベジェセグメント #40 (始点, 制御点1, 制御点2, 終点)

セグメント 41
seg_41
Map
{}—

ベジェセグメント #41 (始点, 制御点1, 制御点2, 終点)

セグメント 42
seg_42
Map
{}—

ベジェセグメント #42 (始点, 制御点1, 制御点2, 終点)

セグメント 43
seg_43
Map
{}—

ベジェセグメント #43 (始点, 制御点1, 制御点2, 終点)

セグメント 44
seg_44
Map
{}—

ベジェセグメント #44 (始点, 制御点1, 制御点2, 終点)

セグメント 45
seg_45
Map
{}—

ベジェセグメント #45 (始点, 制御点1, 制御点2, 終点)

セグメント 46
seg_46
Map
{}—

ベジェセグメント #46 (始点, 制御点1, 制御点2, 終点)

セグメント 47
seg_47
Map
{}—

ベジェセグメント #47 (始点, 制御点1, 制御点2, 終点)

セグメント 48
seg_48
Map
{}—

ベジェセグメント #48 (始点, 制御点1, 制御点2, 終点)

セグメント 49
seg_49
Map
{}—

ベジェセグメント #49 (始点, 制御点1, 制御点2, 終点)

セグメント 50
seg_50
Map
{}—

ベジェセグメント #50 (始点, 制御点1, 制御点2, 終点)

セグメント 51
seg_51
Map
{}—

ベジェセグメント #51 (始点, 制御点1, 制御点2, 終点)

セグメント 52
seg_52
Map
{}—

ベジェセグメント #52 (始点, 制御点1, 制御点2, 終点)

セグメント 53
seg_53
Map
{}—

ベジェセグメント #53 (始点, 制御点1, 制御点2, 終点)

セグメント 54
seg_54
Map
{}—

ベジェセグメント #54 (始点, 制御点1, 制御点2, 終点)

セグメント 55
seg_55
Map
{}—

ベジェセグメント #55 (始点, 制御点1, 制御点2, 終点)

セグメント 56
seg_56
Map
{}—

ベジェセグメント #56 (始点, 制御点1, 制御点2, 終点)

セグメント 57
seg_57
Map
{}—

ベジェセグメント #57 (始点, 制御点1, 制御点2, 終点)

セグメント 58
seg_58
Map
{}—

ベジェセグメント #58 (始点, 制御点1, 制御点2, 終点)

セグメント 59
seg_59
Map
{}—

ベジェセグメント #59 (始点, 制御点1, 制御点2, 終点)

セグメント 60
seg_60
Map
{}—

ベジェセグメント #60 (始点, 制御点1, 制御点2, 終点)

セグメント 61
seg_61
Map
{}—

ベジェセグメント #61 (始点, 制御点1, 制御点2, 終点)

セグメント 62
seg_62
Map
{}—

ベジェセグメント #62 (始点, 制御点1, 制御点2, 終点)

セグメント 63
seg_63
Map
{}—

ベジェセグメント #63 (始点, 制御点1, 制御点2, 終点)

セグメント 64
seg_64
Map
{}—

ベジェセグメント #64 (始点, 制御点1, 制御点2, 終点)

概要

ベジェ曲線を手で描くための「筆」にあたるノードです。ダブルクリックで専用エディタが開き、 点を打って線や形を定義します。パスはそのままでは絵にならず、path_stroke(線を引く)や path_fill(塗る)につないで初めてドット絵になります。剣・ツタ・炎の輪郭のような 「決まった形」を作る出発点です。

  • バージョン: 3
  • インタラクティブ: はい（ダブルクリックでエディタを開く）
  • エディタ: PathEditor
  • 日英対応: はい（useI18n による完全ローカライズ）

使い方のポイント

  • 矩形・円などの単純図形は描かずに shape_generate を使う方が速い。このノードは 自由曲線・オリジナルの輪郭用
  • エディタのキャンバスサイズは既定でプロジェクトのキャンバスに揃う。座標は 後段のラスタライズでそのままピクセル座標になるので、対象素材と同じサイズで描くとよい
  • よく使う形は 💾 で .pxpath に保存してストックする(既定の保存先は user_data/paths/single/)。別プロジェクトでも読み込める
  • 形を動かしたい(アニメ)場合は、セグメントをピン化して segment_unpack → 波形ノード → segment_pack で座標を外部駆動できる(下記「セグメントの外部制御」)

よくある失敗

  • 描いたのに何も表示されない: パス出力は「線のデータ」であって画像ではない。 path_stroke / path_fill を通して画像化する
  • 塗りつぶせない: パスが開いたまま。エディタの 🔒(閉じる)でパスを閉じてから path_fill につなぐ
  • 線がにじむ・ガタつく: ラスタライズ側の問題。path_stroke の太さ・ ピクセルパーフェクト補正の設定を確認する
  • 保存データが壊れている: 空文字だけが正常な空エディタです。非空の不正JSONは 空パスへ置き換えずエラー表示し、元データのコピーか明示的なリセットを選べます
  • segment_count は表示・エディタ同期用です。セグメント本体は path_data から決まり、 数だけを変えて新しいセグメントを作ることはできません
  • 外部接続した seg_N は8座標すべてが必要です。不完全なMapは黙って無視せずエラーになります
  • path_data に存在しない番号の seg_N を接続した場合も、黙って無視せずエラーになります

エディタ機能

ツールバー

ツール アイコン 説明
フリー 🔀 制御点の移動 + 末尾追加 + 曲線上分割の統合ツール
追加 ➕ 新しい制御点をクリックで追加
移動 ✋ 制御点をドラッグで移動
削除 ❌ アンカーをクリックで削除
選択 ⬚/〇/⬣ 範囲選択（ドロップダウンでモード切替）

範囲選択ツール（ドロップダウン）

モード アイコン 操作
矩形選択 ⬚ ドラッグで矩形範囲を作成
投げ縄選択 〇 ドラッグでフリーハンド範囲を作成
ポリゴン選択 ⬣ クリックで頂点追加、ダブルクリックで確定

選択した制御点はドラッグで一括移動可能。Shift+クリックで個別追加、Shift+ドラッグで軸拘束。

その他のツールバー機能

  • 🔒/🔓 閉/開: パスを閉じる/開くトグル
  • #ON / #OFF: セグメント番号表示の切替
  • 💾 保存: 現在のパスを .pxpath ファイルに保存
  • 📂 読込: .pxpath ファイルからパスを読込
  • 🔍 N×: 現在のズーム倍率表示

ファイル保存/読込（.pxpath 形式）

パスデータを個別ファイルとして保存・読込できます。プロジェクト保存とは独立した機能です。

ファイル形式:

{
  "format": "PixPipelinePath",
  "version": 1,
  "type": "bezier",
  "data": { "segments": [...], "closed": false }
}

保存したファイルは、マルチパスエディタで新規レイヤーとしてインポート可能です。

キャンバス操作

  • ズーム: マウスホイール
  • パン: 中ボタンドラッグまたはスペース+ドラッグ
  • Shift+クリック: 16方向ピクセルスナップ
  • Ctrl+Z / Ctrl+Y: Undo / Redo

操作ヘルプ（エディタ下部）

各ツールの操作方法がエディタ下部に自動表示されます（日英対応）。

使用例

基本的な使い方

  1. ノードをダブルクリックしてエディタを開く
  2. 制御点をクリックしてパスを描く
  3. Path 出力を PathStroke や PathSample に接続

セグメント番号の確認

  1. エディタのツールバーで # ボタンをオンにする
  2. 各セグメントの中央に番号バッジが表示される
  3. SegmentUnpack で分解する際の参照に使用

セグメントの外部制御

  1. Inspector で seg_N の📤で出力ピン化
  2. SegmentUnpack ノードに接続して座標値を分解
  3. SineWave 等で座標値を加工
  4. SegmentPack ノードで再構成
  5. seg_N の📌で入力ピン化して外部セグメントを接続

パスの再利用

  1. エディタで💾ボタンをクリックしてパスを .pxpath に保存
  2. 別のノードや別プロジェクトで📂ボタンから読込
  3. マルチパスエディタに読込む場合は新規レイヤーとして追加される

関連ノード

  • path_stroke / path_fill — パスを線・塗りとして画像化する(ほぼ必須の次段)
  • multi_path_editor — 複数のサブパスをレイヤーとしてまとめて管理したい場合
  • shape_generate — 矩形・円などの定型図形はこちらが速い
  • path_transform / path_array — 描いたパスの変形・繰り返し配置

関連ノード

パスストロークpath_strokeマルチパスmulti_path_editor図形shape_generateパストランスフォームpath_transform
ノード一覧に戻る