在 JS 中拆分 Sprite Sheets/ Chip Sets 的高性能方法是什么？
What is a high performance way of splitting up Sprite Sheets/ Chip Sets in JS?
我正在为 html/js 开发 2d 世界编辑器，并试图找到将芯片组（如下所示）拆分为多个小方块（芯片）的最佳方法。
目前，我正在使用一种类似于默认 css 精灵表方法的方法，即使用背景位置移动许多小 <div> 元素的背景，直到每个元素显示一个 square/chip芯片组。
它工作正常，没有大的性能问题，但它似乎是一种整体笨拙的方法。
我想到的其他方法是将芯片组分成许多临时图像并为每个图像制作一个 <image> 元素，或者使用 <canvas> 而不是 <div>'s 或 <image>'s
无论如何，我正在寻找有关该主题的建议：
在 JS 中拆分 Sprite Sheets/ Chip Sets 的高性能方法是什么？
芯片组示例
您现在执行此操作的方式应该非常快。您基本上可以通过仅存储一张图像然后使用 drawImage to only draw sections from it. To the best of my knowledge, this is the most common way and is very fast. At least that was my experience when I wrote a game engine using canvas.
在 canvas 级别上重新实现它
使用 canvas 很可能更快，内存效率更高，因为您没有额外的 DOM 开销，但您必须针对您的特定用例对其进行测量并验证.
按照您的建议，创建一堆单独的图像会非常慢，因为它需要复制部分图像并为每个图像创建一个额外的 DOM 元素。
简而言之：使用 canvas 总是会更快（对于类似的实现），因为您几乎是直接与 GPU 交互。从一个图像中绘制而不是将其复制到多个子图像中总是会更快，因为你不会有重复的内存，只要你从同一个 sheet 中绘制，GPU 就不必切换纹理。
我正在为 html/js 开发 2d 世界编辑器，并试图找到将芯片组（如下所示）拆分为多个小方块（芯片）的最佳方法。
目前，我正在使用一种类似于默认 css 精灵表方法的方法，即使用背景位置移动许多小 <div> 元素的背景，直到每个元素显示一个 square/chip芯片组。
它工作正常，没有大的性能问题，但它似乎是一种整体笨拙的方法。
我想到的其他方法是将芯片组分成许多临时图像并为每个图像制作一个 <image> 元素，或者使用 <canvas> 而不是 <div>'s 或 <image>'s
无论如何，我正在寻找有关该主题的建议：
在 JS 中拆分 Sprite Sheets/ Chip Sets 的高性能方法是什么？
芯片组示例
您现在执行此操作的方式应该非常快。您基本上可以通过仅存储一张图像然后使用 drawImage to only draw sections from it. To the best of my knowledge, this is the most common way and is very fast. At least that was my experience when I wrote a game engine using canvas.
使用 canvas 很可能更快，内存效率更高，因为您没有额外的 DOM 开销，但您必须针对您的特定用例对其进行测量并验证.
按照您的建议，创建一堆单独的图像会非常慢，因为它需要复制部分图像并为每个图像创建一个额外的 DOM 元素。
简而言之：使用 canvas 总是会更快（对于类似的实现），因为您几乎是直接与 GPU 交互。从一个图像中绘制而不是将其复制到多个子图像中总是会更快，因为你不会有重复的内存，只要你从同一个 sheet 中绘制，GPU 就不必切换纹理。