Как правильно рендерить html5 холст игру с лучшими результатами производительности

Question

Надеюсь, мой английский достаточно хорош.

Проблема: Я занимаюсь разработкой какой-нибудь игры на холсте, используя context2d.Я сделал тест производительности, чтобы увидеть, насколько хорошо рендерит холст и прочее.Для рисования использовался метод drawImage с некоторым размером 50x50 jpg, предварительно загруженным в память при запуске.

Мой тест состоял в том, чтобы создать множество объектов размером 50x50 из логического квадрата, движущихся случайным образом на холсте без столкновения, просто чтобы увидеть fps.

Основной цикл был выполнен с интервалом.

Проблема, я заметил низкую частоту кадров при 3000 случайных 50х50 на экране, я знаю, что чем больше вы рендерите, тем меньше частота кадров.Но я хочу кое-что спросить.

Вопрос:

Является ли хорошей идеей рендеринг каждого логического объекта на экране холста отдельно?Например, без коллизий, если я перекрываю два 50x50 в одной и той же позиции или почти в одной и той же позиции, видимый вывод будет меньше, чем (50 · 50) 2 пикселя, но я рисую (50 · 50) 2 пикселя, используяDrawimage для каждого элемента в главном цикле.

Надеюсь, вы, ребята, понимаете проблему и вопрос.Предоставить альтернативы?какие-то логические приемы для архивирования, а не для рендеринга каждого объекта в одиночку?

Answer 1

Определенно просто нарисуйте. Bitblt (пиксельное копирование) оптимизирован и, безусловно, будет быстрее, чем логика столкновений между спрайтами. Однако, единственное исключение - это тестирование спрайтов вне экрана. Это быстрый тест, потому что вы проверяете только по границам экрана, то есть, если спрайт находится вне экрана. Если у вас более 10 000 спрайтов, и многие из них большую часть времени находятся за пределами экрана - например, при увеличении масштаба - тогда тест того стоит. Если они всегда на экране, просто рисуйте.

Answer 2

Я понимаю, что вы спрашиваете, вы спрашиваете, может быть, вы должны попытаться рендерить коллизии, чтобы вам не приходилось рисовать дважды.Честно говоря, я думаю, что вам будет лучше просто нарисовать второй квадрат поверх первого, и я скажу вам, почему:

Ваша логика, вероятно, предпримет больше действий, чтобы определить степень перекрытияи рисуя более сложную фигуру, затем фактически рисуя ее.

Так что, на мой взгляд, вам лучше бы не проверить на столкновения в этом.

ЛюдиПоправь меня, если я ошибаюсь.