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

В разработке игр часто возникает задача показать не весь спрайт, а только его часть — например, для анимации появления, эффектов повреждения или создания UI-элементов. Phaser предоставляет для этого простой и мощный метод `setCrop`. Эта статья разберет, как работать с обрезкой (crop) на примере фреймов из текстового атласа, что позволит вам гибко управлять отображением графики без создания лишних ресурсов.

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

    create ()
    {
        const image1 = this.add.image(200, 300, 'atlas', 'phaser2');

        image1.setCrop(0, 0, 200, 100);

        const image2 = this.add.image(400, 300, 'atlas', 'cactuar');

        image2.setCrop(0, 0, 200, 50);
    }
}

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

const game = new Phaser.Game(config);

Загрузка атласа текстур

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

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.atlas('atlas', 'assets/atlas/megaset-0.png', 'assets/atlas/megaset-0.json');

Метод setBaseURL устанавливает базовый URL для всех последующих загрузок, что удобно для указания общего пути. Метод load.atlas загружает сам атлас: первый аргумент — ключ атласа для дальнейшего обращения, второй — путь к PNG-файлу, третий — путь к JSON-файлу с данными о фреймах.

Создание изображений из атласа

После загрузки ресурсов в методе create создаются игровые объекты. Ключевой момент — использование одного и того же ключа атласа с указанием имени конкретного фрейма.

const image1 = this.add.image(200, 300, 'atlas', 'phaser2');
const image2 = this.add.image(400, 300, 'atlas', 'cactuar');

Здесь создаются два объекта Image. Первые два аргумента — координаты X и Y на сцене. Третий аргумент — ключ загруженного атласа 'atlas'. Четвертый аргумент — имя фрейма внутри этого атласа ('phaser2' и 'cactuar'). Phaser автоматически находит и отрисовывает указанный фрейм.

Применение обрезки с помощью setCrop

Метод setCrop позволяет обрезать отображаемую область изображения. Важно понимать, что обрезка применяется к исходному фрейму, а не ко всей текстуре атласа.

image1.setCrop(0, 0, 200, 100);
image2.setCrop(0, 0, 200, 50);

Метод принимает четыре аргумента: `x,y,width,height. Они задают прямоугольную область обрезки в пикселях относительно верхнего левого угла исходного фрейма. В примере дляimage1показывается только верхняя часть фрейма'phaser2'высотой 100 пикселей, а дляimage2— верхние 50 пикселей фрейма'cactuar'`. Ширина обрезки в 200 пикселей может быть как меньше, так и больше ширины фрейма — в последнем случае будут отображаться пустые области.

Конфигурация игры и сцены

Работоспособность примера обеспечивается корректной конфигурацией игры Phaser.Game.

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

const game = new Phaser.Game(config);

В объекте config задается тип рендерера (CANVAS), ID HTML-элемента-контейнера, размеры холста, цвет фона и класс сцены. Создание экземпляра Phaser.Game с этой конфигурацией запускает игровой цикл.

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

Метод setCrop — это прямой способ управлять видимой областью спрайта в Phaser. Он незаменим для создания прогресс-баров, анимации "прорисовки" объекта, эффектов затемнения или выделения части изображения. Для экспериментов попробуйте анимировать параметры обрезки через scene.update, чтобы создать эффект постепенного появления спрайта, или используйте setCrop для маскирования повреждений на текстуре персонажа.