Зоны ввода и маски ввода

Phaser — это мощная библиотека для разработки 2D-игр на JavaScript, которая поддерживает различные способы взаимодействия пользователя с объектами на сцене. Одним из ключевых элементов пользовательского интерфейса являются зоны ввода (Input Zones). Они представляют собой невидимые или видимые области, реагирующие на действия пользователя, такие как клики, касания или наведение мыши.

В Phaser зоны ввода создаются с помощью метода this.add.zone(x, y, width, height). При этом зона сама по себе не отображает графику, но может быть активирована для обработки событий:

const zone = this.add.zone(400, 300, 200, 150).setInteractive();
zone.on('pointerdown', function (pointer) {
    console.log('Зона была нажата');
});

Ключевые моменты при работе с зонами ввода:

  • Позиция и размер: координаты (x, y) задают центр зоны, а width и height — её размеры.
  • Метод setInteractive(): делает зону способной реагировать на пользовательский ввод.
  • События: pointerdown, pointerup, pointerover, pointerout, pointermove позволяют обрабатывать все виды взаимодействий с мышью или касанием.

Зоны ввода могут быть использованы не только для кликов, но и для создания сложных UI-элементов, таких как кнопки, панели, игровые поля и интерактивные объекты.

Обработка клавиатуры

Phaser предоставляет мощный механизм работы с клавишами через объект this.input.keyboard. Для базового отслеживания нажатий клавиш создаются объекты Key:

const cursors = this.input.keyboard.createCursorKeys();

if (cursors.left.isDown) {
    player.x -= 5;
} else if (cursors.right.isDown) {
    player.x += 5;
}

Особенности клавиатурного ввода:

  • this.input.keyboard.createCursorKeys() создаёт объект с предустановленными стрелками и пробелом.
  • Метод this.input.keyboard.addKey('W') позволяет отслеживать конкретные клавиши.
  • События keydown и keyup дают возможность реагировать на отдельные действия, включая сочетания клавиш.

Поля ввода текста

Phaser не предоставляет встроенных HTML-подобных полей ввода, но текстовое взаимодействие можно организовать через сочетание зоны ввода и объектов Text. Простейшая реализация текстового поля выглядит так:

const inputZone = this.add.zone(400, 300, 300, 50).setInteractive();
let inputText = '';
const displayText = this.add.text(400, 300, '', { fontSize: '24px', color: '#ffffff' }).setOrigin(0.5);

inputZone.on('pointerdown', () => {
    this.input.keyboard.once('keydown', function (event) {
        inputText += event.key;
        displayText.setText(inputText);
    });
});

Основные подходы при создании текстовых полей:

  • Текст обновляется с каждым событием keydown.
  • Визуальная зона ввода создаётся через this.add.zone.
  • Позиционирование текста и зоны должно совпадать для точного взаимодействия.

Для многострочного текста используется объект BitmapText или несколько объектов Text, что позволяет управлять стилем и форматированием более гибко.

Маски ввода

Маски ввода применяются для ограничения пользовательского ввода, например, при создании формата даты или номера телефона. В Phaser маска реализуется через фильтрацию события keydown или через модификацию строки перед отображением:

const allowedChars = '0123456789';
inputZone.on('pointerdown', () => {
    this.input.keyboard.once('keydown', function (event) {
        if (allowedChars.includes(event.key)) {
            inputText += event.key;
            displayText.setText(inputText);
        }
    });
});

Принципы работы масок:

  • Используются регулярные выражения или массивы допустимых символов.
  • Любой недопустимый ввод игнорируется.
  • Маска может быть динамической, например, для изменения формата в зависимости от длины строки.

Расширенные возможности зон ввода

  1. Перетаскивание объектов:

Зоны ввода могут быть основой для drag-and-drop механики. Метод this.input.setDraggable(object) позволяет объекту следовать за указателем:

this.input.setDraggable(sprite);

sprite.on('drag', function (pointer, dragX, dragY) {
    sprite.x = dragX;
    sprite.y = dragY;
});
  1. Обработка мультитач:

Phaser поддерживает несколько касаний через события pointerdown и pointerup, предоставляя объект pointer с уникальным pointer.id.

  1. Привязка к UI:

Зоны ввода можно использовать совместно с контейнерами и группами для создания сложных интерфейсов, где кнопки, текстовые поля и элементы управления находятся в одной иерархии.

Интерактивные текстовые элементы

Комбинирование текстовых объектов с зонами ввода позволяет создавать полноценные UI-компоненты:

  • Кнопки с надписями, реагирующие на hover и click.
  • Поля ввода с ограничением символов.
  • Списки выбора, где клики по строкам изменяют состояние объекта.
const buttonText = this.add.text(400, 400, 'Начать', { fontSize: '32px', color: '#ffffff' }).setOrigin(0.5);
const buttonZone = this.add.zone(400, 400, 150, 50).setInteractive();

buttonZone.on('pointerover', () => buttonText.setColor('#ff0000'));
buttonZone.on('pointerout', () => buttonText.setColor('#ffffff'));
buttonZone.on('pointerdown', () => console.log('Кнопка нажата'));

Поддержка событий мыши и касания

Phaser обеспечивает единый интерфейс для мыши и сенсорных экранов, что позволяет использовать одни и те же зоны ввода для всех типов устройств:

  • pointerdown срабатывает при нажатии мыши или касании.
  • pointerup фиксирует отпускание.
  • pointermove отслеживает движение указателя внутри зоны.
  • pointerover и pointerout фиксируют наведение и уход указателя.

Комбинирование клавиатуры и зон ввода

Для создания полноценных форм или игровых команд часто используется комбинация клавиатурного ввода и зон:

  • Зона фиксирует активное поле ввода.
  • Клавиатура обновляет содержимое.
  • Маска и валидация применяются на лету для корректного отображения.

Такой подход позволяет строить динамичные, интерактивные интерфейсы, полностью управляемые внутри Phaser, без использования внешних HTML-элементов.

Оглавление