使用JavaScript的逐像素动画

Question

我正在为像素网格上的精灵设置动画。我有几种选择，每种都有优点和缺点。我有相当多的JavaScript经验（六年），但是没有这种经验。问题是我不知道每种选择的价格如何。

该精灵需要快速渲染，并且价格便宜，足以在运行碰撞检测的同时至少运行五个。

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

下一个选项是使用CSS精灵。css-tricks.com/css-sprites/这很容易实现，但是如前所述，onClicks不会通过透明像素。我可能会强制使用它，但是同样，它可能会很昂贵，并且需要很多时间才能实现。

另一个选项是动画gif，但是它们很大，在色彩部门中受限制，并且难以在动画方面进行控制。我宁愿不去那里。

然后是html5 canvas元素，我对此不太了解，并且希望尽可能远离它。我不知道我的任何代码相对于canvas元素如何工作，而且我怀疑从长远来看，它是否可以满足我的要求。

那么哪种才是性能最好的呢？第一个（也是最可取的）会是可行的选择吗？还是我错过了什么？

Answer 1

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

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

• 从 HTML Canvas 获取像素？

如果您想避免全屏画布系统的技术问题和挑战（这可能很棘手），您实际上可以创建尽可能多的较小 Canvas 元素，并将它们作为精灵移动（通过 HTML 元素轻松实现）。然后，您所要做的就是设计绘制动画帧的代码，并使用上述方法告诉鼠标是否击中或未击中精灵（以及单击处理程序和一些代码来计算用户相对单击的位置）到您的画布元素位置）。显然，最好以通用的方式执行此操作，以便您的代码可以应用于所有精灵:)

要在画布上绘制图像，您可以使用您在问题中提到的精灵表，并使用drawImage()支持切片模式的相当灵活的方法。这只需要绑定到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）帧动画，则此方法会很有用：

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

希望以上有道理吗？