Перемещение «камеры» HTML-элемента Canvas

Question

Я пытаюсь найти чистый способ "переместить камеру" элемента canvas.

Это для моего прототипа игры (боковой скроллер).Мне бы хотелось подумать, что есть лучшее решение, чем перемещение всего набора узлов для имитации перемещения «камеры».

Я почти наверняка прочитал бы простое руководство (используя смещения?), Нофакт, что я не нахожу ничего подобного, начинает вызывать сомнения ... я представлял себе, что читаю это??

Спасибо, чтобы помочь мне прояснить ... J

Answer 1

Предположительно, вы перерисовываете всю игровую сцену 30 раз в секунду (более или менее)

Вам необходимо перерисовать всю игровую сцену, но сначала перевести контекст Canvas на некоторое смещение.

context.translate(x,y) это именно то, что вы хотите. Вы можете прочитать об использовании этого, а также о методах save() и restore().

Когда вы переводите контекст, все нарисованное впоследствии смещается на эту величину.

Таким образом, вы постоянно что-то рисуете (возможно, враг) на 50,50, используя drawImage(badguy,50,50). Затем игрок перемещается, что меняет x из translate на -1 (потому что игрок движется вправо) вместо 0. Вы по-прежнему рисуете спрайта противника с помощью команды drawImage(badguy,50,50), но когда вы рисуете его враг появляется так, как если бы он находился на отметке 49,50 из-за команды context.translate(-1,0), которая сдвинула все до своего взвода.

Конечно, когда вы начнете играть, вы захотите убедиться, что вы рисуете только то, что действительно можно увидеть на экране! Если вы находитесь ниже уровня с context.translate(-2000,0), вы больше не хотите рисовать объекты на 50,50, только те, которые пересекают видимую область.