【unity系統模塊開發】UnityEditor工具--數據可視化

在Unity作性能優化，或者作一些編輯器工具的時候，若是把收集回來的數據用圖表來展現，可使數據更加直觀，若是是性能優化的時候，就能更突顯出問題所在。

在項目的開發過程當中有同事作了個可視化工具，看了一下真實高端，就研究了一下而且簡化作了個demo。

因此這其實也不能算原創，更多的代碼是同事寫的，我只能算是介紹了一下代碼邏輯和實現原理。

首先看下效果：

這個是我簡化過的版本，數據是在必定範圍內隨機的，看起來也還能夠。

橫軸是時間，縱軸是數量。不一樣顏色區域表明不一樣數據。點擊每幀的時候出現每幀具體數據

---

接下來就是講具體實現.

這裏面有幾部分：

1. 數據收集

2. 數據可視化

3. 點中具體位置時顯示當前位置的具體數據。

   
   

   
   

1.數據收集

首先這裏的數據收集就看你的需求，是作一個性能檢測工具的話，就收集drawcall信息。作玩家數據分析就收集玩家數據。

在咱們這個demo中，能夠看到上面每幀中有4組數據（Data1，Data2，Data3，Data4），每一個數據類型都是int，能夠當作是次數收集。

也就是說，咱們每幀去獲取這四個數據，把四個數據放在同一個結構裏，而後這個結構放在一個list裏。

我由於只是作個demo，因此數據就模擬生成了。

能夠看到。爲了顯示的時候直觀一點，我把隨機區域稍微區分了一下，這樣看起來好看點，像第一個圖那樣。

2.數據可視化

接下來就講一講怎麼把這些數據轉換成圖表。

這裏面能夠拆成幾部分來看

1. xy軸

2. 數據圖

3. 定位線

4. 總數據文本

5. 當前幀數據文本

咱們是在OnGUI()裏面去實現畫圖，也就是說，在每一個OnGUI的update裏，這5個部分都須要繪製。

接下來就一個個說。

1. xy軸

   xy軸很簡單，就是在固定位置畫兩個帶箭頭的線，帶箭頭的線這個在上篇文章就有給代碼，因此這裏就很少說了。

   具體就看上篇文章：https://blog.51cto.com/13638120/2103459

2. 數據圖

   這部分是整篇文章的重點，由於數據收集只是收集個數記錄，要把個數轉成圖表仍是有點麻煩的。

   首先基本概念是，既然是畫圖，就是畫三角形，既然是畫三角形，就是把座標信息傳到GL.Vertex()裏繪製，因此說到底就是把個數轉換成座標，畫的是個二維圖，因此z軸統一爲0.也就是要獲取x，y座標。

   畫三角形也有有兩種方式，TRIANGLES和TRIANGLE_STRIP，這部分前者是每三個座標畫一個三角形，兩個三角形要6個座標。後者是前三個座標畫第一個三角形，第四個座標和第二三個座標組成三個座標，畫第二個三角形。

   這部分若是不理解的話看下這篇文章：https://blog.csdn.net/onafioo/article/details/39454233

   而對於咱們來講，咱們須要的是作到像上面的圖同樣，填滿圖表，因此選擇第二種TRIANGLE_STRIP會更會合適且容易實現。好比：

   上面標了ABCD四個點，這四個點之間的這片區域就經過這四個點就能夠畫滿，ABC構成第一個三角形，CBD構成第二個三角形。這時只要把ABCD這四個點依次傳入就能夠了。

   因此接下來要解決的就是怎麼得出座標。

   先看一下代碼：

       

    _graphContentRect是這個繪圖框的Rect。

    首先，x座標是很好計算的。算法就是以這個Rect的左邊框爲第一個點，計算當前點佔總共點個數的第幾個，再乘以這個Rect的寬，再加上左邊的一個點的x座標獲得當前點座標。

    y座標的計算方法就是，首先須要知道全部點的最高值是多少，由於y座標表明的是個數，這個值是不固定的，全部須要每幀去算最大值是多少。而後算法就跟上面算x差很少，算出當前的個數佔最高值的多少，乘以這個Rect高，用這個Rect最高點座標減去這個座標活動y座標。

    這樣就得到這個點的繪製座標了。

    有了座標就開始畫三角形，按照上面的說法，就是按ABCD座標順序把點塞到GL.Vertex()裏。

先不看中間的ifelse判斷，先省略if的狀況。能夠看到，好比說畫Data1的圖（一開始的圖的×××部分），就是把當前幀Data1的點，和Data2的點傳進去，再傳第二幀Data1的點和Data2的點。跟咱們上面說的ABCD是同樣的。

其餘顏色塊的畫法以此類推。

只不過到最下面的時候，也就是上面的if裏面的代碼塊，y座標就取y軸的座標 _graphContentRect.yMax，完成。

到這裏就完成了畫圖了。

如今能夠看看效果：

這裏會有明顯的鋸齒，想着優化一下的話，給描個邊，消一下鋸齒。

這下真的好了~

3.定位線

    也就是根據你選擇的點，找到那個點的最高值座標，在那個左邊的左方向和上下方向畫線。

4.總數據文本

    比較簡單，具體就看代碼好了

5.當前幀數據文本

    比較簡單，具體就看代碼好了

第二部分的數據可視化就講完了~~~

3.點中具體位置時顯示當前位置的具體數據。

    就是監聽一下鼠標點擊事件，根據鼠標點中的位置判斷距離它最近的座標，獲取數據。

這裏就講完全部的了。

下面提供Demo，還有不懂的能夠看代碼或者留言交流~

https://pan.baidu.com/s/1w65S-J_qg2_w2CUzuB_B0Q