NGUI扩展：为面板(Panel)添加自定义图片遮罩

最新推荐文章于 2024-07-31 21:58:41 发布

Sparrowfc

最新推荐文章于 2024-07-31 21:58:41 发布

阅读量1.4w

点赞数 1

分类专栏： Unity3D 文章标签： Unity3D NGUI 遮罩

本文链接：https://blog.csdn.net/Sparrowfc/article/details/38847623

版权

本文介绍如何在Unity3D的NGUI中为面板添加自定义图片遮罩，通过编写扩展shader实现更灵活的剪裁效果。内容包括理解NGUI的渲染系统、面板的剪裁模式，以及详细步骤：编写支持遮罩的shader，集成到NGUI工具，设置Inspector以方便配置遮罩纹理。

摘要由CSDN通过智能技术生成

前一阵使用NGUI开发时遇到一个实现圆形小地图的需求。小地图上除了地图背景外还有一大堆的零零碎碎的角色提示信息啥的，因此创建了一个panel进行绘制，剩下的就是如何让这个panel只在一个圆形的区域内进行显示。NGUI本身对于panel提供了alpha clip以及soft clip两种剪裁模式，因此自然而然就是想到给他再添加一个mask clip模式，为该面板提供一张遮罩贴图来对其进行更为灵活的自定义切割。

NGUI的渲染系统及其panel实现clip的方式

NGUI使用3D渲染方式来进行2D/3D UI的绘制，每一个UI元素就是一个简单的面片，通过一套坐标系统，将你在2D坐标系中设置的值转化为3D世界坐标系中的一系列顶点，设置好正确的uv及material通过摄像机渲染到屏幕上。其中UIPanel是NGUI的一个绘制管理单元，负责管理其所有子UI元素的顶点生成、三角形索引列表、更新、深度排序等等。可以将它理解为MeshFilter，构建并维护着一个Mesh，这个Mesh包含了很多submesh，每个submesh使用不同材质渲染，并包含了一个或多个面片。UIPanel还管理一个UIDrawcall列表，UIDrawcall则是NGUI的基本绘制单元如同MeshRender，只不过一个UIDrawcall只对一个submesh进行绘制。

3D渲染除了顶点索引以及uv buffer的设置外还有一个重要的元素就是material，包括了贴图等一系列参数的设置。在NGUI中，渲染使用的material由UIDrawcall根据其绘制的元素动态生成。下面是UIDrawcalll中的一段代码，可以看到其创建material的方式：