【Unity】GraphViewで遊んでみた。【第一回】

はじめに

執筆日は20222/11/09になります。
Unityのバージョンは2021.3.1f1を使用しています。

自己紹介

活動名はHiruko、もしくはHirukoTimeで活動してます。
個人でSteamでゲームを販売したり、定期的にゲームジャムなどに参加をしています。

GraphViewについて

ShaderGraphみたいな機能を自作できるAPIです。
Runtimeな使用するAPIではなくEditor拡張のAPIです。
あくまで、データなどを作成する視覚的なツールを作るためのものになります。
現在はExperimentalなので、破壊的な変更が来る可能性はありますが、内部的にShaderGraphやVFXGraphなどで使用されているみたいなのでなくなることはないと思います。

GraphViewの要素について

主な要素

• GraphView
• Node
• Port
• Edge

補助、拡張的な要素

• Blackboard
• MiniMap
• GraphViewToolWindowなど

知っておいた方がいい要素

• USS
• UXML
• UIElements
• Editor拡張系のAPIやワード

実際にいじってみる

まずはWindowの作成

TestWindow.cs

using UnityEditor;
using UnityEditor.Experimental.GraphView;

public class TestWindow : GraphViewEditorWindow
{
    [MenuItem("Window/Test")]
    private static void ShowWindow()
    {
        var window = GetWindow<TestWindow>("TestWindow");
        window.Show();
    }

    private void OnEnable()
    {
        rootVisualElement.Add(new BaseGraphView());
    }
}

今回はEditorWindowを直接継承せず、試したいこともあったのでGraphViewEditorWindowを継承します。GraphViewEditorWindowがEditorWindowを継承しています。

TestGraphView.cs

using UnityEditor.Experimental.GraphView;
using UnityEngine;
using UnityEngine.UIElements;

public class TestGraphView : GraphView
{
    public TestGraphView()
    {
        //形状や内容の設定
        SetupZoom(ContentZoomer.DefaultMinScale,ContentZoomer.DefaultMaxScale);
        this.StretchToParentSize();
        var backGround = new GridBackground();
        backGround.styleSheets.Add(Resources.Load<StyleSheet>("BackGround"));
        Insert(0,backGround);
            
        //操作を受け付けるようにする為
        this.AddManipulator(new ContentDragger());
        this.AddManipulator(new SelectionDragger());
        this.AddManipulator(new RectangleSelector());
    }
}

SetupZoom()はマウスホイールでのズームの設定 StretchToParentSize()はそのままの意味で親のサイズに合わせてくれる。 GridBackGroundはParameterの設定が面倒なためUSSを使用した方が楽。またGridBackGroundは内部でStretchToParentSize()を呼び出しているので、使用する時にしなくても大丈夫。

BackGround.uss

GridBackground {
    --grid-background-color:rgb(90,90,90);
    --line-color:rgba(80,80,80,255);
    --thick-line-color:rgba(40,40,40,153);
    --spacing:10;
    /*--thick-lines: 0 このパラメータは存在するが変更しても変化がない。*/    
}

ちょっと躓いた点としては、UI Toolkit Debugger上での表示はrgba(float,float,float,float)のfloat[0-1]になっているが、USSで指定する場合はParameterをrgba(int,int,int,int)でint[0-255]で指定する。

ここまでの段階で上部のメニューから[Window>Test]でウィンドウを表示すると↑の感じになる。 この段階で、ドラッグででグリッドを動かしたり、ホイールでズームや右クリックのメニューがでるようになります。

次はNodeを表示してみる。

TestGraphView.cs

//省略

public class TestGraphView : GraphView
{
    public TestGraphView()
    {
        //省略
          
        AddElement(new Node());
    }
}

とりあえず表示するだけならこれで表示される。
注意点としては、GraphViewにはGraphView.AddとGraphView.AddElementがあるが、NodeとかのGraph要素はAddElement。GridBackgroundの様な要素はAddと使い分ける必要がある。

何も指定せず生成すると左上にNodeがでる。
この状態でドラッグで動かしたり、右クリックのメニューからDeleteしたり、コピーしたりできる。
試しに表示しただけなので、AddElement(new Node());の部分は削除する。

第二回の予定

NodeにPortやParameterを配置する。
動的なNodeの作成。

実戦で役立つC＃プログラミングのイディオム／定石＆パターン [ 出井秀行 ]