Как синхронизировать анимацию и движение объекта (персонажа)?

Question

[Михаил Дураков]

Здравствуйте.
Пытаюсь в js canvas создать движение персонажа как в игре "Как достать соседа".
Но сколько не пытался синхронизировать движение ног со скоростью перемещения, все равно ощущается скольжение при ходьбе.
Такой вопрос:
Как в игре "Как достать соседа" реализована ходьба персонажа, или существует ли формула по которой можно как нибудь синхронизировать анимацию и перемещение объекта?

Comments

[ksnk]

Где-то во глубине своего кода я использую вот такое
- setInterval(10) - смотря насколько будет тормозить сам компьютер
- window.requestAnimationFrame - вызов функции реальной перерисовки канваса когда броузер этого сам желает

_draw - реальная перерисовка канваса

В твоем случае, возможно, нужно один раз включить permanentdraw

{ // ...
    /**
     * Инициирует непрерывную перерисовку контента. Для плавной анимации.
     */
    permanentdraw: function () {
        if (!!this._interval) return;
        this._interval = setInterval(() => anima.draw(), 10);
    },
    /**
     * останавливает анимацию
     */
    clearpermanent: function () {
        if (!this._interval) return;
        clearInterval(this._interval);
        this._interval = null;
    },

    /**
     * отложенный draw - заявка на перерисовку. Можно частить, все равно не должно тормозить
     */
    draw: function () {
        if (!this._TO) {
            let that = this;
            this._TO = window.requestAnimationFrame(function () {
                that._TO = false;
                that._draw();
            });
        }
    },


}

Ну а так - нет кода - не будет и решения...

[Михаил Дураков]

ksnk, Спасибо что ответили, попозже проверю.
Сам код:

const container = new Container();
house.addChild(container);

const player = new AnimatedSprite(animation('player'));
container.addChild(player);

//Скорость воспроизведения анимации
player.animationSpeed = 0.17;
player.play();

player.anchor.set(0.5,1);
player.x = 0;
player.y = 0;

house.eventMode = 'static';

let purpose = [player.x,player.y];
const direction = [0,0];

house.on('pointerdown',(e:any) => {
	const local = house.toLocal(e.global);
	purpose = [Math.floor(local.x),Math.floor(local.y)];

	direction[0] = (player.x < local.x)?1:-1;
	direction[1] = (player.y < local.y)?1:-1;
});

//Скорость перемещение объекта (пиксель в секунду)
speed = 2.5;

app.ticker.add((delta) =>{
	if(direction[0]>0){
		if(player.x < purpose[0]){
			player.x += speed;
		}
	}
	if(direction[0]<0){
		if(player.x > purpose[0]){
			player.x -= speed;
		}
	}
	if(direction[1]>0){
		if(player.y < purpose[1]){
			player.y += speed;
		}
	}
	if(direction[1]<0){
		if(player.y > purpose[1]){
			player.y -= speed;
		}
	}
});

[ksnk]

https://github.com/siki-aayush/plant-vs-zombies/tr...
Не оно ?

[Михаил Дураков]

ksnk, Жаль, нет. Там зомби при ходьбе скользят.

[ksnk]

dom12, В смысле ? Не "дерганная" анимация - пропуск кадров, а движение ног на совпадает со скоростью перемещения самого персонажа ? Ну дык скорость анимации самого персонажа нужно увеличить. Ну или скорость уменьшить.

[Михаил Дураков]

ksnk, В этом и проблема, я никак не могу подобрать скорость для анимации и перемещение (движение ног не совпадает со скоростью перемещения). Пытался вручную подобрать, дошёл плоть до сотых: 1,01.
Может существует формула по которой можно как нибудь синхронизировать.

[ksnk]

К примеру - есть передвижение ног, обоих. Скорость (циклическая) смены кадров анимации передвижения - 1 секунда, к примеру. За это время персонаж перемещается на расстояние (которое видно по картинке персонажа) равное двойной длине шага - расстояние от начала одной ступни, до начала другой в кадре с максимальной шириной шага. Ну а там уже можно +- подрегулировать скорости

[Михаил Дураков]

ksnk, Вроде нашёл проблему. Я снизил фпс в pixijs до 30. И теперь движение ног со скоростью перемещения стали синхронный. И теперь осталось понять как снизить фпс только у персонажа.