首页 >Unity3D频道 >【UGUI研究院】 > UGUI研究院之全面理解图集与使用（三）
2014
10-24

UGUI研究院之全面理解图集与使用（三）

UGUI的图集打包与工作原理，整整看了一天多，终于看明白了～晕～还是记录一下我研究的成果，也希望大家在下面给我留言我们一起讨论一下。

先说说UGUI的Atlas和NGUI的Atlas的区别，NGUI是必须先打出图集然后才能开始做界面。这一点很烦，因为始终都要去考虑你的UI图集。比如图集会不会超1024 ，图集该如何来规划等等。而UGUI的原理则是，让开发者彻底模糊图集的概念，让开发者不要去关心自己的图集。做界面的时候只用小图，而在最终打包的时候unity才会把你的小图和并在一张大的图集里面。然而这一切一切都是自动完成的，开发者不需要去care它。

如下图所示，Editor->Project Settings 下面有sprite packer的模式。Disabled表示不启用它，Enabled For Builds 表示只有打包的时候才会启用它，Always Enabled 表示永远启用它。 这里的启用它就表示是否将小图自动打成图集。

Snip20141024_2我的选项是Always Enabled 。因为开发的时候我们需要清楚的看到现在是几个Draw Call，从而才能优化小图。在最终打包的时候unity会自动构建大的图集，可是我开发的时候就想看图集会占几个Draw Call，这怎么办呢？如下图所示，首先将你的图片拖入unity中，将同一图集的所有图片的packing tag设置成一个名子即可。

Snip20141024_3

注意你的图片不能放在Resources文件夹下面，Resources文件夹下的资源将不会被打入图集，切记（也就是在这里混淆了我很久）。然后在Windows->Sprite Packer 里，点击packer 在这里你就可以预览到你的图集信息。图集的大小还有图集的格式等等很多参数我们都是可以控制的，也可以通过脚本来设置。我在下一篇文章里详细说这个（请期待嘿嘿）。

Snip20141024_4

图集的预览紧紧是让你看看你的图集大概张什么样子。那么我们的图集的这张图片保存在了哪里呢？它保存在和Assets文件夹同级的目录，Libary/AtlasCache里面。你不用管它，也不要删除它，就算你删除了也没用因为只要你打包，它就会生成并且会打到包中。

此时在Hierarchy视图中创建两个Image对象。如下图所示，我们可以清楚的看到此时我的draw call已经被合并成了1 。

Snip20141024_5

这两个图片是我是在Editor模式下预先拖入Hierarchy视图中的，可是如果我想运行时根据图片的名子来动态创建精灵该如何？可是unity根本没有提供加载图集的方法，也没有提供加载图集上某个图片的方法。 因为UGUI就不像让开发者有图集的这个概念，可是我们肯定是要实现这个需求的。。怎么办呢？

第一个设想，先把散＝小图打包成图集，然后再把所有散图拷贝在Resources文件夹下，这样运行时就能用Resources.load了。

第二个设想，还是先把小图打成图集，然后把所有小图关联在prefab上，拷贝在Resources文件夹下，这样运行时也能用Resources.load了。到底那个靠谱呢？ 给大家看一个图大家就知道答案了。

如下图所示，打成图集的图片如果在放在Resources那么资源就变成双份了。。 所以我们只能把小图关联在Prefab上，把所有的Prefab放在Resources下面，这样就不占用多余的空间了。

Snip20141024_6

好了，现在方法我们已经掌握，那么就开始写工具吧。如下图所示可以按文件夹分，每一个文件夹就是一个图集。然后每一张小图创建一个Prefab，Prefab的名子就起小图的名子，文件关联在Resources下面。

Snip20141024_7

 

代码比较简单，我就不注释了。

	[MenuItem ("MyMenu/AtlasMaker")]
	static private void MakeAtlas()
	{
		string spriteDir = Application.dataPath +"/Resources/Sprite";
		
		if(!Directory.Exists(spriteDir)){
			Directory.CreateDirectory(spriteDir);
		}

		DirectoryInfo rootDirInfo = new DirectoryInfo (Application.dataPath +"/Atlas");
		foreach (DirectoryInfo dirInfo in rootDirInfo.GetDirectories()) {
			foreach (FileInfo pngFile in dirInfo.GetFiles("*.png",SearchOption.AllDirectories)) {
				string allPath = pngFile.FullName;
				string assetPath = allPath.Substring(allPath.IndexOf("Assets"));
				Sprite sprite = Resources.LoadAssetAtPath<Sprite>(assetPath);
				GameObject go = new GameObject(sprite.name);
				go.AddComponent<SpriteRenderer>().sprite = sprite;
				 allPath = spriteDir+"/"+sprite.name+".prefab";
				string prefabPath = allPath.Substring(allPath.IndexOf("Assets"));
				PrefabUtility.CreatePrefab(prefabPath,go);
				GameObject.DestroyImmediate(go);
			}
		}	
	}

 

