NGUI所见即所得之UIAtlasMaker , UIAtlas (2)

　　本文的重点就是要将NGUI把多张图片打成一个图集（Atlas）的原理和过程研究下，学习下Unity提供的api和NGUI写的功能以及设计思想。

　　（原文链接）

　　

其它链接：NGUI所见即所得之UIRoot
　　　　   NGUI所见即所得之UIWidget , UIGeometry & UIDrawCall
　　　　   NGUI所见即所得之UIFont , UIFontMaker
　　　　   NGUI所见即所得之UISprite & UILabel
　　　　   NGUI所见即所得之UICamera
　　　　   NGUI所见即所得之UIPanel
　　　　   NGUI所见即所得之UITweener
　　　　   NGUI所见即所得之UIAnchor & UIStretch
　　　　   NGUI所见即所得之深入剖析UIPanel,UIWidget,UIDrawCall底层原理

　　        TextFx——Ease Function(缓动函数)

　　　　   

UIAtlas

       在介绍UIAtlasMaker之前先看下，先看下UIAtlasMaker的产物——UIAtlas，在创建Sprite的时候都要指定UIAtlas，下面先对UIAtlas的代码：

        // 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;

　　可以很惊奇的发现UIAtlas的成员变量竟然极其精简，就只有：Material material;      UISpriteDatat的List mSprites;      每个像素的大小 mPixelSize 这个跟UIWidget的像素大小应该是类似的，  UIAtlas mReplacement; 这个目前只能望文生义，虽然知道是用来替换UIAtlas，但好像没有发现哪里会有用到，在UISprite的那里只是选择不同的UIAtlas而不是替换UIAtlas本身，就暂且搁置，   最后一个是mPMA这个是pre-multiplied的像素存储技术，大致了解下，好像是把alpha的值存储在每个颜色的RGB中去已达到节省存储空间的技术，想要了解更多可以自行google下。

      接着看UIAtlas，接下来就是把属性的{get,set} 以及几个函数，也很简单，主要就是属性改变，就调用MakeAsDirty()函数，下面看下这个函数的前面一部分：

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
            }
        }
            ……
        }

　　可以看出这个函数其实就是更新以replacemet和this为UIAtlas的UISprite的UIAtlas，就是这么简单。

UISpriteData

       在UIAtlas中有GetSprite()和GetListOfSprites()，其中GetSprite返回的UISpriteData，让人不得不猜想UISpriteData就是UISprite中的图片，但其实它只是一个结构体：

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;
}

　　一看这些成员变量，就会感觉很熟悉，这不是就是UI组件的基本熟悉么，可以进一步看下UIInspectorEditor界面，就更加确信了，而且Border其实用在SliceSprite的，至于Padding就是空白不显示区域，而且x,y,width,height其实该图片就是在UIAtlas上Rect区域。

　　

　　也就是说，UISpriteData根本没有实际记录图片的像素信息，而只是记录图片在UIAtlas生成的那张大图的坐标，宽度和高度，以及图片拉伸的一些信息（Border,Padding）。

UIAtlasMaker

　　从前面的分析，可以大概知道UIAtlasMaker的原理：把多张图片合并成一张大图，记录每张图片的在生成的大图的坐标和大小。下面将使用介绍算法那种思路把UIAtlasMakder的工作流程描述清楚。

　　在详细介绍之前，UIAtlasMakder定义了UISpriteEntry这个类：

　　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基础上扩展了一个Texture2D tex的成员变量，那么这个类到底做什么用呢？通过分析代码可以知道：UISpriteEntry是UISpriteData和Texture2D的中间体，是Texture2D和UISpriteData转化的载体，就提过程下面会有引人。

　　UIAtlasMaker的工作流程：

　　1）选择图片or图集，函数：void OnSelectAtlas (Object obj) 和 List<Texture> GetSelectedTextures ()

　　2）导入选择图片的Texture2D，函数：static List<Texture2D> LoadTextures (List<Texture> textures)

　　3）将Texture2D转出UISpriteEntry，函数：static List<SpriteEntry> CreateSprites (List<Texture> textures) ，这个函数中包括了2）的步骤

　　3）打包成大图片并生成UISpriteData，函数：static bool PackTextures (Texture2D tex, List<SpriteEntry> sprites)，这个函数提供两种打包方式：1.NGUI自己实现类UITextPacker，2.Unity3D提供的api

　　4）释放UISpriteEntry，函数：static void ReleaseSprites (List<SpriteEntry> sprites)，主要是通过NGUITools.Destroy销毁纹理，最后调用Resources.UnloadUnusedAssets();，这个趁机告诉我们Unity中资源销毁的方法，一个不能少哈。

　　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。

       这样看来，把UIAtlas分析清楚，掌握UIAtlasMaker的原理应该不难，当然里面有很多细节，使用很多api：AssetDatabase,Texture,SelectedObject以及NGUI自己封装的一些函数。

小结：

       UIAtlas虽然在使用NGUI过程中用的太多了，但是经过上面的分析，其实不是很难，个人觉得还没有UIRoot（NGUI所见即所得之UIRoot）的难以驾驭，即使UIRoot很短很单一。这里说下D.S.Qiu的关于快速学习的一点体会：古人有云，“工欲善其事，必先利其器”，NGUI最为一个工具，要使用好它，就要充分掌握它， 换句话说就要懂它，当然还可以从中偷到很多师——功能的具体实现和代码逻辑的设计，其实一直觉得我对细节都不求甚解，会用就可以走路了，又不用自己写一个NGUI，当然细节都能掌握就更完美了。已经到凌晨一点了，先写这么多，有补充在加。

         如果您对D.S.Qiu有任何建议或意见可以在文章后面评论，或者发邮件（gd.s.qiu@gmail.com)交流，您的鼓励和支持是我前进的动力，希望能有更多更好的分享。

        转载请在文首注明出处：http://dsqiu.iteye.com/blog/1967088