Unity编辑器拓展之十九：NGUI UISprite预览图Preview拓展

最新推荐文章于 2024-08-21 23:40:35 发布
最新推荐文章于 2024-08-21 23:40:35 发布
阅读量1.7k 收藏 6
点赞数
CC 4.0 BY-SA版权
分类专栏： Unity 编辑器 Unity编辑器拓展 文章标签： Unity Editor 插件 NGUI 编辑器拓展
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26999509/article/details/81570904
本文介绍了一个NGUI UISprite预览图的拓展功能，实现了在UIAtlas上直接选择Sprite，简化了选择流程。文章详细展示了如何修改UISpriteInspector脚本来实现新的预览效果，包括左右双视图展示AtlasTexture和Sprite，以及通过鼠标点击选择Sprite的具体实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

博客迁移

个人博客站点，欢迎访问，www.jiingfengji.tech

NGUI UISprite预览图Preview拓展

功能说明

1、拓展UISprite的Preview视图，同时显示UIAtlas Texture和Sprite
2、支持在UIAtlas上直接点选Sprite
3、无需打开Atlas选择框和Sprite选择框两步操作

Gif示意图

这里写图片描述

逻辑介绍

1、找到UISpriteInspector脚本，其脚本的OnPreView函数逻辑，源码如下：

public override void OnPreviewGUI (Rect rect, GUIStyle background)
{
	UISprite sprite = target as UISprite;
	if (sprite == null || !sprite.isValid) return;
	Texture2D tex = sprite.mainTexture as Texture2D;
	if (tex == null) return;
	UISpriteData sd = sprite.atlas.GetSprite(sprite.spriteName);
	NGUIEditorTools.DrawSprite(tex, rect, sd, sprite.color);
}

其中NGUIEditorTools.DrawSprite函数负责绘制Sprite，包括背景、border line、out line、size label等，如下图所示：

2、PreView区域为左右两边，分别绘制Atlas Texture和Sprite，并且Atlas Texture在绘制时依然采用sprite的绘制样式，底图背景 + 黑色轮廓，再次基础上使用的Sprite采用绿色轮廓

public override void OnPreviewGUI (Rect rect, GUIStyle background)
{
	UISprite sprite = target as UISprite;
	if (sprite == null || !sprite.isValid) return;
	Texture2D tex = sprite.mainTexture as Texture2D;
	if (tex == null) return;
	float interval = 10f;
	float width = (rect.width - interval) / 2;
	Rect leftRect = new Rect(rect.x,rect.y,width,rect.height);
	Rect rightRect = new Rect(rect.x + width + interval,rect.y,width,rect.height);
	UISpriteData sd = sprite.atlas.GetSprite(sprite.spriteName);
	NGUIEditorTools.DrawAtlas(tex,leftRect,sd);	
	NGUIEditorTools.DrawSprite(tex, rightRect, sd, sprite.color);
}

	static public void DrawAtlas(Texture2D tex,Rect drawRect,UISpriteData sprite)
	{
		if (!tex) return;

		// Create the texture rectangle that is centered inside rect.
		Rect outerRect = drawRect;
		outerRect.width = tex.width;
		outerRect.height = tex.height;
		
		if (tex.width > 0)
		{
			float f = drawRect.width / outerRect.width;
			outerRect.width *= f;
			outerRect.height *= f;
		}

		if (drawRect.height > outerRect.height)
		{
			outerRect.y += (drawRect.height - outerRect.height) * 0.5f;
		}
		else if (outerRect.height > drawRect.height)
		{
			float f = drawRect.height / outerRect.height;
			outerRect.width *= f;
			outerRect.height *= f;
		}

		if (drawRect.width > outerRect.width) outerRect.x += (drawRect.width - outerRect.width) * 0.5f;

		// Draw the background
		NGUIEditorTools.DrawTiledTexture(outerRect, NGUIEditorTools.backdropTexture);

		Handles.color = Color.black;
		Handles.DrawLine(new Vector3(outerRect.xMin, outerRect.yMin), new Vector3(outerRect.xMin, outerRect.yMax));
		Handles.DrawLine(new Vector3(outerRect.xMax, outerRect.yMin), new Vector3(outerRect.xMax, outerRect.yMax));
		Handles.DrawLine(new Vector3(outerRect.xMin, outerRect.yMin), new Vector3(outerRect.xMax, outerRect.yMin));
		Handles.DrawLine(new Vector3(outerRect.xMin, outerRect.yMax), new Vector3(outerRect.xMax, outerRect.yMax));
		
		if(sprite != null)
		{
			Handles.color = Color.green;
			Rect spriteOutlineRect = outerRect;
			float r = outerRect.width / tex.width;
			spriteOutlineRect.x = outerRect.xMin + sprite.x * r;
			spriteOutlineRect.y = outerRect.yMin + sprite.y * r;
			spriteOutlineRect.width = sprite.width * r;
			spriteOutlineRect.height = sprite.height * r;
			Handles.DrawLine(new Vector3(spriteOutlineRect.xMin, spriteOutlineRect.yMin), new Vector3(spriteOutlineRect.xMin, spriteOutlineRect.yMax));
			Handles.DrawLine(new Vector3(spriteOutlineRect.xMax, spriteOutlineRect.yMin), new Vector3(spriteOutlineRect.xMax, spriteOutlineRect.yMax));
			Handles.DrawLine(new Vector3(spriteOutlineRect.xMin, spriteOutlineRect.yMin), new Vector3(spriteOutlineRect.xMax, spriteOutlineRect.yMin));
			Handles.DrawLine(new Vector3(spriteOutlineRect.xMin, spriteOutlineRect.yMax), new Vector3(spriteOutlineRect.xMax, spriteOutlineRect.yMax));
		}

		Rect uv = new Rect(0, 0, tex.width, tex.height);
		uv = NGUIMath.ConvertToTexCoords(uv, tex.width, tex.height);
		GUI.DrawTextureWithTexCoords(outerRect, tex, uv, true);
		
		// Sprite size label
		string text = string.Format("Atlas Size: {0}x{1}", Mathf.RoundToInt(tex.width), Mathf.RoundToInt(tex.height));
        EditorGUI.DropShadowLabel(GUILayoutUtility.GetRect(Screen.width, 18f), text);
	}

