Canvas Изометрический игровой движок - перемещение по карте

Question

Я работал над учебником (http://glacialflame.com/category/tutorial/) для создания изометрического игрового движка, но мне бы хотелось, чтобы карта двигалась с персонажем в качестве точки фокусировки.

Итак, когда вы двигаетесь - карта центрируется на персонаже.

У меня есть немного PasteBin здесь: http://pastebin.com/U75Pz4Yy

Смотрите это в действии здесь: http://www.wikiword.co.uk/release-candidate/canvas/newEngine/index.html

Есть скрипка по заказу! http://jsfiddle.net/neuroflux/vUxYg/2/

Примечание: Это только для браузеров HTML5 и Canvas, не стоните, если вы используете IE6;)

Буду признателен за любые идеи и помощь, я подумал, что смогу сделать это, обновив каждую «плитку» в массиве на +1 или -1 соответственно, но я не могу сделать цикл ForEach для плитки изображения уже на холсте.

Заранее спасибо!

Answer 1

Есть несколько способов атаковать это:

1. Вы можете перемещать весь холст, удалять элементы, которые стали невидимыми (в конце концов).Так что, если верхний левый угол находится в -257467,374672?Для рендерера это всего лишь одно дополнение.

2. Вместо перемещения холста вы можете перемещать изображения времени.Поэтому создайте массив для всех элементов стиля частей карты, а затем в цикле переместите стили background-image вокруг.Элементы карты остаются на месте, меняется только изображение.

3. Вы можете создавать / удалять узлы DOM, а также перемещать существующие.Но по моему опыту, это довольно дорого (поскольку браузер должен выяснить, что вы изменили, а затем обновить дерево DOM, очистить кеши рендеринга, визуализировать часть, которую вы изменили, много объектов создано и уничтожено, ...)

Answer 2

Перемещение карты должно быть таким же простым, как перевод контекста по позиции игрока.

Когда игрок перемещается по X или Y, холст должен переводить на ту же величину (или на отрицательную величину)

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

Answer 3

Я могу дать одну идею, вместо того, чтобы иметь только один холст, вы можете управлять 3 холстами и устанавливать их в 3 делителя с абсолютным позиционированием, чтобы каждый дел был построен поверх предыдущего с прозрачным фоном.

• один для фона
• один для игрока
• один для объектов на карте (которые могут перекрывать игрока)

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

После этого возникает проблема загрузки новых фоновых плиток, которые могут быть обработаны с некоторыми скрытымипредварительная загрузка холста.И этот способ наложения холста может быть применен к другим слоям (слой активных маркеров, слои других игроков и т. Д.), Это «спрайт-слой-в-div», где движок графики браузера выполняет большую часть окончательной визуализации изображения экрана.