Unity3D 实用技巧 - 快速掌握Unity UI 的自定义形状Image制作

在我们的项目开发中，针对圆角类的或者自定义的UI，其实是属于一些常见的功能。所以今天小编与大家一起来探讨可实现的的方式。

第一部分：来自Unity UI 内置最简单的扩展Image组件实现遮罩

UGUI提供的mask组件实现遮罩，实际上说遮罩(Mask)本身不是用来显示，而是用自己的形状来限制子元素的显示的，所以遮罩元素是遮罩元素的父元素。

基础的操作步骤：

1、利用PS等软件，制作出需要形状的Mask图，小编这边特意制作了圆形与矩形的测试图。

2、新建项目，把相关UI资源导入项目。注意图片资源格式图片的“Texture Type”设置为“Sprite(2D and UI)”，让图片变成精灵图片。

3、创建Image组件对象,新增Mask组件，作为父物体。

4、最终附上效果截图哈！

附加说明： 此方式性能开销比较大；图形显示锯齿会比较明显；合适精美的遮罩图比较依赖美术的制作。

第二部分：在别人造的轮子上，利用第三方插件实现自定义圆角类UI

1、Curved UI - VR Ready Solution To Bend / Warp Your Canvas!： https://assetstore.unity.com/packages/tools/gui/curved-ui-vr-ready-solution-to-bend-warp-your-canvas-53258

2、Easy Curved UI Menu for VR： https://assetstore.unity.com/?q=curve%20UI&orderBy=1

3、Curved UI Pro https://assetstore.unity.com/packages/tools/gui/curved-ui-pro-174953

4、CurvedGUI for Unity UI and NGUI https://assetstore.unity.com/packages/tools/gui/curvedgui-for-unity-ui-and-ngui-19956

第三部分：实战自定义Shader，实现圆角类UI

1、新建Shader文件，创建主要的Image组件，添加材质球。RoundShader.shader 核心代码如下：

2、最后直接附上运行的效果哈！【GitHub工程项目下载： https://github.com/haili1234/CustomShapeUIDemo 】