2

我正在为 html/js 开发 2d 世界编辑器，并试图找到将芯片组（如下所示）拆分为多个小方块（芯片）的最佳方法。

目前，我正在使用一种类似于默认 css sprite sheet 方法的方法，即使用背景位置来移动许多小<div>元素的背景，直到每个元素显示芯片组的一个正方形/芯片。

它工作正常，没有大的性能问题，但它似乎是一种整体笨拙的方式。

我想到的其他方法是将芯片组切成许多临时图像并<image>为每个图像制作一个元素，或者使用<canvas>代替<div>'s或<image>'s

无论如何，我正在寻找关于这个主题的建议：

在 JS 中拆分 Sprite Sheets/Chip Sets 的高性能方法是什么？

示例芯片组

芯片组示例

4

1 回答 1

1

你现在做的方式应该很快。您基本上可以通过仅存储一个图像然后使用drawImage仅从中绘制部分来在画布级别重新实现它。据我所知，这是最常见的方式，而且速度非常快。至少那是我使用画布编写游戏引擎时的经验。

使用画布很可能更快，内存效率更高，因为您没有额外的 DOM 开销，但您必须针对您的特定用例对其进行测量并验证这一点。

正如您所建议的那样，创建一堆单独的图像会非常慢，因为它需要复制图像的一部分并为每个图像创建一个额外的 DOM 元素。

简而言之：使用画布总是会更快（对于可比较的实现），因为您几乎直接与 GPU 交互。从一个图像绘制而不是将其复制到多个子图像中总是会更快，因为你不会有重复的内存，只要你从同一张纸上绘制，GPU就不必切换纹理.

于 2017-06-26T20:47:02.577 回答