示意图如下：
这里写图片描述

3、点选功能实现

	public override void OnPreviewGUI (Rect rect, GUIStyle background)
	{
		UISprite sprite = target as UISprite;
		if (sprite == null || !sprite.isValid) return;

		Texture2D tex = sprite.mainTexture as Texture2D;
		if (tex == null) return;
		float interval = 10f;
		float width = (rect.width - interval) / 2;
		Rect leftRect = new Rect(rect.x,rect.y,width,rect.height);
		Rect rightRect = new Rect(rect.x + width + interval,rect.y,width,rect.height);
		UISpriteData sd = sprite.atlas.GetSprite(sprite.spriteName);
		NGUIEditorTools.DrawAtlas(tex,leftRect,sd);
		
		NGUIEditorTools.DrawSprite(tex, rightRect, sd, sprite.color);

		//点选图片
		Event e = Event.current;
		if(e.type == EventType.MouseDown)
		{
			//下面函数通过点击的坐标，和texture、texture draw rect等信息计算出被点选的sprite
			UISpriteData click = NGUIEditorTools.GetUISpriteData(tex,sprite.atlas,leftRect,e.mousePosition);
			if(click != null)
			{
				sprite.spriteName = click.name;
				EditorUtility.SetDirty(sprite);
			}
		}
	}

	//获取sprite在preview中的区域
	static public Rect GetAreaInPreview(Texture2D tex,Rect drawRect,UISpriteData sprite)
	{
		// Create the texture rectangle that is centered inside rect.
		Rect outerRect = drawRect;
		outerRect.width = tex.width;
		outerRect.height = tex.height;
		
		if (tex.width > 0)
		{
			float f = drawRect.width / outerRect.width;
			outerRect.width *= f;
			outerRect.height *= f;
		}

		if (drawRect.height > outerRect.height)
		{
			outerRect.y += (drawRect.height - outerRect.height) * 0.5f;
		}
		else if (outerRect.height > drawRect.height)
		{
			float f = drawRect.height / outerRect.height;
			outerRect.width *= f;
			outerRect.height *= f;
		}

		if (drawRect.width > outerRect.width) outerRect.x += (drawRect.width - outerRect.width) * 0.5f;

		Rect spriteOutlineRect = outerRect;
		float r = outerRect.width / tex.width;
		spriteOutlineRect.x = outerRect.xMin + sprite.x * r;
		spriteOutlineRect.y = outerRect.yMin + sprite.y * r;
		spriteOutlineRect.width = sprite.width * r;
		spriteOutlineRect.height = sprite.height * r;

		return spriteOutlineRect;
	}

	//根据点击的坐标，循环遍历出哪个Sprite的Area包含了该pos即可
	static public UISpriteData GetUISpriteData(Texture2D tex, UIAtlas atlas,Rect drawRect,Vector2 pos)
	{
		List<UISpriteData> sprites = atlas.spriteList;
		if(sprites == null || sprites.Count <= 0) return null;
		for (int i = 0; i < sprites.Count; i++)
		{
			UISpriteData sprite = sprites[i];
			Rect area = GetAreaInPreview(tex,drawRect,sprite);
			if(area.Contains(pos))
			{
				return sprite;
			}
		}
		return null;
	}

