Как лучше работать с сеткой если нужны анимации при передвижении?

Question

[reaget]

Здравствуйте!
Начал делать игру в которой использую сетку. Генерируется доска NxM, по ней передвигается персонаж.

Первый способ такой: мы передвигаем персонажа по индексам клеток, то есть сделать шаг вправо - по иксу увеличили значение на один и так мы шагаем по нашей доске. Но в этом способе я не знаю как передвигать персонажа плавно из клетки в клетку.
Второй способ такой: у нас нет привязки к индексам сетки, мы передвигаем персонажа по, так сказать, обычным координатам. Но здесь трудности с центровкой персонажа внутри одной клетки.


Вопрос: как лучше работать с сеткой, если персонаж должен по ней как бы скользить?
И как это делаете вы?
Спасибо :)

Comments

[Антон Спирин]

Вы игру на готовом движке, canvas или html + css делаете?

[reaget]

Антон Спирин, без движка - canvas.

Answer 1

[Константин Китманов]

Есть логические координаты (координаты внутри сетки, 4,2 в вашем примере), которые используются для бизнес-логики, и есть физические, которые используются для вывода на экран. Физические получаются из логических простой формулой (типа physicalX = logicalX * 10 плюс смещение самой сетки от края экрана плюс границы и отступы при необходимости).
Насчет перемещения: высчитываем конечные физические и плавно меняем фактические физические (requestAnimationFrame либо метод из движка), пока не совпадут с конечными. Логические координаты меняем в любой момент в зависимости от того, как удобнее рассчитывать последствия хода.

Comments

[reaget]

А как это можно в коде реализовать? Просто у меня код захламляется лишними переменными и не получается пока этого избежать)

[Константин Китманов]

reaget, при отсутствии опыта я бы посоветовал взять какой-то готовый движок, ибо много переменных у вас неспроста -- сложное это дело.
Много переменных -- создавайте объекты чтобы группировать переменные по смыслу, выделяйте функции чтоб работать с этими объектами, ну и т.д. Декомпозиция нам поможет:)

[reaget]

Константин Китманов, Спасибо большое!