Unity中2D和UGUI图集的理解与使用

图集

什么是图集？

在使用3D技术开发2D游戏或制作UI时（即使用GPU绘制），都会使用到图集，而使用CPU渲染的2D游戏和UI则不存在图集这个概念（比如Flash的原生显示列表），那么什么是图集呢？准确的说法图集是一张包含了多个小图的大图和一份记录了每个小图id、位置、尺寸等数据的数据文件，一个图集应该对应两个文件，当然也有人把数据集成到图片中，导致看起来只有一张图片（参考自DragonBones的做法）。

为什么要用图集？

在GPU已经成为PC、手机等设备的必备组件的现在，把所有显示的绘制操作交给专门处理图像的GPU显然比交给CPU更合适，这样空闲下来的CPU可以集中力量处理游戏的逻辑运算。

而GPU处理图像的做法和CPU是不一样的，在GPU中，我们要绘制一个图像需要提交图片（即纹理）到显存，然后在进行绘制（这个过程称为一次DrawCall），那么如果我们一帧要绘制100个就需要提交100次图片，如果使用包含了这100图片的图集，只需要一次提交即可，即一次DrawCall就搞定，处理效率上会有很大的提升。

另外使用图集也方便管理和归类各个模块的图片，可以通过一次加载和一次卸载完成多个图片的处理，同理，加载次数也下来了，可以提升运行效率。

Unity2D中的图集

其实用过NGUI的同学都知道在拼界面之前都必须先制作好对应的图集才行，然而在Unity2D或UGUI中，Unity却自己集成了图集的操作，目的是让我们忘掉图集的存在，更加关注设计这个层面。

如何使用图集

在Unity中我们只要使用小图片即可，可以通过设置图片的Packing Tag来指定小图会被打包到的图集，比如2个小图的Packing Tag都叫“MyAtlas”，则Unity会将这两个小图打包到名为“MyAtlas”的图集中。

注意图片不能放在Resources文件夹下面，Resources文件夹下的资源将不会被打入图集。

是否打包图集的控制选项：Editor->Project Settings 下面有sprite packer的模式。Disabled表示不打包图集，Enabled For Builds 表示只有打包应用的时候才会打包图集，Always Enabled 表示始终会打包图集。

在Windows->Sprite Packer 里，点击packer 在这里你就可以预览到你的图集信息，图集文件被保存在和Assets文件夹同级的目录，Libary/AtlasCache里面。图集的大小还有图集的格式等等很多参数我们都是可以控制的，也可以通过脚本来设置。

通过设置我们就可以发现多个同一Packing Tag的小图放到场景中只会消耗一个DrawCall，表示我们的图集已经开始起作用了。

动态设置的问题

可是Unity的这种设计在下面的这种情况下却给我们带来了很大的困扰：

当我们希望通过代码的方式修改纹理时会无从下手，因为Unity3D并没有给我们提供加载图集和获取图集中指定小图的API。

解决方案

目标是我想把图集放在Resources中加载。

首先我们的原图不能放在Resources文件夹中，这样会导致资源大小翻倍。

具体的思路是通过脚本创建对应的名称的预制件，同时将加载的图片（Sprite）作为该预制件的SpriteRenderer组件的sprite属性即可。

打包代码

打包代码来自我的开源项目中，有一些具体的规则，大家可以看注释：