然后是运行时的代码。

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

public class UIMain : MonoBehaviour {

	void Start () 
	{
		CreatImage(loadSprite("image0"));
		CreatImage(loadSprite("image1"));
	}

	private void CreatImage(Sprite sprite ){
		GameObject go = new GameObject(sprite.name);
		go.layer = LayerMask.NameToLayer("UI");
		go.transform.parent = transform;
		go.transform.localScale= Vector3.one;
		Image image = go.AddComponent<Image>();
		image.sprite = sprite;
		image.SetNativeSize();
	}

	private Sprite loadSprite(string spriteName){
		return Resources.Load<GameObject>("Sprite/" + spriteName).GetComponent<SpriteRenderer>().sprite;
	}

}

因为这两个图是在同一个图集上，所以drawcall就是1了。这样我们就可以根据图片的名子来运行时加载图片了。

Snip20141024_8

接下来就是Assetbundle了，如果我们的图集需要在线更新那该怎么办呢？ 其实Assetbundle比Resources要更简单一些，无论如何我们要先开始打图集。

	[MenuItem ("MyMenu/Build Assetbundle")]
	static private void BuildAssetBundle()
	{
		string dir = Application.dataPath +"/StreamingAssets";

		if(!Directory.Exists(dir)){
			Directory.CreateDirectory(dir);
		}
		DirectoryInfo rootDirInfo = new DirectoryInfo (Application.dataPath +"/Atlas");
		foreach (DirectoryInfo dirInfo in rootDirInfo.GetDirectories()) {
			List<Sprite> assets = new List<Sprite>();
			string path = dir +"/"+dirInfo.Name+".assetbundle";
			foreach (FileInfo pngFile in dirInfo.GetFiles("*.png",SearchOption.AllDirectories)) 
			{
				string allPath = pngFile.FullName;
				string assetPath = allPath.Substring(allPath.IndexOf("Assets"));
				assets.Add(Resources.LoadAssetAtPath<Sprite>(assetPath));
			}
			if(BuildPipeline.BuildAssetBundle(null, assets.ToArray(), path,BuildAssetBundleOptions.UncompressedAssetBundle| BuildAssetBundleOptions.CollectDependencies, GetBuildTarget())){
			}
		}	
	}
		static private BuildTarget GetBuildTarget()
		{
			BuildTarget target = BuildTarget.WebPlayer;
#if UNITY_STANDALONE
			target = BuildTarget.StandaloneWindows;
#elif UNITY_IPHONE
			target = BuildTarget.iPhone;
#elif UNITY_ANDROID
			target = BuildTarget.Android;
#endif
			return target;
		}

如下图所示，我的assetbundle已经打出来了。

Snip20141024_10

然后把UIMain.cs在改一改。

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

public class UIMain : MonoBehaviour {

	AssetBundle assetbundle = null;
	void Start () 
	{
		CreatImage(loadSprite("image0"));
		CreatImage(loadSprite("image1"));
	}

	private void CreatImage(Sprite sprite ){
		GameObject go = new GameObject(sprite.name);
		go.layer = LayerMask.NameToLayer("UI");
		go.transform.parent = transform;
		go.transform.localScale= Vector3.one;
		Image image = go.AddComponent<Image>();
		image.sprite = sprite;
		image.SetNativeSize();
	}

	private Sprite loadSprite(string spriteName){
#if USE_ASSETBUNDLE
		if(assetbundle == null)
			assetbundle = AssetBundle.CreateFromFile(Application.streamingAssetsPath +"/Main.assetbundle");
				return assetbundle.Load(spriteName) as Sprite;
#else
		return Resources.Load<GameObject>("Sprite/" + spriteName).GetComponent<SpriteRenderer>().sprite;
#endif	
	}

}

如下图所示，依然还是一个drawcall。

Snip20141024_8

 

