Experimentalでも使いたい！GraphView実践導入Tips

Unity エディタ拡張完全に理解した 勉強会 LTスライドです。
フォローアップ用の記事とサンプルをまとめたリポジトリは以下になります。

Experimentalでも使いたい！ Unity GraphViewを実践で導入するための解説記事
https://qiita.com/th1209/items/f27ee8da7783adce3552

unity-graph-view-samples
https://github.com/th1209/unity-graph-view-samples/tree/main

Transcript

1. Experimentalでも使いたい！ GraphView 実践導入Tips 2025/4/4 @jiro_ramen_cat Unity エディタ拡張 完全に理解した勉強会
2. 発表者について ウチの猫です...!!🐈 株式会社f4samurai @秋葉原 / 勤続8年目 新規3D案件の開発をしてます💪 何でも屋です󰝋 　初期段階プロトタイピング、コンテンツ実装、 　共通基盤開発、開発環境サポート、 　猫テロ etc… X(旧Twitter): https://x.com/jiro_ramen_cat github: https://github.com/th1209 私のMt.FUJI⛰
3. GraphViewとは...? ・Unityが提供しているGraph描画用のエディタ拡張。 ・UIToolkitで実装されている。ShaderGraph、VisualEffectGraphなどが代表的な実装例。 ・ExperimentalなAPIであり、公式的には利用が非推奨。 ・代替となる正式な Graph描画ツール (GraphToolkit)がリリース予定💥
4. 説明に入る前に ...
5. GraphToolkit もうすぐリリース予定です 😇 ・3/20に公式からリリースのアナウンスがでちゃいました！😇😇😇 　https://discussions.unity.com/t/unity-graph-toolkit-update-q1-2025/1614727 ・正式リリースされたらGraphToolkitを使ってください！！
6. とはいえ… ・GraphToolkitのサポート対象はUnity6以降(UnityDiscussionのリリースページより) ・ShaderGraphなど、GraphViewを利用しているパッケージも全て内部実装がリプレース予定。 　ただ、大きなパッケージのリプレースは時間がかかる。 →まだ暫くは使えると考えていいはず...!? ・移行するにしても、以下のような観点で無駄にならないはず！ 　・Graph表示ツールが持つ機能群、実装上の勘所 　・UIToolkitへの習熟 　・etc…
7. このLTのテーマ ・このスライドが、皆さんの業務や趣味の開発など、実践でGraphViewを使うための理解になればいいなと思っています！ ・基本的な使い方は、有志の方が素晴らしい資料を既に公開してくれています。 ・そのため、基本的なところは最低限の説明に留め、実践で使うためのポイントやTipsを紹介します。 ・フォローアップ記事・サンプルリポジトリは以下になります🙏 　詳細な使い方はこちらをご参照ください。 　　フォローアップ記事 　　https://qiita.com/th1209/items/f27ee8da7783adce3552 　　サンプルリポジトリ 　　https://github.com/th1209/unity-graph-view-samples ・発表中は、何となくのコンセプトを掴んでもらえれば大丈夫です💪
8. サンプルリポジトリについて
9. GraphViewの基本 (構成要素など )
11. Window ・GraphViewEditorWindowクラスを継承 ・GraphViewのエントリポイント ・この配下にGraphViewをAddする
12. GraphView ・GraphViewそのもの ・UIToolkitのVisualElementを継承している ・とにかくこのクラスが何でも責務を持つ！ 　・GraphView上の各種コールバック 　・NodeやEdgeなどはGraphView配下に追加 　・Node間の結びつきを決める 　・etc…
13. Node ・Graph中の1ノード ・基底のNodeクラスを継承して好きなようにカスタムできる ・UIToolkitが提供する色々なフィールドを持てる ・色々な表示領域(Container)を持つ ・TitleContainer ・inputContainer, outputContainer ・mainContainer
14. Edge ・グラフ構造における辺。 ・Node間の繋がりを表し、Nodeが持つPort間を結ぶ。 ・どのようにPortを結ぶことができるかは、 　GraphView上で振る舞いを定義する。
15. ContextMenu ・右クリックした際に呼ばれるメニュー。 ・組み込みのメニューにコールバックを仕込むこともできるし、 ・GraphViewクラスのBuildContextualMenuをオーバーライドして、 　メニューの表示内容をカスタムすることもできる。
16. SearchWindow ・ContextMenuを実行した時に、検索可能なウィンドウを表示できる。 ・ISearchWindowProviderを実装して、表示したい Menuを提供する。 ・ShaderGraphのように色々なNodeを生成したい時などに使える。
17. Toolbar ・GraphView上部にToolbarを表示することも可能。 ・GraphViewではなくUIToolkitの機能。 ・Toolbarインスタンスを生成し、 　GraphViewWindowの子に追加するだけ。
18. GraphViewが持つ主要なコールバック nodeCreationRequest ・コンテキストメニューで”Create Node”が呼ばれた際に実行される。 ・Nodeのindex情報や右クリックした際の座標情報が取れるので、ここでNodeを生成する。 graphViewChanged ・GraphViewの要素に変更が入った時に実行される。 ・引数のGraphViewChangeで、GUI操作に応じたの値が取れるのでそれを見て色々やる。 　・Edgeの作成 　・GraphElement(NodeやEdge)の削除 　・GraphElement(NodeやEdge)の移動 serializeGraphElements canPasteSerializedData unserializeAndPaste ・上記3種はNodeやEdgeのコピー&ペースト対応用のコールバック群。 ・serializeGraphElementsで選択された要素を文字列形式にシリアライズ。 ・canPasteSerializedDataでコピー&ペースト可能か判定。 　trueならunserializeAndPasteが呼ばれ、ここに実際のペースト処理を実装する。
19. 実践でGraphViewを 使う際のポイント
20. ・GraphViewにほとんどの処理を書くことになる。 ・各種コールバックの登録 ・Port間のEdge作成の判定 ・ジェスチャ操作などのManipulatorの登録 ・各種小要素(GraphElement)の追加 ・そのためGraphViewクラスの責務が肥大化しがち。 ・ガッツリ作り込む場合は、なるだけGraphViewから具体的なロジックを取り除いておきたい。 ・ex) MVPパターンを使う ・ex) Nodeのファクトリや、各種GraphElementの生成処理を別クラスに逃す ・ex) 元となるデータ構造とのSearialize/Unserialize部分を別クラスに逃す 実装上の考慮ポイント① GraphViewに責務が集中しがち
21. 注意点: GraphViewにSave機能はない ・GraphViewはあくまでGraph構造の表示処理を提供する機能のため。 　ScriptableObjectやJsonなど、どういったデータ構造をGraphViewで扱うかはユーザーに委ねられている。 ・最初にGraphViewで機能実装する際の考慮ポイントになる。
22. 注意点: Undo/Redo機能もない ・こちらも提供されていない。 ・従来のAPI(UnityEditor.Undo)を使って機能実装することになる。 ・Undo/Redoスタックに登録できるのはUnityEngine.Objectなので、対応するデータ構造側でUndo/Redo対応し、 　それをGraphView側に反映するような実装になる。
23. 実装上の考慮ポイント② 対応するデータ構造との対応関係を決める ・前述した注意点を踏まえると、最初の設計段階で、データ構造側とGraphView側でどう同期を取るのか決めた方が良い。 ・概ね、以下のようなタイミングで同期を取ることになる。 ・データ構造側からGraphViewを開く時(リロードや読み込むファイルの切り替え時も考慮) ・NodeやEdgeの追加/削除/座標変更時 ・Nodeのプロパティに変更があった際 ・GraphViewを閉じた際、UnityEditorを落とした際 ・Redo/Undo時 ・Copy&Paste時 ・データ構造側をインスペクタ等で編集した時 ・データ構造側で、View表示するための情報をどう保持しておくかも考慮が必要。 ・ex) Nodeの座標情報はどうするか？ → データ構造側でも保持しておきつつ、インスペクタ拡張などで存在を隠蔽できると丁寧。 ・ex) Edgeの情報をどう扱うか？ → ランタイム側の都合がいいように。 　・ex) Nodeを一意に識別するidと、その払い出しはどうするか？
24. 習熟のポイント : UIToolkitにも習熟しよう ! ・GraphViewはUIToolkitで実装されている。 ・また、GraphViewではなくUIToolkitのAPIをそのまま利用するケースも多い。 ・そのため、UIToolkitのコンセプトや仕様についても理解があるとスムーズにキャッチアップが進むはず。 ・どれがGraphViewのAPIか、どれがUIToolkitのAPIかを意識すると調べ物が捗る。 ・どういう機能を実現したいかにも依ってくるが、 　UIToolkitの以下のようなトピックについてもキャッチアップしていけるとGood。 ・VisualElement, BaseField<TValueType>あたりのAPI仕様 ・USS(UnityStyleSheet) ・イベントハンドリング周り(イベント伝播の仕組み)、D&D対応 ・UIToolkitDebugger ・各種Packageでも、UIToolkitの利用は増えてきた印象。 　ランタイムでの利用はともかくとして、UIToolkitについて知っておいても損はなさそう。
25. UI Toolkit Debuggerはとっても便利 👏 Window右上の 三点リーダーから開く！
26. おまけ: 知っておくと 役立つかもしれない GraphViewの機能
27. Group機能 ・複数のNodeを包含するための機能。 ・GroupもGraphElementの継承クラス。 ・Nodeの追加(D&D)やNodeの削除(Shift+Click)、リサイズ機能などは組み込みで用意されている。 ・スクリプト上でGroupからNodeを取り除きたい場合は、以下のサンプルコードを参照。 GroupからNodeを除くサンプルコード
28. Blackboard機能 ・Graph上のBlackboard(Graph間で共有できる変数群などをまとめるもの)を実現する機能。 ・ShaderGraphとかでよく見るアレ。 ・Graphベースのエディタをガッツリ作り込みたい場合などに使えるはず。 ・Blackboard上のフィールドはBlackboardFieldクラス。typeTextなどの文字列情報や、アイコン用Textureをセットできる。 Blackboardインスタンスを GraphViewにaddするだけ BlackBoardFieldの追加例
29. D&D機能 ・UIToolkitにD&Dを受け付けるコールバックがあるので、それを使う。 ・GraphViewクラス上で各種コールバックを定義。主に使うのは以下。 　・DragUpdatedEvent: 毎フレーム呼ばれる 　・DragPerformedEvent: 要素のドロップ(D&D確定時)に呼ばれる。 ・D&Dのデータの受け渡しは、従来のUnityEditor.DragAndDropを使う。 ・前述のBlackboard機能などと組み合わせて使いそう。 ・DragUpdateEventにて、DragAndDrop.visualModeを設定してやらないと 　DragPerformEventが呼ばれない仕様に注意！
30. MiniMap機能 ・GraphViewの現在表示領域をサマリ表示してくれる機能。 ・Graphの編集領域が広い場合に使えるかもしれない...? ・MiniMap上から要素を非表示にしたい場合は、GraphElement.showInMimimapで制御するらしい。 MiniMapインスタンスを GraphViewにaddするだけ
31. まとめと参考資料
32. まとめ ・ExperimentalなAPIであり、実践で使いそうなケースに対応しようとすると情報が少ない。 　本日の講演が皆さんの現場の何かのヒントになれば...! ・使えるツールとして提供するにはしっかりコードを書く必要あり。 　(GraphToolkitはもう少し楽に記述できることを期待...!) ・UIToolkitを使ったことがない人は、同時にキャッチアップすることをお勧めします。 　(既にUIToolkitを使ったことがある人は、割とすんなり使えるかもしれません。) ・GraphToolkitがリリースされたら皆使おう！✏📚🔥
33. 参考にさせて頂いた資料 【Unity】GraphViewで遊んでみた。 https://hirukotime.hatenablog.jp/entry/2022/11/11/201335 https://hirukotime.hatenablog.jp/entry/2022/11/13/001311 https://hirukotime.hatenablog.jp/entry/2022/11/17/200000 ・初回のキャッチアップはこちらの連載記事を参照させていただきました ! 今PCが手元にないなら絶対に見ないで下さい。記事が優良すぎて、ほぼ 100％その場でGraphViewしてしまいます https://qiita.com/dwl/items/dd14f5f2a187084d317b ・こちらも入門記事として良さそうです。以下のようなケースの参考にさせて頂きました。 　・「Nodeのフィールドで日本語入力したいケース」「 Nodeに応じたファクトリクラスを毎度生成せず、リフレクションで生成する例」 【Unity】GraphViewの構造解説 https://qiita.com/KEN_GameProject/items/b835cd12ed4bf001086b ・NodeのContainerの構造についてはこちらの記事が分かりやすかったです ! GraphView のすゝめ https://learning.unity3d.jp/7654/ ・主催者のもんりぃ先生が既に解説講演をしてくれていました。こちらも大変わかりやすいです ...! Unity Discussion Undo Redo in GraphView https://discussions.unity.com/t/undo-redo-in-graph-view/247636 Unity Discussion Best way of Implementing copy and pasting o nodes in graph view? https://discussions.unity.com/t/best-way-of-implementing-copy-and-pasting-of-nodes-in-graph-view/791881
34. 参考にさせて頂いた資料 (UIToolkit関連) Unityの最新UIシステム「UI Toolkit」でランタイムUIを作成する方法まとめ https://qiita.com/uminohiyoko/items/73d366ec35154d301baa ・UIToolkitの初回キャッチアップはこちらの記事にお世話になりました。 UI Toolkit を学ぶ https://note.com/papacoder/n/n50d808b5e41d#8e4d5507-8697-4b98-94ce-e7dc2d9033c2 ・UIToolkitを学ぶ上での参考資料集がまとめられており、ガッツリ勉強したい方に良さそうです。 ・この記事内で紹介されているいくつかの動画を参考にさせていただきました。 UnityDocumentation USSセレクター https://docs.unity3d.com/ja/2022.3/Manual/UIE-USS-Selectors.html ・公式。UnityStyleSheetの仕様についてはこちらを (CSSと大体似た仕様です )。 【Unity】UI Toolkitにおけるイベント伝播の仕組みとハンドリング方法 https://light11.hatenadiary.com/entry/2023/04/27/192204 ・UIToolkitのイベント伝播の仕様について。 ・今回困ることはありませんでしたが、注意すべき仕様なので抑えておきたいです。
35. ご清聴ありがとうございました！ ゲーム開発のあらゆる場面で グラフ構造は登場するよ！ GraphViewを駆使して、 普段の開発環境を便利にしちゃおう 💪