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

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

При разработке кросс-платформенных игр важно понимать, какие возможности графического API доступны на устройстве игрока. Phaser 3 предоставляет удобный доступ к конфигурации рендерера, поддерживаемым расширениям и ограничениям WebGL. Используя эту информацию, вы можете адаптировать качество графики, выбирать форматы текстур и избегать ошибок, связанных с превышением лимитов видеосистемы.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const style = { font: '16px Courier', fill: '#00ff00' };

        this.add.text(10, 10, 'WebGL Config', { font: '32px Courier', fill: '#00ff00' });

        this.add.text(10, 60, [ 'Supported Extensions', '--------------------', '' ].concat(this.renderer.supportedExtensions), style);

        const config = [];

        for (let key in this.renderer.config)
        {
            config.push(`${key}: ${this.renderer.config[key]}`);
        }

        this.add.text(500, 60, [ 'Renderer Config', '---------------', '' ].concat(config), style);

        const compression = [];

        for (let key in this.renderer.compression)
        {
            compression.push(`${key}: ${this.renderer.compression[key]}`);
        }

        this.add.text(500, 300, [ 'Texture Compression', '-------------------', '' ].concat(compression), style);

        this.add.text(500, 450, [ 'WebGL Textures', '--------------', '', `Max Textures: ${this.renderer.maxTextures}`, `Max Texture Size: ${this.renderer.getMaxTextureSize()}` ], style);
    }
}

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

const game = new Phaser.Game(config);

Доступ к свойствам рендерера

В Phaser 3 объект this.renderer в сцене предоставляет доступ к низкоуровневой информации о графическом рендерере. Этот объект особенно полезен при использовании WebGL-рендера (Phaser.WEBGL).

Основные свойства, которые можно получить: - supportedExtensions: массив строк с названиями расширений WebGL, поддерживаемых браузером. - config: объект с конфигурацией рендерера, установленной при создании игры. - compression: информация о поддержке сжатия текстур. - maxTextures: максимальное количество текстур, которые можно одновременно использовать в шейдере. - getMaxTextureSize(): метод, возвращающий максимальный размер текстуры (в пикселях).

const extensions = this.renderer.supportedExtensions;
const maxTextures = this.renderer.maxTextures;
const maxSize = this.renderer.getMaxTextureSize();

Получение списка расширений WebGL

Расширения WebGL добавляют специфические возможности, такие как продвинутое сжатие текстур или специальные буферы. Их поддержка зависит от браузера и видеокарты. Phaser автоматически определяет доступные расширения и сохраняет их в supportedExtensions.

В примере этот список выводится на экран. Это полезно для отладки и для условной логики, когда определенные функции игры требуют конкретных расширений.

this.add.text(10, 60, [ 'Supported Extensions', '--------------------', '' ].concat(this.renderer.supportedExtensions), style);

Анализ конфигурации и сжатия текстур

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

Объект compression хранит информацию о том, какие алгоритмы сжатия текстур (например, S3TC, PVRTC, ETC) поддерживаются текущим окружением. Это ключевая информация для оптимизации загрузки ресурсов на мобильных устройствах.

Код ниже перебирает свойства этих объектов и форматирует их для отображения.

const config = [];
for (let key in this.renderer.config)
{
    config.push(`${key}: ${this.renderer.config[key]}`);
}

const compression = [];
for (let key in this.renderer.compression)
{
    compression.push(`${key}: ${this.renderer.compression[key]}`);
}

Практическое применение: адаптивная графика

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

1. **Выбор качества текстур:** Если getMaxTextureSize() возвращает небольшое значение, можно загружать текстуры меньшего разрешения. 2. **Включение функций:** Проверить наличие supportedExtensions перед использованием специфичных эффектов. 3. **Оптимизация памяти:** Знание maxTextures помогает планировать атласы спрайтов и избегать переполнения лимитов.

Пример условной логики:

create() {
    const maxSize = this.renderer.getMaxTextureSize();
    let textureQuality = 'high';
    if (maxSize < 4096) {
        textureQuality = 'medium';
    }
    if (maxSize < 2048) {
        textureQuality = 'low';
    }
    this.load.setPath(`assets/${textureQuality}/`);
    // ... дальнейшая загрузка
}

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

Доступ к информации о WebGL через this.renderer — мощный инструмент для создания стабильных и оптимизированных игр под разные устройства. Поэкспериментируйте: создайте меню "Графические настройки", которое автоматически определяет максимальные возможности системы, или реализуйте плавную деградацию качества, если расширения (например, для сжатия текстур) не поддерживаются.