【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