UGUI屏幕点击关闭Tips小技巧

在做MMORPG 游戏中在UI上会有很多的Tips弹窗的UI,策划的需求是点击Tips外面要关闭这个Tips那么我们首先想到的做法是,获取点击的区域或者对象判断是否点击是 tipsUI如果是则不关闭,

如果不是则关闭Tips,那么这样的做法有很多,其中一个是设置一个透明image背景,然后在这个Image上添加Button组件,当点击这个背景时关闭这个tips弹窗,当然这个背景要扩展到整个屏幕,

然后要设置成透明的这样才能不挡住其他UI。

        但是我感觉这样的方法好像多了一个几个步骤而且有点麻烦,既然我们只要一个透明带raycasts的背景而已,那么用一个空的Text组件也是一样可以实现。把字体和文字都设置为空,这样既可以不用设置透明度也可以达到一个点击屏幕的效果。


RectMask2D和Mask

最近项目中做UI,用的比较多的Scroll Rect这个组件,发现他是通过一个遮罩来显示Scroll Rect里的内容的,在UGUI中Scroll View自动创建的遮罩用的是Mask组件,但是我通过搜索发现还有

RectMask2D这个组件,然后我用上去发现效果是一样的。查了一下U3D的文档:

the limitations of RectMask2D control are:

  • It only works in 2D space    它只能工作在2D空间中

  • It will not properly mask elements that are not coplanar    它不能遮罩不在一个平面上的元素

The advantages of RectMask2D are:

  • It does not use the stencil buffer   它不会使用模板缓存

  • No extra draw calls       不会增加额外的 draw calls

  • No material changes    不会有材质的变化

  • Fast performance    速度更快的显示

是这样解释的,这简直是神器啊,比原来的Mask好用多了,但是前提是你用不到3D UI这个功能,那么如果你是做普通的2D UI 使用这个组件做遮罩是完全没有问题的而且还可以减少draw calls数量于是我测试了一下。


使用了Mask组件的Scroll View,draw calls是5


QQ截图20170910113531.png


使用了RectMask2D组件的Scroll View,draw calls是4


QQ截图20170910113654.png


使用了RectMask2D组件比Mask组件draw calls少了1个,这在移动设备中是非常重要的优化啊。