5

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

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

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

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

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

然后是 html5 canvas 元素，我不太了解它，如果可能的话，我想远离它。我不知道我的任何代码甚至会如何与 canvas 元素相关，而且我怀疑它是否会长期满足我的需求。

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

4

2 回答 2

2

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

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

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

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


更新 - 对于那些希望非常优化的人

如果您希望采取更优化的路线 - 再次涉及更多 - 您可以执行以下操作。如果您有许多完全相同的精灵，只有少数（20 或 30）帧动画，则此方法很有用：

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

希望以上内容有意义吗？

于 2012-10-29T08:50:56.637 回答
0

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

于 2012-10-29T09:01:12.797 回答