Как сделать спрайт с фиксированным расстоянием перемещения в Фазере - PullRequest
Новая
       14

Как сделать спрайт с фиксированным расстоянием перемещения в Фазере

0 голосов
/ 07 января 2019

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

Теперь я двигаю игрока на клавиатуре, используя скорость, затем сбрасываю скорость на 0 на update, чтобы не было инерции. 

 function update(){

    this.player.body.velocity.x = 0
    this.player.body.velocity.y = 0

    if(this.keyIsLeft){
      this.player.body.velocity.x -= 200
    }
    else if(this.keyIsRight){
      this.player.body.velocity.x += 200
    }
    else if(this.keyIsUp){
      this.player.body.velocity.y -= 200
    }
    else if(this.keyIsDown){
      this.player.body.velocity.y += 200
    }

Но как я могу заставить игрока перемещать только квадрат (или половину) за раз?

Идеальное движение показано здесь в этой игре Лоло, где в любой момент времени игрок находится в сетке или в полусетке: https://www.youtube.com/watch?v=QQKScIJYUxU&t=5m30s

Я не могу просто установить положение x и y или использовать анимацию движения, потому что мне нужно сохранять физику аркад, и эти настройки мешают им.

1 Ответ

0 голосов
/ 18 января 2019

Обновлен: Вот мой обновленный ответ, чтобы решить это дело. Я реализовал этот метод на основе примера, предоставленного Phaser. Ключевым моментом для выполнения этого фиксированного движения является отключение ввода с клавиатуры во время движения элемента.

Допустим, если вы нажали left, player сместится влево. В то время как player начинает двигаться, вы устанавливаете переменную notMoving в значение false, что уведомляет функцию update о том, что курсор не принимает никаких вводов. После тайм-аута, скажем, 1000 мс, вы можете установить для переменной notMoving значение true. Затем функция update продолжит ввод курсора.

Вот пример кода: 

function create ()
{
    cursors = this.input.keyboard.createCursorKeys();
    player = this.physics.add.image(400, 300, 'block');
    player.setCollideWorldBounds(true);
    player.setData('notMoving', true);

}

function setfixedMovement(velocity, direction) {
    if (direction === 'up') {
        player.setVelocityY(-velocity);
    } else if (direction === 'down') {
        player.setVelocityY(velocity);
    } else if (direction === 'left') {
        player.setVelocityX(-velocity);
    } else {
        player.setVelocityX(velocity);
    }
    player.setData('notMoving', false);
    setTimeout(() => {
        player.setData('notMoving', true);
    }, 1000);
}

function update () {
    if (player.getData('notMoving')) {
        player.setVelocity(0);
        if (cursors.left.isDown) {   
            setfixedMovement(300, 'left');
        } else if (cursors.right.isDown) {
            setfixedMovement(300, 'right');
        }

        if (cursors.up.isDown) {
            setfixedMovement(300, 'up');
        } else if (cursors.down.isDown) {
            setfixedMovement(300, 'down');
        }
    }
}

Я поместил ссылку на пример фазера в предыдущем ответе. Если вы отредактируете пример и замените часть кода примера приведенным выше фрагментом кода, вы увидите, что он работает так, как вы ожидали.

Предыдущий ответ :

Я думаю, что этот пример фазера делает именно то, что вы хотите

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

function update ()
    { player.setVelocity(0);

    if (cursors.left.isDown)
    {
        player.setVelocityX(-300);
    }
    else if (cursors.right.isDown)
    {
        player.setVelocityX(300);
    }

    if (cursors.up.isDown)
    {
        player.setVelocityY(-300);
    }
    else if (cursors.down.isDown)
    {
        player.setVelocityY(300);
    }
}

Вот ссылка на пример https://labs.phaser.io/view.html?src=src\input\keyboard\cursor%20keys.js

...