ゲームイベントノードエディタ

ノードエディタは、複雑なイベントの依存関係を単一の読み取り可能なグラフに表示することで、「スパゲッティコード」問題を解決するビジュアルオーケストレーションツールです。

イベントがなぜ発行されたのかを理解するために散らばったスクリプトを探し回る代わりに、フローグラフを見るだけでその流れを把握できます。

---

🎯 設計思想

従来のUnityイベントは「投げっぱなし（Fire and Forget）」です。これはデカップリング（疎結合化）には最適ですが、一連のシーケンスをデバッグするには不向きです。

フローグラフは、2つの強力な実行パターンを導入します：

パターン	実行方式	動作	ユースケース
トリガー (Fan-Out)	並列	非ブロッキング。1つのイベントが複数のイベントを同時に発行する	「OnPlayerDeath」→ SE再生 + パーティクル生成 + UI表示
チェーン (Sequence)	直列	ブロッキング。遅延を挟みながらイベントを1つずつ順番に発行する	「StartCutscene」→（2秒待機）→「ShowDialog」→（入力待機）→「EndCutscene」

🎯 トリガー (Fan-Out)

⛓️ チェーン (Sequential)

これらのパターンを組み合わせることで、デカップリングされつつも構造化されたロジックを構築できます。

---

🚀 エディタを開く

フローグラフエディタには、Game Event Editor からアクセスします。

Game Event Editor → ツールバーの "Flow Graph" ボタンをクリック

これにより、正しいイベントライブラリのコンテキスト内で作業を行うことが保証されます。

---

🛠️ ツールバーの概要

ツールバーでは、フローグラフアセットとグローバル設定を管理します。

フローアセットドロップダウン

異なるフローグラフアセット（例：Global_Flow, Level_1_Flow）を切り替えます。

切り替えると、グラフの内容は即座に更新されます。

アセットの整理

ゲームシステムごとに別々のフローグラフを作成することで、ロジックをクリーンでメンテナンスしやすい状態に保てます。グラフは Flow Container アセット内にサブアセットとして保存されます。

グラフ管理

New ボタン (+ New): 現在のコンテナ内に新しいグラフを作成します。

グラフ名フィールド: クリックして現在のグラフ名を変更します。

Delete ボタン: 現在のグラフを削除します（確認ダイアログが表示されます）。

グラフコントロール

Snap ボタン (Snap): グリッドスナップを切り替えます。有効にすると、ノードの移動時に20ユニットのグリッド線に自動的に吸着し、完璧に整理されたレイアウトを維持できます。

Align ボタン (Align): スマート整列ガイドを切り替えます。有効にすると、ドラッグ中のノードのエッジ（左、中央、右）や中心線（上、中央、下）がキャンバス上の他のノードと揃ったときに、青い垂直または水平の点線が表示されます。

Active トグル (🟢 / 🔴): 実行時にグラフ全体を有効/無効にします。

Refresh ボタン: GameEventManager からコンテナリストをリロードします。

Help ボタン (? Help): すべてのショートカットとカラーコードが記載されたクイックリファレンスガイドを開きます。

---

🖱️ キャンバスの操作

エディタは、大規模なロジックグラフ向けに設計された、無限にズーム可能なキャンバスを備えています。

基本操作

アクション	操作	説明
ビューのパン	マウス中ボタンでドラッグ	キャンバス内を移動します
ズーム	スクロールホイール	拡大/縮小（マウスカーソルの位置を中心に）
コンテキストメニュー	右クリック	ノードやグループを追加します
クイック作成	ダブルクリック	空のキャンバス上でノード作成メニューを開きます

ズーム範囲: 0.2x - 3.0x (20% ～ 300%)

グリッド: 20ユニットごとに補助線、100ユニットごとに主線が表示されます。Snap が有効な場合、ノードは20ユニットの補助線にロックされます。

---

🎯 ノードの操作

ノードの作成

アクション	操作	説明
クイック作成	キャンバスをダブルクリック	ノード作成メニューを開きます
コンテキストメニュー	右クリック → Add Node	トリガーまたはチェーンノードを作成します
選択中から作成	ノードを右クリック	ノード操作のコンテキストメニューを開きます

ノードタイプ:

• Trigger ノード: 並列実行（ファンアウトパターン）
• Chain ノード: 直列実行（シーケンスパターン）

ノードの選択