衷心希望有经验的朋友在留言处给我提提意见， 或者大家一起讨论讨论。。 我们共同为把NGUI干掉的目标而奋斗，嘻嘻。

 

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

您可能还会对这些文章感兴趣！

《UGUI研究院之全面理解图集与使用（三）》有 184 条评论

← 早期评论
较新评论 →
  1. 王振丰说：
    2015 年 12 月 22 日下午 5:17

    感觉Sprite Packer优点在于不用图集，但是根据imageName加载还是需要做图集，那是不是说动态加载还是用NGUI好啊

    回复
  2. 杨云说：
    2015 年 12 月 11 日下午 3:16

    你说的第二种加载你想要的图片的方法不靠谱吧，图片量一大，成千上万个prefab，相较NGUI图集这样的方法太粗糙了。而且可能内存方面也比较大了。有更好的方法吗momo

    回复
  3. 刘义杰说：
    2015 年 11 月 10 日下午 1:23

    大大，有问题想问你。菜鸟一枚。
    想问UGUI 怎么实现多张图片滑动。加了个Mask和ScrollRect。总是滑倒两张图片中间。想要一个当滑倒两张图片缝隙时候，多的那张自动在中心

    回复
  4. 蛋疼行者说：
    2015 年 10 月 26 日下午 7:27

    你好，雨松大哥，我是你的读者，最近在用到ugui时遇到一点疑惑，还请指教一二，先行谢过了！
    1,用ugui开发项目，关于图片格式，ui元素图片和动态加载的物品图片格式需要区分对待吗，我目前都是用的Sprite格式；
    2，由于我的动态图片采用的是Sprite格式，又想压缩资源大小，于是出现了如下问题，复现步骤如下：
    在pc平台模式下，我在对图片资源进行配置时，选择类型为Sprite，然后用image组件正常显示在舞台上，但资源格式是raga32的，为了节约资源，我进入Advanced设置，选择dxt5–apply，提示必须是2的幂次方，我就设置了non power of 2，发现图片马上显示不了了，为白色，后来多次测试，只要设置了non power of 2，都显示不出来，不论什么格式；

    附图如下：
    UGUI研究院之全面理解图集与使用（三） - 雨松MOMO程序研究院 - 1

    回复
  5. 蛋疼行者说：
    2015 年 10 月 26 日下午 7:27

    你好，雨松大哥，我是你的读者，最近在用到ugui时遇到一点疑惑，还请指教一二，先行谢过了！
    1,用ugui开发项目，关于图片格式，ui元素图片和动态加载的物品图片格式需要区分对待吗，我目前都是用的Sprite格式；
    2，由于我的动态图片采用的是Sprite格式，又想压缩资源大小，于是出现了如下问题，复现步骤如下：
    在pc平台模式下，我在对图片资源进行配置时，选择类型为Sprite，然后用image组件正常显示在舞台上，但资源格式是raga32的，为了节约资源，我进入Advanced设置，选择dxt5–apply，提示必须是2的幂次方，我就设置了non power of 2，发现图片马上显示不了了，为白色，后来多次测试，只要设置了non power of 2，都显示不出来，不论什么格式；

    附图如下：
    UGUI研究院之全面理解图集与使用（三） - 雨松MOMO程序研究院 - 1

    回复
  6. FG911说：
    2015 年 10 月 19 日下午 9:06

    为什么你打包处理的apk这么小，我打包处理什么都没有也超高10m啊

    回复
  7. zhangle说：
    2015 年 10 月 15 日下午 12:37

    把图集中的一张图片和prefab绑定到一起，打包成assetbundle的时候，去找寻依赖，会把所有图集中的其他图片打包到此assetbundl中，但是现在有一个疑问，就是如果SpritePack的选项是always enable的话，打包一次assetbundle之后重启unity，再次打包assetbundle之后，两次生成的assetbundle的MD5值不一样，这个问题该如何解决呢？

    回复
  8. 魯魯修愛叛逆说：
    2015 年 7 月 23 日下午 8:38

    雨松大大 有个问题 就是 直接用你最后一段代码 打包成AB，在打包的时候 是unity 自己把几个小图打成图集然后再打包吗？ 还是直接把小图打成AB ，因为代码里面没有打包成图集的代码我很疑惑

    回复
  9. 程序狗说：
    2015 年 7 月 2 日下午 4:43

    打包后，return assetbundle.Load(spriteName) as Sprite;中跟踪发现为null，怎么解决

    回复
  10. 那些年说：
    2015 年 6 月 26 日下午 1:19

    我这边的 image 根本显示不到应有的sprite，单纯把创建好的2DSprite 丢进去， 是可以看到的

    回复
  11. 那些年说：
    2015 年 6 月 26 日下午 12:47

    还有个问题，我用的是4.6版本，这个版本支持这些功能否。

    回复
  12. 那些年说：
    2015 年 6 月 26 日上午 10:58

    今天遇到一个很奇怪的问题， 我打包到图集里的一个sprite ，我实例化100个同样的对象， 只增加一个drawcall，但实例化3600个，drawcall就会增加30个， 实例化上万个，drawcall直接上去了。

    回复
  13. gege180说：
    2015 年 6 月 15 日下午 5:18

    USE_ASSETBUNDLE这是你自己定义的宏？为什么我直接执行这段代码，提示内存溢出unity直接崩溃了 UGUI研究院之全面理解图集与使用（三） - 雨松MOMO程序研究院 - 1 if(assetbundle == null) assetbundle = AssetBundle.CreateFromFile(Application.streamingAssetsPath “/RoomSprite/roomsprite.assetbundle”); return assetbundle.LoadAsset(spriteName) as Sprite;

    回复
  14. gege180说：
    2015 年 6 月 15 日下午 5:18

    USE_ASSETBUNDLE这是你自己定义的宏？为什么我直接执行这段代码，提示内存溢出unity直接崩溃了 UGUI研究院之全面理解图集与使用（三） - 雨松MOMO程序研究院 - 1 if(assetbundle == null) assetbundle = AssetBundle.CreateFromFile(Application.streamingAssetsPath +”/RoomSprite/roomsprite.assetbundle”); return assetbundle.LoadAsset(spriteName) as Sprite;

    回复
  15. 求解说：
    2015 年 6 月 3 日下午 1:27

    这样只能打包小图吧，，文章的意思是图集会自动打到安装包里面，不用管么

    回复
  16. 。。。说：
    2015 年 6 月 3 日上午 10:13

    我用spriteeditor 吧上面的image0切分为image0_0和image0_1,我该怎么打包image0_0

    回复
  17. Maru说：
    2015 年 5 月 28 日上午 10:04

    我一直想知道Sprite Packer是打包时生成图集还是，运行时生成图集。用你这种方案，感觉就跟NGUI一样，需要事先生成图集，而且还得自己写图集生成工具，和图集编辑器。之前觉得UGUI比NGUI好，难道只是个错觉？

    回复
  18. 隼说：
    2015 年 5 月 25 日下午 12:34

    MOMO大大你好，我们现在项目也准备使用Sprite Packer AssetBundle的方式热更新图集，但是有些疑问需要请教一下。比如我们在第一个版本有40个武器图标，Tag一致，并打包成图集发布。之后我们需要添加10个新的武器图标，先将它们Tag设置成与之前40个武器一致，再打包成AssetBundle，客户端再动态下载这个AssetBundle。最终更新完毕后，这50个武器图标是否使用的是同一个Altas呢？将Sprite打包成AssetBundle，动态下载后是否会更新之前旧的Atlas？（旧Atlas包含40个武器图标，我们期望新的Atlas包含旧的40 新的10个）

    回复
  19. 隼说：
    2015 年 5 月 25 日下午 12:34

    MOMO大大你好，我们现在项目也准备使用Sprite Packer+AssetBundle的方式热更新图集，但是有些疑问需要请教一下。比如我们在第一个版本有40个武器图标，Tag一致，并打包成图集发布。之后我们需要添加10个新的武器图标，先将它们Tag设置成与之前40个武器一致，再打包成AssetBundle，客户端再动态下载这个AssetBundle。最终更新完毕后，这50个武器图标是否使用的是同一个Altas呢？将Sprite打包成AssetBundle，动态下载后是否会更新之前旧的Atlas？（旧Atlas包含40个武器图标，我们期望新的Atlas包含旧的40+新的10个）

    回复
  20. 今天没有bug说：
    2015 年 5 月 7 日上午 10:39

    试了下AB 打包出来的大小居然有5M，本来就有图集 再打包一次图片！这。。。。好奇怪

    回复
← 早期评论
较新评论 →

留下一个回复

你的email不会被公开。 必填项已用 * 标注。