Плавные ходячие спрайты в HTML5 Canvas - PullRequest
Новая
       27

Плавные ходячие спрайты в HTML5 Canvas

5 голосов
/ 22 марта 2012

Я занимаюсь разработкой изометрической html5-игры на холсте (& js). Моя сетка состоит из столбцов (х) и строк (у).

В настоящее время мой игрок может проходить по карте, но он переходит с координаты на координату.

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

Так что, если вы знаете, как это сделать, или знаете статью или учебник, объясняющий это, это было бы здорово!

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

Ник Верхейен

ОБНОВЛЕНИЕ: код, который я сейчас использую, чтобы пройти моего игрока 

Player.move = function(direction)
{
 var newX = Player.positionX;
 var newY = Player.positionY;

 switch( direction )
 {
    case 'up':
        Player.moveDirection = 'up';
        newY--;
    break;
    case 'down':
        Player.moveDirection = 'down';
        newY++;
    break;
    case 'left':
        Player.moveDirection = 'left';
        newX--;
    break;
    case 'right':
        Player.moveDirection = 'right';
        newX++;
    break;
}

Player.positionX = newX;
Player.positionY = newY;
}

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

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

Ответы [ 2 ]

4 голосов
/ 29 марта 2012

Вам нужно использовать основанное на времени движение.См. Следующую статью:

Использование canvas для создания растровой анимации спрайтов в JavaScript

2 голосов
/ 27 июля 2012

Я видел ваш комментарий о том, что вы не используете Easel.js, но, возможно, он улучшился с тех пор, как вы в последний раз смотрели, поскольку у них есть 8 демонстраций, 22 мини-демонстрации и ссылки на 6 учебных пособий. (Я пока не пользователь, просто оцениваю выбор для изометрической графики)

В любом случае, если стоит взглянуть еще раз, прокрутите вниз до записи BitmapAnimation (# 18) на этой странице: http://createjs.com/#!/EaselJS/demos/apitest

...