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

В разработке игр часто возникает необходимость скрыть определённые объекты от основной камеры, оставив их активными в игровом мире. Это может быть полезно для создания UI-элементов, которые не должны масштабироваться вместе со сценой, или для временного скрытия объектов без их деактивации. Встроенный метод `ignore` камеры Phaser позволяет легко управлять этим, сохраняя полную интерактивность игнорируемых спрайтов.

Версия 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.image('logo', 'assets/sprites/phaser3-logo.png');
    }

    create ()
    {
        const image1 = this.add.image(400, 100, 'logo').setInteractive();
        const image2 = this.add.image(400, 300, 'logo').setInteractive();
        const image3 = this.add.image(400, 500, 'logo').setInteractive();

        const text = this.add.text(10, 10, '', { font: '16px Courier', fill: '#00ff00' });

        image1.on('pointerover', () =>
        {
            text.setText('Over Image 1');
        });

        image2.on('pointerover', () =>
        {
            text.setText('Over Image 2');
        });

        image3.on('pointerover', () =>
        {
            text.setText('Over Image 3');
        });

        //  Ignore image 2
        this.cameras.main.ignore(image2);
    }
}

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

const game = new Phaser.Game(config);

Суть метода ignore

Основная камера в Phaser (доступная через this.cameras.main) отвечает за то, какую часть игрового мира видит игрок. Метод ignore() позволяет исключить конкретный игровой объект из рендеринга этой камерой. Важно понимать, что объект не удаляется из сцены и не становится неинтерактивным — он просто перестаёт отображаться на экране в рамках этой конкретной камеры. Это отличается от методов вроде setVisible(false), которые полностью скрывают объект от всех систем.

В предоставленном примере три спрайта с логотипом Phaser создаются и делаются интерактивными. При наведении курсора на любой из них текст в углу экрана обновляется. Однако второй спрайт (image2) игнорируется основной камерой, поэтому он невидим, но по-прежнему реагирует на события указателя.

Настройка сцены и создание объектов

В методе preload загружается одно изображение, которое будет использоваться для всех трёх спрайтов. В create создаются сами спрайты и текстовый объект для отладки.

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

create ()
{
    const image1 = this.add.image(400, 100, 'logo').setInteractive();
    const image2 = this.add.image(400, 300, 'logo').setInteractive();
    const image3 = this.add.image(400, 500, 'logo').setInteractive();

    const text = this.add.text(10, 10, '', { font: '16px Courier', fill: '#00ff00' });
}

Каждый спрайт создаётся с помощью this.add.image и сразу же делается интерактивным через .setInteractive(). Это необходимо для того, чтобы объект мог генерировать события ввода, такие как pointerover.

Обработка событий и применение ignore

На каждый спрайт вешается обработчик события pointerover, который изменяет текст на экране. Это демонстрирует, что интерактивность сохраняется даже для невидимого объекта.

image1.on('pointerover', () =>
{
    text.setText('Over Image 1');
});

image2.on('pointerover', () =>
{
    text.setText('Over Image 2');
});

image3.on('pointerover', () =>
{
    text.setText('Over Image 3');
});

Ключевая строка кода — вызов метода ignore у основной камеры:

this.cameras.main.ignore(image2);

После этого спрайт image2 перестаёт отображаться. Однако, если переместить курсор на его координаты (X:400, Y:300), текст на экране изменится на 'Over Image 2', доказывая, что объект по-прежнему существует и обрабатывает события.

Практическое применение и особенности

Метод ignore идеально подходит для объектов, которые должны существовать в игровой логике, но не должны быть видны игроку через определённую камеру. Например: * **Статические элементы интерфейса**, которые не должны следовать за движением камеры при скроллинге уровня. * **Объекты-триггеры** (невидимые области), активирующие события. * **Временное скрытие** объектов без их отключения от физического мира или систем событий.

Важно помнить, что ignore влияет только на конкретную камеру. Если у вас несколько камер, объект может быть виден в других. Также объект, игнорируемый камерой, не будет отбрасывать тени, если они рендерятся через эту камеру.

Для обратного действия — возврата объекта в область видимости камеры — используйте метод camera.ignore, передав null или другой объект, либо управляйте списком игнорируемых объектов через свойства камеры.

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

Метод ignore камеры в Phaser — это мощный и простой инструмент для тонкого контроля над визуализацией. Он позволяет отделить логическое присутствие объекта от его отображения, что расширяет возможности по созданию сложных интерактивных сцен. Для экспериментов попробуйте создать вторую камеру с помощью this.cameras.add и проверьте, как объекты, игнорируемые main, отображаются в ней. Или реализуйте систему «невидимых стен», которые игнорируются основной камерой, но остаются физическими телами.