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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const button = this.add.text(400, 300, 'Play Game', {
            fontFamily: 'Arial',
            fontSize: '32px',
            color: '#ffffff',
            align: 'center',
            fixedWidth: 260,
            backgroundColor: '#2d2d2d'
        }).setPadding(32).setOrigin(0.5);

        button.setInteractive({ useHandCursor: true });

        button.on('pointerover', () => {
            button.setBackgroundColor('#8d8d8d');
        });

        button.on('pointerout', () => {
            button.setBackgroundColor('#2d2d2d');
        });
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

Создание базового текстового объекта

Первым шагом является создание текстового игрового объекта с помощью метода this.add.text(). Этот метод принимает координаты X и Y, строку текста и объект стиля.

В нашем примере мы сразу задаем ключевые свойства стиля: семейство шрифта, размер, цвет, выравнивание, фиксированную ширину и фоновый цвет. Это превращает текст в визуально оформленную область.

const button = this.add.text(400, 300, 'Play Game', {
    fontFamily: 'Arial',
    fontSize: '32px',
    color: '#ffffff',
    align: 'center',
    fixedWidth: 260,
    backgroundColor: '#2d2d2d'
}).setPadding(32).setOrigin(0.5);

Методы .setPadding(32) и .setOrigin(0.5) вызываются цепочкой. Паддинг добавляет внутренние отступы, делая область фона больше, а установка точки привязки (origin) в центр (0.5) позволяет легко позиционировать кнопку, так как теперь ее центр находится в указанных координатах (400, 300).

Добавление интерактивности

Чтобы объект мог реагировать на ввод пользователя, ему необходимо добавить интерактивную зону. Это делается с помощью метода .setInteractive().

button.setInteractive({ useHandCursor: true });

Передача опции { useHandCursor: true } указывает системе, что при наведении курсора на объект его вид должен меняться на значок «руки», что является стандартным визуальным признаком кликабельного элемента. Без вызова этого метода объект не будет генерировать события ввода.

Обработка событий наведения курсора

Phaser использует событийную модель. На интерактивный объект можно подписаться на различные события, такие как pointerover (курсор наведен) и pointerout (курсор убран).

В обработчике события pointerover мы меняем цвет фона кнопки на более светлый, создавая эффект подсветки.

button.on('pointerover', () => {
    button.setBackgroundColor('#8d8d8d');
});

Когда курсор покидает область кнопки (pointerout), мы возвращаем исходный цвет фона.

button.on('pointerout', () => {
    button.setBackgroundColor('#2d2d2d');
});

Метод setBackgroundColor() — это встроенный метод текстового игрового объекта Phaser, который позволяет динамически менять его фоновый цвет.

Добавление реакции на клик

В исходном примере реакция на клик не реализована, но это логичное продолжение. Для этого нужно подписаться на событие pointerdown (кнопка мыши нажата) или pointerup (кнопка мыши отпущена).

Вот как можно добавить простую обработку клика, которая, например, выводит сообщение в консоль:

button.on('pointerdown', () => {
    console.log('Кнопка "Play Game" нажата!');
    // Здесь можно запустить новую сцену, начать игру и т.д.
});

Для полноценной кнопки также полезно обрабатывать событие pointerup и, возможно, менять цвет фона на время нажатия, чтобы дать пользователю дополнительную визуальную обратную связь.

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

Текстовые объекты в Phaser 3 — это мощный инструмент для быстрого создания UI-элементов. Вы научились создавать кнопку, реагирующую на наведение курсора. Для экспериментов попробуйте: анимировать изменение цвета с помощью tweens, добавить звук при наведении, изменить не только фон, но и цвет самого текста, или создать целое меню из нескольких таких кнопок, управляемых с клавиатуры.