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

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

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

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

    create ()
    {
        const panel = this.add.nineslice(400, 300, 'ui', 'PopupBackground400', 500, 400, 160, 160, 100, 100);

        const content = [
            'The sky above the port was the color of television, tuned to a dead channel.',
            '`It\'s not like I\'m using,\' Case heard someone say, as he shouldered his way ',
            'through the crowd around the door of the Chat. `It\'s like my body\'s developed',
            'this massive drug deficiency.\' It was a Sprawl voice and a Sprawl joke.',
            'The Chatsubo was a bar for professional expatriates; you could drink there for',
            'a week and never hear two words in Japanese.',
        ];

        const text = this.add.text(400, 300, content, '25px Arial');

        text.setOrigin(0.5, 0.5);
        text.setWordWrapWidth(300);

        this.tweens.add({
            targets: panel,
            width: 800,
            height: 500,
            duration: 6000,
            ease: 'sine.inout',
            yoyo: true,
            repeat: -1,
            onUpdate: () => {
                text.setWordWrapWidth(panel.width - 100);
            }
        });
    }
}

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

const game = new Phaser.Game(config);

Что такое 9-Slice и зачем это нужно

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

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

Загрузка ресурсов и создание панели

В примере используется атлас ui с изображением и JSON-описанием. Ключевой кадр PopupBackground400 — это исходное изображение панели.

Создание 9-Slice панели происходит в методе create. Обратите внимание на параметры:

const panel = this.add.nineslice(400, 300, 'ui', 'PopupBackground400', 500, 400, 160, 160, 100, 100);

Разберём параметры по порядку: 1. 400, 300 — координаты X и Y центра панели 2. 'ui' — ключ текстуры атласа 3. 'PopupBackground400' — ключ кадра в атласе 4. 500, 400 — начальная ширина и высота панели 5. 160, 160 — размер левого и правого срезов (не растягиваются по вертикали) 6. 100, 100 — размер верхнего и нижнего срезов (не растягиваются по горизонтали)

Центральная область рассчитывается автоматически.

Добавление текстового содержимого

Для демонстрации динамического изменения панели добавлен текст, который автоматически переносится по словам. Текст центрируется относительно панели и имеет ограничение по ширине.

const text = this.add.text(400, 300, content, '25px Arial');
text.setOrigin(0.5, 0.5);
text.setWordWrapWidth(300);

Метод setOrigin(0.5, 0.5) устанавливает точку привязки текста в его центр, что позволяет легко центрировать текст относительно панели. setWordWrapWidth(300) задаёт максимальную ширину строки перед переносом.

Анимация и динамическое обновление

Самый интересный аспект примера — анимация изменения размера панели с помощью твинов и синхронное обновление текста. Твин плавно меняет ширину и высоту панели, зацикленно возвращаясь к исходному размеру.

this.tweens.add({
    targets: panel,
    width: 800,
    height: 500,
    duration: 6000,
    ease: 'sine.inout',
    yoyo: true,
    repeat: -1,
    onUpdate: () => {
        text.setWordWrapWidth(panel.width - 100);
    }
});

Ключевой момент — колбэк onUpdate, который вызывается на каждом кадре анимации. В нём ширина переноса текста пересчитывается на основе текущей ширины панели (с отступом 100 пикселей). Это создаёт эффект адаптивного текстового блока внутри динамической панели.

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

9-Slice панели в Phaser 3 предоставляют мощный инструмент для создания гибких UI-компонентов. Вы можете экспериментировать с разными текстурами панелей, создавать сложные интерфейсы с вложенными элементами или реализовать систему диалоговых окон с плавными анимациями. Попробуйте добавить кнопки на панель или создать несколько панелей с разными настройками срезов.