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

При создании игровых интерфейсов часто нужны кнопки, которые можно масштабировать без потери качества краёв и при этом делать их интерактивными. Техника Nine Slice (9-Slice) позволяет растягивать изображение, сохраняя чёткие углы и края, что идеально для кнопок разных размеров. В этой статье мы разберём, как создать такую кнопку в Phaser, добавить к ней обработку кликов и реализовать простую интерактивность — перемещение при нажатии. Это полезно для быстрого прототипирования UI и создания адаптивных интерфейсов.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.atlas('buttons', 'assets/ui/nine-slice.png', 'assets/ui/nine-slice.json');
    }

    create ()
    {
        const button = this.add.nineslice(400, 300, 'buttons', 'button-bg', 400, 110, 64, 64);

        button.setInteractive();

        button.on('pointerdown', () => {

            button.setPosition(
                Phaser.Math.Between(100, 700),
                Phaser.Math.Between(100, 500)
            );

        });
    }
}

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

const game = new Phaser.Game(config);

Что такое Nine Slice и зачем он нужен

Nine Slice — это техника растягивания изображения, при которой оно делится на 9 частей: 4 угла, 4 края и центральная часть. Углы не растягиваются, края растягиваются только по одной оси, а центр — по обеим. Это позволяет создавать UI-элементы, которые можно масштабировать до любых размеров без видимых искажений по краям, что критически важно для кнопок, панелей и окон.

В Phaser для работы с Nine Slice используется специальный игровой объект, который создаётся через метод this.add.nineslice. В нашем примере он применяется для фона кнопки.

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

В методе preload мы загружаем атлас с текстурами для кнопки. Атлас — это изображение, содержащее несколько спрайтов, и JSON-файл с координатами этих спрайтов. Это эффективно для оптимизации загрузки ресурсов.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.atlas('buttons', 'assets/ui/nine-slice.png', 'assets/ui/nine-slice.json');
}

Сцена Example наследуется от Phaser.Scene и содержит логику загрузки и создания объектов. Конфигурация игры задаёт базовые параметры, такие как размер холста и цвет фона.

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

const game = new Phaser.Game(config);

Создание и настройка кнопки с Nine Slice

В методе create создаётся объект Nine Slice, который будет служить кнопкой. Параметры метода this.add.nineslice задают позицию, ключ атласа, ключ кадра, ширину, высоту и размеры зон для растягивания.

const button = this.add.nineslice(400, 300, 'buttons', 'button-bg', 400, 110, 64, 64);

Здесь: - 400, 300 — координаты X и Y центра кнопки на экране. - 'buttons' — ключ загруженного атласа. - 'button-bg' — ключ конкретного кадра (фона кнопки) внутри атласа. - 400, 110 — ширина и высота кнопки. - 64, 64 — размеры левого/правого и верхнего/нижнего краёв (в пикселях), которые не будут растягиваться (углы сохраняются).

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

Чтобы кнопка реагировала на действия пользователя, её нужно сделать интерактивной с помощью setInteractive. После этого можно подписаться на события, такие как pointerdown (клик или касание).

button.setInteractive();

button.on('pointerdown', () => {
    button.setPosition(
        Phaser.Math.Between(100, 700),
        Phaser.Math.Between(100, 500)
    );
});

При каждом клике на кнопку вызывается функция, которая перемещает её в случайную позицию в пределах заданных координат. Phaser.Math.Between генерирует случайное число в указанном диапазоне. Это демонстрирует, как легко связать взаимодействие с игровой логикой.

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

Использование Nine Slice в Phaser позволяет быстро создавать масштабируемые и интерактивные UI-элементы, такие как кнопки, с сохранением качества графики. Вы можете экспериментировать: добавьте анимацию при нажатии (например, изменение масштаба или цвета), реализуйте переключение состояний кнопки (активная/неактивная) или создайте сложный интерфейс с несколькими кнопками разных размеров. Также попробуйте интегрировать текстовые метки на кнопки с помощью this.add.text.