Unity3D 使用 RenderTexture 做 UI 特效、动态阴影
发布时间: 10:25:26
这阵子做项目需要实现一个技能冷却的UI组件，这个UI组件相信玩儿过游戏的人都不会陌生，基本上就是一个半透的遮罩盖在技能图标上，随着冷却时间的进行逐渐旋转消失。
&&&&&& 第一时间想到最简单的方法就是每帧对遮盖的UI贴图的alpha值进行一遍设置，这种方法不好的地方就是对CUP的压力比较大，由于项目在移动端上目前主要的负载还是在CPU上（ios的CUP负载相对Android机型感觉压力要大很多），这种方案并没有过多考虑。当然需要说明的是如果是渐进式的更新贴图部分像素的alpha值，计算量其实也不会太大，不过还是觉得这种方法不够漂亮，Pass。
&&&&&& 不想用CUP，自然就要利用GPU来设置Alpha值，于是就想到了使用RenderTexture来实现这个UI控件。简单说来，在绘制GUI的脚本中创建一个RenderTexture，并将其作为一个新的摄像机的RenderTarget，在这个摄像机上通过脚本绘制出全屏的冷却遮罩，这样这个RT就可以当做技能冷却的UI组件来使用了。
&&&&&& 现在的问题就是如何画一个全屏的冷却遮罩，你可以创建一个面片大小正好占满摄像机视锥截面，然后制作一个材质球，编写一段Shader代码来将遮罩贴图部分地渲染到这个面片上。而事实上创建面片这一步完全可以省去，因为基本上所有的后置特效PostEffect都需要创建这样一个面片，这些PostEffect大多就是做一些图像处理如改变色调、模糊、扰动等等。因此Unity3D提供了Graphic.Blit(RenderTexture source, RenderTexturedestination, Material
mat)这样一个十分方便的方法，省去了你创建面片这一步，将source这张图作为mat的—_MainTex渲染到destination这张图上。
&&&&&& 那么首先来看附在摄像机上的渲染控制脚本如何来写，利用在Image Effect包中提供了ImageEffectBase基类，这个脚本其实十分简单，我用的是C#：
&public class CDMask: ImageEffect
& & public Texture2D cdMaskT
& & public float cdT
& & public float CdTime
& & & & set {material.SetFloat(“_CDPercentage”, value/cdTime); }
& & void Awake()
& & & & material.SetTexture(“_MaskTex”,cdMaskTex);
& & void OnRenderImage(RenderTexture source, RenderTexturedestination)
& & & & Graphics.Blit(source,destination, material);
&ImageEffect这个基类有一个Shader公共变量，和一个material保护变量在调用时创建，同时还负责检查该Shader是否被渲染设备所支持。
&&&&&& OnRenderImage是一个消息方法，任何与Camera组件附在同一物体下的脚本都会在摄像机将场景渲染至屏幕图像缓存后调用该方法，其中两个传入参数source是缓存中的图像，destination是最终要输出至RenderTarget的图像，而在这个方法中调用Graphics.Blit显然是再合适不过了。
&&&&&& 剩下的就是写一段shader了，没有什么特殊的难度，只是把图像alpha值的设定放在了fragment shader中，对ImageEffect包中的Overlay那个Shader稍加修改即可。
在写这段shader时有几点需要注意：
1. 不要使用surface shader。Unity3D创建的shader文件默认都使用surface shader进行绘制。它的这套surface shader的确是方便，不过要是用在Blit方法中会死的很惨。电脑上的Editor里可能效果没问题，上了真机就完全没东西了。具体原因官方论坛里有人有解释，主要是跟GL2.0的支持和surface shader使用的UnityCG.cginc里的一个函数平台兼容性有问题有关。总之老老实实用CG把vertex和fragment shader都写了就好。其中vertex
shader可以直接从ImageEffect包里的Overlay的Shader中直接拷过来就成。
2. SubShader中在对固定管线参数设置时记得写上ColorMask RGBA。要是就写了个RGB，等着惨死吧。
&&&&&&& 最后要说的是，其实画这个旋转的遮罩有一种更快更巧的方法，是官方论坛上有人提供的，利用了AlphaTest这一功能，配合遮罩图片的Alpha通道节省了好多计算量。只是实际使用时渲染效果并不理想，边缘很不整齐，可能是手机平台对图片的压缩所导致的，不过好像所有AlphaCutout这类shader渲染出来的都有这个问题，后面的回复中也有好多人提到，最终没有采用，但这仍是一个非常好的方案。链接给出我也就不啰嗦了。
看 Eric5h5的回复。
Hi, I would like to know if anyone know how to do Resident Evil 5 Health bar GUI style which doing in circle.
Is there a way to just use 2 pictures or maybe 4 at the most to do this style of health Bar UI.
I read about advanced health bar which is in traditional long rectangle, it only need 2 picture and scale the full health bar and leave the empty health bar under the full health, so it would animate as if the full health is reduced to 0. but mine is circle,
and I need to know how to do the scaling or masking so it does the same thing as the rectangle.
Help is really appreciated Thanks
&Attached Images
that's the way to do it. For example,&&(web
player). Th one for the regular graphics (using normal alpha for nice anti-aliasing) and one for the health bar (using alpha cutoff). The health bar's alpha looks like this:
The non-alpha part of the texture is just a block of solid green.
The code is this:
Update () {
& & renderer.material.SetFloat(&_Cutoff&, Mathf.InverseLerp(0, Screen.width, Input.mousePosition.x));
is much faster, easier, and less memory-using than having an array of circular textures.&
=====================================================
游戏蛮牛Unity3D系列教程使用RenderTexture制作动态阴影（四十八）
我手头上有一个三星的Nexus7平板测试机，可是我用4制作阴影放在Nexus7上动态阴影死活不显示，可是我在同样的机器Nexus7装上TempRun动态阴影就显示的非常清楚。接着我查了一下发现Unity4只是在大部分移动平台手机支持动态阴影，Nexus7
属于Tegra 3 并不支持动态阴影。TempRun是怎么实现的呢？& &后来，我尝试使用RenderTexture来制作动态阴影。做是做出来了，不过要做的很精细那么有点麻烦。文章的最后我会把我的想法说出来。如下图所示，这个阴影我就是用RenderTexture来制作的。&
下面开始学习，在Project视图中，选择Creat-&RenderTexture ，接着在Hierarchy视图中在创建一个摄像机。（用来渲染RenderTexures）
Background ：保持背景为透明，颜色值都改成 0 ，表示完全透明（截取只能按矩形所以背景需要做成透明了 不然就穿帮了）。
Culling Mshk ：摄像机照射的层，这个摄像机会一直跟随主角移动，始终保持侧面观察主角。取得主角侧面每一帧的图像，并且渲染在地面上。从侧面观察难免会取到主角背景的图像，所以在这里我们把主角放在TransparentFX这个layer上，摄像机也只去这个Layer上截取模型。（当然你也可以重新创建一个Layer）
Target Texture ：就是把这个摄像机每一帧所看到的图像复制给刚刚创建的RenderTexutre（刚刚创建的RenderTexure拖拽到这里即可）
然后在创建一个平面，记住一定要给它一个透明的材质球。这里我选了Transparent/Diffuse。然后是颜色，选择一个黑色偏灰色的颜色就可以。因为阴影是灰黑色的嘛。
然后在创建一条简单的脚本，把它绑在影子所在的平面上。像这样给他赋值。
using UnityE
using System.C
public class NewBehaviourScript : MonoBehaviour {
& & & & public RenderT & & & &
& & & & void Update () {
& & & & & & & & &renderer.material.mainTexture =
& & & & void OnGUI()
& & & & & & & & GUI.DrawTexture(new Rect(0,0,100,100),t);
代码比较简单我也就不做解释了。。运行后效果，小牛头人一直在播放奔跑动画，它的影子动态的投影在身后的墙上了。
最后我在文章开始说过美中不足的地方
1.需要根据光照的旋转角度来动态计算阴影面的角度。如果光比较多那么计算量是非常庞大的，而且还有影子的根据光线的拉伸效果。
2.影子投射在地面时，如果地面凹凸不平，所以影子不能绘制在一个Plane上。而需要动态的计算影子的网格，目前我能想到的办法就是通过N条射线，从主角身后（根据主角的坐标与旋转角度来计算周围一定区域每一个点的坐标）从上方向垂直的地面发射射线，得到地面凹凸的每个点的坐标，在根据这些坐标动态的生成一个凹凸不平的网面。（如果你用的是unity地形那么有专门的方法得到地形的高度，如果地形使用美术建的模型来做的那么只能用这个方法喽）最后把上面做出来的RenderTexure渲在这上面。
补充。其实在StandardAssets中就有一个用投影做的简单阴影的包。在Project视图中&&importPackage -& Projectors 。如下图所示，把Blob Shadows Projector
拖进Hierarchy视图中。简单的调节一下就可以了。
还有一个叫fastshadows的一个阴影插件。前几天我简单看了一下，如果是自身不会改变的话用它就挺好， 只占一个drawcall。
最后是本文的下载地址：
版权声明：本文为博主原创文章，未经博主允许不得转载。
来源:http://blog.csdn.net/Game_jqd/article/details/今天看啥 热点：
很久没写博文，今天刚好有同事问到：NGUI为什么做的界面图片那么模糊，比美术给的图片相比不是很清晰。
其实这个问题解决方法很简单，只要把NGUI生成的图集的图片类型改成“GUI”或者“Advance”（去掉generate mip maps），而且Filter Mode都选择（Point）。
这样即可。
相关搜索：
相关阅读：
相关频道：
Android教程最近更新4803人阅读
游戏引擎（19）
UI系统允许用户迅速且直观地创建用户界面。本篇是对Unity的UI系统主要特性的介绍。
相关教程：
Canvas是所有UI元素应当存放于内的区域。Canvas是一个有Canvas组件的游戏对象，并且所有UI对象必须是这样一个Canvas对象的子对象。
创建一个新的UI元素，例如使用 GameObjct&UI&Image，创建一个Image对象，会自动地创建一个Canvas，如果场景里没有已存在的Canvas。UI元素将作为这个Canvas的子对象创建。
Canvas区域会在场景视图中显示为一个矩形。这使得它容易放置UI元素而不需要一直保持在游戏视图。
Canvas使用EventSystem（事件系统）对象来帮助Messaging System（消息系统）、
元素的绘制顺序
在Canvas中的UI元素，以它们出现在层次中的顺序被绘制。第一个子对象被先渲染，然后第二个，以此类推。如果两个UI元素重叠，后一个将出现在前一个上上面。
要改变某个元素出现在另外元素的上面，只要通过拖拽它们改变在层次中的顺序几个。通过使用在Transform组件中的这些方法，也可以从脚本中控制顺序：SetAsFirstSibling， SetAsLastSibling, 以及SetSiblingIndex 。
Canvas有渲染模式设置，可以用来让Canvas在屏幕空间或世界空间中渲染。
屏幕空间 - 覆盖
这个渲染模式将渲染的UI元素放置在场景的最上面（最靠近镜头）。如果屏幕被重新调整大小或调整分辨率，Canvas将自动改变尺寸以适应。
屏幕空间 - 摄像机
这个模式类似于“屏幕空间 - 覆盖”，但在这个渲染模式下，Canvas被放置在指定摄像机的一个给定距离前。UI元素用这个摄像机渲染，意味着摄像机设置将印象到UI的表现。如果摄像机被设置为透视的，UI元素将会以透视渲染，并且透视变形可以被摄像机视野区所控制。如果屏幕被重设大小或改变分辨率，或者摄像机frustrum 改变，Canvas同样将自动改变设置以匹配。
在这个渲染模式下，Canvas将如场景中其它的对象那样。Canvas的尺寸可以用它的矩形transform进行手动设置，UI元素会在场景中其它对象的前面或后面渲染，基于三维空间中的位置关系。这在UI元素被定义为世界一部分时有用。这也被称为“剧情界面”（diagetic interface）。
这一部分我们将看看，元素关联到Canvas及相互间，应如何放置。如果用户希望在阅读时自己测试，可以创建一个Image（GameObject -&UI -& Image）。
为了布局考虑，每个UI元素用一个矩形所表示。这个矩形可以在场景视图中用工具栏中的矩形工具处理。矩形工具可以被Uinity的2D特性和UI所使用，实际上也可以用于3D对象。
矩形工具可以用来移动，重设大小，旋转UI元素。一旦选择了一个UI元素，可以通过点击矩形内的任何位置并拖拽它来移动。用户可以通过点击边缘或角落并拖拽来调整大小。元素可以被旋转通过将指针悬停在角落附近，直到鼠标指针看起来像个旋转记号。然后可以点击并向任意方向旋转。
就像其它工具，矩形工具使用当前的当前的枢轴模式和空间，在工具栏中设置。当对UI进行工作，通常将这些设置为Pivot和Local。
矩形变换是一个新的变换组件；对所有UI元素，取代了标准的变换组件。
重设相对缩放
当矩形工具被用于改变对象的大小时，通常对于二维系统和三维对象，它将改变对象的局部缩放。然而，当被用于一个有矩形变换的对象时，改变的是宽度和高度，保持局部缩放不变。这样的重设大小将不影响字体尺寸、镶边等。
旋转，尺寸，缩放的调整是围绕着轴的；所以轴的位置影响着旋转、尺寸或缩放的效果。当工具栏上Pivot按钮被设置为Pivot模式，矩形变换的轴会被移入场景视图。
定位Anchors
矩形变换包括称为“定位”的一个布局概念。定位以四个在场景视图中的小直角柄所表示，定位信息在检视器中显示。
如果矩形变换的父对象同样是个矩形变换，那么子举行变换可以若干种途径被定位到父对象。例如，子对象可以定位到父对象的中心，或者一个角落。
定位也允许子对象随着父对象宽度、高度一同伸缩。每个矩形的角落相对它对应的定位有固定的偏移，即矩形的左上角有对左上定位有固定的偏移，等等。这种方式下，矩形不同角落而可以被定位到父对象矩形的不同点。
定位的位置用父对象矩形宽度及高度的分数（或百分比）来定义。0.0（0%）对应于左边或底边，0.5（50%）为中间，1.0（100%）为右边或顶部。但定位不限制于边沿或中间；可以定位到父对象矩形的任何位置。
用户可以分别拖拽每个定位，或如果它们是一起的，用户可以通过点击它们中间并拖拽，让它们一起移动。如果在拖拽一个定位时按下Shift键，矩形对应的角将随着定位一起移动。
定位柄一个有用的特性是，它们自动对齐到兄弟对象矩形，来允许精确的定位。
在检视器中，定位预设按钮可以矩形变换组件的在左上角找到。点击此按钮让定位预设下拉。从这里用户可以快速选择一些最常用的定位选项。可以定位UI元素到父对象的边沿或中间，或者随着父对象的尺寸一起伸缩。水平和垂直定位是独立的。
定位预设按钮显示了当前如果存在的预设项。如果水平或垂直轴的定位被设置到预设不同与预设的任何位置，则显示用户定义的选择。
检视器你中的定位和位置区
可以点击定位扩大箭头来显示定位数字区，如果它们尚未可见。最小定位对应于在场景视图中的左下定位柄，最大定位对应于右上的定位柄。
矩形的位置区根据定位是同步（这导致固定的宽度和高度）还是分开（这让矩形随着父对象矩形一同伸缩），有不同的展示。
当所有定位柄被同步，显示的区域是位置X、位置Y、宽度和高度。位置X和位置Y的值指明轴相对定位的位置。
当定位是分开的，区域可以改为部分或完全到左边、右边、上部及底部。这些区域定义了在矩形内用定位定义的衬垫（？）。如果定位水平方向上分开，左边和右边的区域被使用；如果垂直方向分开，顶部和底部区域被使用。
注意到，改变定位或轴区域中的值，通常将调整位置值，为了让矩形停留在原位置。如果不希望这样的情形，可以使用在检视器中一个小按钮来启用Raw模式。这让定位和轴的值可以被改变，而不是任何其他值改变所导致的结果。这将让矩形被可看到地移动或重设大小，因为它的位置和尺寸依赖于定位和轴的值。
在UI系统的介绍中，会帮助你创建有特定功能的GUI的新组件已经添加。这一部分是关于可以被创建的新组件的基本知识。
Text（文本）组件，也被作为“标签”，其文本区来输入被显示的文字。可以设置字体、风格、字号以及是否具有富文本功能。
文本的对齐方式有多种选项，控制文本比矩形的宽度或高度更长时会发生什么的水平和垂直溢出设置，并且最佳匹配选项使得文本会重设大小来适应可用的空间。
一张图片有一个矩形变换组件及一个图片组件。一个精灵可以被应用到在目标图片区下方的图片组件，并且颜色可以在颜色区中设置。材质也可以被应用到图片组件。图片类型区定义了应用到图片的精灵如何出现，这些选项时：
Simple - 等量地缩放整个精灵。
Sliced - 利用3x3精灵分割法，这样尺寸调整不会扭曲角落，并且只有角落部分被拉伸。
Tiled - 类似于Sliced，但瓦片式摆放（平铺）中间部分并且不拉伸。对于完全没有边缘的精灵，整个精灵被平铺。
Filled - 像Simple模式那样显示精灵，但除了从原点以预定的方向、方法和数量填充精灵。
设置本地尺寸的选项，在Simple或者Filled被选择时出现，重置图片的尺寸到原始的精灵尺寸。
图片可以通过在纹理类型设置中选择精灵(2D/UI)，被作为UI精灵导入。对比老的GUI精灵，精灵有额外的导入选项，最大的不同是精灵编辑器的增加。精灵编辑器提供了9-slicing图片的选项，将图片划分为9个区域，这样如果精灵被调整，四角不会被拉伸或扭曲。
图片组件有精灵，但原始图片是纹理（没有边缘等）。原始图片仅在必要时可以被使用，否则图片组件在大部分情况下都是适合的。
遮罩（Mask）并不是可见的UI控制，然而是调整一个控制子元素外观的一种方式。遮罩根据父元素的形状限制（即所谓的“遮罩”）子元素。这样，如果子元素比父元素更大，那么，子元素只有在父元素中的那部分会可见。
视觉组件也可以有各种简单的效果，例如简单的阴影或者轮廓线。可以查看Effect引用页来获得更多信息。
这部分关于在UI系统中掌控交互的组件，例如鼠标或者触摸事件，以及使用键盘或控制器的交互。
交互组件自身不可见，并且为了正确地工作，它必须被一个或多个可见元素所包含。
大部分交互组件有相同的部分。它们是可选择的，意味着它们已经共享了：在状态（普通，高亮，按下，不可用）之间可见的切换，以及使用键盘或控制器到其它可选项的导航，这些内建功能。这些共有的功能在可选页面中描述。
按钮有一个点击Unity事件来定义当被点击时会做什么。
按钮控制 对来自用户的点击的反应，并且被用来初始化或确认一个动作。常见的例子有在网页表单中的提交和退出按钮。
Interactable
这个组件是否接受输入？参见 Interactable。
Transition
决定控制对用户动作反应如何可见的属性。参见Transition选项。
Navigation
决定控制序列的属性。参见Navigation选项。
当一个用户点击并释放一个按钮时，调用一个Unity事件。
按钮被涉及用来初始化一个动作，当用户点击并释放它。如果在松开前鼠标从按钮上移开，则不会发生动作。
按钮有一个名为 On Click的单独事件，响应用户的一次完整点击。典型的使用情形包括：
确认一个决定（例如，启动游戏或保存游戏）
移动到GUI中的子菜单
退出进行中的动作（例如，下载一个新场景）
一个开关是一个决定了某一开关当前是开启或关闭的选择项。当用户点击开关时，值被改变；并且一个对勾会由此打开或关闭。同样有定义一个当值改变时就触发的OnValueChanged的Unity事件。
Interactable
选项是否接受输入？具体见Interactable。
Transition
决定控制如何以可见的方式对用户动作反应的属性。参见Transition选项
Navigation
决定控制顺序的属性。参见Navigation选项。
选项开始时出于打开状态吗?
Toggle Transition
当值被改变时开关图像方面的反应。选项是None（即对勾只是简单地出现或消失）和Fade（即对勾淡入或淡出）。
用于对勾的图像。
选项所属的选项组。
On Value Changed
当开关被点击时，调用的Unity事件。事件可以将当前的状态作为一个Bool类型的动态参数进行发送。
开关控制允许用户对选项的开关状态进行切换。当同一时间里一系列开关中仅有一个开关能够开启时，你也可以在一个开关组中包含若干个开关。
当用户改变当前值时，开关有一个名为 On Value Changed 的单一事件，会进行反应。新的值会作为一个布尔型参数传递给事件函数。开关典型的使用场景包括：
让一个选项开启或关闭（例如，在游戏中播放音乐）。
让用户确认他们已经阅读了法律免责声明。
在一系列选项中选择一个（例如，一个星期中的某一日）。
注意，开关是提供了子元素可点击区域的父元素。如果开关没有子元素（或者它们不可用），开关是不能点击的。
开关组可以用来将一系列互斥使用的选项形成一组。属于同一组的开关被认为，在同一时间仅有其中一个能被选中——选中它们中的一个，自动弃选其它所有的。
查看Toggle Group页面来获得关于开关组组件的细节。
滑块有个用户可以在最小值和最大值之间拖拽的十进制数值。滑块可以是水平或者垂直的。它同样也有一个定义了当值改变时如何反应的OnValueChanged的Unity事件。
滚动条有个在0到1之间的小数。当用户拖拽滚动条时，值对应地改变。
滚动条通常与一个滚动矩形及遮罩一起使用，来创建一个滚动视图。滚动条有个在0到1之间的Size值，决定了当前部分与完整滚动条长度的比例有多大。这通常被另一个组件所控制，来指明在一个滚动视图中多少比例的内容可见。滚动矩形组件可以自动地做到这一点。
滚动条可以是水平或者垂直的。它也有一个值被改变时定义如何执行的OnValueChanged的Unity事件。
下拉框有可以从中选择的选项列表。对于每个选项，可以指定一个文本串或一张图片来指代，并且可以在检视器里设置或者在代码中动态设置。它有一个在值被改变时，定义如何执行的OnValueChanged的Unity事件。
输入框用于创建可被用户所编辑的文本元素的文本。它也有一个文本内容被改变时定义如何执行的OnValueChanged的Unity事件，以及另一个用来定义用户结束输入时如何执行的事件。
查看 Input Field 页面来获得关于使用输入框元素的细节。
滚动框（滚动视图）
一个滚动狂可在占用了大量空间的内容需要在一个小区域中显示的情况下被使用。滚动狂提供了滚动显示内容的功能。
通常滚动框包含遮罩，以创建一个滚动视图，只有在滚动框中滚动区域的内容可见。它也可以额外地包含一个或两个滚动条，可以水平或垂直地滚动。
查看 Scroll Rect 页面获得更多关于滚动框组件的细节。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：41047次
排名：千里之外
译文：31篇
(11)(1)(1)(1)(1)(6)(6)(6)君，已阅读到文档的结尾了呢~~
基于unity3d的手机游戏客户端的设计与实现
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
基于unity3d的手机游戏客户端的设计与实现
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口}