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