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

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

При стандартной инициализации Phaser Game создает HTML-элемент canvas автоматически. Однако бывают ситуации, когда вам нужен полный контроль: например, для интеграции с другими библиотеками, тонкой настройки WebGL2-контекста или нестандартного оформления. В этом примере мы вручную создадим canvas, настроим его WebGL2-контекст и передадим его в конфигурацию игры, чтобы 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('pic', 'assets/pics/baal-loader.png');
    }

    create ()
    {
        this.add.image(400, 300, 'pic');
    }
}

const contextCreationConfig = {
    alpha: false,
    depth: false,
    antialias: true,
    premultipliedAlpha: true,
    stencil: true,
    preserveDrawingBuffer: false,
    failIfMajorPerformanceCaveat: false,
    powerPreference: 'default'
};

const myCustomCanvas = document.createElement('canvas');
const myCustomContext = myCustomCanvas.getContext('webgl2', contextCreationConfig);

myCustomCanvas.id = 'myCustomCanvas';
myCustomCanvas.style = 'border: 8px solid green';

document.body.appendChild(myCustomCanvas);

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    canvas: myCustomCanvas,
    context: myCustomContext,
    scene: Example
};

const game = new Phaser.Game(config);

Зачем это нужно?

По умолчанию Phaser сам создает элемент <canvas> и получает для него графический контекст (WebGL, WebGL2 или 2D). Передача своего canvas и контекста дает несколько преимуществ:

* **Полный контроль над атрибутами контекста:** Вы можете точно задать параметры, такие как alpha, antialias или powerPreference. * **Интеграция с существующей разметкой:** Canvas можно встроить в заранее подготовленную структуру DOM. * **Применение собственных стилей и ID:** Легко стилизовать canvas с помощью CSS или найти его в DOM по известному идентификатору. * **Отладка:** Можно проверить, поддерживает ли браузер нужные параметры WebGL2, до инициализации Phaser.

В этом примере мы создадим canvas с зеленой рамкой и настроенным WebGL2-контекстом.

Создание и настройка кастомного Canvas

Первым делом мы создаем элемент canvas и получаем для него WebGL2-контекст с заданной конфигурацией. Конфигурация контекста передается вторым аргументом в метод getContext().

const contextCreationConfig = {
    alpha: false,
    depth: false,
    antialias: true,
    premultipliedAlpha: true,
    stencil: true,
    preserveDrawingBuffer: false,
    failIfMajorPerformanceCaveat: false,
    powerPreference: 'default'
};

const myCustomCanvas = document.createElement('canvas');
const myCustomContext = myCustomCanvas.getContext('webgl2', contextCreationConfig);

После этого мы можем задать элементу идентификатор и стили, а затем добавить его в тело документа. Phaser будет использовать этот уже существующий в DOM элемент.

myCustomCanvas.id = 'myCustomCanvas';
myCustomCanvas.style = 'border: 8px solid green';

document.body.appendChild(myCustomCanvas);

Передача Canvas в конфигурацию Phaser Game

Ключевой момент — сообщить Phaser, что нужно использовать наш canvas и контекст, а не создавать новые. Для этого в объект конфигурации игры передаются два специальных свойства: canvas и context.

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    canvas: myCustomCanvas,
    context: myCustomContext,
    scene: Example
};

const game = new Phaser.Game(config);

* type: Phaser.WEBGL: Указываем, что игра должна использовать WebGL-рендерер. Это должно соответствовать созданному нами контексту (webgl2). * canvas: myCustomCanvas: Ссылка на наш DOM-элемент canvas. * context: myCustomContext: Ссылка на полученный графический контекст этого canvas.

Важно: тип рендерера (Phaser.WEBGL), переданный canvas и контекст должны быть совместимы. Phaser начнет использовать переданные объекты для всего последующего рендеринга.

Сцена как обычно

Сама сцена (класс Example) никак не зависит от того, как был создан canvas. Она загружает и отображает изображение стандартными методами Phaser. Это демонстрирует, что основной игровой код остается неизменным.

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('pic', 'assets/pics/baal-loader.png');
    }

    create ()
    {
        this.add.image(400, 300, 'pic');
    }
}

Метод this.add.image отрисует картинку в нашем кастомном canvas с зеленой рамкой. Вся работа с ресурсами, физикой и отображением будет происходить через предоставленный нами контекст.

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

Ручное создание canvas и контекста открывает двери для продвинутой интеграции Phaser в ваше приложение. Вы получаете низкоуровневый контроль над этапом инициализации графики. **Идеи для экспериментов:** 1. Попробуйте создать canvas внутри конкретного DOM-контейнера (div), а не прямо в body. 2. Измените параметры contextCreationConfig, например, отключите сглаживание (antialias: false) или запросите высокопроизводительный режим (powerPreference: 'high-performance'). 3. Проверьте, что произойдет, если передать в type значение Phaser.CANVAS, а контекст создать как 2d. 4. Добавьте к canvas сложные CSS-стили или реакции на события мыши поверх игровой области.