使用javascript逐像素动画

Question

我在一个像素网格上设置一个精灵的动画。我有几个选择，每个选择都有利弊。我有相当多的javascript经验(六年)，但没有这方面的经验。问题是我不知道每个选项会有多贵。

精灵需要渲染速度相当快，并且足够便宜，以便在运行碰撞检测时至少同时运行五个。

理想情况下，我希望在包装器中使用元素网格，将颜色和alpha通道呈现给多维数组中的每个元素。这里的主要优点是，我可以运行逐个像素的碰撞检测，并单击通过雪碧图的透明部分。对于任何基于图像的精灵，即使我单击一个透明像素，onClick事件也会触发(我必须做很多工作才能让点击通过透明像素，而且可能非常昂贵)。

下一个选项是使用css精灵。css-tricks.com/css-sprites/这很容易，但是正如前面提到的，onClicks不会通过透明像素。我可能会强制它，但再说一次，它可能很昂贵，并且需要很多时间来实现。

另一种选择是动画gif，但它们很大，在颜色部分有限，很难控制动画。我宁可不去那里。

然后是html5画布元素，我对它不是很了解，如果可能的话，我想远离它。我甚至不知道我的任何代码如何与canvas元素相关地工作，我怀疑从长远来看，它是否能做我想要的事情。

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

Answer 1

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

您最灵活的选择是使用HTML5 Canvas，正如您已经了解到的那样，但它将涉及更多的JavaScript编码。但是这个系统将允许你对你的精灵应用一些效果，并允许你通过使用getImageData来使用像素完美检测(它允许你在任何像素偏移时读取准确的像素颜色)。

• getPixel from HTML Canvas?

如果你想避免全屏画布系统的技术问题和挑战(这可能很棘手)，你实际上可以创建尽可能多的更小的画布元素，并像你的精灵一样移动它们(使用HTML元素)。然后，您所要做的就是设计绘制动画帧的代码，并使用上述方法告知鼠标是否命中了sprite (以及一个单击处理程序和一些代码，以计算用户相对于画布元素位置单击的位置)。显然，最好是以一种通用的方式来做这件事，这样你的代码就可以应用于你所有的精灵了:)

要在画布上绘制图像，您可以使用您在问题中提到的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. 支持您的精灵由普通DIVs与背景图像精灵工作表，您可以移动其背景位置。这是你能做到的最好的效果，除了将静态图片作为精灵，因为所有的工作都是由浏览器完成的。对于每种精灵类型，
2. 都会在一个隐藏的画布元素上绘制你的精灵工作表，这个元素足够大，可以包含整个DIV子画面。用户点击你的一个精灵，将背景位置作为坐标，反转它们，然后，您应该知道像素数据在画布元素上的位置(通过精灵的类型查找)。
3. 在隐藏的画布上使用getPixelData方法来判断用户是否点击了精灵。
4. 上面的意思是您只使用了一个画布元素-每个精灵类型，浏览器为您处理所有图形，您可以通过单击获得像素完美冲突。

希望上面的内容是有意义的？

Answer 2

如何将你的图像分割成30x30的单元格，只包含单元格不透明的元素，并在单元格透明的地方留下一个空隙，这样点击就会掉下来。但是，在单击单元格的位置上，您会失去一点准确性。