多年来，我一直在 Unity 中构建 UI，通常要么使用 Asset Store 中 GUI 资源包的纹理，要么在 Photoshop 中自己制作精灵图。
当尝试制作圆角按钮时，我最终厌倦了在资源库中翻找大量不同圆角半径和像素分辨率的精灵图。
所以我决定再也不依赖纹理了。
我想要一个能像 Photoshop 或 Figma 那样构建 UI 形状的工具，而且能直接在 Unity 里使用。
这个工具可以让我创建 圆角 或 切角，倾斜 整个形状，并为其应用特效。
UI 特效
自定义检查器让你轻松制作以下特效：
- 填充
- 纹理
- 外阴影
- 内阴影
- 发光
- 轮廓
- 斜面
- 背景模糊
底层原理
UI Shapes 使用数学而非纹理来绘制每个特效（圆角、阴影、轮廓、发光）。每个形状都是一个单独的四边形，在着色器中按像素计算有符号距离场。无论分辨率或缩放如何，边缘都保持完美清晰。
一个轻量级组件和一个着色器即可完成所有工作。无需渲染纹理，无需模糊通道，也无需隐藏的摄像机技巧。这意味着更少的绘制调用、零额外内存用于阴影图集，并且调整 UI 大小时不会出现任何问题。
这与游戏引擎用于平滑文本渲染的技术相同，现已应用于你的整个 UI 层。
性能
实际上，我最初尝试编写一个能完成所有功能的超级着色器，但在真实的廉价安卓手机上测试时，数据不够理想。
我将它拆分为优化的变体：GPU 只运行形状实际使用的代码路径，效果天差地别。
更多性能信息请查阅文档：
其他亮点
- 也可轻松动画化子文本（例如，当按钮变色时，文字也随之变化）
- 软遮罩（曲线周围不再出现锯齿边缘）
- 支持 Animator，完全可通过 C# 脚本控制
- 可复用的样式资源：一次保存样式，随处加载，实时编辑。
试试看
我制作了一个 Web 演示，你可以在浏览器中体验 UI 特效：
有趣的事实：这个演示中的“检查器”也是用 UI Shapes 构建的。
🎁 发布赠品 - 5 份
参与方式：只需留下评论。
本周末我将用 redditraffler 随机抽取 5 位获奖者，并在本贴中公布结果。
获奖者将通过私信收到兑换码。截止时间：欧洲中部时间 9 月 6 日（周日）晚上 8:00。
立即获取
如果不想参与抽奖碰运气，你也可以立即在 Unity Asset Store 上购买：
在 Unity Asset Store 获取 UI Shapes
🚨 该资源接下来几天享受 30% 折扣，现在入手最划算！
另外，如果你购买了，请留下评价。这是帮助我们触达更多人的最佳方式。
讨论
我真心想了解大家的看法：
- 你还在使用 UGUI 而不是 UI Toolkit 吗？有没有考虑过切换？
- 过去你像我一样购买过大量 GUI 纹理包吗？还是自己制作纹理？
对于尝试过 UI Shapes 的用户：
- 我希望它非常好用。你在使用中遇到过问题吗？
- 你认为还缺少什么功能？我计划很快添加更多特性！
评论 (0)