使用javascript逐像素动画

Question

我在像素网格上设置了一个精灵。我有几个选择，每个选项都有利弊。我有相当多的javascript经验（六年），但没有这种东西。问题是我不知道每个选项会有多贵。

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

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

下一个选项是使用css sprites。 css-tricks.com/css-sprites/ 这很容易，但如前所述，onClicks不会透过透明像素。我可能会强迫它，但同样，它可能很昂贵，并且需要花费大量时间来表达。

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

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

那么性能最佳？第一个（也是最优选的）是否可行？或者我错过了什么？

Answer 1

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

您最灵活的选择是使用HTML5 Canvas，因为您已经解决了，但它将涉及更多的JavaScript编码。但是这个系统允许你对你的精灵应用一些效果，并允许你使用getImageData （它允许你读取任何像素偏移的精确像素颜色）使用像素完美检测< / em>的

• 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. 以上意味着您只使用了一个canvas元素 - 每个精灵类型，浏览器会为您处理所有图形，并且您可以通过onclick获得像素完美碰撞。

希望以上有意义吗？

Answer 2

如何将图像精神划分为30x30细胞，并且只有细胞不透明的元素，并且细胞是透明的，以便点击通过。虽然可以点击单元格，但是你会失去一些准确性。