アクション	操作	説明
ノードの選択	左クリック	個別のノードを選択します
選択への追加	Ctrl/Shift + クリック	ノードの選択状態を切り替えます
ボックス選択	左クリック + ドラッグ	矩形範囲内のすべてのノードを選択します
すべて選択	Ctrl + A	グラフ内のすべてのノードを選択します
選択解除	Escape	すべての選択を解除します
ノードの編集	ノードをダブルクリック	ノードの振る舞い設定 を開きます

ノードの移動

アクション	操作	説明
ノードの移動	左ボタンでドラッグ	選択したノードを移動します
複数移動	左ボタンでドラッグ（選択中）	選択されたすべてのノードを一緒に移動します

グループの挙動: ノードがグループに属している場合、移動するとグループの境界線も自動的に更新されます。

レイアウト補助:

• グリッドスナップ: Snap が有効な場合、移動は背景グリッドに合わせた20ピクセル単位にロックされます。
• スマート整列: Align が有効な場合、エディタは青い点線による視覚的なフィードバックを提供します。以下の位置で自動的に整列を検知します：
  • 垂直方向: 左端、水平中心、右端
  • 水平方向: 上端、垂直中心、下端

ノードのコンテキストメニュー

ノードを右クリックすると、クイックアクションが表示されます：

• Edit Node: 振る舞い設定ウィンドウ を開く
• Copy Node: クリップボードにコピー
• Cut Node: コピーして削除
• Delete Node: ノードとすべての接続を削除
• Set as Root: グラフの開始点としてマーク
• Convert to Trigger/Chain: ノードタイプを変換

複数選択時のコンテキストメニュー

複数のノードが選択されている状態で右クリックすると表示されます：

• Copy N Node(s): 選択範囲をクリップボードにコピー
• Cut N Node(s): 選択範囲をコピーして削除
• Delete N Node(s): 選択されたすべてのノードを削除
• Create Group: 選択されたノードからグループを作成（最低2つのノードが必要）

---

🔗 接続 (Connections) の作成

接続は、ノード間のイベントの流れを定義します。

接続操作

アクション	操作	説明
接続の作成	出力ポート（右側）からドラッグ	別のノードの入力ポート（左側）へドラッグします
接続の付け替え	入力ポートからドラッグ	接続を切り離し、別のノードへ接続し直します
接続の削除	選択して Delete キー	接続を削除します

ビジュアルフィードバック:

• ドラッグ中にプレビュー線が表示されます。
• 色は互換性を示します（接続タイプ を参照）。
• 無効なターゲットはグレーアウトされます。

接続ルール:

• 常に「出力（右ポート）」から「入力（左ポート）」へドラッグします。
• ルートノードに入力ポートはありません。
• ノードは複数の入力および出力接続を持つことができます。

---

📁 グループ化システム

大規模なグラフを視覚的なグループで整理し、可読性とメンテナンス性を向上させます。

グループの作成

方法 1: ノードを選択 → 右クリック → Create Group

方法 2: ボックス選択を使用 → 選択範囲を右クリック → Create Group

要件:

• 最低 2つのノード が必要です。
• 選択されたノードがまとめられます。
• グループの境界（Bounds）はノードの位置から自動的に計算されます。

グループの管理

操作	方法	結果
名前変更	グループのタイトルをダブルクリック	編集モードになります（Escapeでキャンセル）
グループ選択	グループエリアを左クリック	グループ全体を選択します
グループ移動	グループエリアをドラッグ	属するすべてのノードを一緒に移動します
グループのみ削除	Delete キー	枠線のみを削除し、ノードは維持します
グループとノードを削除	Shift + Delete	グループとその中のすべてのノードを削除します

ビジュアルインジケーター:

• 選択中のグループ：枠線が明るくなり、タイトルが強調されます。
• グループタイトル：グループの左上隅（境界内）に表示されます。
• グループ境界：半透明の角丸矩形で表示されます。

グループの所属関係

ノードをグループに追加する:

1. 既存のグループと追加したいノードを一緒に選択します。
2. 右クリック → Create Group を選択します。
3. 選択されたすべてのノードが新しいグループに含まれます。
4. 古いグループは削除され、新しいグループが作成されます。

ノードをグループから削除する:

• グループ内の特定のノードを削除します。
• グループは自動的に所属リストからそのノードを削除します。
• グループ内のノードが1つ以下になると、グループは自動的に削除されます。

制約:

• 1ノードにつき1グループ: 各ノードは一度に1つのグループにしか属せません。
• 自動クリーンアップ: ノードが1つ以下のグループは自動的に削除されます。
• 動的な境界: メンバーノードが移動すると、グループのサイズも自動的に変更されます。

グループのコンテキストメニュー

グループを右クリックしたときの操作：

