NGUI利用深度测试实现新手引导遮罩

实现原理:实际上就是先利用渲染队列渲染,然后再利用ZTest,改变渲染的遮挡关系。

PS:Depth Testing:深度测试,也叫深度缓冲。只有最靠近观察者的物体会被绘制。深度即Z,该值越小表示离观察者越近,该值越大表示离观察者越远。

具体操作步骤:

1、修改NGUI的Unlit - Transparent Colored Shader,将ZWrite改为On。

2、创建3个Panel,分别为叫GameObject、Mask、Cutout,里面分别创建一个Sprite,

3、将Panel的渲染方式改为Explicit,渲染队列分别改为3000(GameObject)、3002(Mask)、3001(Cutout),这一步会是渲染按照GameObject->Cutout->Mask的顺序渲染。

4、调整他们的Z轴:GameObject为300,Mask为200,Cutout为100。这一步会使渲染的遮挡关系发生改变,会使Cutout挡住Mask。我们再把Mask下面的Sprite透明度调为1。最后神奇的事情出现了!

时间: 2024-10-11 10:53:11

NGUI利用深度测试实现新手引导遮罩的相关文章

cocos2d-x新手引导遮罩CCClippingNode裁剪区域

废话不多说,我直接封装了一个类,是个layer,需要的时候直接添加layer就行  //白白原创 头文件 #pragma once #include "cocos2d.h" USING_NS_CC; const int kTagBackground=0; const int kTagClipNode=1; const int kTagTip=2; class TestLayer : public CCLayer { public: CREATE_FUNC(TestLayer); vir

NGUI实现技能CD效果

在NGUI中使用Sprite的遮罩效果可以很轻松的实现技能CD效果. 具体实现步骤: ①新建一个技能图标的Sprite 如图中的Skill001,再在该技能Sprite上添加一个Sprite做遮罩, Atlas中选一张纯灰色背景的图片,如图中的Shade_Sprite. ②在该遮罩Sprite中有三个属性用来控制遮罩的效果. Type:Filled Fill Dir:Radial360 Fill Amount:0 滑动Fill Amount,就可以看到效果了 ③给技能游戏对象绑定一个快捷键或按钮

DirectX11 Without DirectX SDK--14 深度测试

前言 当使用加法/减法/乘法颜色混合,或者使用透明混合的时候,在经过深度测试时可能会引发一些问题.例如现在我们需要使用加法混合来绘制一系列对象,而这些对象彼此之间不会相互阻挡.若我们仍使用原来的深度测试,就必须保证某一像素下的所有片元需要按照从远到近的顺序来进行绘制,但这很难做到,尤其在绘制一些几何体的时候可能会出现在前面的像素片元挡住了后面的像素片元的情况.现在,我们有能力通过调整深度测试这一行为,来改变最终的显示结果. DirectX11 With Windows SDK完整目录 Githu

WEB标准一:标准定义、好处、名词解释、常用术语、命名习惯

1. WEB标准是什么? “WEB标准”是一系列标准的总称.一般的误区经常把WEB标准说成DIV+CSS.准确的说法应该是:采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0 样式表制作页面的方法.DIV 应该指的是XHTML标签,而CSS 指的是样式表. 2. 采用WEB标准开发的好处 2.1 节约运营成本   2.2 用户友好性 2.3 内容跨平台的可用性 2.4 加快页面解析速度 2.5 更良好的用户体验 3. 名词解释 1. 横切 页面中950px宽并且对高度没有限制的容器称

Web总结

Web总结 一.名词解释 1.横切 在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切 2.留白 两个容器或碎片之间的上.下.左.右的空白距离 3.继承 元素可以从其父级元素中获得一些可为自己使用的属性或值. 4.图片定位 把图片元素放置到一个静态的.相对的.绝对的.或固定的位置中,利用CSS中对图片进行遮罩属性,多用于页面中的修饰图 5.底图 页面中在标签中使用的背景图 6.齐底(图)线 用于区分横切或碎片结束的线或图 7.页面结构 页面的基础框架,由横切.布局元素组成

UICollectionView基本使用详解(OC)

概述 UICollectionView是从iOS6开始引入使用的,目前应用非常广泛,很牛逼!老外的博客也是这么说的(传送门) ## 与UITableView的初步比较 UITableView应该是大家最熟悉的控件了,UICollectionView的使用与之类似,但又有所区别,如下介绍.相同点: 1.都是通过datasource和delegate驱动的(datasource和delegate官方文档传送),因此在使用的时候必须实现数据源与代理协议方法; 2.性能上都实现了循环利用的优化. 不同点

谈网站导航设计的颜色问题

导航中色彩的一个简略用户是为拜访过的连接显现不一样的色彩.默认情况下,大多数浏览器,把已拜访连接变为紫色.别的色彩也是能够的,但一般来说,亮堂.鲜活的色彩常被未拜访连接运用;已拜访连接不会运用它们,而用更为柔软的色彩,让连接看起来昏暗和"破旧".由于我们知道大家在导航中长遵循"基地与辐条"的形式,为已拜访连接分配不一样的色彩能够协助用户定向,对"再次找到"也有助益.导航规划需求思考色彩这一重要因素,由于色彩不仅仅是装饰,它还能够促进交互,有助于辨

字体填充

css text-fill-color与text-stroke讲解 顾名思义“text-fill-color”就是文字填充颜色而“text-stroke”就是文字描边.还别说,两个属性可以制作出各种炫酷的文字效果,不过IE系列都不支持,不过好在webkit都支持良好. text-fill-color:color; <style> h1{ -webkit-text-fill-color:red; } </style> <h1>博客园</h1> 话说倒有点像co

2D游戏平滑的迷雾战争效果

最近刚好有做2D游戏的点光源效果,然后就扩展一下,研究了一下战争迷雾的效果.主要是想实现类似魔兽争霸那种人物走动,然后黑色的战争迷雾随着人物的移动渐渐打开的效果.使用具有渐变透明图片作为光源来使得战争迷雾呈现出平滑的效果.本文后面介绍了两个简单的实现方法,效果有细微的差别,有兴趣的同学可以分别研究.最后也有完整展示代码和提供例子下载. 一.常见的战争迷雾效果 早期的红警的战争迷雾大家应该也比较熟悉,不过看起来没那么平滑,应该是采用图块拼出来.可以明显看得出一些方方块块. 可见早期魔兽争霸2也是没