UGUI学习笔记

【旧博客转移 - 2016年7月7日 23:13 

 

最近用了下UGUI,毕竟是Unity官方内置的,估计以后也会慢慢取代NGU了,现在资料也还算丰富

图集打包方式

看了雨松MOMO的几篇文章UGUI研究院之全面理解图集与使用(三),看完后自己弄了一些图片实验了一下

sprite packer

这是UGUI自带的打包工具,同一个图集这里面会很智能的分成多个小图集,纹理格式不同(多张小图集是怎么合并渲染的?)

Sprite图片设置相同的packingTag就会打包到一个图集里,但是我发现Unity5.3.5版本的UGUI下,两张图设置不同的pack tag,居然只有1个setPass Call。而Unity4.6.7版本的UGUI下 ,两张图设置不同的pack tag就是2个drawCall。这点比较神奇~

但我还是觉得UGUI的自带图集不好用!(可能我还没搞懂,不会用~ 哈哈)

1.不是最小矩形,会多空白区域占内存(已经选了TightPackerPolicy 不是最小矩形)

2.加载/释放不可控,貌似进入游戏就会全部加载进内存(用profiler看)

3.资源热跟新不好控制

建议用还是用TexturePacker自己写Atlas去控制

UGUI的结构

下载了UGUI源码粗略的看了一下,网上也有很多教程编译、调试源码的方法

UGUI的结构简单清晰,Image继承了MaskableGraphic->Graphic,

Graphic(控制渲染显示类,图片什么的最终都继承它)

Graphic类中的OnPopulateMesh方法会去生成顶点,三角形数据,用一些dirty变量控制重绘。

VertexHelper类:存放uv,vertex,color等数据。

其中核心的渲染部分CanvasRender代码Unity并没有开源,封装在了UnityEngine里面.. 所以看不到它是怎么合并贴图渲染的。

UGUI的默认Shader

UGUI图片的默认材质是在Graphic.defaultGraphicMaterial

这里面调用Canvas.GetDefaultCanvasMaterial()这个方法获取的。

自带的Shader可以在官网上下载的到

Shader "UI/Default"
{
 Properties
 {
 [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
 _Color ("Tint", Color) = (1,1,1,1)

 _StencilComp ("Stencil Comparison", Float) = 8
 _Stencil ("Stencil ID", Float) = 0
 _StencilOp ("Stencil Operation", Float) = 0
 _StencilWriteMask ("Stencil Write Mask", Float) = 255
 _StencilReadMask ("Stencil Read Mask", Float) = 255

 _ColorMask ("Color Mask", Float) = 15

 [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
 }

 SubShader
 {
 Tags
 {
 "Queue"="Transparent"
 "IgnoreProjector"="True"
 "RenderType"="Transparent"
 "PreviewType"="Plane"
 "CanUseSpriteAtlas"="True"
 }

 Stencil
 {
 Ref [_Stencil]
 Comp [_StencilComp]
 Pass [_StencilOp]
 ReadMask [_StencilReadMask]
 WriteMask [_StencilWriteMask]
 }

 Cull Off
 Lighting Off
 ZWrite Off
 ZTest [unity_GUIZTestMode]
 Blend SrcAlpha OneMinusSrcAlpha
 ColorMask [_ColorMask]

 Pass
 {
 CGPROGRAM
 #pragma vertex vert
 #pragma fragment frag

 #include "UnityCG.cginc"
 #include "UnityUI.cginc"

 #pragma multi_compile __ UNITY_UI_ALPHACLIP

 struct appdata_t
 {
 float4 vertex : POSITION;
 float4 color : COLOR;
 float2 texcoord : TEXCOORD0;
 };

 struct v2f
 {
 float4 vertex : SV_POSITION;
 fixed4 color : COLOR;
 half2 texcoord : TEXCOORD0;
 float4 worldPosition : TEXCOORD1;
 };

 fixed4 _Color;
 fixed4 _TextureSampleAdd;
 float4 _ClipRect;

 v2f vert(appdata_t IN)
 {
 v2f OUT;
 OUT.worldPosition = IN.vertex;
 OUT.vertex = mul(UNITY_MATRIX_MVP, OUT.worldPosition);

 OUT.texcoord = IN.texcoord;

 #ifdef UNITY_HALF_TEXEL_OFFSET
 OUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
 #endif

 OUT.color = IN.color * _Color;
 return OUT;
 }

 sampler2D _MainTex;

 fixed4 frag(v2f IN) : SV_Target
 {
 half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

 color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);

 #ifdef UNITY_UI_ALPHACLIP
 clip (color.a - 0.001);
 #endif

 return color;
 }
 ENDCG
 }
 }
}

 

它跟NGUI一样也是用renderQueue控制渲染深度,但UGUI是使用Stencil模板测试来做遮罩的,所以如果重写UGUI的Shader想要支持Mask的话,就要加上Stencil的代码。

实现灰度图

非常简单,改写一下默认的Shader,在frag中加上灰度值转化的代码。

新建一个Material,挂上这个Shader,然后给要灰掉的图片使用这个材质就OK了,而且支持裁剪。

总结

UGUI使用很方便,分辨率自适应,锚点这些都很好控制。 而且它能吧Text跟Image都合并成一个pass(感觉整个Canvas下都会合并成1个pass) 不知道这样究竟能不能提高性能,表面上是减少了setPassCall,但我觉得上只要Image,或Text有改动,就会重新计算整个Canvas下所有组件合并网格。一些频繁变化的东西,还是弄成独立的Canvas好,比如血条,瓢字之类的。 现在只是大概了解了一下UGUI,还不太熟悉,如果我有理解的不对的地方欢迎留言交流哈~  

转载于:https://www.cnblogs.com/lijiajia/p/6861606.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习Unity UGUI可以参考一些资源和示例。例如,可以参考引用中提到的Unity UGUI实现无限循环滑动列表功能的示例场景。导入这个示例场景并运行,可以了解如何使用Unity UGUI来实现循环滑动列表的功能。 此外,UGUI还可以用于对图片进行各种操作,如旋转、缩放、截取和裁剪等。可以参考引用中提到的使用UGUI对图片进行任意角度、大小、缩放和位置的操作。UGUI还提供了设置圆角或矩形方式操作图片的功能。 通过学习这些资源和示例,可以更好地掌握Unity UGUI的使用方法,从而进行更加丰富和多样化的界面设计和交互功能的开发。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [Unity UGUI无限循环列表](https://download.csdn.net/download/qq_33547099/13799875)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [unity UGUI图片任意截取和裁剪](https://download.csdn.net/download/lizhenxiqnmlgb/85090424)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值