开篇&TexturePacker打出图集给UGUI使用

开篇：

前段时间，网上流出了一套手游源码，本想着把服务器端搭一下，给自己认识小伙伴们调试着把这套源码学习一下。于是就买一个阿里云服务器，可是花了几天时间，就是run不起来了啊。还好网上已经有人搭出来了，暂且连上他们的服务器调试吧。哎，还是不说这些糗事了。

那阿里云服务器买都买了，总不能空着把。那就开个网站吧。于是心血来潮的，注册域名，备案，balabala。就是现在这个了。www.shihuanjue.com，个人觉得还是很好记的。以后会把之前写在有道云的笔记梳理一下搬过来吧。我不是大神，有不足的地方还请多多指出。

正文：

UGUI 有自己的 Sprite Packer 机制，就是在开发的时候让开发者没有图集这个概念，用的都是散图，然后在打包的时候引擎根据各个小图的 Packing Tag合并成一个图集，从而来降低drawcall。

设置成统一参数的图集将被合并到一张图集里面。



个人觉得，这东西不可控，合并成啥样也不知道，是否会出现一张大图里面还空着很多地方没用。

我也看了雨松MOMO的关于这些的文章。个人感觉不好用啊。（强调：个人观点）

所以我就在想能不能不用这套机制。

于是尝试用TexturePacker试试。

首先把Edit->Project Setting->Editor : Sprite Packer设置成Disabled。默认是开启的。



准备：

1.下载 texturepacker for unity 的插件，然后把插件导入到unity里面。这个插件什么用， 我会在后面说。

地址：http://www.codeandweb.com/texturepacker/unity

2.网上下载个破解版的texturepacker

准备就绪之后呢。打开texturepacker，把美术给我们的散图导入进去。

然后设置 Data file和Texture file 都是我们unity工程的目录下面的res文件



然后其它参数，大家可以酌情修改，最后导出

转到unity工程可以看到test图片不是一张单独的大图了，它有一张张小图在下面了。

这就是之前导入的插件帮我们做好的事情。



UI不需要 Minmap，所以我把勾打掉了。大小也变小了。多好。





再来看导入unity的另外一个文件。test.tpsheet

这里面保存着每一张小图的在这张图集中的位置。

读取的时候就是要根据这些数据把相对应的小图显示出来。

我把test.tpsheet改成了.txt后缀，然后把开头的没用的信息删除了。



那么接下来就是写代码了

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using UnityEngine.UI;

/// <summary>
///贴图类
/// </summary>
public class ImageInfo
{
public string name;
public Rect rect;       //配置文件中要替换的精灵的位置区域Rect
public Vector2 vec2;    //要替换的精灵的pivot

public ImageInfo(string[] str)
{
if (str != null)
{
this.name = str[0];
float x, y, w, h;
x = float.Parse(str[1]);
y = float.Parse(str[2]);
w = float.Parse(str[3]);
h = float.Parse(str[4]);
this.rect = new Rect(x, y, w, h);
float pivotX, pivotY;
pivotX = float.Parse(str[5]);
pivotY = float.Parse(str[6]);
this.vec2 = new Vector2(pivotX, pivotY);
}
}
}

/// <summary>
/// 图集管理类
/// </summary>
public class AtlasMgr
{
public static Dictionary<string, List<ImageInfo>> imgDic = new Dictionary<string, List<ImageInfo>>();
}

public class Test : MonoBehaviour
{
string url = "test";
public Texture2D mTex;//图集
public GameObject UIRoot;
List<Image> images = new List<Image>();

void Start()
{
this.LoadData(url);

for (int i = 0; i < AtlasMgr.imgDic

然后新建7个Image进行测试



点击“换图”按钮，是可以根据这些数据显示出一张小图吧。

最后把例子工程也分析出来了，例子总归是例子，只是提供一个思路，项目中要用的话，还是要好好的封装，模块化吧。

例子工程：

链接：http://pan.baidu.com/s/1pJklvz9" target=_blank>.Count; i++)
{
ImageInfo _temp = AtlasMgr.imgDic[url][i];
Debug.Log(_temp.name + "|" + _temp.rect + "|" + _temp.vec2);
}

int count = this.UIRoot.transform.childCount;
for (int j = 0; j < count; j++)
{
this.images.Add(this.UIRoot.transform.Find("Image" + j).GetComponent<Image>());
}
}

/// <summary>
/// 加载图集的配置信息
/// </summary>
/// <param name="loadUrl">Load URL.</param>
private void LoadData(string loadUrl)
{
if (!AtlasMgr.imgDic.ContainsKey(loadUrl))
{
AtlasMgr.imgDic.Add(loadUrl, new List<ImageInfo>());
}

TextAsset binAsset = Resources.Load(loadUrl, typeof(TextAsset)) as TextAsset;
string[] lineArray = binAsset.text.Split(new char[] { '\n' });

for (int i = 0; i < lineArray.Length; i++)
{
lineArray[i] = lineArray[i].Replace("\r", "");
string[] strArray = lineArray[i].Split(new char[] { ';' });
ImageInfo imgInfo = new ImageInfo(strArray);
AtlasMgr.imgDic[loadUrl].Add(imgInfo);
}
}

void OnGUI()
{
if (GUILayout.Button("换图"))
{
for (int i = 0; i < this.images.Count; i++)
{
//根据rect，pivot，把mTex图集里面在这个位置的小图显示出来
this.images[i].sprite = Sprite.Create(this.mTex, AtlasMgr.imgDic["test"][i].rect, AtlasMgr.imgDic["test"][i].vec2);
}
}
}
}[/code]

然后新建7个Image进行测试



点击“换图”按钮，是可以根据这些数据显示出一张小图吧。

最后把例子工程也分析出来了，例子总归是例子，只是提供一个思路，项目中要用的话，还是要好好的封装，模块化吧。

例子工程：

链接：[url=http://pan.baidu.com/s/1pJklvz9]http://pan.baidu.com/s/1pJklvz9 密码：arxk

大家如果有其它更好的方式一定要告诉我哦。

第一篇先写个简单的，以后再慢慢好好写吧。就这样吧，拜拜~！

本文固定链接: [url=http://www.shihuanjue.com/?p=16]http://www.shihuanjue.com/?p=16

转载请注明: 乔 2015年08月03日 于 是幻觉 发表