前言

??前幾天把導(dǎo)師的項(xiàng)目打包發(fā)布交了一稿，這半個(gè)星期除了再把項(xiàng)目縫縫補(bǔ)補(bǔ)外（說實(shí)話項(xiàng)目做到后邊實(shí)在有些無聊，都是些瑣碎的東西而且自己也學(xué)不到什么，純粹是浪費(fèi)消磨時(shí)間）無聊逛Unity商店發(fā)現(xiàn)了個(gè)有意思的東西，說實(shí)話一開始我以為只是單純繪制的2D動(dòng)畫：

但再一看才發(fā)現(xiàn)其實(shí)這是三維模型渲染出來的畫面，右邊是模型：

??其實(shí)場景中的卡通渲染模型倒是比較普通，但這個(gè)最終渲染效果對我而言卻可以說是相當(dāng)驚艷了，于是第一反應(yīng)就是看看怎么實(shí)現(xiàn)的然后做到我未來的項(xiàng)目里（當(dāng)然以我的水平和學(xué)習(xí)方向，細(xì)節(jié)大概是看不懂的，但可以看一下大體的思路，如果以后有機(jī)會(huì)可以學(xué)習(xí)學(xué)習(xí)相關(guān)內(nèi)容）。先翻了一下Frame Debugger，看得半懂不懂。然后翻了翻就發(fā)現(xiàn)了這個(gè)東西Visual Compositor，也是跟文章主題相關(guān)的內(nèi)容：一個(gè)流程配置節(jié)點(diǎn)圖。

??然后發(fā)現(xiàn)其實(shí)基本就是各種圖像混合后處理效果疊加，包括描邊、邊緣光、圖像的顏色過渡、補(bǔ)光、模糊混合等，真要說的話其實(shí)并沒有什么復(fù)雜的（專業(yè)搞美術(shù)的做出來的東西第一印象就很好，羨慕 ），但并不完全適合自由視角的卡通渲染。不過這個(gè)節(jié)點(diǎn)圖確實(shí)是我很久以前就想做的一個(gè)編輯器擴(kuò)展內(nèi)容，方便項(xiàng)目里面對話文件的配置（原來用的多個(gè)ScriptableObject連接成一串對話，用起來沒那么方便）。簡單搜了一下發(fā)現(xiàn)這個(gè)節(jié)點(diǎn)圖Unity提供的有現(xiàn)成的類方便擴(kuò)展，關(guān)鍵詞：GraphView，于是參考了網(wǎng)上的博客和Unity商店的插件，在自己的項(xiàng)目中實(shí)現(xiàn)了一個(gè)簡單的對話配置系統(tǒng)。

效果展示

??實(shí)現(xiàn)起來主要包括四個(gè)部分：整個(gè)節(jié)點(diǎn)圖（基類GraphView）、單獨(dú)的一個(gè)節(jié)點(diǎn)（基類Node）、顯示圖的窗口（基類EditorWindow）、用于存儲(chǔ)每個(gè)對話數(shù)據(jù)的文件（基類ScriptableObject）。（當(dāng)然還需要一個(gè)用于讀取對話數(shù)據(jù)并顯示的對話系統(tǒng)，但這是另外的部分）
??最終實(shí)現(xiàn)的效果如下：

根據(jù)實(shí)際項(xiàng)目需求，節(jié)點(diǎn)內(nèi)可以放入各種配置數(shù)據(jù)。在本項(xiàng)目里，每個(gè)節(jié)點(diǎn)都對應(yīng)了某個(gè)人（不是人也行）說的多句話，并且可以點(diǎn)擊按鈕新增、刪除對話內(nèi)容等；右鍵點(diǎn)擊可以呼出菜單，在鼠標(biāo)位置新建節(jié)點(diǎn)；右鍵點(diǎn)擊節(jié)點(diǎn)，除開始節(jié)點(diǎn)外，每個(gè)節(jié)點(diǎn)都可以添加或刪除此段對話結(jié)束后可能出現(xiàn)的選項(xiàng)（Output）；通過點(diǎn)擊左上角或者Ctrl+S可以手動(dòng)保存配置數(shù)據(jù)至ScriptableObject。

實(shí)現(xiàn)細(xì)節(jié)

