【Unity3D ugui】UI特效的位置自适应及调整层次关系的一种解决方案
前言
在UI上显示3D的特效，要考虑两个问题：
1、特效的位置自适应与UGUI自适应一致，否则在16:9下把特效调好位置后，切成16:10后，位置对应不上
2、特效显示层次最好能夹在UI中间
UGUI毕竟是个新的UI系统，各方面还很不成熟，显示特效的问题着实让我头疼了一番。
1、UI特效叠层显示可以参考雨松MOMO的博客：UGUI研究院之不添加摄像机解决UI与UI特效叠层问题（九），但是只能解决叠层的问题，而且对于复杂的界面系统，每一层都加一个UIDepth的组件非常蛋疼。自适应的问题要根据不同分辨率再进行一番艰难的调整，除非你可以写一套类似的Canvas自适应系统。
2、使用UGUI的RawImage，把Camera拍摄特效输出的RenderTexture拖到RawImage上，运行时即可看到效果。这种方法不仅能使用UGUI的自适应，而且层级也可以调整，通常显示UI模型时都是用这种方法，但是对于半透明的粒子、Mesh就不那么好处理了。最后找到一位前辈的文章，终于解决了困扰了我好几天的问题。想看原文点这里。
原理
1、用一个单独的相机，对着特效拍照，设置输出的Target Texture
2、使用UGUI的RawImage组件，设置Texture为相机输出的Texture
这部分的内容，其实官方已经给出demo，打开RenderTexture场景就可以看到这个例子，就不详述了
实现
参照原文。
下面用图来说明几个步骤：
先说一下demo的层次结构，“Window”下有两个Image，一个RawImage，RawImage夹在两个Image中间，我们想要的效果就是RawImage在Image1上，在Image2下。
1、相机参数设置
2、特效设置层次为UI3D（自己添加的Layer）
相机拍到特效的效果如下：
3、在UI中加上一个RawImage，设置Texture为上一步相机输出的Texture，加一个Default No-Alpha的材质（Shader在下面贴出，demo资源里也有）
4、运行查看效果
一些问题
1、RenderTexture的尺寸越大，内存占用越多，尽可能缩减RenderTexture的尺寸吧
2、RenderTexture的尺寸要与RawImage的大小一致，否则出现拉伸变形
3、每个特效对应一个相机，如果特效多的话，还是用代码管理特效相机吧
进一步思考，通常美术把一个特效的prefab发过来，我们只要把这个prefab和UI中的RawImage绑定即可，相机什么的才不想每次都动手加一遍，所以有了下面偷懒的代码
using UnityEngine;
using UnityEngine.UI;[RequireComponent(typeof(RawImage))]
public class UI3DEffect : MonoBehaviour
{[SerializeField]private GameObject effectPrefab;private GameObject effectGO;private RenderTexture renderTexture;private Camera rtCamera;private RawImage rawImage;void Awake(){//RawImage可以手动添加，设置no alpha材质，以显示带透明的粒子rawImage = gameObject.GetComponent<RawImage>();if (rawImage == null){rawImage = gameObject.AddComponent<RawImage>();}}public RectTransform rectTransform{get{return transform as RectTransform;}}void OnEnable(){if (effectPrefab != null){effectGO = Instantiate(effectPrefab);GameObject cameraObj = new GameObject("UIEffectCamera");rtCamera = cameraObj.AddComponent<Camera>();renderTexture = new RenderTexture((int)rectTransform.sizeDelta.x, (int)rectTransform.sizeDelta.y, 24);renderTexture.antiAliasing = 4;rtCamera.clearFlags = CameraClearFlags.SolidColor;rtCamera.backgroundColor = new Color();rtCamera.cullingMask = 1 << 8;rtCamera.targetTexture = renderTexture;effectGO.transform.SetParent(cameraObj.transform, false);rawImage.enabled = true;rawImage.texture = renderTexture;}else{rawImage.texture = null;Debug.LogError("EffectPrefab can't be null");}}void OnDisable(){if (effectGO != null){Destroy(effectGO);effectGO = null;}if (rtCamera != null){Destroy(rtCamera.gameObject);rtCamera = null;}if (renderTexture != null){Destroy(renderTexture);renderTexture = null;}rawImage.enabled = false;}
}
当RawImage启用时，立刻创建动态相机、RenderTexture，设置参数。不启用时，自动销毁相机和RenderTexture。当然特效多的话，也可以做个对象池把Camera和RenderTexture缓存起来。
然后用的时候是这样的，只需要一步，把特效prefab拖进来即可
附
demo
UI-Default-No-Alpha.shader
Shader "UI/Default No-Alpha"
{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}SubShader{Tags{"Queue" = "Transparent""IgnoreProjector" = "True""RenderType" = "Transparent""PreviewType" = "Plane""CanUseSpriteAtlas" = "True"}Stencil{Ref[_Stencil]Comp[_StencilComp]Pass[_StencilOp]ReadMask[_StencilReadMask]WriteMask[_StencilWriteMask]}Cull OffLighting OffZWrite OffZTest[unity_GUIZTestMode]Fog{ Mode Off }Blend One ZeroColorMask[_ColorMask]Blend One OneMinusSrcAlpha // 源rgba*1 + 背景rgba*(1-源A值) Pass{CGPROGRAM#pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata_t{float4 vertex : POSITION;float4 color : COLOR;float2 texcoord : TEXCOORD0;};struct v2f{float4 vertex : SV_POSITION;fixed4 color : COLOR;half2 texcoord : TEXCOORD0;};fixed4 _Color;v2f vert(appdata_t IN){v2f OUT;OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);OUT.texcoord = IN.texcoord;#ifdef UNITY_HALF_TEXEL_OFFSET OUT.vertex.xy -= (_ScreenParams.zw - 1.0);#endif OUT.color = IN.color * _Color;return OUT;}sampler2D _MainTex;fixed4 frag(v2f IN) : SV_Target{half4 color = tex2D(_MainTex, IN.texcoord) * IN.color;//clip (color.a - 0.01); return color;}ENDCG}}
}【Unity3D ugui】UI特效的位置自适应及调整层次关系的一种解决方案相关推荐
- html 自动适应手机屏幕大小,HTML5 canvas自适应手机屏幕大小的一种解决方案
一.最终效果 为了不浪费大家时间,先展示最终效果,看看是不是大家需要的解决方案: 标准分辨率: 其他分辨率的适配情况: 二.需求 1.canvas的内容能全部展示在屏幕上 2.尽量能保证图像不变形 3 ...
- “XXX.exe 中的 0xXXXXXXXX处未处理的异常: 0xC0000005: 读取位置 0xXXXXXXXX 时发生访问冲突”的一种解决方案
CxxxDlg *pDlg = (CxxxDlg*)AfxGetMainWnd(); 定时器回调函数中pDlg调用类成员变量和成员函数时出现以上错误.经观察pDlg为空指针,确实意想不到. 解决方法: ...
- Unity3d UGUI 实现底部UI自适应的功能（含工程）
Unity3d UGUI 实现底部UI自适应的功能(含工程) 前言 UI的自适应常常在项目中使用到,特别手游中,不同比例屏幕的手机,如果能考一套UI自适应显示,能省去不少的开发工作量.这里只是浅浅的讨 ...
- Unity3d:UGUI，UI与特效粒子层级，2018.2以上版本BakeMesh，粒子在两个Image之间且在ScrollView
ui上面展示粒子一般来说有两种方案 1.通过rendertexture渲染,可以完美处理层级问题,不过性能不好,多个摄像机 2.直接放到ui界面调整特效sort in layer,不过如果ui特效穿插 ...
- Unity3d UGUI基础控件使用（一）
转载自:Unity3d UGUI基础控件使用(一) 一:UGUI介绍 UGUI是Unity4.6之后,经过多重测试,推出全新的UI系统,更灵活,快捷,易用的可视化游戏UI开发工具. 由于之前传统的UI ...
- unity3D之UI
unity3D之UI 一.canvas 1.canvas介绍 2.创建canvas 二.RawImage和Image 1．image介绍 2．RawImage介绍 3.创建 三.text文本 1．te ...
- Unity3d Ugui图片上制作点光 、棱形光效果shader，并具有裁切
Unity3d Ugui图片上制作点光 .棱形光效果 实现的效果可以参考如下图所示 通过shader来实现上述的效果,为了大家的适应性,推荐在unity官方的默认ui shader上更改,我用的是20 ...
- 渲染到ui_虚幻4渲染编程（UI篇）【第二卷：程序化UI特效-[1]】
MY BLOG DIRECTORY: 小IVan:专题概述及目录zhuanlan.zhihu.com INTRODUCTION: 当遇见某些特殊需求,比如对游戏效果有很多变化的要求,这时使用静态的贴 ...
- Unity3d UGUI 通用Confirm确认对话框实现（Inventory Pro学习总结）
背景 曾几何时,在Winform中,使用MessageBox对话框是如此happy,后来还有人封装了可以选择各种图标和带隐藏详情的MessageBox,现在Unity3d UGui就没有了这样的好事情 ...
最新文章
- EasyUI中Combox组合框的简单使用
- linux中匿名用户怎么登陆_Linux网络配置 | FTP 实战-匿名用户登录
- brave浏览器_据说只有这款浏览器，真正做到了保护隐私
- java——LinkedList
- 最受欢迎的网站 （转载）
- 第三天python作业
- C语言 —— 你不得不知道的 scanf 的高级用法
- cakephp index.php,CakePHP开发常用技巧详解
- 深入浅出对抗性机器学习（AML）
- 2021年7月火影几点服务器维护完,火影忍者手游2021年5月27日更新公告
- 2021起重机作业 (Q)Q3起重机械指挥模拟考试题库及软件
- 剪辑掉图像替换照片_使用动态剪辑过滤HTML图像标题
- 20221211英语学习
- Android7.0持久化技术
- 1079 PIPI的存钱罐
- html5独立钻石棋,独立钻石跳棋问题的C++实现
- 电脑软件：推荐八款电脑必备效率软件
- Excel VBA 找出选定范围不重复值和重复值
- React配置baseUrl
- Android开发单选按钮功能,android实现单选按钮功能