首页 >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. 今天没有bug说：
    2015 年 5 月 7 日上午 12:46

    Mono大神，打包在一个将所有关联打包在一个assetbundle下会不会增加容量啊，一个图片对应一个prefabs ，天啊 想想太可怕了！

    回复
    • 雨松MOMO说：
      2015 年 5 月 7 日上午 9:46

      不是。。 这只是一个思路 。。就是要把图片关联在prefab上。。 我现在做的是 把每个文件夹下的所有图片关联在 一个prefab上。。 用字典来保存。。。

      回复
  2. 我还未成年丶说：
    2015 年 4 月 30 日下午 11:30

    Mono大神，你的意思是 一个图片一个prefab，然后把这个prefab放在resources里load？ 那如果有1000张图片，就的做1000个prefab？ 是这样吗？

    回复
  3. 谢谢！！说：
    2015 年 4 月 30 日下午 7:37

    mono 现在有个问题，我又10张小图 tag 设置成一个图集，但是，我10张小图分别打成10个ab包，然后加载到场景中drawcall 没有降低。这是什么原因，一个图集的中的图必须打到1个AB中吗？

    回复
  4. 飘说：
    2015 年 4 月 23 日上午 9:39

    MOMO，你好！我看完你关于UGUI图集的文章，有一点我不是很明白，希望你能给我解一下惑！我看你在文章中提到的打包assetbundle实际上是将属于同一个图片的一张张小图片打到了同一个assetbundle里面，并不是将这些小图片合并成的大图打包。在运行时drawcall却依然是1，会不会是unity自己将合并的大图打包了？那占用空间会是双倍的吗？这个问题想不通，希望你能给我解释一下，谢谢！

    回复
  5. amumu说：
    2015 年 4 月 7 日下午 7:55

    怎么改指定文件夹下的图片啊？

    回复
  6. 木易说：
    2015 年 4 月 2 日下午 4:21

    MoMo ， 我想问下，如果在小版本更新资源的时候，需要更新Main.assetbundle文件，那Libary/AtlasCache 文件夹中的资源是否需要更新？

    回复
  7. Sunny说：
    2015 年 4 月 1 日下午 4:52

    Type `System.IO.DirectoryInfo’ does not contain a definition for `GetDirectories’ and no extension method `GetDirectories’ of type `System.IO.DirectoryInfo’ could be found (are you missing a using directive or an assembly reference?)大大，出这个错误了咋整using System.IO;用了

    回复
  8. 亲爱滴说：
    2015 年 3 月 30 日下午 1:11

    请问雨松大大怎么用UGUI实现NGUI改sprite.name就能换图片的功能呢？脚本怎么写，求教

    回复
  9. X1nAct10n说：
    2015 年 3 月 20 日下午 5:40

    兼容不同设备分辨率呢？做成多个分辨率下的prefab吗？比如SD/HD或者@1x @2x @3x更甚至@4x。

    回复
  10. 火柴说：
    2015 年 3 月 17 日下午 3:57

    UGUI有类似UISpriteAnimation的做UI动画吗

    回复
  11. rhythom说：
    2015 年 3 月 17 日下午 2:19

    看了下这样的方式 通过BuildPipeline.BuildAssetBundle这样的方式，将图片打包，然后去用AssetBundle去load的，但是在使用UGUI的时候，那些拖动的东西可能就白做了，只能用代码来初始化了么，比如sprite上面的Image的图片是拖上去的，但是这样打包以后只能通过代码初始化了吗？

    回复
    • rhythom说：
      2015 年 3 月 17 日下午 10:58

      问题我已经解决了，使用最新的TexturePackerGUI，直接打包成图集，然后下载unitystore上面的插件，自动切割成多个精灵图，精灵图被打包后会形成依赖包，只要查找依赖包加载就好了。

      回复
      • null说：
        2015 年 4 月 12 日下午 4:31

        我也遇到这样的问题，具体是怎么处理呀？没有看很明白，unitystore下载的哪个插件？切成小图后又怎么处理呀？是不是还是需要用代码重新设置下？ 还是用assetbundle load之后就自行设置好了？

        回复
      • 郭智说：
        2015 年 12 月 21 日下午 6:34

        同样的问题，预先摆好的UI，是怎么加载Sprite的呀？是在加载场景之前先加载图集吗？能给说一下吗？对这块流程不是很了解

        回复
  12. 阿克说：
    2015 年 3 月 9 日下午 9:16

    您好 我们最近准备在新项目里使用UGUI,然后发现我使用多个小图拼完界面后draw并不是想象中的只占一个,场景没有其他的东西,文本也全部都关了,我的小图都用了相同的tag,sprite packer 的模式也是Always Enabled ,如果这些小图我手动打成大图然后再分sprite drawcall 就是一个,我本来以为是4.6.1的bug ,结果在5.04f里面也是相同的结果,请问有遇到这个问题么?具体可以私聊QQ ： 909369862

    回复
  13. 王致远说：
    2015 年 2 月 28 日下午 2:27

    用4.6.3测试图片放在Resources里和外发现打APK大小没有区别，不知道是不是版本问题。另外在考虑动态替换图片的需求，不知道雨松这一段时间有没有找到好方法？我现在想到的是全局保持所有图片的引用。。。

    回复
  14. jx_T说：
    2015 年 2 月 20 日上午 1:12

    另外，你写的打包模式太复杂，并且分类不清楚另外绑定到打包模式可以自动化

    回复
  15. jx_T说：
    2015 年 2 月 20 日上午 1:10

    你这样打包应该把默认的图片和sprite都打进去了吧，不通过type加载应该是得不到sprite的另外如果是不在一张图的sprite打包后，运行后drawcall不应该是1这个drawcall之前我测试为1，现在反复测试不能为1了，不知道什么情况，根据多次测试来看，只要不把图打到一起，类似NGUI的atlas，drawcall都不能得到优化，包括自动打包中分页后drawcall也会增加jx_T qq：450104299

    回复
  16. 梁亚说：
    2015 年 2 月 4 日下午 6:02

    momo~ 我现在用Ugui想做一个类似QQ聊天的功能，怎么才能实现在输入框里面图片和文字都可以显示，以及在Text里面把表情图片显示出来。现在我们的检测就是一个表情图标对应一个关键字 如果出现这个关键字，就在关键字的位置显示对应的表情图片。求momo给一个好的思路，现在很迷茫。

    回复
  17. ching说：
    2015 年 1 月 28 日上午 10:35

    MOMO大大我作了范例但感觉不出变化(不知是否我做错了)，所以是否可说一下1(包圖集嗎?).2(使用)区块程序代码用途即可给范例看一下吗?………..谢谢…我的QQ:1453701424

    回复
  18. 放荡公子说：
    2015 年 1 月 23 日上午 9:45

    MOMO~你知道UGUI中的Text如何在文本中穿插出现表情图片么~

    回复
  19. licj说：
    2015 年 1 月 15 日下午 5:57

    虽然用的时候是用小图，当时在打包的时候还是要手动去分配小图tag吧？

    回复
  20. 或许吧说：
    2015 年 1 月 9 日上午 10:58

    真的很棒，赞一个。

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

留下一个回复

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