はじめに

この記事はUnity #2 Advent Calendar 2019の6日目の記事です。
Unity2018辺りからExperimentalで入ったGraphViewについて解説し、完全理解を目指します。

自己紹介

現在、新卒入社したスマホゲーム会社で社会人4年目をやっています。
普段Unityを用いてゲーム開発をしつつ、全社で使用できるツールの作成なども行っています。

GraphViewとは

現在Unityでは新しいエディタ用UI、UIElements(RMGUI)への移行が行われています。
UIElements自体は2019のバージョンからExperimentalが外れ、正式リリースされました。
GraphViewはUIElementsの一部として、ノードエディタを作成できる機能なのですが、現状ShaderGraph、VFXGraphなどのUnity公式のツールで使用されてはいますが、実験的機能という扱いで、まだ使うのは早い。という風な扱いです。

ただ、エディタ拡張好きとしては、抑えずにいられない機能なので、いったん2019年末の段階でのGraphViewを完全理解し、正式リリース時にすぐに使えるようになっておこうという試みです。

よって、正式リリース時にはAPI等の仕様が大きく変わっている可能性があります。
読み物程度に考えてもらえたらと思います。

GraphViewの要素

GraphViewは大きく4つの要素から成っています。

GraphView
Node
Port
Edge

このほかにもBlackboardなどオプション的な要素はありますが、
今回は最小限のGraphView実装を行っていくので、一旦省きます。

上の要素の細かい説明は以下で実際に実装していく中でその都度行っていきます。

実際にGraphViewを実装する

環境

Unity2020.1.0a13

1.EditorWindowを作成

まずは、エディタ拡張おなじみのEditorWindowを作ります。

SampleGraphEditorWindow.cs

usingUnityEditor;publicclassSampleGraphEditorWindow:EditorWindow{[MenuItem("Window/Open SampleGraphView")]publicstaticvoidOpen(){GetWindow<SampleGraphEditorWindow>("SampleGraphView");}}

これでメニューのWindowから"Open SampleGraphView"を選択するとウインドウが表示されます。

2.GraphViewを作成

次に、早速GraphViewを作成していきます。
これは上で示したNodeやEdgeの親となるものです。

一旦最小限で、何も表示されないGraphViewを作成します。

SampleGraphView.cs

usingUnityEditor.Experimental.GraphView;publicclassSampleGraphView:GraphView{}

また、ここでEditorWindowにGraphViewを追加します。

SampleGraphEditorWindow.cs

voidOnEnable(){rootVisualElement.Add(newSampleGraphView());}

まだ何も表示されませんが、一旦これでOKです。

3.Nodeを作成

GraphViewは一般的にノードエディタなどと呼ばれる物ですが、
Nodeは名前の通り、ノードエディタの一番重要と思われる部分になります。
一旦基底のNodeを作成し、実際に使う際にはそれを継承した色々な処理を持ったノードを作成していくことになるかと思います。

また、最小限に何も実装のないNodeを作成します。

SampleNode.cs

usingUnityEditor.Experimental.GraphView;publicclassSampleNode:Node{}

これをGraphViewに追加します。一旦コンストラクタでやってしまいます。

SampleGraphView.cs

publicSampleGraphView():base(){AddElement(newSampleNode());}

で、エディタのウインドウの方を確認してみます。

すると、何も表示されていません…
こういう時に便利なのがUIElements Debuggerです。

どうやらNode自体は作成されているのですが、GraphViewのHeightが0になっているようです。
きちんと表示されるようにHeightを設定してあげます。

SampleGraphEditorWindow.cs

voidOnEnable(){vargraphView=newSampleGraphView(){style={flexGrow=1}};rootVisualElement.Add(graphView);}

これで、EditorWindowの高さに合わせて、GraphViewが伸び縮みして全体に表示されるようになり、隠れていたNodeも表示されるようになりました。

4.NodeにPortをつける

Nodeは他のNodeとつなげて使います。
その際OutputPortからInputPortへEdgeをつなげます。
まずはNodeにInputPortとOutputPortをつけます。

ついでに簡単に見た目を整えます。

SampleNode.cs

publicSampleNode(){title="Sample";varinputPort=Port.Create<Edge>(Orientation.Horizontal,Direction.Input,Port.Capacity.Single,typeof(Port));inputContainer.Add(inputPort);varoutputPort=Port.Create<Edge>(Orientation.Horizontal,Direction.Output,Port.Capacity.Single,typeof(Port));outputContainer.Add(outputPort);}

