Требуется ли слишком много холста, чтобы перерисовать все внутри игрового цикла?

Question

Я запустил игру на прорыве на холсте .

На данный момент я только кодировал отображение блоков и игрока.

Когда игра должна обновляться сама (каждые 10 мс или около того), ей нужно вызвать draw(), которая в настоящее время собирается перекрасить весь холст на основе текущего состояния игрока, блоков и мяча.

Его производительность начинает становиться проблемой.

Разве не стоит перекрашивать весь холст за кадр? Должен ли я изменять свой код, чтобы рисовать только те разделы, которые меняются?

Answer 1

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

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

Кроме того, если у вас много объектов, не устанавливайте fillStyle, если вам не нужноЭто означает, что необходимо выполнить оптимизацию, установив заливку на один цвет, нарисовав все объекты этого цвета, а затем установив второй цвет заливки и т. д.

Наконец, я бы предложил написать весьигра (или большая ее часть) и , затем возвращаясь и выполняя оптимизацию.

Существует множество оптимизаций, которые будут иметься с Canvas.Недавно я выпустил руководство по повышению производительности в играх, надеюсь, оно будет сделано к концу года.

Answer 2

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

Мой тест можно посмотреть здесь: http://phrogz.net/tmp/image_move_sprites_canvas.html

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

Answer 3

Сначала я бы взял все это из init ():

canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 300;
ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

Нет смысла иметь дело с этим каждую миллисекунду!

Во-вторых, посмотрите на это: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Answer 4

Разве не стоит перекрашивать весь холст за кадр?

Нет, иногда это очень хорошая идея

Его производительность начинает становиться проблемой

Но не тогда.

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