javascript - 使用javascript的逐像素动画

Question

我正在为像素网格上的 Sprite 制作动画。我有几种选择，各有利弊。我有相当多的 javascript 经验(六年)，但没有这种东西。问题是我不知道每个选项会有多贵。

Sprite 需要渲染得非常快，并且足够便宜以在运行碰撞检测时同时运行至少五个 Sprite 。

理想情况下，我想在包装器内使用元素网格，将颜色和 alpha channel 渲染到多维数组中的每个元素。 这里的主要优点是我可以运行逐像素碰撞检测并点击 Sprite 的透明部分。对于任何基于图像的 sprite，即使我单击透明像素，onClick 事件也会触发(我必须做很多工作才能通过透明像素传递点击，而且它可能非常昂贵)。

下一个选项是使用 css Sprite 。 css-tricks.com/css-sprites/ 这很简单，但如前所述，onClicks 不会穿过透明像素。我可能会强制执行它，但同样，它可能很昂贵，并且需要很长时间才能实现。

另一种选择是 gif 动画，但它们体积庞大，色彩有限，而且很难控制动画。我宁愿不去那里。

然后是 html5 canvas 元素，我不太了解它，如果可能的话，我想远离它。我不知道我的任何代码在与 canvas 元素相关的情况下如何工作，而且我怀疑从长远来看它是否会达到我想要的效果。

那么哪种性能最好？第一个(也是最可取的)是一个可行的选择吗？还是我漏掉了什么？

Answer 1

使用今天的浏览器，您可以在台式机上使用定位的像素子元素(只要它们不是太复杂或太大)构建 Sprite ，并且只是为了安全起见我会将自己限制在大约 10 个活跃的 Sprite 。对于移动设备，事情可能会变得有点慢和笨拙，但考虑到您似乎正在设计一款需要精确“点击”的游戏，我怀疑这会成为一个问题。

您最灵活的选择是使用 HTML5 Canvas，正如您已经解决的那样，但它会涉及更多的 JavaScript 编码。但是这个系统将允许您对 Sprite 应用多种效果，并允许您使用 getImageData 进行像素完美检测(这允许您读取任何像素的准确像素颜色偏移量)。

• getPixel from HTML Canvas?

如果您想避免拥有全屏 Canvas 系统的技术问题和挑战(这可能很棘手)，您实际上可以创建尽可能多的较小的 Canvas 元素并像您的 Sprite 一样移动它们(使用简单的 HTML 元素).. 然后您所要做的就是设计绘制动画帧的代码，并使用上述方法判断鼠标是否击中了 Sprite (连同点击处理程序和一些代码来计算用户点击相对于 Canvas 元素位置的位置)。显然，最好以通用的方式执行此操作，以便您的代码可以应用于所有 Sprite :)

要在 Canvas 上绘制图像，您可以使用问题中提到的 spritesheet，并使用支持切片模式的相当灵活的 drawImage() 方法。这只需要绑定(bind)到 setInterval 或 requestAnimationFrame 风格的游戏循环。

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
• http://www.playmycode.com/blog/2011/08/building-a-game-mainloop-in-javascript/

更新 - 对于那些希望成为最佳人选的人

如果你想走一条更优的路线——这又有点复杂——你可以执行以下操作。如果您有许多完全相同且只有几帧(20 或 30)动画的 Sprite ，则此方法很有用:

1. 通过普通 DIV 使用背景图像 Sprite 表为您的 Sprite 提供动力，您可以移动其背景位置。这是您可以做到的最佳选择，将静态图像保存为 sprite，因为浏览器会完成所有工作。
2. 对于每种 sprite 类型，在一个隐藏 Canvas 元素上绘制您的 spritesheet，该元素足够大以包含您的整个 spritesheet。
3. 当用户点击您的一个 DIV Sprite 时，将背景位置作为坐标，将它们反转，然后您应该知道 Canvas 元素(按 Sprite 类型查找)像素的位置数据驻留。
4. 在隐藏的 Canvas 上使用 getPixelData 方法来确定用户是否点击了 Sprite 。
5. 以上意味着您只使用了一个 Canvas 元素 - 对于每种 Sprite 类型，浏览器会为您处理所有图形，并且您可以通过单击获得像素完美碰撞。

希望以上内容有意义吗？