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

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

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

    create ()
    {
        const soil = this.add.tileSprite(400, 300, 800, 600, 'soil');

        this.input.on('wheel', (pointer, gameObjects, deltaX, deltaY, deltaZ) =>
        {

            soil.tilePositionX += deltaX * 0.5;
            soil.tilePositionY += deltaY * 0.5;

        });

        this.add.text(10, 10, 'Scroll your mouse-wheel', { font: '16px Courier', fill: '#00ff00' });
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    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('soil', 'assets/textures/soil.png');
}

Метод setBaseURL устанавливает корневую папку для всех последующих загрузок, что удобно для организации ассетов. Изображение с ключом 'soil' станет нашей тайловой текстурой.

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

В методе create() мы размещаем на сцене основные объекты.

create ()
{
    const soil = this.add.tileSprite(400, 300, 800, 600, 'soil');
    this.add.text(10, 10, 'Scroll your mouse-wheel', { font: '16px Courier', fill: '#00ff00' });
}

Объект soil — это TileSprite. В отличие от обычного спрайта, его текстура может плавно смещаться (tilePosition) или масштабироваться (tileScale), создавая эффект бесшовного движения. Мы создаем его на весь размер окна игры (800x600). Текстовый объект — простая подсказка для пользователя.

Обработка события колесика мыши

Самое важное — подписка на событие 'wheel' системы ввода Phaser.

this.input.on('wheel', (pointer, gameObjects, deltaX, deltaY, deltaZ) =>
{
    soil.tilePositionX += deltaX * 0.5;
    soil.tilePositionY += deltaY * 0.5;
});

Коллбэк-функция получает несколько параметров. Наиболее полезны deltaY (вертикальный скролл) и deltaX (горизонтальный скролл, если мышь его поддерживает). Эти значения показывают интенсивность и направление прокрутки. Мы умножаем их на коэффициент 0.5 для замедления скорости смещения, делая движение фона более плавным и управляемым, и прибавляем к свойствам tilePositionX и tilePositionY спрайта soil.

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

Стандартная конфигурация игры Phaser 3.

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

const game = new Phaser.Game(config);

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

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

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