Unity3D&&TexturePacker

关于这次的文章,主要需要涉及到以下内容:

1.U3D中用代码动态生成片并设置UV坐标显示图片;

   如果这方面还不知道，可以看看另篇文章:http://blog.csdn.net/midashao/article/details/8139109

2.C#版本的LitJson库的简单使用;

   LitJson官方地址:http://litjson.sourceforge.net/ ,本人也是刚使用这条内裤,如果不知道Json是神马东西,问下谷哥和度娘吧~

什么是TexturePacker?

       用过cocos2d的同学应该对这个比较了解吧(了解到可以直接无视下面的解释了~)，不了解也没关系，TexturePacker可以说是个可以把很 多张小图集合成一张大图，并把图片的位置信息保存成文件,然后你需要做的就是解析这个图片位置信息的文件,并结合大图集合显示其中的一张小切图,这也是我 们下面需要做的。

       这样合成大图的好处我觉得是可以减少程序加载使用资源的内存,因 为OpenGL ES中每张贴图都需要设置成2的n次方才能使用。比如你有一张宽高为100x100和一张宽高为10x10的图片,如果不合成大贴图,那么需要使用 128x128和16x16的两张图片(分别是2的7次方和2的4次方),但如果使用一张大图的话，可以把100x100和10x10的图片放到 128x128的大图中,这样就用一张图片。

 

类似这样的一张大贴图就是很多小图片合成的，实际在使用时会只显示其中的一张贴图。

 

TexturePacker的官网:http://www.codeandweb.com/texturepacker 可以下载免费使用,只不过没付费版本最终导出图片时会随机一张图片加了个水印。

关于TexturePacker的使用,这里简单说下:

软件打开后大概界面就是如上图那样,再把你需要合成的图片拖放到右边的Sprites面板中就会自动排序并显示效果在中间了.

这里简单说明下上图左边用红色圈圈圈出来的属性说明下吧。

Data Format 这里是需要导出的数据格式,下拉框下有cocos2d、libgdx、Unity3d等等..,

本文章选择的是JSON-ARRAY;

Data file 这是导出图片集合信息文件存放的目录，后面就是需要解析这个文件,在这个选项右边的按钮可以选择存放的目录，设置好目录后Texture file选项也会自动填充对应的目录文件。

Image format 这个是设置导出大贴图图片集合的编码格式，这个看自己的具体需求设置；

第二个红色框

Border padding 是设置图片之间的间距,这个挺有用的，如果为0的话也可以,不过可能会出现切出来的图片边边有可能会切到其他图片，所以一般都要设置个值。

Allow rotation 复选框是设置你的贴图在大贴图集合里是否可以旋转的存放,一般都勾上吧，这样可以利用一些空间；

Trim 复选框是是否自动去掉小图中的多余部分。如下图,如果勾上了的话就是左图到右图的效果，把边边透明部分去掉了，这样也是可以大大的节省资源的。

设置好了后按工具栏的Publish按钮就可以导出了，导出的目录就是设置Data file的目录；如果是免费版本导出的大图里面是有水印的，这是正常的。

导出成功后会在对应的目录下找到大贴图集合和一个文件格式；本文导出的格式就如下:

因为打算用LitJson这个库来解析，所以理所当然导出Json的数据结构.

其他的一些属性也是设置大图的导出一些属性，喜欢折腾的可以玩玩;

这里还有篇翻译老外的文章,更详细的介绍TexturePacker的使用,有兴趣可以阅读

http://www.cnblogs.com/andyque/articles/1988097.html~

看看导出的Json结构吧～

    {"frames": [  
      
    {  
        "filename": "op_01.png",  
        "frame": {"x":2,"y":304,"w":300,"h":429},  
        "rotated": true,  
        "trimmed": false,  
        "spriteSourceSize": {"x":0,"y":0,"w":300,"h":429},  
        "sourceSize": {"w":300,"h":429}  
    },  
    {  
        "filename": "op_02.png",  
        "frame": {"x":433,"y":2,"w":300,"h":429},  
        "rotated": true,  
        "trimmed": false,  
        "spriteSourceSize": {"x":0,"y":0,"w":300,"h":429},  
        "sourceSize": {"w":300,"h":429}  
    }]  
    }  

 

