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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.spritesheet('bobs', 'assets/sprites/bobs-by-cleathley.png', { frameWidth: 32, frameHeight: 32 });
    }

    create ()
    {
        this.input.keyboard.on('keydown-NUMPAD_ZERO', function ()
        {
            this.add.image(0, 0, 'bobs', 0).setRandomPosition();
        }, this);

        this.input.keyboard.on('keydown-NUMPAD_ONE', function ()
        {
            this.add.image(0, 0, 'bobs', 8).setRandomPosition();
        }, this);

        this.input.keyboard.on('keydown-NUMPAD_TWO', function ()
        {
            this.add.image(0, 0, 'bobs', 16).setRandomPosition();
        }, this);

        this.input.keyboard.on('keydown-NUMPAD_THREE', function ()
        {
            this.add.image(0, 0, 'bobs', 24).setRandomPosition();
        }, this);

        this.input.keyboard.on('keydown-NUMPAD_FOUR', function ()
        {
            this.add.image(0, 0, 'bobs', 32).setRandomPosition();
        }, this);

        this.input.keyboard.on('keydown-NUMPAD_FIVE', function ()
        {
            this.add.image(0, 0, 'bobs', 48).setRandomPosition();
        }, this);

        this.input.keyboard.on('keydown-NUMPAD_SIX', function ()
        {
            this.add.image(0, 0, 'bobs', 80).setRandomPosition();
        }, this);

        this.input.keyboard.on('keydown-NUMPAD_SEVEN', function ()
        {
            this.add.image(0, 0, 'bobs', 52).setRandomPosition();
        }, this);

        this.input.keyboard.on('keydown-NUMPAD_EIGHT', function ()
        {
            this.add.image(0, 0, 'bobs', 60).setRandomPosition();
        }, this);

        this.input.keyboard.on('keydown-NUMPAD_NINE', function ()
        {
            this.add.image(0, 0, 'bobs', 68).setRandomPosition();
        }, this);

        this.add.text(10, 10, 'Press any numpad button', {fontSize: '20px'});
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    pixelArt: true,
    scene: Example
};

const game = new Phaser.Game(config);

Загрузка ресурсов и основа сцены

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

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.spritesheet('bobs', 'assets/sprites/bobs-by-cleathley.png', { frameWidth: 32, frameHeight: 32 });
}

Метод this.load.spritesheet принимает ключ 'bobs', путь к файлу и объект конфигурации, где frameWidth и frameHeight задают размер каждого отдельного кадра. После загрузки мы сможем обращаться к любому кадру по его индексу.

Слушаем события клавиатуры

Основная логика находится в методе create. Для обработки ввода с клавиатуры Phaser предоставляет объект this.input.keyboard. Его метод on позволяет подписаться на событие нажатия конкретной клавиши.

this.input.keyboard.on('keydown-NUMPAD_ZERO', function ()
{
    this.add.image(0, 0, 'bobs', 0).setRandomPosition();
}, this);

Ключевой момент — имя события. Для цифровой клавиатуры используется префикс 'keydown-NUMPAD_', за которым следует обозначение клавиши (например, ZERO, ONE, EIGHT). Когда такое событие происходит, выполняется переданная функция-обработчик. Обратите внимание на третий аргумент this в вызове on. Он задаёт контекст выполнения для функции-обработчика, чтобы внутри неё this указывал на текущую сцену, а не на объект клавиатуры.

Создание спрайтов и их размещение

Внутри каждого обработчика создаётся и размещается на сцене графический объект.

this.add.image(0, 0, 'bobs', 0).setRandomPosition();

Разберём эту цепочку вызовов: 1. this.add.image(0, 0, ...) создаёт объект изображения (Image). Первые два аргумента (0, 0) — это начальные координаты, которые будут сразу перезаписаны. 2. Третий аргумент 'bobs' — ключ загруженного спрайтшита. 3. Четвёртый аргумент — индекс кадра в этом спрайтшите. Например, 0, 8, 16. Это позволяет разным кнопкам создавать спрайты с разной внешностью. 4. .setRandomPosition() — метод, который моментально перемещает созданный спрайт в случайную точку в пределах игровой сцены. Это делает демонстрацию наглядной.

От теории к практике: полная настройка сцены

Весь код создания сцены и инициализации игры выглядит следующим образом. Обратите внимание, как для каждой клавиши Numpad от 0 до 9 назначается свой обработчик с уникальным индексом кадра.

create ()
{
    // Обработчики для клавиш NUMPAD 0-9
    this.input.keyboard.on('keydown-NUMPAD_ZERO', function () { /* ... */ }, this);
    this.input.keyboard.on('keydown-NUMPAD_ONE', function () { /* ... */ }, this);
    // ... аналогично для клавиш TWO, THREE и т.д.
    this.input.keyboard.on('keydown-NUMPAD_NINE', function () { /* ... */ }, this);

    this.add.text(10, 10, 'Press any numpad button', {fontSize: '20px'});
}

В конце метода создаётся текстовое поле с подсказкой для пользователя. Конфигурация игры (config) включает важный параметр pixelArt: true, который отключает сглаживание для пиксельной графики, сохраняя её чёткий вид.

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

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

  1. Привязать к Numpad не создание, а перемещение или атаку главного героя
  2. Использовать событие 'keyup' (например, 'keyup-NUMPAD_ONE') для действий при отпускании клавиши
  3. Комбинировать нажатия Numpad с клавишами-модификаторами (Shift, Ctrl) для расширения количества действий