// ================================================================================================= 2 // 3 //    Hammerc Library 4 //    Copyright 2015 hammerc.org All Rights Reserved. 5 // 6 //    See LICENSE for full license information. 7 // 8 // ================================================================================================= 9 10 using System.IO;11 using UnityEditor;12 using UnityEngine;13 14 /// <summary>15 /// 16 /// 2D 图集生成对应预制件脚本类.17 /// 18 /// 解决问题: 19 /// 解决不能动态设置 Sprite 对象的贴图的问题, 因为分散的小图最终需要打包为图集而 Unity3D 又将图集的处理隐藏, 所以需要将小图的信息存放到预制件中.20 /// 21 /// 使用方法及步骤: 22 /// 1.修改源目录及目标目录为自己使用的目录;23 /// 2.把小图存放到源目录中;24 /// 3.在菜单栏点击 Hammerc/2D/MakeSpritePrefabs 即可在目标目录下生成对应的预制件;25 /// 4.通过获取生成的预制件的 sprite 对象即可在程序中使用小图.26 /// 27 /// </summary>28 public class MakeSpritePrefabsScript29 {30     /// <summary>31     /// Assets 目录下的小图片目录, 包括子目录的所有图片文件都会进行处理.32     /// </summary>33     private const string ORIGIN_DIR = "\\RawData\\Sprites";34 35     /// <summary>36     /// Assets 目录下的小图预制件生成的目标目录, 注意该目录下不要存放其他资源, 每次生成时都会清空该目录下的所有文件.37     /// </summary>38     private const string TARGET_DIR = "\\Resources\\Sprites";39 40     /// <summary>41     /// 将制定目录下的原始图片一对一打包成 Prefab 方便在游戏运行中读取指定的图片.42     /// </summary>43     [MenuItem("Hammerc/2D/MakeSpritePrefabs")]44     private static void MakeSpritePrefabs()45     {46         EditorUtility.DisplayProgressBar("Make Sprite Prefabs", "Please wait...", 1);47 48         string targetDir = Application.dataPath + TARGET_DIR;49         //删除目标目录50         if(Directory.Exists(targetDir))51             Directory.Delete(targetDir, true);52         if(File.Exists(targetDir + ".meta"))53             File.Delete(targetDir + ".meta");54         //创建空的目标目录55         if(!Directory.Exists(targetDir))56             Directory.CreateDirectory(targetDir);57 58         //获取源目录的所有图片资源并处理59         string originDir = Application.dataPath + ORIGIN_DIR;60         DirectoryInfo originDirInfo = new DirectoryInfo(originDir);61         MakeSpritePrefabsProcess(originDirInfo.GetFiles("*.jpg", SearchOption.AllDirectories), targetDir);62         MakeSpritePrefabsProcess(originDirInfo.GetFiles("*.png", SearchOption.AllDirectories), targetDir);63 64         EditorUtility.ClearProgressBar();65     }66 67     static private void MakeSpritePrefabsProcess(FileInfo[] files, string targetDir)68     {69         foreach(FileInfo file in files)70         {71             string allPath = file.FullName;72             string assetPath = allPath.Substring(allPath.IndexOf("Assets"));73             //加载贴图74             Sprite sprite = AssetDatabase.LoadAssetAtPath(assetPath, typeof(Sprite)) as Sprite;75             //创建绑定了贴图的 GameObject 对象76             GameObject go = new GameObject(sprite.name);77             go.AddComponent<SpriteRenderer>().sprite = sprite;78             //获取目标路径79             string targetPath = assetPath.Replace("Assets" + ORIGIN_DIR + "\\", "");80             //去掉后缀81             targetPath = targetPath.Substring(0, targetPath.IndexOf("."));82             //得到最终路径83             targetPath = targetDir + "\\" + targetPath + ".prefab";84             //得到应用当前目录的路径85             string prefabPath = targetPath.Substring(targetPath.IndexOf("Assets"));86             //创建目录87             Directory.CreateDirectory(prefabPath.Substring(0, prefabPath.LastIndexOf("\\")));88             //生成预制件89             PrefabUtility.CreatePrefab(prefabPath.Replace("\\", "/"), go);90             //销毁对象91             GameObject.DestroyImmediate(go);92         }93     }94 }

加载代码

加载就很简单了，加载对应的预制件，然后取出Sprite即可，核心代码如下：

public Sprite LoadSprite(string spriteName)2 {3     return Resources.Load<GameObject>("Sprites/" + spriteName).GetComponent<SpriteRenderer>().sprite;4 }

设置贴图就是向GameObject添加SpriteRenderer脚本后设置其sprite属性即可，如下：