とりあえずPortとEdgeは基底の物を使いますが、なんか急にノードっぽくなりました。

5.Nodeを動かせるようにする

こうなるとノードが動かないのがなんか違和感を感じる気がするので、いったんここで動かせるようにしておきます。

GraphViewでManipulatorというものを付けてあげると動くようになります。
Manipulatorにはいくつかあるのですが、今回はとりあえずドラッグして動かすためのものに限ります。

UnityEngine.UIElementsをusingしてあげて

SampleGraphView.cs

usingUnityEngine.UIElements;

SelectionDraggerをAddManipulatorすると

SampleGraphView.cs

publicSampleGraphView():base(){AddElement(newSampleNode());this.AddManipulator(newSelectionDragger());}

ドラッグで移動できるようになりました。

6.Nodeを複数作れるようにする

現状GraphViewのコンストラクタで1個作るようになっているので、
これを右クリックのメニューから追加できるようにします。

SampleGraphView.cs

publicSampleGraphView():base(){this.AddManipulator(newSelectionDragger());nodeCreationRequest+=context=>{AddElement(newSampleNode());};}

これでSampleNodeが複数作れるようになりました。
こうなるとNodeを繋げたくなりますが、どうやらうまく繋がりません。

7.Node同士を繋げる

NodeはどのNode、どのPortにでも繋がるわけではありません。
OutputPortから正しいInputPortにつなげてあげる必要があります。
そこでGetCompatiblePortsをoverrideして、正しいPortを返してあげます。

SampleGraphView.cs

publicoverrideList<Port>GetCompatiblePorts(PortstartAnchor,NodeAdapternodeAdapter){returnports.ToList();}

今回はとりあえず全てのPortに繋がるようにしてみましたが、
本当はstartAnchorに入っているPortから正しく判断してあげる必要があります。

Edgeの色と背景の色が似ていてすごく見にくいですが、これでNode同士が繋がるようになりました。

ここで、GraphViewのUI自体はまあまあ抑えられたかと思います。
これで終わりにしようかとも思いましたが、実際にツールを作るとなるとまだ要素がたりてないと感じたので、
ツール作成の章に移ります。

GraphViewを用いてツールを作成する

要件

ツールと言っても、実用的なツールを作成するとなると流石に長くなりすぎると思うので、最小限の要件を定義します。

ズームインズームアウトが行える
背景色を変更する
複数種のノードを作成できる
実行ボタンを押すとルートノードにつながっているノードの処理を行う

これに加えて機能ノードを作成しますが、今回はログ出力のノードのみ
ログ出力ノードには文字列の入力のみ
とします。

1.ズームインズームアウトを行う

ノードエディタを使うとなると、流石にこれくらいは欲しいと思うので実装していきます。
実はGraphViewでSetupZoomを呼び出すのみで、ズームインズームアウトを行うことができます。

SampleGraphView.cs

publicSampleGraphView():base(){SetupZoom(ContentZoomer.DefaultMinScale,ContentZoomer.DefaultMaxScale);this.AddManipulator(newSelectionDragger());nodeCreationRequest+=context=>{AddElement(newSampleNode());};}

2.背景色を変更する

こちらもシンプル、GraphViewにGridBackgroundというVisualElementを追加するととりあえず黒っぽい背景になるので、これでいきます。

SampleGraphView.cs

publicSampleGraphView():base(){SetupZoom(ContentZoomer.DefaultMinScale,ContentZoomer.DefaultMaxScale);Insert(0,newGridBackground());this.AddManipulator(newSelectionDragger());nodeCreationRequest+=context=>{AddElement(newSampleNode());};}

補足をすると、VisualElementというのはUIElementsの基本的な要素で、これを組み合わせることでUIが作られます。
少しUIElementsを触っていると、Add(VisualElement element)の方を使えばいいのではないかと思うのですが、
そうするとGraphView内の要素よりも手前にGridBackgroundが表示されてしまうので、Insertを使って奥に差し込みます。

3.ノードを実装する

とりあえずノードを作っていきます。
今回作成するノードは

ルートノード
ログ出力ノード
文字列出力ノード

一旦、今までのSampleNodeを抽象クラスとし、今回使用するノードはそれを継承するものとします。

SampleNode.cs

