Как отрисовывать tilemap только один раз, а не 60 раз в секунду?

Question

[durnevdanya]

Добрый день, недавно сделал тестовый tilemap с помощью Tiled и сохранил его в формате JSON, чтобы эту карту перенести на canvas. Для этого использую эту либу. С ней загрузка карты происходит просто:
tmxJSON.load('firstTiledMap.json');

С отображением карты на канвас у меня проблем не возникло. Но проблема возникла в следующем: у меня есть функция update(), которая выполняет функции clearRect and fillRect 60 раз в секунду. То есть происходит очистка холста и перезапись. Это необходимо для игровых объектов(передвижение игрока).
При перезаписи TIlemap браузер начинает дико тормозить, что даже не закрывается вкладка.

Но ведь Tilemap статичен и ничего на нем поменяться не может, вопрос:
Как мне перерисовывать только объекты, а Tilemap не трогать?
Спасибо.

Answer 1

[twobomb]

Ну можешь один раз отрисовать тайл карту на канвас запомнить ее с помощью getimagedata и каждый раз рисовать с помощью putimagedata.
Ну а вообще у этой либы есть метод tmxJSON.drawTiles(); который отрисовывает тайл карту и если она у тебя на весь канвас то clearRect вообще не нужен так как она и так все перекрывает, (fillRect не пойму зачем вызываешь). Я попробовал у меня ничего не лагает все норм. Может ты вызываешь tmxJSON.load('firstTiledMap.json'); в методе update, ну тогда понятно почему лагает у тебя 60 раз в секунду загружает карту, (ну по крайней мере пытается ее загрузить). И еще если в геймлупе(update) используешь setTimeout или не дай бог setInerval, поменяй на requestAnimationFrame.
P.S. Один раз отрисовывать не получится, полюбому нужно перерисовывать только если не использовать два канваса наложенных друг на друга, на задней рисовать тайл, а на переднем анимации

Comments

[durnevdanya]

Здравствуйте, благодарю за ответ. Ваше решение мне помогло. Действительно, я загружал карту 60 раз в сек, а не рисовал.
Теперь я загружаю ее 1 раз, а рисую с помощью tmxJSON.drawTiles() в методе update.
Я вот тут опять наткнулся на проблему :(
Создал маленькую мапу в Tiled и попытался в ней побегать. Все отлично, не глючит, но вот стоило мне сделать огромную мапу 16000 x 16000, тут начался адовый писец. Все начало лагать.
Мне полюбому приходится выполнять tmxJSON.drawTiles() 60 раз в секунду, то есть он рисует 16000 на 16000 60 раз в секунду. Это дикость, как мне это исправить?
Я бегаю по карте используя ctx.translate в своих собственных функциях - По мне метод хороший, юзал его до тайлмапов, передвижение по миру относительно других объектов выполняется хорошо.
Как мне отрисовывать только видимую часть тайлмапа - то есть 0, 0, window.innerWidth, window.innerHeight? А не всю площадь?
Спасибо Вам

[twobomb]

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

[twobomb]

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