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

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

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

　　可以很惊奇的发现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 = , 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 = ;

    public int y = ;

    public int width = ;

    public int height = ;

    public int borderLeft = ;

    public int borderRight = ;

    public int borderTop = ;

    public int borderBottom = ;

    public int paddingLeft = ;

    public int paddingRight = ;

    public int paddingTop = ;

    public int paddingBottom = ;

}

　　一看这些成员变量，就会感觉很熟悉，这不是就是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

巴特西

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

最新文章

热门文章