使用Xnode试着做了简单的对话系统

可视化了看起来是挺方便的，就是节点多了窗口会卡…

运行效果预览

需要的插件

• Xnode

用于绘制节点

• Odin

用于定制inspector窗口

自定义节点

首先要新建一个Graph脚本

[CreateAssetMenu(menuName = "Graph/对话图")]
public class DialogueGraph : NodeGraph {
   
}

然后我们需要开始结束，普通对话，选择分支，触发事件这些最基本的功能

所以分别写以下脚本用来定义节点

对话框

public class DialogueNode : Node {
    [LabelText("说话人")] public string speaker;
    [PreviewField(Alignment = ObjectFieldAlignment.Left), LabelText("头像")]
    public Sprite head;
    [TextArea, LabelText("说话内容")] public List<string> contents;
    [Input(ShowBackingValue.Never), LabelText("上一段")] public string pre;

    [LabelText("下一个是")] public NextType nextType;

    [ShowIf("nextType", NextType.Dialogue), Output, LabelText("下一段对话")]
    public DialogueNode nextDialogue;
    [ShowIf("nextType", NextType.Branch), Output, LabelText("下一段分支")]
    public BranchNode nextBranch;
    [ShowIf("nextType", NextType.Flag), Output, LabelText("下一段标记")]
    public FlagNode nextFlag;
    [Output, LabelText("触发事件")] public EventNode trigger;
    //下一个节点类型
    public enum NextType {
        [LabelText("对话框")] Dialogue,
        [LabelText("分支框")] Branch,
        [LabelText("标记框")] Flag
    }
    //类型与名字存起来 对连接进行限制时使用
    private Dictionary<NextType, string> singleDt = new Dictionary<NextType, string>(){
        {NextType.Dialogue, nameof(nextDialogue)},
        {NextType.Branch, nameof(nextBranch)},
        {NextType.Flag, nameof(nextFlag)}
    };

    protected override void Init() {
        base.Init();
    }

    public override object GetValue(NodePort port) {
        return null;
    }

    //当值更新时 （编辑器下）
    private void OnValidate() {
        //切换下一个类型的选项时 对所连接的节点进行限制
        foreach (var s in singleDt) {
            if (nextType!=s.Key) {
                GetPort(s.Value).ClearConnections();
            }
        }
    }

    public override void OnCreateConnection(NodePort from, NodePort to) {
        //限定连接节点类型
        if (Outputs.Contains(from)) {
            if (from.ValueType != to.node.GetType()) {
                Debug.LogError("不能将" + from.ValueType + "端口连接到" + to.node.GetType() + "节点！");
                GetPort(from.fieldName).Disconnect(to);
            }
        }
    }
}

示例

分支框

public class BranchNode : Node {
    [LabelText("提问人")]
    public string speaker;
    [PreviewField(Alignment = ObjectFieldAlignment.Left),LabelText("头像")]
    public Sprite head;
    [TextArea, LabelText("问题")] public string question;
    [Input(ShowBackingValue.Never), LabelText("上一段")] public string pre;
    [Output(dynamicPortList = true), LabelText("分支选项"), TextArea]
    public List<string> branchs;

    public override object GetValue(NodePort port) {
        return null; // Replace this
    }
}

示例

标记框和事件框

其实这俩可以写在一起的，但是懒得改了

public class FlagNode : Node {
    [LabelText("节点类型")]
    public FlagNodeType flagType;
    public enum FlagNodeType {
        Start,End
    }
    [Input((ShowBackingValue.Never)),ShowIf("flagType",FlagNodeType.End)]
    public string pre;
    [Output(),LabelText("下一段"),ShowIf("flagType",FlagNodeType.Start)] public string next;

    public override object GetValue(NodePort port) {
        return null;
    }
}
public class EventNode : Node {
    [Input(ShowBackingValue.Never), LabelText("触发对象")] public string triggerObj;
    [LabelText("事件名称")] public string eventName;

    public override object GetValue(NodePort port) {
        return null; // Replace this
    }
}

对话管理

首先写一些扩展方法

public static class NodeTool {
   /// <summary>
   /// 获取端口连接节点
   /// </summary>
   /// <param name="node"></param>
   /// <param name="fieldName"></param>
   /// <returns></returns>
   public static Node GetNodeByField(this Node node, string fieldName) {
      if (!node.HasPort(fieldName)) {
         Debug.LogWarning("不存在 "+fieldName+" 端口！");
         return null;
      }
      var port = node.GetPort(fieldName);
      if (!port.IsConnected) {
         Debug.LogWarning( fieldName+" 端口未连接！");
         return null;
      }
      return port.Connection.node;
   }
   /// <summary>
   /// 获取端口属性的值
   /// </summary>
   /// <param name="node"></param>
   /// <param name="fieldName"></param>
   /// <returns></returns>
   public static object GetValuesByField(this Node node,string fieldName) {
      return node.GetType().GetField(fieldName).GetValue(node);
   }
}

原理就是获取结点然后依次解析其中的内容，然后更新UI

public class DialogueManager : MonoBehaviour {
   public GameObject dialogueUi;

