NGUI所見(jiàn)即所得之UIAtlasMaker , UIAtlas

2019-11-09 18:36:18

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

NGUI所見(jiàn)即所得之UIAtlasMaker , UIAtlas

本文的重點(diǎn)就是要將NGUI把多張圖片打成一個(gè)圖集（Atlas）的原理和過(guò)程研究下，學(xué)習(xí)下Unity提供的api和NGUI寫(xiě)的功能以及設(shè)計(jì)思想。

UIAtlas

在介紹UIAtlasMaker之前先看下，先看下UIAtlasMaker的產(chǎn)物——UIAtlas，在創(chuàng)建SPRite的時(shí)候都要指定UIAtlas，下面先對(duì)UIAtlas的代碼：

C#代碼

// Material used by this atlas. Name is kept only for backwards compatibility, it used to be public. [HideInInspector][SerializeField] Material material; // List of all sprites inside the atlas. Name is kept only for backwards compatibility, it used to be public. [HideInInspector][SerializeField] List<UISpriteData> mSprites = new List<UISpriteData>(); // Size in pixels for the sake of MakePixelPerfect functions. [HideInInspector][SerializeField] float mPixelSize = 1f; // Replacement atlas can be used to completely bypass this atlas, pulling the data from another one instead. [HideInInspector][SerializeField] UIAtlas mReplacement; // Whether the atlas is using a pre-multiplied alpha material. -1 = not checked. 0 = no. 1 = yes. int mPMA = -1;

可以很驚奇的發(fā)現(xiàn)UIAtlas的成員變量竟然極其精簡(jiǎn)，就只有：Material material; UISpriteDatat的List mSprites; 每個(gè)像素的大小 mPixelSize 這個(gè)跟UIWidget的像素大小應(yīng)該是類(lèi)似的， UIAtlas mReplacement; 這個(gè)目前只能望文生義，雖然知道是用來(lái)替換UIAtlas，但好像沒(méi)有發(fā)現(xiàn)哪里會(huì)有用到，在UISprite的那里只是選擇不同的UIAtlas而不是替換UIAtlas本身，就暫且擱置，最后一個(gè)是mPMA這個(gè)是pre-multiplied的像素存儲(chǔ)技術(shù)，大致了解下，好像是把a(bǔ)lpha的值存儲(chǔ)在每個(gè)顏色的RGB中去已達(dá)到節(jié)省存儲(chǔ)空間的技術(shù)，想要了解更多可以自行g(shù)oogle下。

接著看UIAtlas，接下來(lái)就是把屬性的{get,set} 以及幾個(gè)函數(shù)，也很簡(jiǎn)單，主要就是屬性改變，就調(diào)用MakeAsDirty()函數(shù)，下面看下這個(gè)函數(shù)的前面一部分：

C#代碼

