Свободное движение в изометрической игре на основе плиток

Есть ли разумный простой способ реализовать свободное движение в изометрической игре на основе тайлов? Это означает, что игрок не просто мгновенно перепрыгнет с одной плитки на другую или не будет «привязан» к сетке (например, если движение между плитками было анимированным, но вы не сможете ничего сделать до завершения анимации). Я действительно новичок во всем, что связано с программированием игр, но с помощью этого сайта и некоторых других ресурсов было довольно легко сделать основные вещи, но я не смог найти никаких полезных ресурсов для этой конкретной проблемы. ,

В настоящее время я импровизировал что-то похожее на это: http://jsfiddle.net/KwW5b/4/ (движение WASD). Идея движения заключалась в том, чтобы использовать карту мыши, чтобы определить, когда игрок переместился на другую плитку, а затем перевернуть смещения, и по большей части это работает правильно (каждый угол заставляет игрока перемещаться в неправильное место: см. Http: //www.youtube.com/watch?v=0xr15IaOhrI , что, вероятно, связано с тем, что я не смог правильно настроить полную карту мыши), но у меня нет иллюзий, что она даже близка к хорошему / нормальному решению. И вообще, это в основном просто для демонстрации того, что я хотел бы реализовать.

html5 movement isometric html-canvas xtr486
источник

Этот код выглядит великолепно, в чем проблема? Вы довольно скромны (в хорошем смысле слова), ваш код выглядит довольно хорошо, чего не хватает в демоверсии?

AturSams

Что касается проблем с поворотами, я имел в виду такое поведение: youtube.com/watch?v=0xr15IaOhrI . Я не смог придумать никакого другого решения, кроме как сделать много проверок if для проблемных смещений, и даже тогда есть некоторые особые случаи, когда игрок перемещается в неправильное место. Но, как я уже сказал, мне было интересно, как обычно реализуется этот вид движения, так как я не видел, чтобы метод, который я придумал, использовался где-либо еще.

xtr486

Ответы:

Прежде всего, я предлагаю вам изменить направление с: W - вверх-влево S - вниз-вправо A - вниз-влево D - сверху-справа

в более интуитивный: W - вверх S - вниз A - влево D - вправо

Что касается вас, я предлагаю вам сделать две функции, одну из которых переводить изометрические координаты плитки в координаты сетки, а другую - наоборот. Таким образом, вы можете просто отделить MVC, и это сделает вашу жизнь проще при вычислении активной плитки: введите описание изображения здесь

Маркус фон Броади
источник

Ваш ответ выглядит действительно многообещающим, но я признаю, что большая часть его просто идет мне на ум. Однако я постараюсь продолжить переваривание вашего решения в течение следующих нескольких дней. Это где-то близко к тому, что вы были после? jsfiddle.net/Sd4ZP/18 У него есть некоторые логические ошибки (по одному и т. д.) и тому подобное, но, насколько я знаю, нисходящие и изометрические карты имеют одинаковое движение. То, чего я даже не понял, - как перевести смещение плитки сверху вниз в изометрию ...

xtr486

Это выглядит хорошо до сих пор! Я посмотрю на это вечером. Дело в том, чтобы применить преобразования в изометрическом методе рисования плиток в функцию перевода positionToUser () и инвертировать его в методе positionFromUser ().

Маркус фон Броади

Я вижу проблему: вы рисуете изометрический вид, помещая изображения вместо использования API рисования на холсте. Это вполне логично, так как в итоге ваши изо-плитки будут намного больше, чем сплошной цвет. Однако для отладки вы также должны рисовать линии между плитками, которые значительно облегчат вашу жизнь. Во всяком случае, я раздвоил ваш код и создал функцию перевода positionToUser (x, y). Проверьте это, центрируя черный квадрат на плитке (потому что в режиме iso он всегда центрирован) и перемещая мышь над нижним холстом - переведенная точка будет показана на холсте izo

Markus von Broady

Спасибо! Мне действительно удалось вывести (ну, в некотором роде) что-то самому, а именно изометрическое смещение в функции drawIsometric. Теперь это выглядит так: jsfiddle.net/P2eKF/4 , который, кажется, выполняет то, что я задал в первоначальном вопросе, поэтому я отмечу ваш ответ. :)

xtr486

Я рад, что ты сделал это! Мне нравится, как комбинации клавиш WA, WD, AS, SD выравнивают движение по изометрическим осям вместо углов 45 градусов. Хорошая работа.

Маркус фон Броади

Если я понимаю, вы хотите, чтобы игрок переместил плитку на плитку, но без прыжков. Вы можете:

1 - начать с тайла t0 и смещения 0

2- Когда игрок переходит на тайл t1, установите смещение = - (t1 - t0)

3- В обновлении проигрывателя, если смещение не равно 0, уменьшите, используя время обновления и скорость проигрывателя.

amount = deltatime * playerSpeed
deltaoff = sqrt(offsetX*offsetX + offsetY*offsetY)
total = min( amount, deltaoff )
offsetX = offsetX - (total * offsetX / deltaoff)
offsetY = offsetY - (total * offsetY / deltaoff)

4- Йо может использовать проверку смещения == 0, чтобы узнать, когда игрок находится на тайле.

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

Zhen
источник