   public DialogueGraph dialogueGraph;

   private Text content;
   private Text speaker;
   private Image head;
   [ShowInInspector] private Node currentNode;
   [ShowInInspector] private List<string> contentList = new List<string>();
   [ShowInInspector] private List<Button> branchBtns = new List<Button>();
   public GameObject branchPb;

   private void Awake() {
      content = dialogueUi.transform.Find("Content").GetComponent<Text>();
      speaker = dialogueUi.transform.Find("Speaker").GetComponent<Text>();
      head = dialogueUi.transform.Find("Head").GetComponent<Image>();
   }

   void Start() {
      dialogueUi.SetActive(false);
   }

   void Update() {
      if (Input.GetKeyDown(KeyCode.A)) {
      }
      if (Input.GetKeyDown(KeyCode.E)) {
         if (currentNode == null) {
            dialogueUi.SetActive(true);
            currentNode = dialogueGraph.nodes[0].GetOutputPort("next").Connection.node;
            Debug.Log(currentNode);
            UpdateDialogueUi(currentNode);
         }
         else if (currentNode.GetType() == typeof(DialogueNode)) {
            ShowContent();
         }
      }
   }

   #region "对话系统逻辑部分"

   private void UpdateDialogueUi(Node current) {
      if (current.GetType() == typeof(DialogueNode)) {
         var node = current as DialogueNode;
         if (node != null) {
            contentList.AddFromList(node.contents);
            content.text = contentList[0];
            speaker.text = node.speaker;
            head.sprite = node.head;
         }
      }
      else if (current.GetType() == typeof(BranchNode)) {
         var branchNode = currentNode as BranchNode;
         if (branchNode != null) {
            contentList.Add(branchNode.question);
            speaker.text = branchNode.speaker;
            head.sprite = branchNode.head;
         }
      }
   }

   /// <summary>
   /// 显示对话内容
   /// </summary>
   void ShowContent() {
      if (contentList.Count > 0) {
         contentList.RemoveAt(0);
         if (contentList.Count == 0) {
            foreach (var connection in currentNode.GetOutputPort("trigger").GetConnections()) {
               TriggerEvent(connection.node as EventNode);
            }
            switch (currentNode.GetValuesByField("nextType")) {
               case DialogueNode.NextType.Dialogue:
                  Debug.Log("进入对话框节点");
                  currentNode = currentNode.GetNodeByField("nextDialogue");
                  var node = currentNode as DialogueNode;
                  if (node != null) {
                     contentList.AddFromList(node.contents);
                     speaker.text = node.speaker;
                     head.sprite = node.head;
                  }
                  break;
               case DialogueNode.NextType.Branch:
                  Debug.Log("进入分支框节点");
                  currentNode = currentNode.GetNodeByField("nextBranch");
                  UpdateDialogueUi(currentNode);
                  AddBranchClick(currentNode as BranchNode);
                  break;
               case DialogueNode.NextType.Flag:
                  Debug.Log("进入标记框节点");
                  currentNode = currentNode.GetNodeByField("nextFlag");
                  FlagNode flagNode = currentNode as FlagNode;
                  if (flagNode != null && flagNode.flagType == FlagNode.FlagNodeType.End) {
                     Debug.Log("对话流程结束！");  
                     dialogueUi.SetActive(false);
                  }
                  break;
            }
         }
         if (contentList.Count > 0) {
            content.text = contentList[0];
         }
      }
   }

   /// <summary>
   /// 触发对话框连接的事件
   /// </summary>
   /// <param name="node"></param>
   private void TriggerEvent(EventNode node) {
      Debug.Log("触发事件：" + node.eventName);
   }

   void AddBranchClick(BranchNode node) {
      for (int i = 0; i < node.branchs.Count; i++) {
         var branchPort = node.GetOutputPort("branchs " + i);
         var text = node.branchs[i];
         Debug.Log("增加" + text + "分支");
         var btn = Instantiate(branchPb, dialogueUi.transform.Find("Select").transform, false)
            .GetComponent<Button>();
         branchBtns.Add(btn);
         btn.GetComponentInChildren<Text>().text = text;
         if (branchPort.IsConnected) {
            var i1 = i;
            btn.onClick.AddListener(delegate {
               foreach (var connection in branchPort.GetConnections()) {
                  if (connection.node.GetType() == typeof(EventNode)) {
                     TriggerEvent(connection.node as EventNode);
                  }
                  if (connection.node.GetType() == typeof(DialogueNode)) {
                     Debug.Log("点击分支" + i1 + "进入对话框节点");
                     currentNode = connection.node;
                     contentList.RemoveAt(0);
                     UpdateDialogueUi(currentNode);
                  }
               }
               //清楚所有按钮
               for (int j = branchBtns.Count - 1; j >= 0; j--) {
                  Destroy(branchBtns[j].gameObject);
                  branchBtns.Remove(branchBtns[j]);
               }
            });
         }
      }
   }

   #endregion
}

UI层级与文件

最后将脚本挂到物体上即可

需要的可以直接在这下载packagehttps://legroft.lanzous.com/iH0Mqoy1q8d