【Unity3D ugui】UI特效的位置自适应及调整层次关系的一种解决方案
在UI上显示3D的特效，要考虑两个问题：
1、特效的位置自适应与UGUI自适应一致，否则在16:9下把特效调好位置后，切成16:10后，位置对应不上
2、特效显示层次最好能夹在UI中间
UGUI毕竟是个新的UI系统，各方面还很不成熟，显示特效的问题着实让我头疼了一番。
1、UI特效叠层显示可以参考雨松MOMO的博客：，但是只能解决叠层的问题，而且对于复杂的界面系统，每一层都加一个UIDepth的组件非常蛋疼。自适应的问题要根据不同分辨率再进行一番艰难的调整，除非你可以写一套类似的Canvas自适应系统。
2、使用UGUI的RawImage，把Camera拍摄特效输出的RenderTexture拖到RawImage上，运行时即可看到效果。这种方法不仅能使用UGUI的自适应，而且层级也可以调整，通常显示UI模型时都是用这种方法，但是对于半透明的粒子、Mesh就不那么好处理了。最后找到一位前辈的文章，终于解决了困扰了我好几天的问题。想看原文点。
1、用一个单独的相机，对着特效拍照，设置输出的Target Texture
2、使用UGUI的RawImage组件，设置Texture为相机输出的Texture
这部分的内容，其实官方已经给出，打开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的尺寸越大，消耗的CPU越多，为了性能，尽可能缩减RenderTexture的大小吧
2、RenderTexture的尺寸要与RawImage的大小一致，否则出现拉伸变形
3、每个特效对应一个相机，如果特效多的话，还是用代码管理特效相机吧
进一步思考，通常美术把一个特效的prefab发过来，我们只要把这个prefab和UI中的RawImage绑定即可，相机什么的才不想每次都动手加一遍，所以有了下面偷懒的代码
using UnityE
using UnityEngine.UI;
[RequireComponent(typeof(RawImage))]
public class UI3DEffect : MonoBehaviour
[SerializeField]
private GameObject effectP
private GameObject effectGO;
private RenderTexture renderT
private Camera rtC
private RawImage rawI
void Awake()
rawImage = gameObject.GetComponent&RawImage&();
if (rawImage == null)
rawImage = gameObject.AddComponent&RawImage&();
public RectTransform rectTransform
return transform as RectT
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.SolidC
rtCamera.backgroundColor = new Color();
rtCamera.cullingMask = 1 && 8;
rtCamera.targetTexture = renderT
effectGO.transform.SetParent(cameraObj.transform, false);
rawImage.enabled = true;
rawImage.texture = renderT
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拖进来即可
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
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
"PreviewType" = "Plane"
"CanUseSpriteAtlas" = "True"
Ref[_Stencil]
Comp[_StencilComp]
Pass[_StencilOp]
ReadMask[_StencilReadMask]
WriteMask[_StencilWriteMask]
Lighting Off
ZWrite Off
ZTest[unity_GUIZTestMode]
Fog{ Mode Off }
Blend One Zero
ColorMask[_ColorMask]
Blend One OneMinusSrcAlpha // 源rgba*1 + 背景rgba*(1-源A值)
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata_t
float4 vertex
: POSITION
float4 color
float2 texcoord : TEXCOORD0
struct v2f
float4 vertex
: SV_POSITION
fixed4 color : COLOR
half2 texcoord
: TEXCOORD0
fixed4 _Color
v2f vert(appdata_t IN)
OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex)
OUT.texcoord = IN.texcoord
#ifdef UNITY_HALF_TEXEL_OFFSET
OUT.vertex.xy -= (_ScreenParams.zw - 1.0)
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
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？Unity3d UGUI 滚动视图ScrollView的使用教程之简易双肩包 - 移动开发当前位置:& &&&Unity3d UGUI 滚动视图ScrollView的使用教程之简易Unity3d UGUI 滚动视图ScrollView的使用教程之简易双肩包&&网友分享于：&&浏览：0次Unity3d UGUI 滚动视图ScrollView的使用教程之简易背包Unity3d中，UGUI提供了 Scroll Rect、Grid Layout Group、Mask这三个组件，我们用来实现滚动视图，这里用一个简易的背包作为示例。
文章转自 http://blog.csdn.net/huutu/& 星环游戏 .cn
首先我们放置好背包的底层方框，如下图。
我们在红色的那一块，作为物品栏的滑动区域。&& 文章转自 http://blog.csdn.net/huutu/& 星环游戏 .cn
接下来创建一个Panel ，改名为ScrollRectPanel，把大小拉动到红色方框大小。先Reset ，添加Scroll Rect 组件。勾选 Vertical 选框，意思是只有Y轴可以滑动。
然后在 ScrollRectPanel 下面添加一个 Panel 作为 Child ，改名为 GridLayoutPanel ，先Reset ，拉伸宽度为 红框 宽度，高度稍微弄大一点 。添加 Grid Layout Group 组件。修改 颜色为红色 ，便于区分。&
文章转自 http://blog.csdn.net/huutu/& 星环游戏 .cn
然后 选择 ScrollRectPanel ，把GridLayoutPanel 拖到 Scroll Rect 的Content 中。&
文章转自 http://blog.csdn.net/huutu/& 星环游戏 .cn
文章转自 http://blog.csdn.net/huutu/& 星环游戏 .cn
运行测试一下，现在可以上下滑动了。&& 文章转自 http://blog.csdn.net/huutu/& 星环游戏 .cn
文章转自 http://blog.csdn.net/huutu/& 星环游戏 .cn
然后在 GridLayoutPanel 下添加一个Button 作为 Child ，然后Ctrl + D 复制出 多个。文章转自 http://blog.csdn.net/huutu/& 星环游戏 .cn
文章转自 http://blog.csdn.net/huutu/& 星环游戏 .cn
最后在 ScrollRectPanel 上 添加 Mask 组件，使超出 ScrollRectPanel 范围的不显示。文章转自 http://blog.csdn.net/huutu/& 星环游戏 .cn
文章转自 http://blog.csdn.net/huutu/& 星环游戏 .cn
最后看看效果&& 文章转自 http://blog.csdn.net/huutu/& 星环游戏 .cn
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有主题 : uGUI的Canvas 有世界坐标和屏幕坐标
级别: 新手上路
可可豆: 240 CB
威望: 240 点
在线时间: 6(时)
发自: Web Page
来源于&&分类
uGUI的Canvas 有世界坐标和屏幕坐标&&&
在学习Unity3D培训过程中，甭管你是自学也好，参加Unity3D培训学习也好，对UGUI和NGUI肯定需要知道的，随着Unity4.6内置了UGUI后，大家也把关注点投向了UGUI。那我们来说说NGUI与UGUI的区别：区别：1、uGUI的Canvas 有世界坐标和屏幕坐标2、uGUI的Image可以使用material3、UGUI通过Mask来裁剪，而NGUI通过Panel的Clip4、NGUI的渲染前后顺序是通过Widget的Depth，而UGUI渲染顺序根据Hierarchy的顺序，越下面渲染在顶层.5、UGUI 不需要绑定Colliders，UI可以自动拦截事件6、UGUI的Anchor是相对父对象，没有提供高级选项，个人感觉uGUI的Anchor操作起来比NGUI更方便7、UGUI没有Atlas一说，使用Sprite Packer8、UGUI的Navgation在Scene中能可视化9、UGUI的事件需要实现事件系统的接口，但写起来也算简单当然他们有各自的优缺点1、NGUI还保留着图集，需要进行图集的维护。而UGUI没有图集的概念，可以充分利用资源，避免重复资源。2、UIGI出现了锚点的概念，更方便屏幕自适应。3、NGUI支持图文混排，UGUI暂未发现支持此功能。4、UGUI没有 UIWrap 来循环 scrollview 内容。5、UGUI暂时没有Tween组件。UGUI与NGUI各有千秋，我们等待着UGUI的完善。源自：
关注本帖(如果有新回复会站内信通知您)
苹果公司现任CEO是谁？2字 正确答案:库克
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 浏览移动版程序写累了，就来玩玩酷跑小游戏吧，嘿嘿。
雨松MOMO送你一首歌曲，嘿嘿。
UGUI研究院之Mask裁切UI粒子特效或者3D模型（十七）
UGUI研究院之Mask裁切UI粒子特效或者3D模型（十七）
围观24969次
编辑日期： 字体：
刚好前几天有人问我这个问题，再加上新项目也可能用，所以这两天就研究了一下。其实如果粒子特效 和3D模型 都用RenderTexture来做的话就不会有裁切的问题，但是粒子特效用RenderTexture来做会有显示的问题，所以还是得用摄像机。废话不多说了，进入正题。
原理就是把Mask的裁切区域传给粒子特效Shader，当超出这个区域那么直接让它完全透明即可。粒子特效的源生shader大家可以去unity官网下载，我在这里把需要修改的地方标注给大家。
//add 注释中的内容就是我做修改的地方。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
Shader "Particles/Additive" {Properties { _TintColor ("Tint Color", Color) = (0.5,0.5,0.5,0.5) _MainTex ("Particle Texture", 2D) = "white" {} _InvFade ("Soft Particles Factor", Range(0.01,3.0)) = 1.0
//-------------------add---------------------- &&_MinX ("Min X", Float) = -10&&&&&&_MaxX ("Max X", Float) = 10&&&&&&_MinY ("Min Y", Float) = -10&&&&&&_MaxY ("Max Y", Float) = 10&&&&&&//-------------------add---------------------- }&Category { Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" } Blend SrcAlpha One AlphaTest Greater .01 ColorMask RGB Cull Off Lighting Off ZWrite Off Fog { Color (0,0,0,0) }
SubShader {
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile_particles&
#include "UnityCG.cginc"&
sampler2D _MainTex;
fixed4 _TintColor;
//-------------------add----------------------
float _MinX;&&&&&&&&&&&&float _MaxX;&&&&&&&&&&&&float _MinY;&&&&&&&&&&&&float _MaxY;&&&&&&&&&&&&//-------------------add----------------------
struct appdata_t {
float4 vertex : POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
struct v2f {
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
#ifdef SOFTPARTICLES_ON
float4 projPos : TEXCOORD1;
//-------------------add----------------------
float3 vpos : TEXCOORD2;
//-------------------add----------------------
float4 _MainTex_ST;&
v2f vert (appdata_t v)
//-------------------add----------------------
o.vpos = v.vertex.xyz;
//-------------------add----------------------
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
#ifdef SOFTPARTICLES_ON
o.projPos = ComputeScreenPos (o.vertex);
COMPUTE_EYEDEPTH(o.projPos.z);
o.color = v.color;
o.texcoord = TRANSFORM_TEX(v.texcoord,_MainTex);
sampler2D_float _CameraDepthTexture;
float _InvFade;
fixed4 frag (v2f i) : SV_Target
#ifdef SOFTPARTICLES_ON
float sceneZ = LinearEyeDepth (SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture, UNITY_PROJ_COORD(i.projPos)));
float partZ = i.projPos.z;
float fade = saturate (_InvFade * (sceneZ-partZ));
i.color.a *= fade;
//-------------------add----------------------
fixed4 c =2.0f * i.color * _TintColor * tex2D(_MainTex, i.texcoord);
c.a *= (i.vpos.x &= _MinX ); &&&&&&&&&&
c.a *= (i.vpos.x &= _MaxX); &&&&&&&&&&&& c.a *= (i.vpos.y &= _MinY); &&&&&&&&&&&& c.a *= (i.vpos.y &= _MaxY);&&&&&&&&&&&&&&&& c.rgb *= c.a;&&&&&&&&&&&&&&&&return c;&&&&&&&&&&&&&&&&//-------------------add----------------------
然后是自己写了个类继承Mask。把Mask的区域传给shader。
123456789101112131415161718192021222324252627282930313233343536373839404142434445
using UnityEngine;using System.Collections;using UnityEngine.UI;&public class MyMask :Mask { protected override void Start () {
base.Start ();&
int width = Screen.width;
int height = Screen.height;
int designWidth = 960;//开发时分辨率宽
int designHeight = 640;//开发时分辨率高
float s1 = (float)designWidth / (float)designHeight;
float s2 = (float)width / (float)height;&
//目标分辨率小于 960X640的 需要计算缩放比例
float contentScale =1f;
if(s1 & s2) {
contentScale = s1/s2;
Canvas canvas = GameObject.Find("Canvas").GetComponent&Canvas&();
Vector2 pos;
if(RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.transform as RectTransform, transform.position, canvas.camera, out pos)){
ParticleSystem&&[] particlesSystems
= transform.GetComponentsInChildren&ParticleSystem&();
RectTransform rectTransform = transform as RectTransform;
float minX,minY,maxX,maxY;
minX = rectTransform.rect.x&&+ pos.x;
minY = rectTransform.rect.y+ pos.y;
maxX = minX + rectTransform.rect.width ;
maxY = minY + rectTransform.rect.height;&&
//这里 100&&是因为ugui默认的缩放比例是100&&你也可以去改这个值，但是我觉得最好别改。
foreach(ParticleSystem particleSystem in particlesSystems)
particleSystem.renderer.sharedMaterial.SetFloat("_MinX",minX/100/contentScale);
particleSystem.renderer.sharedMaterial.SetFloat("_MinY",minY/100/contentScale);
particleSystem.renderer.sharedMaterial.SetFloat("_MaxX",maxX/100/contentScale);
particleSystem.renderer.sharedMaterial.SetFloat("_MaxY",maxY/100/contentScale);
OK，如下图所示，把粒子特效直接挂在Mask下面， 就可以进行裁切了。。
在说一下3D模型， 理论上用上述的shader改一改就可以。 但是我还是建议3D模型用RenderTexture。比较好控制深度。
最后是工程的下载地址：
希望大家可以多多测试一下，看看有没有问题。 或者你有更好的方法，欢迎在下面给我留言。谢谢啦～
本文固定链接:
转载请注明:
雨松MOMO提醒您：亲，如果您觉得本文不错，快快将这篇文章分享出去吧 。另外请点击网站顶部彩色广告或者捐赠支持本站发展，谢谢！
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
如果您愿意花10块钱请我喝一杯咖啡的话，请用手机扫描二维码即可通过支付宝直接向我捐款哦。
您可能还会对这些文章感兴趣！unity3d中的坑和解决方案 -
- ITeye技术网站
博客分类：
unity3d中的坑和解决方案
unity3d是一个很牛x的引擎，当然其也有一些东西是不太好或者说不习惯的，下面列举一些：
1、制作特效时，使用animation记录的位置是相对位置，如果直接放到别的节点下会出问题；
解决方法：在特效根节点的上一层加上一个transform是(0,0,0) (0,0,0)(1,1,1)的父节点，之后再使用和处理父节点
2、使用NGUI制作界面时，ui特效会有位置对不上的问题（美术不会用ngui，使用原始的模型+材质贴图的形式来做特效）
解决方法：让美术将特效直接做到ui上面
3、美术制作的特效导出时丢失材质和贴图
解决方案：要求美术在建模时不准挂材质，所有的材质不使用自动生成的，而是在unity里面新建、挂接，程序也可以提供删掉默认材质的编辑器扩展插件 (assetImporter as ModelImporter).importMaterials =
4、多人间合作时的文件共享和版本控制
解决方案：1》Edit-&Project Settings-&Editor 打开 meta files 2》meta文件和原始文件一起同步 3》checkout时 按住 左边的alt键或option键
5、文本化场景文件
解决方案：edit----project setting ----editr 将Asset Serialization 的 mode 设置成Force Text
6、ngui的界面元素无法响应
解决方案：制作ui时注意设置摄像机的eventReceiverMask的层为对应的层
7、摄像机看不到ui
解决方案：将ui的层设置为摄像机对应的渲染的层
8、脚本中start和update等函数不能继承
解决方案：将这几个函数内的逻辑抽象成函数，之后子类中继承这些函数
9、脚本调用时因为空引用而崩溃
解决方案：所有初始化工作写在start中，所有功能写到update中，如果仅执行一次，可以加个bool型的开关 10、等待某个特效播完
解决方案：可以使用coroutine来等待
11、跨平台动态加载贴图、音频
解决方案：使用www
12、周期性的活动，如每4拍换一个舞步
解决方案：当前时间/周期 减去整数部分，与0.5比较
13、换装重新组织SkinnedMeshRenderer的sharedMesh时骨骼对不上
解决方案：所有avatar的部件的骨架设置要一模一样
14、减少动作文件的大小
解决方案：游戏开始时动态的将animation加到mesh上面
15、全局功能需要多处调用
解决方案：将全局功能直接挂到程序节点ProgramRoot上，使用时直接 GameObject.Find("ProgramRoot").GetComponentInChildren
16、GameObject.Find找不到隐藏的节点
解决方案：定义public GameObject 属性，之后在编辑器里面拖拽
17、各个界面间数据的共享
解决方案：创建单独的GameWorld等数据模型模块，并统一实现序列化和反序列化
18、分时的状态逻辑 解决方案：coroutine加配置表
19、灵活的object的属性
解决方案：Dictionary&string, string& propsT
20、灵活的事件响应回调
解决方案：统一继承BaseCallBack，里面写具体的逻辑
21、渲染暂停时实现动态效果
解决方案：Time.timeScale = 0f; 程序通过 Time.realtimeSinceStartup来手动实现特效效果
22、炫酷的显示得分
解决方案：每一位数字用一张数字的贴图来实现
23、ui特效阻碍ui的响应
解决方案：调整z值，使特效在ui的后面
24、特殊的运动轨迹和手感 解决方案：用animation编辑器做成动画来播放
浏览 13261
eric_weitm
浏览: 88110 次
来自: 北京
你对hiphop的深入程度到了什么程度了？想和你进行探讨一下
lj3362569 写道可以再讲具体点么？还有现有的hipho ...
可以再讲具体点么？还有现有的hiphop不支持哪些功能？