??網(wǎng)上搜GraphView會(huì)有不少教程和完整代碼，Unity商店的插件也是很好的學(xué)習(xí)資料，所以這里只簡單講一下項(xiàng)目里部分功能的實(shí)現(xiàn)方式。
??1. 右鍵點(diǎn)擊呼出菜單欄的功能有兩種實(shí)現(xiàn)方式，一種是使用GraphView.RegisterCallback<MouseDownEvent>()自己建立一個(gè)菜單（因?yàn)檎麄€(gè)窗口是被GraphView填滿的，項(xiàng)目里Ctrl+S保存用的同樣的方式實(shí)現(xiàn)），另一種是重寫Node中的BuildContextualMenu向菜單中加入選項(xiàng)，項(xiàng)目中實(shí)際使用了第二種，將創(chuàng)建節(jié)點(diǎn)、接口等放在了其中。

	graphView.RegisterCallback<MouseDownEvent>(MouseDown);

    private void MouseDown(MouseDownEvent _event)
    {
        if (_event.button == 1)
        {
            Vector2 _mousePos = _event.mousePosition;
            GenericMenu _menu = new GenericMenu();
            _menu.AddItem(new GUIContent("Create/New Node"), false, () => { /* do something */ });
            _menu.ShowAsContext();
        }
    }

	// in Node class
	public override void BuildContextualMenu(ContextualMenuPopulateEvent _event)
    {
        base.BuildContextualMenu(_event);
        _event.menu.AppendAction("Port/Add Port", (_a) => { /* do something */ });
    }

??2. 節(jié)點(diǎn)里各種UI元素通過Container.Add（inputContainer、mainContainer等）添加，布局可以采用默認(rèn)的布局（如果沒有需求的話），也可以使用uss、uxml自定義布局，在Create->UI Toolkit中可以創(chuàng)建，項(xiàng)目里使用了uss（其實(shí)基本就是css）定義布局。在uss里同樣也是可以通過VisualElement的類型(比如Button、Label等)、名稱（在代碼里對應(yīng)著VisualElement.name，雖然官方文檔不建議多個(gè)元素命名相同，但項(xiàng)目里還是這么做了）、類(如果使用uxml預(yù)定義布局的話可以設(shè)置，在代碼里不清楚怎么設(shè)置)進(jìn)行布局。

	// .cs
	TextField _contentText = new TextField("", 400, true, false, '*');
    _contentText.name = "ContentText";

	/* .uss */
	TextField {
	    width: 303px;
	}
	
	#ContentText {
	    width: 280px;
	    height: 55px;
	}

??3. Unity無法直接序列化這類數(shù)據(jù)進(jìn)行存儲(chǔ)，這里可以采用Unity可以序列化的數(shù)據(jù)結(jié)構(gòu)存儲(chǔ)圖，在需要編輯圖時(shí)再從存儲(chǔ)的數(shù)據(jù)中加載。項(xiàng)目里采用了List記錄所有節(jié)點(diǎn)的數(shù)據(jù)，并使用List中節(jié)點(diǎn)的索引記錄節(jié)點(diǎn)之間的連接。存儲(chǔ)數(shù)據(jù)這部分主要就是通過GraphView.nodes.ToList()獲取圖中所有的節(jié)點(diǎn)，通過GraphView.edges.ToList()或者((Port)Node.outputContainer[i]).connections獲取節(jié)點(diǎn)間連接的邊（Edge），再通過Edge.input.node或Edge.output.node獲取節(jié)點(diǎn)間的連接關(guān)系。記得使用[System.Serializable]將自定義的存儲(chǔ)類聲明為可序列化，并在存儲(chǔ)完數(shù)據(jù)后使用EditorUtility.SetDirty(ScriptableObject)讓Unity知道文件中的數(shù)據(jù)被改變了，需要進(jìn)行保存。文章來源地址http://www.zghlxwxcb.cn/news/detail-526657.html

        List<DialogGraphNode> _dialogNodeList = graphView.nodes.ToList().Cast<DialogGraphNode>().ToList();

        dialogNodeSave = new List<DialogNodeSaveData>();
        foreach (DialogGraphNode _node in _dialogNodeList)
        {
            DialogNodeSaveData _nodeSaveData = new DialogNodeSaveData(_node.dialogNodeData, _node.title, _node.GetPosition());
            dialogNodeSave.Add(_nodeSaveData);
            if (_node == graphView.startNode) startNode = _nodeSaveData;
        }
		
		// ...
		
		EditorUtility.SetDirty(this);

到了這里，關(guān)于Unity 可視化節(jié)點(diǎn)編輯器（GraphView、編輯器擴(kuò)展）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！