Как оптимально отрисовывать игровую графику на html canvas?

Question

[Sungmaster]

Я использую для отрисовки игрового мира с top-down камерой 4 слоя canvas (статика, анимированные/игровые обьекты, персонажи, деревья и крыши (все, у чего z-index больше чем у персонажей). Размер одной локации - 2880х1600, размер каждого canvas соответствует локации. Перерисовываю только "грязные" области. Правда нет единого диспетчера отрисовок, у каждого обьекта свой обработчик.

Суть проблемы - во время передвижения камеры (путем смещения координат canvas-ов) производительность катастрофически падает, из-за чего на слабых машинах движение происходит рывками. При этом отрисовка анимации без перемещения камеры происходит вполне адекватно. Как лучше переработаь архитектуру, чтобы снизить нагрузку?

Посмотреть описанную ситуацию вживую можно тут

Comments

[RedHairOnMyHead]

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

[kiberlain]

RedHairOnMyHead: согласен выглядит реально круто

[Sungmaster]

RedHairOnMyHead: tileset с liberated pixel cup, а локации дизайнил сам

[Александр Белькевич]

Блин. Респект. Очень круто выглядит

[Егор Живагин]

Здесь тебе мало кто что сможет подсказать, но можно попробовать написать на Хабре статейку и почитать комментарии там. Будет много интересного, но и нагрузка на сервер сразу прыгнет.

Мне нравится эта штука. Напишешь на тостер что-нибудь, как доделаешь до конца?)

[Sungmaster]

Егор Живагин: пока особого прогресса не намечается, т.к. сейчас занят дипломом. Если интересно, можешь подписаться на https://vk.com/hidalgocode, там основной прогресс

[Сергей delphinpro]

Комп пятилетней давности - лагов не ощущаю. вроде норм

Answer 1

[Александр Коротаев]

Думаю, что CSS transform: translate() будет работать немного быстрее, это раз.
Можно переставать рисовать во время перемещения, это 2.
Можно попробовать отключить pointer-events в css.
Но главный момент - чем больше локация, тем больше будет фризов, от этого никуда не убежать, пока не начать рисовать на canvas в размер экрана, (время доступа к бОльшим ресурсам всегда больше). Как перерисовать тайловую карту быстро сохраняя плавное перемещение карты? Можно глянуть на реализацию яндекс-карт, там карта рисуется чуть больше экрана на величину тайла, плавно сдвигается трансформацией и рисуется лишь новый край при смещении более чем на 1 тайл. В профиле есть, почта, пиши, могу разъяснить чуть подробнее.