介紹了一系列利用圖和節點所構成的視覺化工具，但節點呈現的工具仍只是鳳毛麟角，提起大眾化的視覺工具，表單式的呈現仍是大宗。首當其衝的莫過於Excel，但Excel出來三十年左右，已有不少介紹是用於文書處理中，用於遊戲開發中的文章也不在少數，這次要討論的主角是Unity的客製化編輯工具。

視覺化定義相當的廣泛，而從一開始要介紹記錄Unity的視覺化編輯工具時，其實也沒有限制一定要是圖和節點式的編輯方式，只是現今Unity中這些工具竄起，就想趁這次挑戰選幾個做複習，選幾個做學習。撇開圖和節點式的限制，其實客製化Unity編輯器中的Inspector或是Editor Window就可以算是某種程度的視覺化，至少讓數值的呈現以更有意義的方式呈現，進行幫助開發。

不過多數時候撰寫客製化的編輯器會花去很多時間，而這些時間都會用在Unity提供的Editor GUI的撰寫上。尤其是現在遊戲中多以採用UGUI的方案進行製作，很少人會用原本的GUI，這讓撰寫編輯器擴充時光是UI呈現上就會花去不少時間去嘗試（UGUI和NGUI還沒有出來時，那個年代Editor和遊戲裡用的GUI可說是同一套，但那個年代會寫客製化Editor的開發者很少）

時至今日，就算是一大堆圖和節點式的工具，就算是Asset Store上有著琳琅滿目的擴充可選，但總是有些內部、稀少、自己來最好的擴充要進行撰寫，若是花時間慢慢的試Editor裡的GUI如何呈現最完美，那真的就本末倒置了，不管怎麼說功能還是最重要的，但不想放棄操作體驗的情況下，如果有擴充可以協助開發客製化的擴充，那就太完美了。

而今天要談的，就是這樣的一個擴充。一個幫助寫擴充的擴充（有些饒舌），也就是Ｏdin Inspector（OI）。

有用過Unity的開發者都知道，在Unity的Inspector中裡若是用了Array（或是List）雖然Unity會如實的呈現出裡面可被序列化的數值，但要做數值的掉換、移除都是很困難難，而光是要寫出一個客製化可調整的陣列，在前五年可說是數個天的工作時間。當然時至今日，Unity自己都有內建的可以使用，但客製化的UI也從可調式陣列轉換成其它複雜的UI。

且就算是時至今日，Unity對於C#原生的Property一直沒有序列化，所以Property的值無法預設的顯示在Inspector中，更不用說Interface這常用的概念，想要在Inspector裡進行操作都不可能。

但這些對於OI來說，都不困難。也就是說不論對於序列化的需求是否超過了Unity能給予的，又或是想要快速的撰寫出Editor GUI，OI都可以輕易的協助。

有在用Unity的開發者都知道，開發到某個階段後，Inspector都是給予非程式人員調整數值的地方，也正因為是非程式人員，所以對於資料的呈現很講究。企劃人員講求的是分類、清楚，美術人員著重的簡單、好看。因此Editor客製化的擴充就要在GUI上分別去滿足用Inspector編輯的各式需求。

看官方的宣導引片可以從中了解

或是直接到官網，網站上中間的地方有更新（2019年）過的各式範例。只能說這個擴充實在是太方便了。只要有自行開發擴充需求，都可以藉由OI的協助讓UI變得更加專業。

其時Unity推的客製化編輯器就是要讓資料可以有一部份在Unity裡完成，而不用全數透過Excel表格進行轉換，這也是Unity對於可視化資料給予的方案，無奈Editor GUI的複雜度頗高，產值又沒有比較好，所以仍是有不少人還是堅持用Excel進行資料的撰寫。但資料導向也就還好，美術模型、圖片的調整有時非在Unity端完成不可。

遵循古法沒有不好，只是有擴充和新的機制可以更有效的協助，這確實的會省下不少開發時間。

官方的範例已相當的全面了，但還是自行設想了一個範例做練習。一個NPC管理器，並可對NPC發送事件，進行測試。

以下為程式碼的片段

[ProgressBar(0, 10, ColorMember = "GetCountColor", BackgroundColorMember = "GetCountBackgroundColor", Segmented = true)]
public int SegmentedColoredBar = 5;
private Color GetCountColor()
{
    return
        this.SegmentedColoredBar > 3 ?
            Color.white : Color.red;
}

private Color GetCountBackgroundColor()
{
    return
        this.SegmentedColoredBar > 3 ? 
            Color.blue :
            new Color(0.16f, 0.16f, 0.16f, 1f);
}

按鈕部份則是以函式方式表現

[InfoBox(
    "This button will clear all npc, use with caution", InfoMessageType.Warning)]
[GUIColor(1, 0.4f, 0.4f)]
[Button(ButtonSizes.Large, ButtonStyle.Box, Expanded = true)]
public void DeleteAllNpc()
{
    ClearAllNpc.Invoke(this, System.EventArgs.Empty);
}

在Inspector裡呈現的截圖

今日測試用的專案放罝在Git Repo中的odin-inspector-normal目錄裡，嘗試的範例非常簡易，但已可以看出在OI的幫助下，這些UI操作的撰寫可說是相當輕鬆，而其內部提供的範例更可以展現出多元的組合呈現。