这里推荐个文本的编辑器～个人感觉比记事本和UltraEdit都好用，而且还是免费的~

Notepad++

http://notepad-plus-plus.org/

为了节省空间，其他部分就不贴出来了。看结构不难看出，文件保存着文件的名字，文件在大图中贴图的偏移量和大小.

这里大概解释下代表的信息:

filename: 原文件名;
frame:    图片在大图中的偏移位置(左上角为原点)和大小(未旋转前)  需要注意这里的图片大小是图片未旋转前的大小;
rotated:  是否旋转(顺时针方向);
trimmed:  是否有去掉周围多余的透明部分;
spriteSourceSize: x,y表示图片未去掉周围透明部分的偏移量,这是如果需要还原图片原先的大小要用的;
sourceSize: 图片的原始大小,包含透明部分;

 

用LitJson解析导出的Json结构

~有LitJson库，解析起来很简单,大概步骤如下:

 

1.将下载下来的LitJson库源码，并将几个源码文件放到U3D项目Assets/Plugins文件夹下

我这边是在Plugins文件夹下加个LitJson文件夹，放到里面，这样看起来清晰些～

下面直接上代码吧～,有了内裤，解析起来很简单而且比.net自带的解析xml还简单～

PS:如果引用不到LitJson的命名空间，在MonoDevelop编辑器中,右键项目Editor References..选项，在弹出来的选择对话框中选择类似xxxx-xxx-firstpass的项目名,因为放在Plugins文件夹下的代码是在另外的项目中的，还有Ediotr文件夹的，这不属于本文的范围了

如下图:

代码如下:

    using UnityEngine;  
    using System.Collections;  
    using System.Collections.Generic;  
    using LitJson;  
      
    /// <summary>  
    /// 帧的信息,包括偏移xy和宽高  
    /// </summary>  
    public class EFrame {  
        //在大图中的偏移量//  
        public int x, y;  
          
        //图片占用的宽高//  
        public int width, height;  
      
        public EFrame(JsonData jsonData) {  
            x = (int)jsonData["x"];  
            y = (int)jsonData["y"];  
            width = (int)jsonData["w"];  
            height = (int)jsonData["h"];  
        }  
    }  
      
    public class ESpriteFrameInfo {  
        //文件源文件名//  
        public string filename;  
        //帧贴图的信息//  
        public EFrame frame;  
        //图片是否旋转//  
        public bool isRotate;  
    }  
      
    public class ESpriteUtility {  
          
        public static List<ESpriteFrameInfo> analysisTexturePacker(TextAsset txtAsset){  
              
            List<ESpriteFrameInfo> readResult = new List<ESpriteFrameInfo>();  
              
            JsonData rootJsonData = JsonMapper.ToObject(txtAsset.text);  
              
            JsonData framesData = rootJsonData["frames"];  
              
            int framesCount = framesData.Count;  
            for(int i = 0 ; i < framesCount; i++){  
                JsonData frame = framesData[i];  
                ESpriteFrameInfo frameInfo = new ESpriteFrameInfo();  
                frameInfo.filename = (string)frame["filename"];  
                frameInfo.isRotate = (bool)frame["rotated"];  
                frameInfo.frame = new EFrame(frame["frame"]);  
                readResult.Add(frameInfo);            
                  
            }  
            Debug.Log("analysis Done!");  
            return readResult;  
        }  
    }  

这只是个工具类，具体使用还需要写个脚本，拖上TexturePacker导出的数据格式,然后传到analysisTexturePacker方法中使用，最后看到控制台打印analysis Done! 说明解析搞定～这里只是用到了将图片显示的部分显示出来，关于图片周边透明度的实现，本片文章就没做处理了～

这是调用的代码,很简单～

 

    using UnityEngine;  
    using System.Collections;  
      
    public class TestScript : MonoBehaviour {  
          
        public TextAsset spriteData;  
          
      
        // Use this for initialization  
        void Start () {  
              
      
            ESpriteUtility.analysisTexturePacker(spriteData);  
          
        }  
          
        // Update is called once per frame  
        void Update () {  
          
        }  
    }  

直接把这个脚本随便拖到一个GameObject上,再把TexturePacker导出的数据格式，拖到spriteData上就可以;记得需要把TexturePacker导出的数据格式的扩展名改成.txt结尾的哦～