這二十多天來介紹了這麼多的視覺化節點編輯工具，但在開發時仍有可能有些玩法上所需的資料沒有對應的擴充可購入使用，但圖和節點式的編輯方式又是如此符合編撰的行為，自己製作一個視覺化節點編輯器或許是不可必避免的。

但重新開發節點式編輯器多數情況下並不可行，除了開發時程的問題，或是技術上的限制都讓這樣重鑄輪子變得不實際。還好，在目前節點工具盛行的情況下，直接找個節點式呈現的擴充，看它的編輯部份進行著逆向工程的轉移，只要是合法的取得，License裡也沒限制，這會是一個很棒的手段。

xNode就是一套可以直接使用的Graph製作框架，這次就花些時間了解，並利用它製作出簡易的技能樹。

透過Unity Package Manager可以直接引用到專案中

"com.github.siccity.xnode": "https://github.com/siccity/xNode.git"

先熟悉節點擴充要如何進行，在範例程式碼中，可以看到它利用了InputAttribute和OutputAttribute定義進入口和出入口。反正也不確要怎麼開始，最快的方式就是直接產生SkillNode和SkillNodeGraph二個Script後，產出Skill Node Graph Asset。

首先為了減化複雜度，讓每個串接的Skill至多只能到二個，隨意加上了float值的出口，大致上就像下圖。科技樹的雛形就在xNode的幫助下，看起來像是有些規模。

然而圖像並沒有反應出實際的資料，接下來要進行資料上的調整。首先要加上的就是相關於此Skill的屬性。片段程式碼如下

public string skillId;
public string skillName;

而反應出的圖經過資料編輯後會像是

暫且不論是否有傷害值，花費多少的技能點數等，另一個問題很快速的浮現出來，在Graph的總覽這裡，只看到一個Graph裡有三個節點，存放在一個陣列中，但用圖和節點進行編輯最主要的就是要利用樹狀結構來決定節點和節點之間的闗聯性。

比方說在這裡的三個節點，在圖中的關聯性是

• 要先學會了Fire Ball後才能學會Flame
• 要先學會了Fire Ball後才能學會Burning Hands

也就是Flame和Burning Hands都相依於Fire Ball先學會後才能被啓用（解鎖）。只看陣列中的節點排列，不足以反應出此關係，更不用說當技能樹的節點增加後，要怎麼取得其節點相依關聯？

看了xNode的文件，沒有看到這部部份，顯然是開發者要自行處理。也就是說關聯性從圖和節點要轉換成專案裡可用的資料，要仰賴開發者自行處理。將圖做稍微複雜的擴充後，就來進行節點關聯性擷取的動作。

依照了文件中說明自行產生了GraphEditor的Editor Code，並在裡面override了OnGUI函式。

[NodeGraphEditor.CustomNodeGraphEditorAttribute(typeof(Runtime.SkillNodeGraph))]
public class SkillNodeGraphEditor : NodeGraphEditor
{
    public override void OnGUI()
    {
        base.OnGUI();

        if (GUILayout.Button("Process Graph"))
        {
            Debug.Log($"Process Graph");
        }
    }
}

在圖的最上層出現了一個Button，接下來在就用Dictionary搭配xNode給予的API進行Skill相依性的撰寫，這裡記錄漸進式的相依性，也就是第N層的Skill只記錄第N - 1層的相依性，這樣的做法可按照不同遊戲的資料需求而調整。整個抽取相依性的程式碼有些冗長，就不貼在這裡。可直接從放置在Git Repo中的xnode-skilltree目錄裡了解。

記錄下來的相依性再經過一層遊戲中實際資料的記錄的轉換，最後就可以看到大致的Skill資料在SkillData裡的呈現方式。

當然這是一份很簡化的資料，沒有傷害值、連Skill名稱都沒有，遊戲端讀入可能也無法有效的使用，但抽取出來的Skill解鎖相依性已經可以證明xNode的協助是如此巨大的。尤其是整個使用加上文章的撰寫可以在四個小時內完成，真的是很大的助力。

這次安排xNode的了解主要也是希望用於日後專案的開發上，能夠有圖和節點的編輯方式，此次試驗的結果成效相當的好，之後專案的開發上會納入積極的考量中。