public void MarkAsDirty () { #if UNITY_EDITOR UnityEditor.EditorUtility.SetDirty(gameObject); #endif if (mReplacement != null) mReplacement.MarkAsDirty(); UISprite[] list = NGUITools.FindActive<UISprite>(); for (int i = 0, imax = list.Length; i < imax; ++i) { UISprite sp = list[i]; if (CheckIfRelated(this, sp.atlas)) { UIAtlas atl = sp.atlas; sp.atlas = null; sp.atlas = atl; #if UNITY_EDITOR UnityEditor.EditorUtility.SetDirty(sp); #endif } } …… }

可以看出這個(gè)函數(shù)其實(shí)就是更新以replacemet和this為UIAtlas的UISprite的UIAtlas，就是這么簡(jiǎn)單。

UISpriteData

在UIAtlas中有GetSprite()和GetListOfSprites()，其中GetSprite返回的UISpriteData，讓人不得不猜想U(xiǎn)ISpriteData就是UISprite中的圖片，但其實(shí)它只是一個(gè)結(jié)構(gòu)體：

C#代碼

public class UISpriteData { public string name = "Sprite"; public int x = 0; public int y = 0; public int width = 0; public int height = 0; public int borderLeft = 0; public int borderRight = 0; public int borderTop = 0; public int borderBottom = 0; public int paddingLeft = 0; public int paddingRight = 0; public int paddingTop = 0; public int paddingBottom = 0;

一看這些成員變量，就會(huì)感覺(jué)很熟悉，這不是就是UI組件的基本熟悉么，可以進(jìn)一步看下UIInspectorEditor界面，就更加確信了，而且Border其實(shí)用在SliceSprite的，至于Padding就是空白不顯示區(qū)域，而且x,y,width,height其實(shí)該圖片就是在UIAtlas上Rect區(qū)域。

也就是說(shuō)，UISpriteData根本沒(méi)有實(shí)際記錄圖片的像素信息，而只是記錄圖片在UIAtlas生成的那張大圖的坐標(biāo)，寬度和高度，以及圖片拉伸的一些信息（Border,Padding）。

UIAtlasMaker

從前面的分析，可以大概知道UIAtlasMaker的原理：把多張圖片合并成一張大圖，記錄每張圖片的在生成的大圖的坐標(biāo)和大小。下面將使用介紹算法那種思路把UIAtlasMakder的工作流程描述清楚。

在詳細(xì)介紹之前，UIAtlasMakder定義了UISpriteEntry這個(gè)類(lèi)：

C#代碼

class SpriteEntry : UISpriteData { // Sprite texture -- original texture or a temporary texture public Texture2D tex; // Whether the texture is temporary and should be deleted public bool temporaryTexture = false; }

只是在UISpriteData基礎(chǔ)上擴(kuò)展了一個(gè)Texture2D tex的成員變量，那么這個(gè)類(lèi)到底做什么用呢？通過(guò)分析代碼可以知道：UISpriteEntry是UISpriteData和Texture2D的中間體，是Texture2D和UISpriteData轉(zhuǎn)化的載體，就提過(guò)程下面會(huì)有引人。

UIAtlasMaker的工作流程：

1）選擇圖片or圖集，函數(shù)：void OnSelectAtlas (Object obj) 和 List<Texture> GetSelectedTextures ()

2）導(dǎo)入選擇圖片的Texture2D，函數(shù)：static List<Texture2D> LoadTextures (List<Texture> textures)

3）將Texture2D轉(zhuǎn)出UISpriteEntry，函數(shù)：static List<SpriteEntry> CreateSprites (List<Texture> textures) ，這個(gè)函數(shù)中包括了2）的步驟

3）打包成大圖片并生成UISpriteData，函數(shù)：static bool PackTextures (Texture2D tex, List<SpriteEntry> sprites)，這個(gè)函數(shù)提供兩種打包方式：1.NGUI自己實(shí)現(xiàn)類(lèi)UITextPacker，2.Unity3D提供的api

4）釋放UISpriteEntry，函數(shù)：static void ReleaseSprites (List<SpriteEntry> sprites)，主要是通過(guò)NGUITools.Destroy銷(xiāo)毀紋理，最后調(diào)用Resources.UnloadUnusedAssets();，這個(gè)趁機(jī)告訴我們Unity中資源銷(xiāo)毀的方法，一個(gè)不能少哈。

C#代碼

static void ReleaseSprites (List<SpriteEntry> sprites) { foreach (SpriteEntry se in sprites) { if (se.temporaryTexture) { NGUITools.Destroy(se.tex); se.tex = null; } } Resources.UnloadUnusedAssets(); }

差不多就是這樣子，其他就是一些功能操作：add，replace,delete,udpate,extract。

這樣看來(lái)，把UIAtlas分析清楚，掌握UIAtlasMaker的原理應(yīng)該不難，當(dāng)然里面有很多細(xì)節(jié)，使用很多api：AssetDatabase,Texture,SelectedObject以及NGUI自己封裝的一些函數(shù)。

小結(jié)：

UIAtlas雖然在使用NGUI過(guò)程中用的太多了，但是經(jīng)過(guò)上面的分析，其實(shí)不是很難，個(gè)人覺(jué)得還沒(méi)有UIRoot（NGUI所見(jiàn)即所得之UIRoot）的難以駕馭，即使UIRoot很短很單一。這里說(shuō)下D.S.Qiu的關(guān)于快速學(xué)習(xí)的一點(diǎn)體會(huì)：古人有云，“工欲善其事，必先利其器”，NGUI最為一個(gè)工具，要使用好它，就要充分掌握它，換句話說(shuō)就要懂它，當(dāng)然還可以從中偷到很多師——功能的具體實(shí)現(xiàn)和代碼邏輯的設(shè)計(jì)，其實(shí)一直覺(jué)得我對(duì)細(xì)節(jié)都不求甚解，會(huì)用就可以走路了，又不用自己寫(xiě)一個(gè)NGUI，當(dāng)然細(xì)節(jié)都能掌握就更完美了。已經(jīng)到凌晨一點(diǎn)了，先寫(xiě)這么多，有補(bǔ)充在加。

如果您對(duì)D.S.Qiu有任何建議或意見(jiàn)可以在文章后面評(píng)論，或者發(fā)郵件（gd.s.qiu@Gmail.com)交流，您的鼓勵(lì)和支持是我前進(jìn)的動(dòng)力，希望能有更多更好的分享。

轉(zhuǎn)載請(qǐng)?jiān)?strong>文首注明出處：http://dsqiu.iteye.com/blog/1967088

更多精彩請(qǐng)關(guān)注D.S.Qiu的博客和微博（ID：靜水逐風(fēng)）

上一篇：NGUI所見(jiàn)即所得之UIWidget , UIGeometry & UIDrawCall

下一篇：React Native 從入門(mén)到原理