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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');
    }

    create ()
    {
        const sprite = this.add.sprite(400, 300, 'eye').setInteractive();

        sprite.on('pointerup', function (pointer)
        {

            this.setTint(Math.random() * 16000000);

        });
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и загрузка ассетов

Первым делом в методе preload() мы загружаем изображение, с которым будем работать. Важно установить базовый URL для загрузчика, чтобы указывать относительные пути к ресурсам.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');
}

Создание интерактивного спрайта

В методе create() мы создаем спрайт и сразу делаем его интерактивным, вызвав метод .setInteractive(). Без этого вызова объект не будет генерировать события ввода (pointer events).

const sprite = this.add.sprite(400, 300, 'eye').setInteractive();

Подписка на событие pointerup

Ключевой момент — назначение обработчика события. Мы используем метод .on() для подписки на событие 'pointerup'. Оно срабатывает, когда пользователь отпускает кнопку мыши или убирает палец с экрана над объектом.

sprite.on('pointerup', function (pointer)
{
    this.setTint(Math.random() * 16000000);
});

Обратите внимание: внутри функции-обработчика this ссылается на сам спрайт (sprite), что позволяет нам вызывать его метод setTint. В качестве аргумента передается объект pointer с информацией о событии (координаты, кнопка и т.д.).

Как работает setTint

Метод setTint применяет цветовой оттенок к текстуре спрайта. В примере используется выражение Math.random() * 16000000, которое генерирует случайное целое число в диапазоне от 0 до 0xFFFFFF (шестнадцатеричный белый цвет). Это простой способ получить произвольный цвет.

// Генерация случайного цвета для оттенка
let randomColor = Math.random() * 16000000;
this.setTint(randomColor);

Конфигурация и запуск игры

Как и в любом проекте Phaser, необходимо создать конфигурационный объект и инициализировать игру. В данном примере используется WebGL-рендерер и наша сцена Example.

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

const game = new Phaser.Game(config);

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

Событие pointerup — это ваш ключ к отзывчивому игровому миру. Попробуйте заменить setTint на другие действия: setAlpha для изменения прозрачности, setScale для анимации размера или destroy для удаления объекта. Можно также экспериментировать с другими событиями, например pointerdown (нажатие) или pointerover (наведение), чтобы создавать более сложные и многоуровневые взаимодействия.