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

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

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

Версия 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('poo', 'assets/sprites/poo.png');
    }

    create ()
    {
        this.add.text(10, 10, 'Scroll your mouse-wheel up and down over the sprite', { font: '16px Courier', fill: '#00ff00' });

        const poo = this.add.image(400, 300, 'poo').setInteractive();

        poo.on('wheel', function (pointer, deltaX, deltaY, deltaZ)
        {

            this.scale += deltaY * -0.001;

        });
    }
}

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

const game = new Phaser.Game(config);

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

Начнем с базовой настройки сцены. В методе preload мы устанавливаем базовый URL для загрузки ресурсов и загружаем спрайт изображения. Это стандартный подход в Phaser для подготовки ассетов перед созданием сцены.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('poo', 'assets/sprites/poo.png');
}

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

В методе create мы добавляем текстовую подсказку на экран и создаем основной спрайт. Ключевой момент — метод setInteractive(). Он делает объект чувствительным к событиям ввода, без этого события мыши не будут обрабатываться. Объект poo становится интерактивным и готовым к обработке событий.

create ()
{
    this.add.text(10, 10, 'Scroll your mouse-wheel up and down over the sprite', { font: '16px Courier', fill: '#00ff00' });

    const poo = this.add.image(400, 300, 'poo').setInteractive();
}

Обработка события прокрутки колеса

На интерактивный объект мы подписываемся на событие 'wheel'. Оно срабатывает только тогда, когда курсор находится над объектом poo и пользователь вращает колесо мыши. Колбэк-функция получает параметры: pointer (объект указателя), deltaX, deltaY, deltaZ (изменения по осям). Мы используем deltaY, которая содержит значение вертикальной прокрутки.

poo.on('wheel', function (pointer, deltaX, deltaY, deltaZ)
{
    this.scale += deltaY * -0.001;
});

Внутри функции контекст this ссылается на сам объект poo (благодаря использованию обычной функции, а не стрелочной). Мы изменяем его свойство scale, добавляя к нему значение deltaY, умноженное на -0.001. Множитель -0.001 инвертирует направление (чтобы прокрутка вверх увеличивала масштаб) и делает изменение плавным. Положительное deltaY обычно означает прокрутку вниз, отрицательное — вверх.

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

За пределами класса сцены определяется конфигурационный объект игры config. Он задает базовые параметры: тип рендерера, контейнер в DOM, размеры холста и основную сцену. Затем создается экземпляр игры Phaser.Game с этой конфигурацией, что инициирует весь жизненный цикл.

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

const game = new Phaser.Game(config);

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

Всего несколько строк кода позволяют добавить в игру интуитивное управление колесом мыши. Этот паттерн — подписка на событие 'wheel' интерактивного объекта — универсален. Попробуйте изменить логику внутри обработчика: вращайте объект с помощью this.angle, меняйте его прозрачность (this.alpha) или переключайте кадры анимации. Можно привязать прокрутку к прокрутке списка предметов в инвентаре или регулировке силы выстрела.