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

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

Управление ресурсами — ключевой навык при разработке игр. В Phaser метод `destroy()` позволяет освобождать память, удаляя ненужные игровые объекты. Этот пример показывает, как точечно уничтожать текстовые объекты, сохраняя остальные элементы сцены неизменными. Понимание этого механизма поможет избежать утечек памяти и повысит производительность вашей игры.

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

Живой запуск

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

Исходный код

function preload ()
{
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('apple', 'assets/sprites/apple.png');
}

function create()
{
    this.add.text(100, 100, 'Phaser', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });

    let t = this.add.text(100, 200, 'Phaser', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });

    this.add.text(100, 300, 'Phaser', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });

    this.input.once('pointerdown', () => {

        t.destroy();

    });
}

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

const game = new Phaser.Game(config);

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

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

function preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('apple', 'assets/sprites/apple.png');
}

Функция create вызывается после загрузки ресурсов и создает три текстовых объекта с одинаковым стилем. Обратите внимание, что второй объект сохраняется в переменную `t` — это ключевой момент для последующего управления.

Создание и хранение текстовых объектов

Метод this.add.text создает объект Phaser.GameObjects.Text. Первые два аргумента — это координаты X и Y, третий — строковое содержимое, четвертый — объект стиля.

function create()
{
    this.add.text(100, 100, 'Phaser', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });

    let t = this.add.text(100, 200, 'Phaser', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });

    this.add.text(100, 300, 'Phaser', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });

Сохранение ссылки на объект в переменную `t` дает нам контроль именно над этим экземпляром. Два других текстовых объекта создаются анонимно и не могут быть изменены или удалены позже (если только не найти их через другие методы сцены).

Обработка клика и уничтожение объекта

Здесь мы навешиваем одноразовый обработчик события pointerdown (клик мышью или касание). При срабатывании вызывается метод destroy() для объекта `t`.

this.input.once('pointerdown', () => {
        t.destroy();
    });
}

this.input.once гарантирует, что обработчик выполнится лишь один раз. Метод destroy() удаляет текстовый объект `t` из текущей сцены, освобождает связанные с ним ресурсы и убирает его с экрана. Два других текста останутся нетронутыми.

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

Объект config определяет основные настройки игры Phaser. Здесь важно указать функции preload и create в свойстве scene.

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

const game = new Phaser.Game(config);

Создание экземпляра new Phaser.Game(config) запускает игровой цикл. Указание Phaser.WEBGL в качестве типа рендерера обеспечивает аппаратное ускорение, если оно доступно в браузере.

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

Метод destroy() — это ваш основной инструмент для ручного управления жизненным циклом игровых объектов в Phaser. Экспериментируйте: попробуйте уничтожать объекты по таймеру, при столкновениях или после определенного события. Можно также сохранять ссылки на все объекты в массив для группового удаления. Помните — удаление неиспользуемых объектов помогает поддерживать высокий FPS.