Прогресс-бар загрузки

Прогресс-бар загрузки — важный элемент при разработке игр на Phaser, обеспечивающий визуальную обратную связь о процессе загрузки ресурсов. В Phaser 3 управление загрузкой осуществляется через сцену загрузки (Preloader Scene), которая использует встроенный объект Loader.

Настройка сцены загрузки

Сцена загрузки создаётся как отдельный класс, расширяющий Phaser.Scene:

class PreloaderScene extends Phaser.Scene {
    constructor() {
        super({ key: 'PreloaderScene' });
    }

    preload() {
        // Основные элементы прогресс-бара
        const width = this.cameras.main.width;
        const height = this.cameras.main.height;

        const progressBar = this.add.graphics();
        const progressBox = this.add.graphics();
        progressBox.fillStyle(0x222222, 0.8);
        progressBox.fillRect(width / 4, height / 2 - 25, width / 2, 50);

        const loadingText = this.add.text(width / 2, height / 2 - 50, 'Загрузка...', {
            font: '20px Arial',
            fill: '#ffffff'
        }).setOrigin(0.5, 0.5);

        const percentText = this.add.text(width / 2, height / 2, '0%', {
            font: '18px Arial',
            fill: '#ffffff'
        }).setOrigin(0.5, 0.5);

        // Слушатель прогресса загрузки
        this.load.on('progress', (value) => {
            progressBar.clear();
            progressBar.fillStyle(0xffffff, 1);
            progressBar.fillRect(width / 4 + 10, height / 2 - 15, (width / 2 - 20) * value, 30);
            percentText.setText(parseInt(value * 100) + '%');
        });

        this.load.on('complete', () => {
            progressBar.destroy();
            progressBox.destroy();
            loadingText.destroy();
            percentText.destroy();
        });

        // Загрузка ресурсов
        this.load.image('player', 'assets/player.png');
        this.load.image('enemy', 'assets/enemy.png');
        this.load.audio('bgm', 'assets/music.mp3');
    }

    create() {
        this.scene.start('MainScene');
    }
}

Ключевые моменты:

  • progressBar и progressBox создают визуальные элементы прогресс-бара.
  • Событие this.load.on('progress', callback) получает значение от 0 до 1, отражающее текущий прогресс загрузки.
  • После завершения загрузки вызывается this.load.on('complete', callback), где можно очистить ресурсы прогресс-бара.

Визуальные улучшения прогресс-бара

Прогресс-бар можно сделать более динамичным с анимацией и текстурой:

this.load.on('progress', (value) => {
    progressBar.clear();
    progressBar.fillStyle(0x00ff00, 1);
    progressBar.fillRect(width / 4 + 10, height / 2 - 15, (width / 2 - 20) * value, 30);
});

// Добавление анимированного индикатора
const loadingIcon = this.add.sprite(width / 2, height / 2 + 50, 'loading').play('spin');
  • Использование спрайтов и анимаций создаёт эффект живого прогресс-бара.
  • Цвет и прозрачность можно изменять через fillStyle(color, alpha).

Загрузка больших наборов ресурсов

При больших проектах ресурсы разделяются на категории:

this.load.image('tiles', 'assets/tiles.png');
this.load.tilemapTiledJSON('level1', 'assets/level1.json');
this.load.spritesheet('characters', 'assets/characters.png', { frameWidth: 32, frameHeight: 32 });
  • Событие progress отображает суммарный прогресс загрузки всех ресурсов.
  • Можно добавить подсказки или имена файлов для отображения текущего загружаемого ресурса:
this.load.on('fileprogress', (file) => {
    loadingText.setText('Загрузка: ' + file.key);
});

Практические рекомендации

  1. Разделение сцен: Прогресс-бар должен быть отдельной сценой перед основной сценой игры.
  2. Минимальный визуальный шум: Прямоугольники, текст и анимация — достаточно для информативного интерфейса.
  3. Оптимизация: Для крупных игр рекомендуется загружать ресурсы поэтапно, чтобы не блокировать главный поток.
  4. Обратная связь для игрока: Использовать не только процент, но и анимированные индикаторы для восприятия времени загрузки.

Интеграция в проект Phaser

Для подключения сцены прогресс-бара в проекте создаётся основной конфиг:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [PreloaderScene, MainScene],
    physics: { default: 'arcade' }
};

const game = new Phaser.Game(config);
  • scene: [PreloaderScene, MainScene] гарантирует, что загрузка ресурсов завершится перед стартом основной игры.
  • Можно добавлять дополнительные сцены для меню, паузы или настроек без вмешательства в загрузку.

Динамическая адаптация под экран

Прогресс-бар всегда должен масштабироваться под размеры камеры:

const width = this.cameras.main.width;
const height = this.cameras.main.height;
  • Использование размеров камеры позволяет автоматически корректировать позицию и размер элементов при изменении разрешения.
  • Центрирование текста через setOrigin(0.5, 0.5) делает интерфейс универсальным.

Эта структура прогресс-бара обеспечивает информативность, плавность и адаптивность, делая загрузку ресурсов прозрачной и приятной для игрока.

Оглавление