以编程方式动画精灵

Question

我正在尝试想出一种“以编程方式”为游戏中的精灵设置动画的方法。这样做的目的是避免为每个精灵创建大约 20-50 帧（非常耗时），然后运行循环来对帧进行排序，从而生成所需的动画。下面是我想要设置动画的精灵的一个示例。所需的动画应该为图像提供“波浪”，从中心开始向外扩展。这将使水彩看起来栩栩如生，或者好像它仍然湿润且闪闪发光。我使用的是 Cocos2D，因此每个精灵都有这些可用的方法：移动、旋转、缩放。我最初的想法是使用 Cocos2D 的粒子系统来尝试创建这种效果，但我担心运行大约 50 个左右精灵的系统的效率。有更好的办法吗？

Answer 1

您想要实现的目标可能最好使用自定义顶点/片段着色器来完成。不幸的是，周围的例子并不多，所以你必须看看。但为了让您开始，请看这里，那里可能有一个接近您的愿望。请注意，着色器可能很棘手，并且很难“从开源存储库中删除”到您的代码库类型的软件。需要一些调整，您的里程会有所不同。

有关 openGL、着色器和其他内容的崩溃“介绍”，如果您愿意，这个博客对我非常有帮助。请点击链接。

Answer 2

如果粒子系统数量很多，那么其性能可能会非常糟糕。

大多数人使用预先创建的动画水砖。因此，每个图块都有 4 帧动画或其他内容，在创建时，您可以将每个图块设置为重复通过这 4 帧进行动画处理。

您可能还想研究 CCRipple3D 动作。

Answer 3

您可能想研究法线贴图技术以获得您想要的“闪光”效果。基本上，您会找到或生成“水波纹”纹理的法线贴图，该贴图会放大每一帧，使其看起来在扩展，然后将其采样到照明系统中，最后调整光反射、折射等的量，直到您得到你想要的效果。我从这个视频和他的快速 2D 照明系列中学习了如何做到这一点。我不确定是否有 Cocos2D 的教程，但是 Gamemaker 使用 OpenGl，所以只要你使用 OpenGl，着色器代码应该大致相同。

现在，如果您仍然希望水坑上有额外的扭曲，以便精灵本身实际上扭曲，您可以执行类似的技术，但不是对法线贴图进行采样，而是可以对波纹纹理的高度图进行采样并扭曲您采样的 UV 坐标基于高度图的 alpha 值。

如果您不想这样做，那么您可以编写一个简单的 正弦失真着色器 并对其进行一些调整以满足您的需求（例如，您可以根据像素相对于中心的位置来更改失真方向和数量精灵的）。再说一遍，你可能需要研究一下如何将其实现到 Cocos2D 中，因为我对它不是很熟悉。

希望这能帮助或至少为您指明正确的方向！