О чем этот пример
Обработка ввода с клавиатуры — одна из базовых механик в играх. Часто нужно отслеживать состояние не одной, а сразу нескольких клавиш. Вручную создавать объекты для каждой клавиши может быть утомительно. Phaser предлагает элегантное решение: метод `addKeys`, который позволяет создать набор объектов клавиш из простой строки с их кодами. Этот подход делает код чище, уменьшает количество повторений и упрощает управление сложными схемами управления. В этой статье мы разберем, как это работает на практическом примере.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
text;
imageR;
imageE;
imageS;
imageA;
imageH;
imageP;
keys;
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('P', 'assets/input/p.png');
this.load.image('H', 'assets/input/h.png');
this.load.image('A', 'assets/input/a.png');
this.load.image('S', 'assets/input/s.png');
this.load.image('E', 'assets/input/e.png');
this.load.image('R', 'assets/input/r.png');
}
create ()
{
this.imageP = this.add.image(50, 300, 'P').setOrigin(0);
this.imageH = this.add.image(200, 300, 'H').setOrigin(0);
this.imageA = this.add.image(350, 300, 'A').setOrigin(0);
this.imageS = this.add.image(500, 300, 'S').setOrigin(0);
this.imageE = this.add.image(650, 300, 'E').setOrigin(0);
this.imageR = this.add.image(800, 300, 'R').setOrigin(0);
this.keys = this.input.keyboard.addKeys('P,H,A,S,E,R');
this.text = this.add.text(10, 10, 'Press one of the keys P, H, A, S, E or R', { font: '16px Courier', fill: '#000000' });
}
update ()
{
this.imageP.setAlpha((this.keys.P.isDown) ? 1 : 0.2);
this.imageH.setAlpha((this.keys.H.isDown) ? 1 : 0.2);
this.imageA.setAlpha((this.keys.A.isDown) ? 1 : 0.2);
this.imageS.setAlpha((this.keys.S.isDown) ? 1 : 0.2);
this.imageE.setAlpha((this.keys.E.isDown) ? 1 : 0.2);
this.imageR.setAlpha((this.keys.R.isDown) ? 1 : 0.2);
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
backgroundColor: '#efefef',
scene: Example
};
const game = new Phaser.Game(config);
Загрузка ресурсов и подготовка сцены
В классе сцены Example определены свойства для хранения текста, изображений букв и объекта keys, который будет содержать наши клавиши.
В методе preload загружаются шесть изображений, каждое из которых соответствует букве (P, H, A, S, E, R). Обратите внимание на базовый URL, который указывает на репозиторий с примерами.
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('P', 'assets/input/p.png');
this.load.image('H', 'assets/input/h.png');
this.load.image('A', 'assets/input/a.png');
this.load.image('S', 'assets/input/s.png');
this.load.image('E', 'assets/input/e.png');
this.load.image('R', 'assets/input/r.png');
}Создание объектов и настройка ввода
Метод create выполняет первоначальную настройку сцены. Сначала мы расставляем изображения букв на экране с помощью this.add.image. Каждому изображению задается точка отсчета (origin) в (0,0), то есть в его левом верхнем углу, для удобства позиционирования.
Затем происходит самое важное: создание набора клавиш. Метод this.input.keyboard.addKeys принимает строку с кодами клавиш, разделенными запятыми, и возвращает объект. В этом объекте ключами будут переданные коды (например, 'P'), а значениями — объекты Key, отслеживающие состояние соответствующей клавиши.
create ()
{
this.imageP = this.add.image(50, 300, 'P').setOrigin(0);
this.imageH = this.add.image(200, 300, 'H').setOrigin(0);
this.imageA = this.add.image(350, 300, 'A').setOrigin(0);
this.imageS = this.add.image(500, 300, 'S').setOrigin(0);
this.imageE = this.add.image(650, 300, 'E').setOrigin(0);
this.imageR = this.add.image(800, 300, 'R').setOrigin(0);
this.keys = this.input.keyboard.addKeys('P,H,A,S,E,R');
this.text = this.add.text(10, 10, 'Press one of the keys P, H, A, S, E or R', { font: '16px Courier', fill: '#000000' });
}Обработка ввода в реальном времени
Логика реакции на нажатия клавиш реализована в методе update, который вызывается на каждом кадре игры.
Для каждого изображения буквы мы проверяем состояние соответствующего объекта клавиши в this.keys. Свойство isDown объекта Key возвращает true, если клавиша в данный момент нажата.
С помощью тернарного оператора мы меняем альфа-канал (прозрачность) изображения: если клавиша нажата (isDown равно true), альфа устанавливается в 1 (полная непрозрачность), иначе — в 0.2 (сильная прозрачность). Это создает простой визуальный эффект подсветки активной клавиши.
update ()
{
this.imageP.setAlpha((this.keys.P.isDown) ? 1 : 0.2);
this.imageH.setAlpha((this.keys.H.isDown) ? 1 : 0.2);
this.imageA.setAlpha((this.keys.A.isDown) ? 1 : 0.2);
this.imageS.setAlpha((this.keys.S.isDown) ? 1 : 0.2);
this.imageE.setAlpha((this.keys.E.isDown) ? 1 : 0.2);
this.imageR.setAlpha((this.keys.R.isDown) ? 1 : 0.2);
}Конфигурация и запуск игры
Сцена готова, осталось настроить и запустить саму игру Phaser. Объект config определяет основные параметры: тип рендерера, родительский HTML-элемент, цвет фона и главную сцену.
Затем создается экземпляр игры new Phaser.Game(config), который инициализирует все системы и запускает игровой цикл.
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
backgroundColor: '#efefef',
scene: Example
};
const game = new Phaser.Game(config);Ключевые моменты API
В этом примере используются несколько важных методов Phaser:
* `this.input.keyboard.addKeys('P,H,A,S,E,R')` – ядро примера. Создает объект с клавишами по их строковым кодам. Коды соответствуют физическим клавишам на клавиатуре. Можно использовать и другие коды, например, 'SPACE', 'UP', 'W'.
* `this.keys.P.isDown` – свойство объекта `Key`, которое позволяет проверять, нажата ли клавиша в текущем кадре.
* `image.setAlpha(value)` – метод для изменения прозрачности любого игрового объекта, поддерживающего отображение (Sprite, Image, Text). Значение от 0 (полностью прозрачно) до 1 (полностью непрозрачно).Использование addKeys особенно удобно для настройки управления персонажем (например, клавиши WASD или стрелки) или быстрого создания прототипов с множеством интерактивных клавиш.
Что попробовать дальше
Метод addKeys — это мощный инструмент для быстрой настройки управления с клавиатуры в Phaser. Он избавляет от рутины и делает код более читаемым.
**Идеи для экспериментов:**
1. Замените буквы на коды стрелок ('UP', 'DOWN', 'LEFT', 'RIGHT') и управляйте спрайтом на экране.
2. Создайте комбинации клавиш: проверяйте состояние нескольких isDown одновременно, чтобы активировать особое действие (например, if (this.keys.SHIFT.isDown && this.keys.F.isDown)).
3. Используйте разные визуальные эффекты вместо изменения альфы: масштабируйте изображение, меняйте его tint (оттенок) или добавляйте анимацию при нажатии.