Unity UGUI图集专题

一：图集介绍

什么是图集：我们可以将其理解为将一系列小图合并为一张大图。使用图集可以减少drawcall，提升效率。游戏中的图片模型最终是要给到显卡去渲染的，然后CPU通知GPU要开始渲染，这一次通知就是一次Drawcall。当一个UI里面图片非常多的时候，我们可以使用图集技术将其一次性渲染。

Unity打包图集的方式有很多种，这里我们讲解三种：

（1）一种是使用系统自带的打包工具SpritePacker；

（2）使用SpriteAtlas进行打包图集

（3）使用TexturePacker打包图片并使用；

二：SpritePacker使用

1、将所需要的图片导入Unity中，注意不能放在Resources文件夹下（图片将不能被打包成图集）；

2、选择需要打包成图集的图片（可以多选）在inspector面板里选择“Texture Type“为“Sprite （2D and UI）”，并Apply应用；

3、在”Packing Tag”选项里面填上图集的名称，该选项相同的图片会打包为同一个图集；

4、选择菜单栏里面的 "Edit" -> "Project Settings" -> "Editor"； 5、在inspector面板里设置“Sprite Packers”下面的“Mode”选项，其中，“Disabled”表示关闭图集功能，“Enabled for Builds”表示打包发布时才打包图集，“Always Enable”表示始终打包图集；Enabled for Builds（Legacy Sprite Packer）表示打包发布时才打包图集（使用旧版技术）；“Always Enable（Legacy Sprite Packer）”表示始终打包图集（使用旧版技术）

6、设置完上述选项后，选中需要打包图集的图片，在 “Window ” -> “Sprite Packer”面板里预览图集，可尝试点击左上角的“Pack”按钮立即打包；

不同图片如何合并至一个图集？

选中需要打包图集的图片，将其类型修改Sprite （2D and UI），修改其Packing Tag为你自定义的名字。不同的图片，只要Tag相同，就可以打包到同一个图集里面。

打图集策略：

（1）DefaultPackerPolicy：是默认的打包方式，也是矩形打包方式。他会把所有的小图按照矩形的方式来排列，如果宽高不一样的图片，它们会自动补齐,使用方式就是tag设置时加上”[RECT]图集名”来设置。

（2）TightPackerPolicy：是紧密打包方式，也就是尽可能的把图片都打包在图集上，这种方式要比DefaultPackerPolicy打包的图片更多一些，也就是更省空间,使用方式就是tag设置时加上”[TIGHT]图集名”来设置。

（3）TightRotateEnabledPackerPolicy：是紧密可旋转打包方式,也就是使用紧密打包，并且允许精灵进行旋转。

（7）设计UI，几个Image使用同一个图集的不同元素，发现四个Image一次性渲染成功。

三：SpriteAtlas使用

Sprite Atlas 针对现有的图集打包系统Sprite Packer在性能和易用性上的不足，进行了全面改善。除此之外，相比Sprite Packer，Sprite Atlas将对精灵更多的控制权交还给用户。由用户来掌控图集的打包过程以及加载时机，更加利于对系统性能的控制。设置Edit-->Project Settings -->Editor --->Mode为Always Enable。

Sprite Atlas的主要有以下三个功能：

1.创建、编辑图集以及设定图集参数

2.添加图集Variant（变种）

3.运行时访问图集

下面我们分别讲解

3.1 创建、编辑图集及参数设定

在Unity 2017.1版本之后，SpriteAtlas是一种资源，右击 Asset ---> Create --->SpriteAtlas 可以像其它资源一样在Unity中创建，例如预制件、场景等。

这里可以支持多种类型，包括单个Sprite、Sliced Sprite、文件夹，以及这些类型的任意组合。

操作更加方便，对用户更友好。可以将文件夹，纹理或精灵分配给Sprite Atlas。可以将整个文件夹分配给Sprite Atlas资产，该文件夹中的所有纹理（包括子文件夹）都将被打包，使用起来非常方便。

此外，在检视窗口上还可以看到图集的一些参数设定，例如：打包时是否支持精灵旋转(Allow Rotation)、贴图的采样模式(Filter Mode)、压缩方式(Compression)等等。在最下方的预览窗口中，可以查看图集的生成效果。这样就可以很清楚的知道图集的打包方式是否合理，是否存在大量被浪费的空间。

设计UI，添加几个Image，使用SpriteAtlas图集内部的图片作为Image原图片，发现DrawCall只需要一次就可以完成。

2.添加图集Variant（变种）

所谓Variant，就是指原有图集的一个变种。它会复制原有图集的贴图，并根据一个比例系数来调整复制贴图的大小。

这样的Variant通常用于为高分辨率和低分辨率的屏幕准备不同的图集。

因为如果只准备一套高分辨率的图集，在低分辨率的设备上占用内存过多。反之，如果只准备一套低分辨率图集，在高分辨率的设备上就会模糊。

通过Atlas Variant就可以很方便地解决该问题。如下图所示，SpriteAtlas .spriteatlas是新建的一个低清图集，在检视窗口中将Type设为Variant，Master Atlas设为SpriteAtlas。这里为了与原图进行更明显的对比，将Scale设为0.1，点击Pack Preview。

3.运行时访问图集

我们经常会在代码中切换ui的图片，所以就需要单独加载图集中的每个精灵。

这样做的好处是，让用户可以更加直接地随时编辑图集，而且不用去单独加载图集中的每个精灵。

下面是一段动态换装的代码，该脚本通过LoadAsset加载SpriteAtlas类型的资源，再通过SpriteAtlas的GetSprite接口获取图集中的精灵，最后将精灵传递给SpriteRenderer。相较于基于Sprite Packer的实现，整个过程要简单直接的多。