• Rename Group: 名前変更モードに入る
• Copy Group: グループ構造全体をコピー（ノード + 内部接続）
• Delete Group (Keep Nodes): グループの枠のみを削除
• Delete Group + Nodes: すべてを削除

---

📋 コピー＆ペースト

ノードやグループを複製してワークフローをスピードアップさせます。

ノードのコピー＆ペースト

アクション	操作	説明
ノードのコピー	Ctrl + C	選択したノードをクリップボードにコピーします
ノードの切り取り	Ctrl + X	選択したノードを切り取ります（コピー + 削除）
ノードの貼り付け	Ctrl + V	オフセットを付けて貼り付けます
貼り付けのリセット	Escape	次の操作のために貼り付けカウンターをリセットします

貼り付けの挙動:

• Escape を押すと、位置オフセットのカウンターがリセットされます。
• 貼り付けられたノード間の接続は維持されます。
• 貼り付けられたノードがルート（Root）に設定されることはありません。

グループのコピー＆ペースト

アクション	操作	説明
グループのコピー	Ctrl + C	グループ構造全体をコピーします
グループの貼り付け	Ctrl + V	50pxのオフセットを付けてグループを貼り付けます

コピーされるもの:

• グループの枠線とタイトル（末尾に " (Copy)" が付きます）
• すべてのメンバーノードとその設定
• 内部接続（グループのメンバー同士の接続）
• ノードの相対位置

コピーされないもの:

• 外部接続（グループ外のノードとの接続）
• ルートノードの状態
• ノードID（新しいIDが自動的に生成されます）

コピー戦略

右クリックメニュー からも「Copy Group」を素早く実行できます。Ctrl+C と右クリックメニューは同じように機能します。繰り返されるロジックパターンのテンプレートとしてグループを活用してください。

---

⌨️ キーボードショートカット

コピー＆ペースト

ショートカット	アクション
Ctrl + C	選択したノードまたはグループをコピー
Ctrl + V	オフセット付きで貼り付け
Ctrl + X	選択したノードを切り取り

取り消し・やり直し (Undo/Redo)

ショートカット	アクション
Ctrl + Z	元に戻す（最大50ステップ）
Ctrl + Shift + Z / Ctrl + Y	やり直し

履歴の範囲: ノードの作成/削除、接続、グループの変更、位置の変更、コピー＆ペースト操作を記録します。

選択

ショートカット	アクション
Ctrl + A	すべてのノードを選択
Escape	選択解除 / 操作のキャンセル / 貼り付けカウンターのリセット

削除

ショートカット	アクション
Delete	選択したアイテムを削除
Shift + Delete	カスケード削除: グループとその中のすべてのノードを削除

削除の挙動:

• ノードの削除：すべての関連する接続が解除され、グループの所属が更新されます。
• グループの削除 (Delete)：メンバーノードは維持されます。
• グループの削除 (Shift + Delete)：グループと全メンバーノードが削除されます。
• 接続の削除：リンクのみが削除されます。
• メンバーが1つ以下のグループは自動的に削除されます。

---

🎨 コンテキストメニュー・リファレンス

空白部分

• Add Trigger Node: カーソル位置に新しいトリガーノードを作成
• Add Chain Node: カーソル位置に新しいチェーンノードを作成
• Paste Node(s):（クリップボードにノードがある場合）貼り付け件数を表示
• Paste Group:（クリップボードにグループがある場合）グループ名を表示

個別ノード上

• Edit Node: 振る舞い設定ウィンドウ を開く
• Copy Node: クリップボードにコピー
• Cut Node: コピーして削除
• Delete Node: ノードと接続を削除
• Set as Root: グラフの開始点としてマーク
• Convert to Trigger/Chain: ノードタイプを変換

複数ノード上（選択中）

• Copy N Node(s): 選択範囲をコピー
• Cut N Node(s): 選択範囲を切り取り
• Delete N Nodes: 選択されたすべてを削除
• Create Group: 選択範囲をグループ化（最低2ノード）

グループ上

• Rename Group: 名前変更モードに入る
• Copy Group: グループ構造全体をコピー
• Delete Group (Keep Nodes): 枠のみを削除
• Delete Group + Nodes: グループと全メンバーノードを削除

---

📊 ステータスバー

キャンバス下部にリアルタイムの情報が表示されます：

• 現在のズームレベル（例：Zoom: 1.2x）
• ノード数（例：Nodes: 15）
• 接続数（例：Connections: 23）
• 選択情報（例：Selected: 3 node(s), 1 group(s)）
• Undo/Redo スタックの深さ

