unityでnode editorのようなツールを作りたい

Question

前提・実現したいこと

unityでユーザが編集可能なnodeとnodeをつなげてグラフにするツールを作成したいです。
しかし、unityでnode graphの実装の方法を調べても見つからないです。
Node editorを実装しているのはたくさんありますが、uGUI上で動かせるものは見当たらないです。

質問

いま、最も欲している知識はuGUIでNode editorを実装する方法、もしくは、そのようなアセットです。
この件について何か知っている方がおられたら教えてください。よろしくお願いします。

Answer 1

そのものが作れるアセットについては私は知らないので割愛します。
以下、自作する場合。

描画について、とりあえず「ボックス」と「ボックスを繋ぐ線」があればノード的な見た目になると思います。
ボックスはまぁいいとして（普通のImageでいい）、線も直線であれば普通のImageを駆使して作れなくはないです。が、負荷と手間が大変だと思うので、「ugui 線を引く」「ugui ベジェ曲線」などでGoogle検索すると出る情報を参考にした方がいいと思います。
なお描画だけであれば図形を描くアセットも存在するようです。

プログラムについては「適切な形に設計・開発してください」としか言えません。
エディタ拡張によるノードエディターの作り方が参考になると思います。

使い物になるレベルの物を作るのは大変だと思いますが頑張ってください。

Answer 2

横から失礼します。
とてもありがたいスレッドでした。

Bongoさんのレスを実装しているのですが、
ConnectionManager
などの定義が見当たらず実装に苦労しています。

gitなどに上記状況など上がっていたりしますでしょうか？

もしくは、どのようにしたら上記コメントと同じ状況を自分の環境に再現できますでしょうか？

お手数おかけしますがどうぞよろしくお願いいたします。

Comments

[Bongo]

ConnectionManagerは回答の最初の方で申し上げた「UI Graph」に収録されていたものです。もしかしてこのアセットをインストールしていなかった...とかではないでしょうか?

[nkazto]

失礼しました！　その通りです。
単体で動くものを探していたので、勘違いしていました。
UI Graphを前提としていると書いてあったのですが、すみません。

Answer 3

アセットストアを探してみても、確かにビジュアルプログラミング関連でグラフ式UIを採用しているものは結構あるようですが、プレイヤーに操作してもらうためのUI部品的なキットは見当たりませんね...
ざっとみてみたところ、ご所望のものに一番近そうなのはUI Graphでしょうか。ですが、無料でしたので試してみたものの、このアセットが用意してくれるのはRectTransform同士を繋ぐ線を引く機能のみのようで、ノードの設計やプレイヤーの操作に対する応答などは各自で作らなければならなそうです。
逆に、このアセット自体の機能はシンプルですので、グラフ構造の可視化目的に限らず単に線を引くための用途に流用することもできそうですね。

ひとまず試しに、プレイヤーの操作でノードの接続線を張るのをやってみました。
下図のようなプレハブを作成し...

ノード本体部分のスクリプトは単にドラッグで位置を移動するだけ、

using UnityEngine;
using UnityEngine.EventSystems;

public class Node : MonoBehaviour, IBeginDragHandler, IDragHandler
{
    private Camera canvasCamera;
    private RectTransform canvasTransform;
    private Vector2 offset;
    private RectTransform rectTransform;

    public void OnBeginDrag(PointerEventData eventData)
    {
        Vector2 position;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            this.canvasTransform,
            eventData.position,
            this.canvasCamera,
            out position);
        this.offset = this.rectTransform.anchoredPosition - position;
    }

    public void OnDrag(PointerEventData eventData)
    {
        Vector2 position;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            this.canvasTransform,
            eventData.position,
            this.canvasCamera,
            out position);
        this.rectTransform.anchoredPosition = position + this.offset;
    }

    private void Awake()
    {
        this.rectTransform = this.transform as RectTransform;
        var canvas = this.rectTransform.root.GetComponent<Canvas>();
        this.canvasTransform = canvas.transform as RectTransform;
        this.canvasCamera = canvas.worldCamera;
    }
}

