NGUI利用两个摄像机裁剪特效

转载自：http://www.omuying.com/article/74.aspx

最近策划们要求在物品栏的边框上面添加粒子效果，以区分物品的品质，本以为这件事情非常容易，哪知 NGUI 自带的 SoftClip 无法裁剪 3D 模型以及粒子，这儿有篇外国朋友写的文章（http://nickithansen.dk/masking-and-clipping-textures-using-shaders-in-ngui/），但是因为 NGUI 版本的不同，我没有仔细去研究，有兴趣的可以看一下。本篇文章并不是真正意义上的裁剪，而是通过添加摄像机来限制 ScrollView 的滚动区域来达到同样的效果。弊端就是需要添加额外的摄像机。

限于篇幅，本篇文章会有些跳跃，文中通过 ScrollView 创建滚动列表的步骤有所省略。

先来看看最终效果，滚动滚动条或者滑动 ScrollView，粒子能被正确裁剪掉，如图：

先来搭建测试环境，物品栏面板布局如下，创建 TopLeft 以及 BottomRight 对象是为了给摄像机提供占位，这样另一个摄像机可以把渲染到的内容显示在 TopLeft 与 BottomRight 的区域之间，如下：

新建立一个 UIRoot，取名（Item Root），并且把 ScrollView 的滚动区域放到新建立的 UIRoot（ItemRoot） 下，并且设置 StoreItemPanel 的 SoftClip 属性，如图：

给 StoreItemPanel 添加一个空对象（ItemContainer），然后在这个空对象（ItemContainer）下面添加物品格子对象（StoreItem），最后给 ItemContainer 挂载 UIGrid 组件，并且设置好属性，查看效果，如图：

这个时候粒子还无法被裁剪，下面我们需要做的就是给 ItemRoot 下的 Camera 挂载 UIViewport 组件，UIViewport 组件的 SourceCamera 对象为 UIRoot（StorePanel）下的 Camera, TopLeft 与 BottomRight 就是我们上面说的两个占位符，如图：

另外需要注意的一点就是 ItemRoot 对象要离 UIRoot 对象远一点，这是为了确保 Item Root 下的摄像机渲染与 UIRoot 下的摄像机渲染不冲突，如图：