【unity系統(tǒng)模塊開(kāi)發(fā)】UnityEditor工具--數(shù)據(jù)

在Unity做性能優(yōu)化，或者做一些編輯器工具的時(shí)候，如果把收集回來(lái)的數(shù)據(jù)用圖表來(lái)展示，可以使數(shù)據(jù)更加直觀，如果是性能優(yōu)化的時(shí)候，就能更突顯出問(wèn)題所在。

在項(xiàng)目的開(kāi)發(fā)過(guò)程中有同事做了個(gè)可視化工具，看了一下真實(shí)高端，就研究了一下并且簡(jiǎn)化做了個(gè)demo。

所以這其實(shí)也不能算原創(chuàng)，更多的代碼是同事寫(xiě)的，我只能算是介紹了一下代碼邏輯和實(shí)現(xiàn)原理。

首先看下效果：

這個(gè)是我簡(jiǎn)化過(guò)的版本，數(shù)據(jù)是在一定范圍內(nèi)隨機(jī)的，看起來(lái)也還可以。

橫軸是時(shí)間，縱軸是數(shù)量。不同顏色區(qū)域代表不同數(shù)據(jù)。點(diǎn)擊每幀的時(shí)候出現(xiàn)每幀具體數(shù)據(jù)

接下來(lái)就是講具體實(shí)現(xiàn).

這里面有幾部分：

1. 數(shù)據(jù)收集

2. 數(shù)據(jù)可視化

3. 點(diǎn)中具體位置時(shí)顯示當(dāng)前位置的具體數(shù)據(jù)。

   
   

   
   

1.數(shù)據(jù)收集

首先這里的數(shù)據(jù)收集就看你的需求，是做一個(gè)性能檢測(cè)工具的話，就收集drawcall信息。做玩家數(shù)據(jù)分析就收集玩家數(shù)據(jù)。

在我們這個(gè)demo中，可以看到上面每幀中有4組數(shù)據(jù)（Data1，Data2，Data3，Data4），每個(gè)數(shù)據(jù)類型都是int，可以當(dāng)做是次數(shù)收集。

也就是說(shuō)，我們每幀去獲取這四個(gè)數(shù)據(jù)，把四個(gè)數(shù)據(jù)放在同一個(gè)結(jié)構(gòu)里，然后這個(gè)結(jié)構(gòu)放在一個(gè)list里。

我因?yàn)橹皇亲鰝€(gè)demo，所以數(shù)據(jù)就模擬生成了。

可以看到。為了顯示的時(shí)候直觀一點(diǎn)，我把隨機(jī)區(qū)域稍微區(qū)分了一下，這樣看起來(lái)好看點(diǎn)，像第一個(gè)圖那樣。

2.數(shù)據(jù)可視化

接下來(lái)就講一講怎么把這些數(shù)據(jù)轉(zhuǎn)換成圖表。

這里面可以拆成幾部分來(lái)看

1. xy軸

2. 數(shù)據(jù)圖

3. 定位線

4. 總數(shù)據(jù)文本

5. 當(dāng)前幀數(shù)據(jù)文本

我們是在OnGUI()里面去實(shí)現(xiàn)畫(huà)圖，也就是說(shuō)，在每個(gè)OnGUI的update里，這5個(gè)部分都需要繪制。

接下來(lái)就一個(gè)個(gè)說(shuō)。

1. xy軸

   xy軸很簡(jiǎn)單，就是在固定位置畫(huà)兩個(gè)帶箭頭的線，帶箭頭的線這個(gè)在上篇文章就有給代碼，所以這里就不多說(shuō)了。

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

