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

Управление в игре часто не ограничивается нажатием одной клавиши. Для сложных действий, таких как применение усиления, быстрая перезарядка или активация особого режима, игроки ожидают использовать комбинации клавиш. В Phaser 3 объект события клавиатуры содержит всю необходимую информацию о нажатых модификаторах. Эта статья покажет, как легко и эффективно отслеживать комбинации вроде Ctrl+A или Shift+W, чтобы сделать управление вашей игрой более гибким и профессиональным.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        this.input.keyboard.on('keydown_A', event =>
        {

            if (event.ctrlKey)
            {
                console.log('A + CTRL');
            }
            else if (event.altKey)
            {
                console.log('A + ALT');
            }
            else if (event.shiftKey)
            {
                console.log('A + Shift');
            }
            else
            {
                console.log('A without modifier');
            }

        });
    }
}

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

const game = new Phaser.Game(config);

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

В Phaser 3 вы можете подписаться на событие нажатия конкретной клавиши, используя this.input.keyboard.on. В качестве имени события используется строка формата keydown_ + KEY. Это избавляет от необходимости вручную проверять код клавиши в обработчике общего события.

this.input.keyboard.on('keydown_A', (event) => {
    // Обработчик для клавиши A
});

Доступ к свойствам модификаторов

Колбэк-функция получает объект события клавиатуры. У этого объекта есть три ключевых булевых свойства, которые показывают, была ли нажата клавиша-модификатор вместе с основной: * event.ctrlKey * event.altKey * event.shiftKey

Эти свойства уже содержат результат проверки состояния клавиш Ctrl, Alt и Shift на момент события. Вам не нужно отслеживать их состояние отдельно.

Практическая реализация и логика проверки

Для корректной обработки комбинаций важно выстроить условия в правильном порядке. Обычно сначала проверяют самые специфичные комбинации (с несколькими модификаторами), но в базовом случае, как в примере, используется цепочка if...else if. Это гарантирует, что будет выполнен только один блок кода для одной комбинации.

if (event.ctrlKey) {
    console.log('A + CTRL');
} else if (event.altKey) {
    console.log('A + ALT');
} else if (event.shiftKey) {
    console.log('A + Shift');
} else {
    console.log('A without modifier');
}

Весь этот код размещается внутри обработчика события keydown_A.

Собираем всё в сцене

Логику обработки ввода рекомендуется инициализировать в методе create() сцены. Это обеспечивает готовность системы ввода к моменту начала игрового процесса.

class Example extends Phaser.Scene {
    create() {
        this.input.keyboard.on('keydown_A', (event) => {
            // ... вся логика с if/else из предыдущей секции
        });
    }
}

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

Использование свойств ctrlKey, altKey и shiftKey — это стандартный и надежный способ обработки комбинаций клавиш в Phaser. Он делает код чистым и легко расширяемым. Для экспериментов попробуйте

  1. Обрабатывать комбинации с двумя модификаторами одновременно (например, Ctrl+Shift), добавив условие if (event.ctrlKey && event.shiftKey)
  2. Назначить разные действия для одной клавиши в зависимости от модификатора, например, Shift для бега, а Ctrl для прицеливания
  3. Вынести логику проверки в отдельную функцию для удобства повторного использования на разных клавишах