Как оптимизировать вывод графики в игре (js/canvas)?

Question

[fintank]

Пример: obsuditor.ddns.net/ftt

-- Изображение выводится на canvas размером с окно браузера.
-- Изображение состоит из закешированных в памяти кусков 100x100 (или 140x140), которые есть пиксельные буферы (каждый кусок начинает жизнь с помощью getImageData). На каждый кадр закешированные куски размещаются на большом canvas несколькими вызовами функции putImageData(). Плохо: куча операций копирования пикселей.
-- Когда вы стреляете в кирпич и его нужно убрать, перерисовывается кусок, в котором лежит этот кирпич и новая версия куска кладётся в кеш вместо старой. Бедный уборщик мусора.

JS-профайлер в хроме говорит, что много времени съедает putImageData() и fillText().

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

Брать готовые движки не предлагать.

Answer 1

[Александр Таратин]

Заменить putImageData на drawImage
Можно попробовать взять www.pixijs.com для движка

Comments

[Виталий Яковенко]

+1 к PIXI.js, не стоит городить свой велосипед для графики.

Answer 2

[Keyten]

WebGL.