Что такое высокопроизводительный способ разделения листов / чипов Sprite в JS?
Я работаю над редактором 2D-мира для html/js и пытаюсь найти лучший способ разбить набор микросхем (как показано ниже) на несколько маленьких квадратов (чипов).
В настоящее время я использую метод, похожий на метод листов спрайтов CSS по умолчанию, использующий положение фона для перемещения фона многих маленьких <div> элементы, пока каждый не отображает один квадрат / чип набора микросхем.
Он работает нормально, без каких-либо серьезных проблем с производительностью, но это выглядит как неуклюжий способ сделать это.
Другими способами, которыми я думал об этом, было бы нарезать чипсет на множество временных изображений и сделать <image> элемент для каждого, или используя <canvas> вместо <div>'s или же <image>'s
В любом случае, я ищу совет по этому вопросу:
Что такое высокопроизводительный способ разделения листов / чипов Sprite в JS?
пример чипсета
1 ответ
То, как вы делаете это сейчас, должно быть довольно быстрым. Вы можете существенно переопределить это на уровне холста, сохранив только одно изображение, затем используя drawImage только рисовать разделы из него. Насколько мне известно, это самый распространенный способ и очень быстрый. По крайней мере, это был мой опыт, когда я писал игровой движок с использованием canvas.
Использование холста, скорее всего, быстрее и более эффективно использует память, поскольку у вас нет дополнительных накладных расходов DOM, но вам придется измерить их для конкретного случая использования и проверить это.
Создание группы отдельных изображений, как вы предложили, будет очень медленным, поскольку для этого потребуется копировать части изображения и создавать дополнительный элемент DOM для каждого изображения.
Вкратце: использование canvas всегда будет быстрее (для сопоставимой реализации), поскольку вы почти напрямую взаимодействуете с GPU. Рисование из одного изображения, а не копирование его в несколько подизображений всегда будет быстрее, поскольку у вас не будет дублирующейся памяти, а пока вы рисуете с одного листа, графическому процессору не нужно переключать текстуру,