usingUnityEditor.Experimental.GraphView;publicabstractclassSampleNode:Node{}

ではまずはログ出力ノードを作成します。

ProcessNode.cs

usingUnityEditor.Experimental.GraphView;publicclassProcessNode:SampleNode{publicProcessNode(){varinputPort=Port.Create<Edge>(Orientation.Horizontal,Direction.Input,Port.Capacity.Single,typeof(Port));inputPort.portName="In";inputContainer.Add(inputPort);varoutputPort=Port.Create<Edge>(Orientation.Horizontal,Direction.Output,Port.Capacity.Single,typeof(Port));outputPort.portName="Out";outputContainer.Add(outputPort);}}

一旦、ProcessNodeをかませて、LogNodeを作成します。

LogNode.cs

usingUnityEditor.Experimental.GraphView;publicclassLogNode:ProcessNode{publicLogNode():base(){title="Log";varinputPort=Port.Create<Edge>(Orientation.Horizontal,Direction.Input,Port.Capacity.Single,typeof(string));inputContainer.Add(inputPort);}}

次に文字列出力ノードを作成します。これは同じ値をいろんなところに使いたいことが想定できるので、
CapacityをMultiにしておきます。

StringNode.cs

usingUnityEngine.UIElements;usingUnityEditor.Experimental.GraphView;publicclassStringNode:SampleNode{privateTextFieldtextField;publicstringText{get{returntextField.value;}}publicStringNode():base(){title="String";varoutputPort=Port.Create<Edge>(Orientation.Horizontal,Direction.Output,Port.Capacity.Multi,typeof(string));outputContainer.Add(outputPort);textField=newTextField();mainContainer.Add(textField);}}

最後にルートノードを作成します。
ルートノードは消えないようにしておきたいので、capabilitiesからDeletableを引いておきます。

RootNode.cs

usingUnityEditor.Experimental.GraphView;publicclassRootNode:SampleNode{publicRootNode():base(){title="Root";capabilities-=Capabilities.Deletable;varoutputPort=Port.Create<Edge>(Orientation.Horizontal,Direction.Output,Port.Capacity.Single,typeof(Port));outputPort.portName="Out";outputContainer.Add(outputPort);}}

ここで、GraphViewを生成した際にRootNodeを1つ配置しておくようにします。

SampleGraphView.cs

publicRootNoderoot;publicSampleGraphView():base(){SetupZoom(ContentZoomer.DefaultMinScale,ContentZoomer.DefaultMaxScale);Insert(0,newGridBackground());root=newRootNode();AddElement(root);this.AddManipulator(newSelectionDragger());nodeCreationRequest+=context=>{AddElement(newSampleNode());};}

次にこれらの作成したノードをエディタ上から作成できるようにします。

4.任意のノードを選択し、作成する

SearchWindowを用いると、ノードを選択できるようなUIを簡単に作成できます。
ISearchWindowProviderを実装したクラスがScriptableObjectが必要です。

SampleSearchWindowProvider.cs

usingSystem;usingSystem.Collections.Generic;usingUnityEngine;usingUnityEditor.Experimental.GraphView;publicclassSampleSearchWindowProvider:ScriptableObject,ISearchWindowProvider{privateSampleGraphViewgraphView;publicvoidInitialize(SampleGraphViewgraphView){this.graphView=graphView;}List<SearchTreeEntry>ISearchWindowProvider.CreateSearchTree(SearchWindowContextcontext){varentries=newList<SearchTreeEntry>();entries.Add(newSearchTreeGroupEntry(newGUIContent("Create Node")));foreach(varassemblyinAppDomain.CurrentDomain.GetAssemblies()){foreach(vartypeinassembly.GetTypes()){if(type.IsClass&&!type.IsAbstract&&(type.IsSubclassOf(typeof(SampleNode)))&&type!=typeof(RootNode)){entries.Add(newSearchTreeEntry(newGUIContent(type.Name)){level=1,userData=type});}}}returnentries;}boolISearchWindowProvider.OnSelectEntry(SearchTreeEntrysearchTreeEntry,SearchWindowContextcontext){vartype=searchTreeEntry.userDataasSystem.Type;varnode=Activator.CreateInstance(type)asSampleNode;graphView.AddElement(node);returntrue;}}

CreateSearchTreeではSampleNodeクラスを継承したクラスをSearchTreeEntryに入れて返し、
OnSelectEntryで選択された項目に対応する処理を行います。
今回はここでNodeを作成しています。

