Phaser.js: всё об играх и разработке

О чем этот пример

При разработке игр часто возникает необходимость контролировать скорость реакции на ввод игрока. Например, чтобы персонаж перемещался с фиксированным интервалом при удержании клавиши, а не "телепортировался" каждый кадр. Встроенный метод `checkDown` из Phaser 3 позволяет легко реализовать такую задержку, улучшая игровой процесс и давая разработчикам точный контроль над перемещением объектов. Эта статья покажет, как использовать этот метод на практике.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    player;
    cursors;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('block', 'assets/sprites/block.png');
    }

    create ()
    {
        this.cursors = this.input.keyboard.createCursorKeys();

        this.player = this.add.image(400, 300, 'block');
    }

    update ()
    {
        //  Horizontal movement every 250ms
        if (this.input.keyboard.checkDown(this.cursors.left, 250))
        {
            this.player.x -= 32;
        }
        else if (this.input.keyboard.checkDown(this.cursors.right, 250))
        {
            this.player.x += 32;
        }

        //  Vertical movement every 150ms
        if (this.input.keyboard.checkDown(this.cursors.up, 150))
        {
            this.player.y -= 32;
        }
        else if (this.input.keyboard.checkDown(this.cursors.down, 150))
        {
            this.player.y += 32;
        }
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    backgroundColor: '#0072bc',
    scene: Example
};

const game = new Phaser.Game(config);

Суть метода `keyboard.checkDown()`

Основной инструмент для решения задачи — метод this.input.keyboard.checkDown(). В отличие от простой проверки состояния клавиши, этот метод учитывает время, прошедшее с момента последнего успешного срабатывания.

Метод принимает два аргумента: объект клавиши и время задержки в миллисекундах. Он возвращает true только в том случае, если клавиша нажата И с момента последнего возврата true для этой же клавиши прошло больше указанного времени.

if (this.input.keyboard.checkDown(this.cursors.left, 250))
{
    // Код выполнится не чаще, чем раз в 250 мс
}

Настройка сцены и создание контролов

Перед использованием ввода необходимо подготовить сцену. В методе preload() загружается спрайт, а в create() инициализируются курсорные клавиши и создается игровой объект.

Курсорные клавиши (cursors) — это специальный объект, содержащий ссылки на четыре клавиши-стрелки. Он создается один раз и используется для проверки ввода в каждом кадре.

create ()
{
    this.cursors = this.input.keyboard.createCursorKeys();
    this.player = this.add.image(400, 300, 'block');
}

Реализация перемещения с разной скоростью

Логика перемещения помещается в метод update(), который вызывается на каждом кадре игры. Здесь применяется метод checkDown с разными задержками для горизонтального и вертикального движения, что делает управление более гибким.

Персонаж будет двигаться по горизонтали каждые 250 мс, а по вертикали — каждые 150 мс. Это наглядно демонстрирует, как можно задавать разную "скорость" реакции для разных действий.

update ()
{
    //  Движение по горизонтали каждые 250 мс
    if (this.input.keyboard.checkDown(this.cursors.left, 250))
    {
        this.player.x -= 32;
    }
    else if (this.input.keyboard.checkDown(this.cursors.right, 250))
    {
        this.player.x += 32;
    }

    //  Движение по вертикали каждые 150 мс
    if (this.input.keyboard.checkDown(this.cursors.up, 150))
    {
        this.player.y -= 32;
    }
    else if (this.input.keyboard.checkDown(this.cursors.down, 150))
    {
        this.player.y += 32;
    }
}

Что попробовать дальше

Метод keyboard.checkDown() — это простой и мощный способ ввести квантованное управление в вашу игру. Он идеально подходит для пошаговых перемещений, скорострельности оружия с ограниченным темпом или любых действий, которые не должны повторяться каждый кадр. Для экспериментов попробуйте привязать задержку к характеристикам персонажа (например, скорость атаки) или сделать её динамической, изменяющейся в ходе игры.