this.gameObject.GetComponent<SpriteRenderer>().sprite = LoadSprite("img1");

打包的问题

虽然解决了动态设置的问题，但是如果我们要让图集支持热更新，使用AssetBundle来打包又该怎么办呢？

解决方案

目标是我想把图集放在AssetBundle中加载，AssetBundle的处理比Resources的处理要简单得多了。

和打包到Resources不同，在AssetBundle中，我们添加图片就是以Sprite的类型存在的，所以打包以后，实际上是已经制作为图集了，但是还是可以按获取单个文件的方式获取指定的图片，也就是Sprite，获取后可以直接使用。

打包代码

打包代码同样来自我的开源项目中，有一些具体的规则，大家可以看注释：

// ================================================================================================= 2 // 3 //    Hammerc Library 4 //    Copyright 2015 hammerc.org All Rights Reserved. 5 // 6 //    See LICENSE for full license information. 7 // 8 // ================================================================================================= 9 10 using UnityEditor;11 using UnityEngine;12 13 /// <summary>14 /// 15 /// 简单的 AssetBundle 创建类.16 /// 17 /// 解决问题: 18 /// 实现简单的资源打包.19 /// 20 /// 使用方法及步骤: 21 /// 1.修改要打包到的目标平台枚举;22 /// 2.选中要打包的文件在菜单栏点击对应的功能菜单.23 /// 24 /// </summary>25 public class SimpleCreateAssetBundle26 {27     /// <summary>28     /// 打包的目标平台.29     /// </summary>30     private const BuildTarget BUILD_TARGET = BuildTarget.StandaloneWindows64;31 32     /// <summary>33     /// 将选定的一个对象进行打包, 同时包含依赖项, 可通过 AssetBundle 的 main 属性获取.34     /// </summary>35     [MenuItem("Hammerc/AssetBundle/CreateSingleAssetBundle")]36     private static void CreateSingleAssetBundle()37     {38         if(Selection.activeObject != null)39         {40             //显示保存窗口41             string path = EditorUtility.SaveFilePanel("Create Single AssetBundle:", "", "New AssetBundle", "assetbundle");42 43             if(path.Length > 0)44             {45                 //打包46                 BuildPipeline.BuildAssetBundle(Selection.activeObject, null, path, BuildAssetBundleOptions.CollectDependencies | BuildAssetBundleOptions.CompleteAssets, BUILD_TARGET);47             }48         }49     }50 51     /// <summary>52     /// 将选定的多个对象进行打包, 同时包含依赖项, 不指定 AssetBundle 的 main 属性获取.53     /// </summary>54     [MenuItem("Hammerc/AssetBundle/CreateMultipleAssetBundle")]55     private static void CreateMultipleAssetBundle()56     {57         if(Selection.objects.Length > 0)58         {59             //显示保存窗口60             string path = EditorUtility.SaveFilePanel("Create Multiple AssetBundle:", "", "New AssetBundle", "assetbundle");61 62             if(path.Length > 0)63             {64                 //打包65                 BuildPipeline.BuildAssetBundle(null, Selection.objects, path, BuildAssetBundleOptions.CollectDependencies | BuildAssetBundleOptions.CompleteAssets, BUILD_TARGET);66             }67         }68     }69 }

我们不需要关心文件类型，Unity3D会自动帮我们把图片格式的文件转换为Sprite类型。

加载代码

加载代码就比较简单了，加载AssetBundle后从这个AssetBundle中直接加载图片即可。

public Sprite LoadSprite(string spriteName)2 {3     if(assetbundle == null)4         assetbundle = AssetBundle.CreateFromFile(Application.streamingAssetsPath +"/Img.assetbundle");5     return assetbundle.Load(spriteName) as Sprite;6 }

设置贴图就是向GameObject添加SpriteRenderer脚本后设置其sprite属性即可，如下：

this.gameObject.GetComponent<SpriteRenderer>().sprite = LoadSprite("img1");