また、右クリックでNodeを作成していたところを、SearchWindowを呼び出すように変更します。

SampleGraphView.cs

publicSampleGraphView():base(){SetupZoom(ContentZoomer.DefaultMinScale,ContentZoomer.DefaultMaxScale);Insert(0,newGridBackground());root=newRootNode();AddElement(root);this.AddManipulator(newSelectionDragger());varsearchWindowProvider=newSampleSearchWindowProvider();searchWindowProvider.Initialize(this);nodeCreationRequest+=context=>{SearchWindow.Open(newSearchWindowContext(context.screenMousePosition),searchWindowProvider);};}

これで任意のノードを選択して作成することができるようになりました。

5.正しいポート同士のみが繋がるようにする

UI実装編でとりあえず全部のノードが繋がるので、そこを直していきます。

SampleGraphView.cs

publicoverrideList<Port>GetCompatiblePorts(PortstartAnchor,NodeAdapternodeAdapter){varcompatiblePorts=newList<Port>();foreach(varportinports.ToList()){if(startAnchor.node==port.node||startAnchor.direction==port.direction||startAnchor.portType!=port.portType){continue;}compatiblePorts.Add(port);}returncompatiblePorts;}

とりあえず

同じノードに対してはつなげない
InputからInput、OutputからOutputはつなげない
Portに設定されているTypeが一致していないとつなげない

としました。実際にはもう少し考えることはあると思いますが、一旦これでいきます。

6.実際にノードを用いて処理を行う

これで見た目上必要な部分の実装は完了したかと思います。

実際に処理を行うとなると、ルートノードにつながっているノードを順に取得し、処理を行う必要があります。
Nodeにつながっている別のNodeを取得する機能は無いようなので、Port生成時にキャッシュしておく必要がありそうです。
また、Node側で処理を記述していきたいので、ProcessNodeに処理用のメソッドを持たせてあげます。

ProcessNode.cs

usingUnityEditor.Experimental.GraphView;publicabstractclassProcessNode:SampleNode{publicPortInputPort;publicPortOutputPort;publicProcessNode(){InputPort=Port.Create<Edge>(Orientation.Horizontal,Direction.Input,Port.Capacity.Single,typeof(Port));InputPort.portName="In";inputContainer.Add(InputPort);OutputPort=Port.Create<Edge>(Orientation.Horizontal,Direction.Output,Port.Capacity.Single,typeof(Port));OutputPort.portName="Out";outputContainer.Add(OutputPort);}publicabstractvoidExecute();}

LogNode.cs

usingSystem.Linq;usingUnityEngine;usingUnityEditor.Experimental.GraphView;publicclassLogNode:ProcessNode{privatePortinputString;publicLogNode():base(){title="Log";inputString=Port.Create<Edge>(Orientation.Horizontal,Direction.Input,Port.Capacity.Single,typeof(string));inputContainer.Add(inputString);}publicoverridevoidExecute(){varedge=inputString.connections.FirstOrDefault();varnode=edge.output.nodeasStringNode;if(node==null)return;Debug.Log(node.Text);}}

RootNode.cs

usingUnityEditor.Experimental.GraphView;publicclassRootNode:SampleNode{publicPortOutputPort;publicRootNode():base(){title="Root";capabilities-=Capabilities.Deletable;OutputPort=Port.Create<Edge>(Orientation.Horizontal,Direction.Output,Port.Capacity.Single,typeof(Port));OutputPort.portName="Out";outputContainer.Add(OutputPort);}}

これで、Rootから順にノードを取得していき、処理を行っていきます。

SampleGraphView

usingSystem.Linq-------------------------------------publicvoidExecute(){varrootEdge=root.OutputPort.connections.FirstOrDefault();if(rootEdge==null)return;varcurrentNode=rootEdge.input.nodeasProcessNode;while(true){currentNode.Execute();varedge=currentNode.OutputPort.connections.FirstOrDefault();if(edge==null)break;currentNode=edge.input.nodeasProcessNode;}}

適当にこのメソッドを叩く口を作ってあげて

SampleGraphEditorWindow.cs

voidOnEnable(){vargraphView=newSampleGraphView(){style={flexGrow=1}};rootVisualElement.Add(graphView);rootVisualElement.Add(newButton(graphView.Execute){text="Execute"});}