2. 數(shù)據(jù)圖

   這部分是整篇文章的重點(diǎn)，因?yàn)閿?shù)據(jù)收集只是收集個(gè)數(shù)記錄，要把個(gè)數(shù)轉(zhuǎn)成圖表還是有點(diǎn)麻煩的。

   首先基本概念是，既然是畫(huà)圖，就是畫(huà)三角形，既然是畫(huà)三角形，就是把坐標(biāo)信息傳到GL.Vertex()里繪制，所以說(shuō)到底就是把個(gè)數(shù)轉(zhuǎn)換成坐標(biāo)，畫(huà)的是個(gè)二維圖，所以z軸統(tǒng)一為0.也就是要獲取x，y坐標(biāo)。

   畫(huà)三角形也有有兩種方式，TRIANGLES和TRIANGLE_STRIP，這部分前者是每三個(gè)坐標(biāo)畫(huà)一個(gè)三角形，兩個(gè)三角形要6個(gè)坐標(biāo)。后者是前三個(gè)坐標(biāo)畫(huà)第一個(gè)三角形，第四個(gè)坐標(biāo)和第二三個(gè)坐標(biāo)組成三個(gè)坐標(biāo)，畫(huà)第二個(gè)三角形。

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

   而對(duì)于我們來(lái)說(shuō)，我們需要的是做到像上面的圖一樣，填滿圖表，所以選擇第二種TRIANGLE_STRIP會(huì)更會(huì)合適且容易實(shí)現(xiàn)。比如：

   

   上面標(biāo)了ABCD四個(gè)點(diǎn)，這四個(gè)點(diǎn)之間的這片區(qū)域就通過(guò)這四個(gè)點(diǎn)就可以畫(huà)滿，ABC構(gòu)成第一個(gè)三角形，CBD構(gòu)成第二個(gè)三角形。這時(shí)只要把ABCD這四個(gè)點(diǎn)依次傳入就可以了。

   所以接下來(lái)要解決的就是怎么得出坐標(biāo)。

   先看一下代碼：

    _graphContentRect是這個(gè)繪圖框的Rect。

    首先，x坐標(biāo)是很好計(jì)算的。算法就是以這個(gè)Rect的左邊框?yàn)榈谝粋€(gè)點(diǎn)，計(jì)算當(dāng)前點(diǎn)占總共點(diǎn)個(gè)數(shù)的第幾個(gè)，再乘以這個(gè)Rect的寬，再加上左邊的一個(gè)點(diǎn)的x坐標(biāo)得到當(dāng)前點(diǎn)坐標(biāo)。

    y坐標(biāo)的計(jì)算方法就是，首先需要知道所有點(diǎn)的最高值是多少，因?yàn)閥坐標(biāo)代表的是個(gè)數(shù)，這個(gè)值是不固定的，所有需要每幀去算最大值是多少。然后算法就跟上面算x差不多，算出當(dāng)前的個(gè)數(shù)占最高值的多少，乘以這個(gè)Rect高，用這個(gè)Rect最高點(diǎn)坐標(biāo)減去這個(gè)坐標(biāo)活動(dòng)y坐標(biāo)。

    這樣就獲得這個(gè)點(diǎn)的繪制坐標(biāo)了。

    有了坐標(biāo)就開(kāi)始畫(huà)三角形，按照上面的說(shuō)法，就是按ABCD坐標(biāo)順序把點(diǎn)塞到GL.Vertex()里。

先不看中間的ifelse判斷，先省略if的情況?？梢钥吹剑热缯f(shuō)畫(huà)Data1的圖（一開(kāi)始的圖的×××部分），就是把當(dāng)前幀Data1的點(diǎn)，和Data2的點(diǎn)傳進(jìn)去，再傳第二幀Data1的點(diǎn)和Data2的點(diǎn)。跟我們上面說(shuō)的ABCD是一樣的。

其他顏色塊的畫(huà)法以此類推。

只不過(guò)到最下面的時(shí)候，也就是上面的if里面的代碼塊，y坐標(biāo)就取y軸的坐標(biāo) _graphContentRect.yMax，完成。

到這里就完成了畫(huà)圖了。

現(xiàn)在可以看看效果：

這里會(huì)有明顯的鋸齒，想著優(yōu)化一下的話，給描個(gè)邊，消一下鋸齒。

這下真的好了~

3.定位線

    也就是根據(jù)你選擇的點(diǎn)，找到那個(gè)點(diǎn)的最高值坐標(biāo)，在那個(gè)左邊的左方向和上下方向畫(huà)線。

4.總數(shù)據(jù)文本

    比較簡(jiǎn)單，具體就看代碼好了

5.當(dāng)前幀數(shù)據(jù)文本

    比較簡(jiǎn)單，具體就看代碼好了

第二部分的數(shù)據(jù)可視化就講完了~~~

3.點(diǎn)中具體位置時(shí)顯示當(dāng)前位置的具體數(shù)據(jù)。

    就是監(jiān)聽(tīng)一下鼠標(biāo)點(diǎn)擊事件，根據(jù)鼠標(biāo)點(diǎn)中的位置判斷距離它最近的坐標(biāo)，獲取數(shù)據(jù)。

這里就講完所有的了。

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

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