在我们的游戏开发过程中（如果你想支持我们，游戏名为 Dead Broke 🙏），我们想把一些骨骼动画加入到 UI 中，使其更具自然感。
我们想使用 Unity 的 2D Animation 包，因为它已经提供了我们所需的所有功能来 rig（骨骼绑定）和动画精灵。
问题是该包依赖于 Sprite Renderer，它们与 Canvas 系统配合得不够好，尤其是在使用 Screen Space Overlay Canvas 时。
所以我们决定构建一个小型自定义组件来解决这个问题。
想法很简单：与其使用 Sprite Renderer，我们创建了一个自定义的 UI Graphic，它接收已骨骼化的精灵数据并填充 UI 网格。
由于它继承自 MaskableGraphic，它可以直接在 Canvas 中使用，并支持常规 UI 功能，如遮罩。
在动画方面，我们获取每个顶点的骨骼索引和权重，使用骨骼矩阵计算位移，并更新 UI geometry。
所有操作都在 LateUpdate 中进行，因此动画应该已经完成。
这运行得相当不错，但意味着顶点位置需要每帧在 CPU 上重新计算。
因此我们还实现了 GPU skinning。
我们不在 CPU 上计算最终顶点位置，而是通过额外的 UV 通道将原始位置、骨骼索引和权重传递给着色器。
着色器在顶点阶段直接执行皮肤动画。
这样，GPU 在渲染时处理位移。
此外，针对 Screen Space Overlay Canvas 有一个小问题，常规的矩阵转换在 Game 视图中未产生预期结果。
我们不得不添加一个小的 workaround 来处理这种情况。
结果是一个组件，让我们能够直接在 UI 中使用已骨骼化的 2D 精灵，支持骨骼动画、UI 遮罩，以及 CPU 和 GPU 皮肤动画。
我们构建它是因为我们需要它用于游戏，但它 turned out 很有用，我们觉得它值得分享。
我整理了更详细的实现说明，包括一些实现细节，并免费在我们的 Patreon 上发布，供有兴趣的朋友查看：
Full Breakdown
而且，这也是我们首款游戏 Dead Broke 的开发过程！
我们仍在努力完善演示，如果项目听起来对你感兴趣，把它加入你的 Steam 志愿者列表将真的大力帮助我们。
Steam page
感谢阅读！
如果你在 Unity 中遇到过类似的问题，我很想听听你是如何处理的。
祝大家万圣节快乐！:)