使用 javascript 的逐像素动画

Question

我正在为像素网格上的精灵制作动画。我有几个选择，每个都有优点和缺点。我有相当多的 javascript 经验（六年），但没有这种经验。问题是我不知道每个选项会有多贵。

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

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

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

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

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

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

Answer 1

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

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

• getPixel from HTML Canvas?

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

要在画布上绘制图像，您可以使用问题中提到的 spritesheet，并使用支持切片模式的相当灵活的 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. 以上意味着您只使用了一个画布元素 - 每种精灵类型，浏览器为您处理所有图形，并且您通过点击获得像素完美碰撞。

希望以上内容有意义吗？

Answer 2

如何将您的图像精神拆分为 30x30 的单元格，并且仅在单元格不透明的位置保留元素，并在单元格透明的位置留出空隙，以便点击通过。但是，您在可以单击单元格的位置上失去了一些准确性。