using UnityEditor;
using UnityEngine;
using UnityEngine.U2D;

public class SpriteAtlasExample : MonoBehaviour
{void Start(){void Start(){//加载图集SpriteAtlas atlas = AssetDatabase.LoadAssetAtPath<SpriteAtlas>("Assets/Hero.spriteatlas");//获取图集下的所有SpriteSprite[] sp = new Sprite[atlas.spriteCount];atlas.GetSprites(sp);print(sp.Length);//根据小图名称获取对应的SpriteSprite sprite = atlas.GetSprite("nxxg");if (sprite != null){GetComponent<SpriteRenderer>().sprite = sprite;}}}
}
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.U2D;

public class SpriteAtlasMgr : MonoBehaviour
{public static SpriteAtlasMgr instance;private void Awake(){instance = this;}public Dictionary<string, SpriteAtlas> atlas = new Dictionary<string, SpriteAtlas>();public void AddSpriteAtlas(string name) { //}public void RemoveAtlas(string name) {//}public Sprite GetSpriteFromAtlas(string sname) {//....return null;}public Sprite GetSpriteFromAtlas(string atlasname, string sname){//....return null;}// public static SpriteAtlasMgr// Start is called before the first frame updatevoid Start(){}
// Update is called once per framevoid Update(){}
}

四：TexturePacker使用

（1）使用Texture Packer打包图集时，需要将小图导入Texture Packer，然后进行打包，打包的格式要注意是"Unity - Texture2D sprite sheet"（有一些低版本的TP是没有这个格式的），TexturePacker官网：https://www.codeandweb.com/texturepacker。下载最新版本安装即可

（2）将图片或者文件夹拖动至空白处，设置导出的图片名字以及数据文件。

（3）点击右上角【发布精灵表】，不用作其他修改，将这两个文件放在工程资源中，这时从工程看这只是一张大图，并不能算是一个图集，使用里面的小图（这时虽然可以用unity3d自带功能，手动对图片进行裁剪，但裁剪的小图大小基本是不对的）。

（4）接下来需要下载并导入一个Unity3d的插件，TexturePacker自己出的的一个插件(TexturePacker Importer)，插件链接：https://www.assetstore.unity3d.com/en/#!/content/16641，下载并成功导入之后，不用写任何代码，也不用做任何操作，插件会自动根据.tpsheet文件，将刚才打包好并导入工程的大图自动裁剪成小图，如下图所示：

我们只需像使用单独小图一样，将图集里的小图拖进Source Image里即可。这时我们还只能在编辑器里使用图集。

5、有时候，我们还需要在程序中动态加载图集并使用图集里的小图。unity3d 并没有明确api说明我们如何用这种图集，而常用Resources.Load()加载只能返回单独的一个图片纹理，所以我们用另一个方法 Resources.LoadAll()；加载整一张图集，此方法会返回一个Object[]，里面包含了图集的纹理 Texture2D和图集下的全部Sprite，所以我们就可以根据object 的类型和名字找到我们需要的某张小图片。

6、下面整理了图集纹理的管理类，去统一管理加载，是一个单例类，找个不被销毁的GameObject绑定就行，代码比较简单，用一个Dictionary按图集的路径过key将加载过的图集缓存起来，需要时再由外部删除掉，如下代码所示：

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

//纹理图集加载管理
public class TextureMgr : MonoBehaviour {
private static GameObject m_pMainObject;
private static TextureMgr m_pContainer = null;

public static TextureMgr getInstance(){if(m_pContainer == null){m_pContainer = m_pMainObject.GetComponent<TextureMgr> ();}  return m_pContainer; } private Dictionary<string, Object[]> m_pAtlasDic;//图集的集合 void Awake(){ initData (); } private void initData(){ TextureMgr.m_pMainObject = gameObject;m_pAtlasDic = new Dictionary<string, Object[]> ();}//加载图集上的一个精灵public Sprite LoadAtlasSprite(string _spriteAtlasPath,string _spriteName){Sprite _sprite = FindSpriteFormBuffer (_spriteAtlasPath,_spriteName);if (_sprite == null) {Object[] _atlas = Resources.LoadAll (_spriteAtlasPath);m_pAtlasDic.Add (_spriteAtlasPath,_atlas);_sprite = SpriteFormAtlas (_atlas,_spriteName);}return _sprite;

}

//删除图集缓存
public void DeleteAtlas(string _spriteAtlasPath){if (m_pAtlasDic.ContainsKey (_spriteAtlasPath)) {m_pAtlasDic.Remove (_spriteAtlasPath);}
}
//从缓存中查找图集，并找出sprite
private Sprite FindSpriteFormBuffer(string _spriteAtlasPath,string _spriteName){if (m_pAtlasDic.ContainsKey (_spriteAtlasPath)) {Object[] _atlas = m_pAtlasDic[_spriteAtlasPath];Sprite _sprite = SpriteFormAtlas(_atlas,_spriteName);return _sprite;}return null;
}

//从图集中，并找出sprite
private Sprite SpriteFormAtlas(Object[] _atlas,string _spriteName){for (int i = 0; i < _atlas.Length; i++) {if (_atlas [i].GetType () == typeof(UnityEngine.Sprite)) {if(_atlas [i].name == _spriteName){return (Sprite)_atlas [i];}}}
Debug.LogWarning ("图片名:"+_spriteName+";在图集中找不到");return null;}
}

使用代码如下：

public class LoadImage : MonoBehaviour
{public Image parrotImage;// Start is called before the first frame updatevoid Start(){Sprite _sprite = TextureMgr.getInstance().LoadAtlasSprite("parrot", "hlb23");parrotImage.sprite = _sprite;}
}