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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    text;
    key;

    create ()
    {
        this.key = this.input.keyboard.addKey('A');

        this.add.text(10, 10, 'Hold down the A Key', { font: '16px Courier', fill: '#00ff00' });

        this.text = this.add.text(10, 30, '', { font: '16px Courier', fill: '#00ff00' });
    }

    update ()
    {
        this.text.setText(`Duration: ${this.key.getDuration()}ms`);
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

Подготовка клавиши и текстовых полей

Вся логика примера реализована внутри сцены (Scene). Сначала нам нужно создать объект для отслеживания конкретной клавиши и вывести на экран информационные надписи.

В методе create() мы инициализируем объект this.key, который будет отслеживать состояние клавиши 'A'. Для этого используется менеджер ввода this.input.keyboard и его метод addKey().

Также создаются два текстовых объекта: статичная подсказка и динамическое поле, в котором будет отображаться результат работы метода getDuration().

create ()
{
    this.key = this.input.keyboard.addKey('A');

    this.add.text(10, 10, 'Hold down the A Key', { font: '16px Courier', fill: '#00ff00' });

    this.text = this.add.text(10, 30, '', { font: '16px Courier', fill: '#00ff00' });
}

Принцип работы метода getDuration()

Ключевой метод в этом примере — getDuration(). Он вызывается у объекта клавиши, который мы создали ранее (this.key).

Этот метод возвращает количество миллисекунд, прошедших с момента, когда клавиша была нажата и удерживается до сих пор. Если клавиша в данный момент отпущена, метод вернет `0`. Таким образом, значение динамически меняется в реальном времени, пока клавиша зажата.

Нет необходимости вручную засекать время с помощью Date.now() или this.time.now. Phaser делает это автоматически и предоставляет готовый результат.

Обновление данных в реальном времени

Чтобы значение продолжительности нажатия постоянно отображалось на экране, его необходимо обновлять каждый кадр. Для этого идеально подходит метод update() сцены, который вызывается игровым циклом Phaser.

Внутри update() мы берем текущее значение от this.key.getDuration() и с помощью метода setText() динамического текстового поля (this.text) выводим его на экран.

update ()
{
    this.text.setText(`Duration: ${this.key.getDuration()}ms`);
}

На экране вы увидите постоянно меняющуюся надпись, например: "Duration: 1250ms", которая обнулится, как только вы отпустите клавишу 'A'.

Конфигурация и запуск игры

Весь описанный функционал упакован в сцену Example. Для запуска игры необходимо создать стандартную конфигурацию Phaser, указав эту сцену, и инстанцировать объект Game.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

Эта минимальная конфигурация создаст игровое поле размером 800x600 пикселей и запустит сцену с нашим примером.

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

Метод getDuration() — это мощный и простой способ добавить в вашу игру механики, зависящие от времени удержания клавиши. Он избавляет разработчика от необходимости вести ручной подсчет времени, предоставляя точные данные напрямую из системы ввода Phaser. **Идеи для экспериментов:** 1. Используйте возвращаемое значение для масштабирования силы прыжка или скорости бега персонажа. 2. Реализуйте зарядку выстрела: чем дольше удерживается клавиша, тем мощнее выпущенный снаряд. 3. Создайте прогресс-бар, который заполняется пропорционально времени удержания клавиши, визуализируя процесс зарядки способности.