ノードの右側に突き出た出力ポートのスクリプトでは、ドラッグ開始時に見えない末端オブジェクトを作って出力ポートとの間に接続線を張り、そのままドラッグ操作で末端を移動できるようにして、入力ポートにドロップされたらそこにあらためて接続線を張り直すようにしてみました。

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class OutputPort : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
    private Camera canvasCamera;
    private RectTransform canvasTransform;
    private RectTransform connectionHandle;
    private readonly List<RaycastResult> raycastResults = new List<RaycastResult>();
    private RectTransform rectTransform;
    private Connection tempConnection;

    public void OnBeginDrag(PointerEventData eventData)
    {
        var handle = new GameObject("Handle");
        this.connectionHandle = handle.AddComponent<RectTransform>();
        this.connectionHandle.SetParent(this.canvasTransform, false);
        Vector2 position;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            this.canvasTransform,
            eventData.position,
            this.canvasCamera,
            out position);
        this.connectionHandle.anchoredPosition = position;
        this.connectionHandle.sizeDelta = Vector2.zero;
        ConnectionManager.CreateConnection(this.rectTransform, this.connectionHandle);
        this.tempConnection = ConnectionManager.FindConnection(this.rectTransform, this.connectionHandle);
        var points = this.tempConnection.points;
        points[0].direction = ConnectionPoint.ConnectionDirection.East;
        points[0].color = this.GetComponent<Image>()?.color ?? Color.white;
        points[1].direction = ConnectionPoint.ConnectionDirection.West;
    }

    public void OnDrag(PointerEventData eventData)
    {
        Vector2 position;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            this.canvasTransform,
            eventData.position,
            this.canvasCamera,
            out position);
        this.connectionHandle.anchoredPosition = position;
    }
    
    public void OnEndDrag(PointerEventData eventData)
    {
        ConnectionManager.RemoveConnection(this.tempConnection);
        Destroy(this.tempConnection.gameObject);
        this.tempConnection = null;
        Destroy(this.connectionHandle.gameObject);
        this.connectionHandle = null;

        EventSystem.current.RaycastAll(eventData, this.raycastResults);
        foreach (var raycastResult in this.raycastResults)
        {
            var port = raycastResult.gameObject.GetComponent<InputPort>();
            if (port != null)
            {
                var portTransform = port.transform as RectTransform;
                ConnectionManager.CreateConnection(this.rectTransform, portTransform as RectTransform);
                var connection = ConnectionManager.FindConnection(this.rectTransform, portTransform);
                var points = connection.points;
                points[0].direction = ConnectionPoint.ConnectionDirection.East;
                points[0].color = this.GetComponent<Image>()?.color ?? Color.white;
                points[1].direction = ConnectionPoint.ConnectionDirection.West;
                points[1].color = port.GetComponent<Image>()?.color ?? Color.white;
            }
        }
    }

    private void Awake()
    {
        this.rectTransform = this.transform as RectTransform;
        var canvas = this.rectTransform.root.GetComponent<Canvas>();
        this.canvasTransform = canvas.transform as RectTransform;
        this.canvasCamera = canvas.worldCamera;
    }
}

ノードの左側に突き出た入力ポートは特に機能を持たせておらず、入力ポートであると識別するためのただの目印になっています。

using UnityEngine;

public class InputPort : MonoBehaviour
{
}

動かしてみたところ、下図のようになりました。

実際にグラフエディターとして意味のある動作をさせるには本腰を入れて作り込む必要がありそうですね。sakura_hanaさんのアドバイスの通り、ソースコードを見ることができるアセットがありましたらそれを見てみるのが有効だろうと思います。さすがにそのままパクってしまうのはまずいでしょうが、設計する上でのヒントとして役に立つのではないでしょうか。