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

При разработке игр часто возникает задача эффективного вывода множества однотипных графических объектов, например, частиц или статичных спрайтов. Использование `Blitter` и `Bob` объектов в Phaser 3 позволяет делать это с минимальными затратами производительности, рисуя заранее подготовленные кадры из атласа напрямую на холст. Этот подход идеален для статических или редко меняющихся элементов интерфейса, фоновых деталей и систем частиц, где не нужна полноценная физика и сложная анимация. В этой статье мы разберем, как создать `Blitter`, добавить в него `Bob` — объект для отрисовки одного кадра из текстуры — и вывести его на сцену. Вы научитесь работать с этим легковесным API для оптимизации рендеринга в своих проектах.

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

    }

    create ()
    {

        const blitter = this.add.blitter(0, 0, 'atlas', 'hotdog');

        const bob = blitter.create(100, 100);

    }
}

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Что такое Blitter и Bob?

В основе механизма лежат два ключевых понятия: Blitter и Bob. Blitter (от "bit blit" — операция побитового копирования) — это специальный игровой объект-контейнер (Phaser.GameObjects.Blitter), предназначенный для высокопроизводительной отрисовки множества прямоугольных регионов из текстур (кадров). Он работает на низком уровне, минимизируя накладные расходы.

Bob (Phaser.GameObjects.Bob) — это отдельный элемент внутри Blitter, который представляет собой один экземпляр для отрисовки конкретного кадра. Bob содержит информацию о своей позиции (`x,y), кадре текстуры, видимости и других свойствах отрисовки. Можно создать множествоBobобъектов внутри одногоBlitter`, и они будут отрисованы за один проход, что очень эффективно.

В нашем примере мы создадим один Blitter, настроенный на работу с кадром "hotdog" из атласа, и добавим в него один Bob.

Загрузка ресурсов: атлас текстур

Перед созданием каких-либо объектов необходимо загрузить графические ресурсы. В методе preload класса сцены мы используем this.load.atlas для загрузки текстуры атласа и соответствующего JSON-файла с данными о кадрах.

Атлас — это большое изображение, содержащее множество smaller спрайтов (кадров). JSON-файл описывает координаты и размеры каждого кадра внутри этого большого изображения. Такой подход уменьшает количество HTTP-запросов и оптимизирует использование видеопамяти.

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

Здесь: 1. setBaseURL задает базовый URL для загрузки всех последующих ресурсов. 2. load.atlas загружает атлас. Первый аргумент ('atlas') — это ключ (key), по которому мы будем обращаться к загруженному атласу в коде. Второй и третий аргументы — пути к файлу изображения и файлу данных соответственно.

Создание Blitter и добавление Bob

Вся основная логика размещения объекта происходит в методе create сцены. Создание Blitter и Bob выполняется в два шага.

Сначала создается сам контейнер Blitter с помощью фабричного метода this.add.blitter. Этот метод добавляет объект на сцену и в список отрисовки.

const blitter = this.add.blitter(0, 0, 'atlas', 'hotdog');

Параметры метода: * 0, 0 — координаты `xиyконтейнераBlitter` на сцене. * 'atlas' — ключ текстуры (атласа), загруженной ранее. * 'hotdog' — имя конкретного кадра (frame) внутри этого атласа, который будет использоваться по умолчанию для всех новых Bob, создаваемых в этом Blitter. В данном примере это кадр с хот-догом.

Затем внутри созданного blitter мы генерируем один объект Bob с помощью метода blitter.create.

const bob = blitter.create(100, 100);

Этот метод создает и возвращает новый Bob. Параметры 100, 100 — это его локальные координаты (x, y) относительно позиции родительского Blitter. Поскольку Blitter сам расположен в точке (0, 0), итоговая позиция хот-дога на экране будет (100, 100). Этот Bob автоматически будет использовать кадр 'hotdog', указанный при создании Blitter.

Настройка игры (Конфигурация)

Запуск игры в Phaser 3 всегда начинается с создания экземпляра класса Phaser.Game и передачи ему конфигурационного объекта.

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Разберем ключевые поля конфига: * type: Phaser.WEBGL — указывает рендерер. Phaser.WEBGL использует WebGL для аппаратного ускорения графики, что предпочтительнее для производительности. В качестве fallback можно использовать Phaser.CANVAS. * parent: 'phaser-example' — идентификатор (или DOM-элемент) HTML-контейнера, в который Phaser вставит свой canvas. * scene: Example — класс нашей главной (и в данном случае единственной) сцены. Phaser создаст ее экземпляр автоматически. Создание экземпляра new Phaser.Game(config) инициализирует игровой цикл, загрузку и отображение сцены.

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

Использование связки Blitter и Bob — это мощный низкоуровневый инструмент Phaser 3 для оптимизации отрисовки статичных или массовых спрайтов. Вы освоили базовый цикл: загрузка атласа, создание контейнера Blitter с указанием кадра по умолчанию и добавление в него объектов Bob. Для экспериментов попробуйте: 1. Создать несколько Bob объектов в цикле с разными координатами, чтобы нарисовать, например, поле звезд. 2. Изменить свойства Bob, например bob.alpha = 0.5 для полупрозрачности или bob.flipX = true для отражения. 3. Использовать разные кадры для отдельных Bob, обратившись к свойству bob.frame. 4. Динамически перемещать Bob в игровом цикле, обновляя его свойства `xиy`.