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

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

Обработка ввода с клавиатуры — фундамент для управления в игре. Часто нужно реагировать на конкретные клавиши, используя `this.input.keyboard.addKey()`. Но что, если вашей логике требуется знать о *любом* нажатии, независимо от клавиши? Например, для системных вызовов, паузы, скриншотов или отладки. В этой статье разберем, как использовать глобальное событие `keydown` в Phaser. Этот подход полезен, когда нужно перехватить все нажатия, чтобы обработать их централизованно, до или вместо конкретных обработчиков клавиш.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {

        //  Receives every single key down event, regardless of origin or key

        this.input.keyboard.on('keydown', event =>
        {

            console.dir(event);

        });

    }
}

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

const game = new Phaser.Game(config);

В чем разница: глобальное событие vs. обработка конкретной клавиши

Обычно в Phaser управление привязывают к конкретным клавишам. Вы создаете объект ключа и слушаете его состояние.

// Стандартный способ: отслеживание конкретной клавиши (Пробел)
const spaceBar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
if (spaceBar.isDown) {
    // Персонаж прыгает
}

Глобальное событие keydown работает иначе. Оно срабатывает при *любом* нажатии клавиши на клавиатуре и передает объект события. Это не заменяет стандартное управление, а дополняет его для особых случаев, где важнее факт нажатия, а не конкретная клавиша.

Как подключить глобальный слушатель keydown

Подписка на событие делается через свойство keyboard объекта this.input. Используйте метод on().

create () {
    //  Получаем каждое событие keydown, независимо от источника или клавиши
    this.input.keyboard.on('keydown', event => {
        console.dir(event);
    });
}

Ключевой момент: колбэк-функция выполнится для каждого нажатия. Параметр event — это нативный объект события клавиатуры (KeyboardEvent), содержащий всю информацию: код клавиши (event.code), символ (event.key), были ли зажаты модификаторы (Shift, Ctrl) и так далее.

Что внутри объекта события (event) и как это использовать

Объект event — ваш основной источник информации. Его полезные свойства для игровой логики:

* event.key: Символ клавиши (например, 'a', 'ArrowUp', ' ' для пробела). Учитывает раскладку (для одной физической клавиши может быть разный символ). * event.code: Физический код клавиши, не зависящий от раскладки (например, 'KeyA', 'ArrowUp', 'Space'). Надежнее для управления. * event.ctrlKey, event.shiftKey, event.altKey: Флаги, показывающие, были ли нажаты соответствующие модификаторы.

this.input.keyboard.on('keydown', event => {
    // Пример: делаем скриншот по комбинации Ctrl + S
    if (event.key === 's' && event.ctrlKey) {
        this.game.renderer.snapshot((image) => {
            // ... обработка изображения
        });
    }

    // Пример: пауза игры по нажатию на любую клавишу из списка
    const pauseKeys = ['Escape', 'KeyP', 'p'];
    if (pauseKeys.includes(event.code) || pauseKeys.includes(event.key)) {
        this.scene.pause();
    }
});

Важные нюансы и предостережения

1. **Один слушатель на сцену**: Не создавайте множество слушателей keydown в одном create(). Это может привести к дублированию обработки. Одного достаточно. 2. **Не для основного геймплея**: Для платформера или шутера используйте addKey. Глобальный keydown может быть менее отзывчивым для быстрых повторных нажатий (из-за задержок автоповтора ОС). 3. **Остановка распространения**: Внутри обработчика можно вызвать event.stopPropagation(), чтобы предотвратить дальнейшую обработку события браузером (например, прокрутку страницы при нажатии пробела).

this.input.keyboard.on('keydown', event => {
    // Запрещаем прокрутку страницы пробелом и стрелками в нашей игре
    if (['Space', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
        event.preventDefault();
        event.stopPropagation();
    }
    // Далее ваша игровая логика...
});

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

Глобальный обработчик keydown — мощный инструмент для системных и отладочных функций в вашей игре на Phaser. Он идеально подходит для перехвата комбинаций клавиш (Ctrl+S, Alt+Enter), активации читов через ввод последовательности символов или создания интерактивной консоли отладки. **Идеи для экспериментов:** 1. Создайте систему "быстрых сохранений" на F5-F9. 2. Реализуйте активацию бонусов ("god mode") по секретному слову, вводимому с клавиатуры. 3. Сделайте переключение графических режимов или overlay статистики по нажатию тильды (`).