---

🎓 ワークフローの例

例 1: プレイヤー死亡時のシーケンスを構築する

目標: 並列エフェクトと直列のメニュー遷移を伴う死亡シーケンスを作成します。

ステップ 1: ルートノードの作成

1. キャンバスをダブルクリック → 「Add Trigger Node」を選択。
2. OnPlayerDeath イベントを選択します。
3. ノードを右クリック → 「Set as Root」を選択。

ステップ 2: 並列アクションの追加（トリガーパターン）

1. 3つの Trigger ノード（PlayDeathSound, SpawnParticles, ShowGameOverUI）を作成します。
2. ルートの出力からドラッグし、3つのノードすべてに接続します（ファンアウト）。

ステップ 3: 直列アクションの追加（チェーンパターン）

1. Chain ノード FadeToBlack を作成します。
2. ダブルクリックして遅延を「2秒」に設定します。
3. Chain ノード ReturnToMenu を作成します。
4. FadeToBlack → ReturnToMenu を接続します。
5. OnPlayerDeath → FadeToBlack を接続します。

ステップ 4: グループで整理

1. 死亡に関連するすべてのノードをボックス選択します。
2. 右クリック → 「Create Group」を選択。
3. タイトルをダブルクリックして「Death Sequence」にリネームします。

結果: 並列で実行されるSE/VFXと、その後の直列なメニュー遷移が視覚的にわかりやすく表現されます。

---

❓ トラブルシューティング

変更が保存されない

原因: Unityがまだ変更をシリアライズしていない可能性があります。

解決策:

• ウィンドウを閉じて強制的に保存させる。
• 別のグラフに切り替えてから戻す。
• Unity上で Ctrl+S を押す。

---

グラフが空に見える

考えられる原因:

• ツールバーのドロップダウンで間違ったグラフが選択されている。
• GameEventManager に Flow Container が割り当てられていない。

解決策:

• ツールバーのグラフ選択を確認してください。
• GameEventManager のインスペクターでコンテナの割り当てを確認してください。

---

接続が作成できない

考えられる原因:

• 入力から出力へドラッグしている（方向が逆）。
• ルートノードの入力ポートに接続しようとしている。
• 既に接続が存在している。

解決策:

• 常に 出力（右） から 入力（左） へドラッグしてください。
• ルートノードには入力ポートがありません。

---

グループのサイズが自動で変わらない

原因: グループの境界は、メンバーノードが移動したときにのみ更新されます。

解決策: メンバーノードを少し動かして、境界の再計算をトリガーしてください。

---

貼り付けたグループに外部接続がない

期待される動作: 内部接続（メンバー同士の接続）のみがコピーされます。

説明: グループ外のノードへの接続は、テンプレートとしての柔軟な再利用を可能にするため、意図的にコピーされないようになっています。

解決策: グループを貼り付けた後、手動で外部依存関係を接続し直してください。

---

グループが作成できない

考えられる原因:

• 選択されたノードが2つ未満である。
• 既にグループ化されているノードをグループ化しようとしている。

解決策:

• 最低2つのノードを選択してください。
• 再グループ化する場合は、先に古いグループを削除するか、グループと新しいノードの両方を選択して新しいグループを作成してください。

---

📖 次のステップ

キャンバスの操作と整理方法を理解したら、次は以下のトピックに進みましょう：

🔗 接続タイプと互換性

コアコンセプト: ポートの色、線の種類、型の互換性ルールを理解します。

⚙️ ノードの振る舞い設定

ロジック制御: 遅延、条件、実行設定を構成します。

🧩 高度なパターン

エキスパートレベル: パターンを組み合わせて複雑なイベントオーケストレーションを構築します。

---

プロのワークフロー・ヒント

早めに整理: グラフが散らかる前に、作成しながらグループ化を行ってください。

Undoを活用: 50ステップまで戻せます。恐れずに接続を試行錯誤してください。

テンプレート化: よく使うロジックパターンのために、再利用可能なグループテンプレートを作成しましょう。

わかりやすい名前: システムを切り替える際に迷わないよう、グラフやグループには明確な名前を付けてください。

ルートノードの設定: 各論理フローの開始点を明確にマークしてください。

賢くコピー: 一度作れば、何度でも貼り付けられます。グループを設計図（Blueprint）として活用しましょう。

クイックリファレンス

ショートカットを忘れましたか？ツールバーの Help ボタン (? Help) をクリックすれば、ショートカットキー、マウス操作、色の意味などの完全なガイドをいつでも確認できます。