web-dev-qa-db-ja.com

グラフまたはツリー構造のGUIエディターの作成方法

Unity3DのMecanimアニメーションシステムには、GUI（この場合はブレンドツリー）を使用してツリーを定義できるカスタムEditorWindowがあります。

次のようになります。

enter image description here

ノード（状態）を作成し、それらを接続（遷移）する可能性を提供します。

今、私はいくつかのグラフとツリー構造を開発しています、そして、ゲームデザイナーがそれらの構造を移入できるようにするために、エディタ拡張を書きたいです。

Mecanimアニメーター（上記の図）のようなEditorWindowを正確に再作成したいのです。

私の質問は、このようなタスクに使用できるコンポーネントはありますか？描画および接続ボックスと矢印に使用される組み込みクラスはありますか？または、自分でGUI要素を完全に記述する必要がありますか？

c#unity3d
26
Heisenbug

「ツール、ライブラリ、またはお気に入りのオフサイトリソースを見つけること」を求めていませんでした。 Unity3D AP​​Iまたはエンジン自体が提供するいくつかの使用可能なコンポーネントを使用して、グラフエディターのようなMecanimをどのように再現するかを知りたい（質問が明確でない場合はごめんなさい）。

私の答えは次のとおりです。

いいえ、そのようなグラフを描画するためにそのまま使用できるコンポーネントはありませんが、独自のコンポーネントを作成するのは非常に簡単です。以下は、ノードを表すためにドラッグ可能な GUI.Window を使用し、エッジを描画するために Handles.DrawBezier を使用する簡単な例のスニペットです。

public class GraphEditorWindow : EditorWindow
{
    Rect windowRect = new Rect (100 + 100, 100, 100, 100);
    Rect windowRect2 = new Rect (100, 100, 100, 100);


    [MenuItem ("Window/Graph Editor Window")]
    static void Init () {
        EditorWindow.GetWindow (typeof (GraphEditorWindow));
    }

    private void OnGUI()
    {
        Handles.BeginGUI();
        Handles.DrawBezier(windowRect.center, windowRect2.center, new Vector2(windowRect.xMax + 50f,windowRect.center.y), new Vector2(windowRect2.xMin - 50f,windowRect2.center.y),Color.red,null,5f);
        Handles.EndGUI();

        BeginWindows();
        windowRect = GUI.Window (0, windowRect, WindowFunction, "Box1");
        windowRect2 = GUI.Window (1, windowRect2, WindowFunction, "Box2");

        EndWindows();

    }
    void WindowFunction (int windowID) 
    {
        GUI.DragWindow();
    }
}
16
Heisenbug

あなたは間違った男です。 UnityEditorに表示されるものはすべてどこかにコードが必要です。 MecanimEditorは名前空間UnityEditor.Graphs.AnimationStateMachineにあります。

UnityEditor.GraphsにあるGraphGUIを拡張します。このクラスは、グラフの描画を担当します。

using System;
using UnityEditor;
using UnityEngine;
using UnityEditor.Graphs;
using System.Collections.Generic;

namespace ws.winx.editor.components
{
 public class GraphGUIEx:GraphGUI{


 }

}

新しいEditorWindowを作成します。

public class GraphEditorWindow : EditorWindow
 { 
  static GraphEditorWindow graphEditorWindow;
  Graph stateMachineGraph;

  GraphGUIEx stateMachineGraphGUI;

  [MenuItem("Window/Example")]
  static void Do ()
  {
   graphEditorWindow = GetWindow<grapheditorwindow> ();
  }

....

グラフ構造を作成します。ノードとノード間のエッジが含まれます。

stateMachineGraph = ScriptableObject.CreateInstance<Graph> ();
    stateMachineGraph.hideFlags = HideFlags.HideAndDontSave;

                 //create new node
    Node node=ScriptableObject.CreateInstance<Node>();
    node.title="mile2";
    node.position=new Rect(400,34,300,200);


    node.AddInputSlot("input");
    start=node.AddOutputSlot("output");
    node.AddProperty(new Property(typeof(System.Int32),"integer"));
    stateMachineGraph.AddNode(node);

//create new node
    Node node=ScriptableObject.CreateInstance<Node>();
    node.title="mile";
    node.position=new Rect(0,0,300,200);

    Slot end=node.AddInputSlot("input");
    node.AddOutputSlot("output");
    node.AddProperty(new Property(typeof(System.Int32),"integer"));
    stateMachineGraph.AddNode(node);

//create Edge
    stateMachineGraph.Connect(start,end);

graphGUI = ScriptableObject.CreateInstance<GraphGUIEx>();
graphGUI.graph = graph;

グラフを描く。

void OnGUI ()
  {

   if (graphEditorWindow && stateMachineGraphGUI != null) {
    stateMachineGraphGUI.BeginGraphGUI (graphEditorWindow, new Rect (0, 0, graphEditorWindow.position.width, graphEditorWindow.position.height));
               stateMachineGraphGUI.OnGraphGUI ();


    stateMachineGraphGUI.EndGraphGUI ();

   }
  }

より多くのスタイリングと描画制御のためにNodeGUIまたはEdgeGUIをオーバーライドします。 NodeEditorおよびEdgeGUIで行われたUnityEditor.Graphs.AnimationStateMachine.GraphGUIスタイリングからコードを貼り付けます。

13
user999913

このトピックは非常に複雑ですが、スタータースクリプトの素敵なリポジトリが必要な場合は、Unityの公式サイトでこのフォーラムスレッドをご覧ください http://forum.unity3d.com/threads/simple-node-editor.189230/

*更新：誰かが複雑なチュートリアルシリーズを投稿し、説明した内容を正確に作成する方法について詳しく説明しています。 https://www.youtube.com/watch?v=gHTJmGGH92w をお楽しみください。

編集：完全に機能するUnityグラフエディターをGitHubリポジトリで作成しました。主にスキルツリーに焦点を当てています。完全ではありませんが、完全に機能するグラフエディタがどのように見えるかを示しています。次のリンクのソースコード。

https://github.com/ashblue/unity-skill-tree-editor

5
Ash Blue

各ツリーオブジェクト内のデータのオブジェクトを作成してみてください。次に、System.Drawingを使用してカスタムコントロール（図の四角形のボックス）を作成し、System.Drawingを使用して各ツリーオブジェクトにこれらの矢印を作成します。各DataObjectに、矢印が指す場所のIDと情報があることを確認してください。カスタムコントロールの作成に関するヘルプが必要な場合は、過去にYouTubeで this チュートリアルを使用しました。

0
McSwaggens