以上知识分享，如有错误，欢迎指出，共同学习，共同进步。

真Unity3d_分享一个编辑器扩展模型预览视图Mesh Preview Inspector窗口
大话程序员
08-11 2244
预览窗口 在 Unity 编辑器界面上可以看到除了 Game 视图、Scene 视图，其他的视图也会出现绘制三维物体的地方，比如检视器的预览窗口，当选中网格时，会对网格进行预览，如下所示： 预览窗口是UnityEditor的底层框架 框架图 可看我之前的博客： https://blog.csdn.net/avi9111/article/details/105573862 实现步骤 可参考无幻大神： https://blog.csdn.net/akof1314/article/deta
Unity编辑器扩展-制作界面时引入外部的参考图
大鹏的专栏
04-03 1万+
一般做界面,我们按美术出的图,那里拉个按钮,那里弄个文本,其坐标大小比例等肯定要严格按美术出的图来调节的,所以编辑界面时最好就有张参考图,添加方式如下:参考图的资源可来自项目外的目录,添加后,可以选中它后右键菜单-&gt;锁定,这样就不会碍着你了.关于在Scene视图显示右键菜单可以见:Unity编辑器扩展-在Scene视图添加右键菜单实现主要分三步:1弹出选择文件的界面,2选中某图片文件后加载成...
Unity-Animator在Editor状态下的单个/批量预览工具
dongfushu7972的博客
01-10 221
网上有一个版本，但是调了半天用不了。于是自己动手写了一个 单个预览 批量预览 使用： 下载地址： http://files.cnblogs.com/files/hont/AnimatorClipPreviewer1.1.rar 转载于:https://www.cnblogs.com/hont/p/5119707.html...
unity编辑器预览窗口怎么做
新人
12-17 1934
现在网络上的方案一般都是直接使用unity的preview，但是preview一般也要写比较多的代码，文档也没多少，看来看去也就那几篇，但是如果被策划逼急了， 想要快速成型一个窗口， 可以考虑在ongui里面刷新截图的想法才实现，preview实际上也就是去对scene面板进行快照然后刷新。 代码非常简单粗暴。 public class ScreenShotPreview:EditorWindow { [MenuItem("Tools/截图预览窗口")] st
UVPreview扩展
茶向
05-27 449
http://www.lsngo.net/2017/10/22/unityeditor_uvpreview/?rifmxg=3bepp3
NGUI 导入，场景准备
yayali98的专栏
01-22 578
导入NGUI 包 新建工程，新建一个scene,在此场景下进行其他操作 给场景加root,创建新的UI。 创建background 为场景加入对象可以采用两种方式。第一种是在场景中，直接create。第二种是点击NGUI—open——WidgetWizard(legacy)弹出WidgetTool工具。选择Altas.Font.模板中可以选择想要创建的对象。AddTo后面对应的内容是对象的父对象。
Unity编辑器扩展-生成prefab的预览图并保存为图片
热门推荐
大鹏的专栏
03-21 1万+
Project视图里的prefab文件都是一个蓝色的正方体，我想给它们加个预览图，暂时不知道怎么改Project视图的，但反正我想像NGUI那样有个专门的窗口存放一些常用的prefab，所以做成了如下效果：关于如何定制窗口，可以参考雨松的教程：Unity3D研究院之拓展自定义编辑器窗口实现思路：主要参考自：获取unity prefab的预览图像unity在2017.2版本可以使用官方自带API:A...
【Unity】UIElements 渲染细节，比NGUI/UGUI/FairyGUI好在哪？
游戏路上的小学生
10-13 1万+
为什么要关注UIElements ？ 因为要有运行时版本了。UIElements 在一开始推出的时候就在文档中提到将来会有运行时版本，但是具体什么时候没有说。 Unity运行时UI解决方案 还挺多， NGUI, UGUI, FairyGUI . 使用UIElements + UI Builder创建编辑器扩展 https://www.slideshare.net/U...
NGUI九宫格反向切割拉伸
随风吹笛
07-06 2751
项目中有个新手引导，要求做一个圆圈，中间透明，四周黑色，取一定的Alpha值，由于游戏设定分辨率为1136*640，只是一个圆圈，如果使用大图的话未免浪费，而且由于新手引导是有策划配置修改，用大图的话也不是很灵活，一开始想到使用小图拼接加Anchor的方式，拼出来后电脑上一看，还不错，导包，放到手机上，各种缝隙没办法，此路不通，换个思路吧。想到了NGUI中的九宫格切割sliced，想想自己可不可以这
Unity2019 UIElement 笔记（十四）UI Builder
工 具 人
11-14 9231
如果需要了解Unite Copenhagen 2019中有关UI Element的内容，可以看这位大大的文章——【Unity】UIElements 渲染细节，比NGUI/UGUI/FairyGUI好在哪？ 本文就简单介绍一下UI Builder的使用 1.安装UI Builder 我目前使用的Unity版本是2019.3.0b9，在菜单栏选择Windows——Package Manager，在...
unity-unity2d基础操作笔记（一）0.5.205
随笔
02-25 686
unity-unity2d常见FAQ
unity 预览模型插件
08-30
unity 预览模型插件 一款非常有用插件
NGUI-Sprite
qq_36998053的博客
05-07 809
（三）NGUI-Sprite Sprite：图片精灵。可以在一张大图（Atlas，整体图像集合）中去截取一部分，而截取的小图就是一个精灵。给精灵命名后，使用时通过精灵的名称就能直接绘制。图片精灵还可以用来制作动画（Tween相关脚本）。 创建Sprite： 创建Sprite 创建完成 Sprite的属性栏 Spritel属性栏 图片的选择：首先点击Atlas（图册），会弹...
Unity编辑器拓展之三十二:关于多选中Preview绘制探究
静风霁
07-31 1320
Unity编辑器拓展之三十二:关于多选中Preview绘制探究 个人博客-原文地址 前言 先来介绍一下本篇文章的背景，在项目中通过使用一个ScriptableObject，暂定名为SpriteSetting，SpriteSetting内通过一个字典序列化存储了一些Sprite（以SpriteName为key，以Sprite为Value），一般使用场景为一个图集对应一个SpriteSetting。那么在运行时，只需要Load这个SpriteSetting的so，就可以根据name这个key得到Sprite。
Unity编辑器的一些不常用功能
哈鲁的不重要意见
11-12 394
仅记录简单的接口，关于具体的应用和其他可选参数请自行查找https://docs.unity3d.com/ScriptReference/ 1、当UI信息改动时执行某个命令 EditorGUI.BeginChangeCheck(); width = EditorGUILayout.IntField("width : ", width); if (EditorGUI.EndChange...
NGUI在secene中看不到
zhbitxhd的专栏
06-16 1287
NGUI在使用过程中，添加了UIRoot之后，死活在scene中看不到。但是切换成3D图或者缩小来看，还是存在的。 这是怎么了，怎么都找不到。 这里记录下，以便给有些新人提供的参考。 如果出现这种情况，只是因为UIRoot的位置不对。 点击NGUI-->Extras-->Align Scene View to UI   就可以了。还别说，如果不知道的时候，还是花了很多时间去查看是什么问题
Unity 编辑器拓展
xxlyyr的专栏
05-13 1107
我认为Unity里面比较出色的一个功能就是其易于拓展的编辑器。拓展编辑器对于开发效率的提高有较大帮助。 俗话说，工欲善其事，必先利其器。 此次，我将介绍以下一些拓展编辑器的方法： OnDrawGizmos OnInspectorGUI OnSceneGUI MenuItem 与 EditorWindow ScriptableWizard ScriptObject Attributes AssetProcess OnDrawGizmos OnDrawGizmos隶属于MonoBehaviour下，通过该方法可
Unity自定义Preview窗口的方法
最新发布
qq_27275225的博客
08-21 1953
如名字所描述的一样，这两个函数都是绘制这个PreviewGUI的函数，OnInteractivePreviewGUI（）就是可以允许用户进行交互的那种，比如滑动鼠标滚轮进行缩放，拖拽物体旋转，等等，一般3d模型展示常有这种效果，如果是有这样的需求的话，那么就必须使用OnInteractivePreviewGUI()来进行复写，如果是只是静态显示一些信息，那么用OnPreviewGUI就够了。想要在这里显示一个东西，需要在这个空间里新建物体，然后新建摄像机，对准物体渲染，然后把得到的图片取出。
unity3d Attribute的探索
月夜何干
04-27 1199
1.AddComponentMenu 直面解释就是这个脚本能够在Component菜单栏里找到 using System.Collections; using System.Collections.Generic; using UnityEngine; [AddComponentMenu("Transform/Follow Transform")] public class Follow : MonoBehaviour { } 2.BeforeRenderOrderAttribute 当
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值