Первый запуск: минимальная конфигурация игры

Для запуска игры на Phaser необходим объект конфигурации, который определяет ключевые параметры движка: размеры канваса, режим рендеринга, сцены и физику. Минимальная конфигурация может состоять из трёх обязательных элементов: type, width и height.

const config = {
    type: Phaser.AUTO, // Phaser сам выбирает WebGL или Canvas
    width: 800,        // ширина игрового поля
    height: 600,       // высота игрового поля
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

  • type – определяет движок рендеринга. Возможные значения:

    • Phaser.AUTO – Phaser выбирает между WebGL и Canvas.
    • Phaser.WEBGL – принудительно использовать WebGL.
    • Phaser.CANVAS – использовать Canvas.

  • width/height – задают размер канваса в пикселях.

  • scene – объект или массив объектов сцен, где реализуются игровые функции.

Структура сцены

Сцена в Phaser — это объект с методами жизненного цикла:

  • preload() – загрузка ресурсов (текстуры, аудио, шрифты).
  • create() – создание игровых объектов и начальная настройка сцены.
  • update(time, delta) – главный цикл игры; обновление состояния объектов каждый кадр.

Простейший пример сцены:

function preload() {
    this.load.image('logo', 'assets/phaser3-logo.png');
}

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

function update(time, delta) {
    // Логика анимации и взаимодействия
}

Управление игровым канвасом

Phaser автоматически создаёт HTML-элемент <canvas>, на котором отображается игра. Важные параметры конфигурации для управления канвасом:

  • parent – идентификатор контейнера DOM, куда вставляется канвас.
  • backgroundColor – цвет фона сцены (0x000000 для чёрного).
  • pixelArt – включение масштабирования пиксельной графики без размытий.

Пример с цветом фона и контейнером:

const config = {
    type: Phaser.AUTO,
    width: 640,
    height: 480,
    parent: 'game-container',
    backgroundColor: 0x1d212d,
    scene: { preload, create, update }
};

Загрузка ресурсов

Загрузка ресурсов осуществляется в методе preload() с использованием встроенного загрузчика this.load. Основные методы:

  • this.load.image(key, url) – изображение.
  • this.load.spritesheet(key, url, { frameWidth, frameHeight }) – спрайт-лист.
  • this.load.audio(key, url) – аудиофайл.

После загрузки ресурсы доступны через ключи в методе create().

Добавление игровых объектов

Phaser предоставляет методы для создания графических объектов:

  • this.add.image(x, y, key) – статическое изображение.
  • this.add.sprite(x, y, key) – спрайт с возможностью анимации.
  • this.add.text(x, y, text, style) – текст на сцене.

Ключевые свойства объектов:

  • setOrigin(x, y) – точка привязки объекта (по умолчанию 0.5, 0.5).
  • setScale(scaleX, scaleY) – масштабирование.
  • setInteractive() – делает объект интерактивным для событий мыши и касаний.

Анимация и обновление объектов

Метод update() вызывается каждый кадр. В нём реализуется логика движения, столкновений, взаимодействий и анимаций. Простейший пример движения спрайта:

function update() {
    this.logo.x += 1; // сдвигаем логотип вправо каждый кадр
    if (this.logo.x > this.sys.canvas.width) {
        this.logo.x = 0;
    }
}

Подключение физики

Даже минимальная игра может использовать встроенную физику Phaser. Для простого запуска добавляется параметр physics в конфигурацию:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: { gravity: { y: 300 } }
    },
    scene: { preload, create, update }
};
  • default – выбирается движок физики (arcade, matter, impact).
  • arcade – простой и быстрый для платформеров и 2D игр.
  • gravity – сила гравитации по осям.

Создание физического объекта:

this.player = this.physics.add.sprite(100, 450, 'player');
this.player.setCollideWorldBounds(true);

Минимальная рабочая игра

Объединяя все элементы, минимальная рабочая игра с логотипом и движением может выглядеть так:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: 0x2d2d2d,
    scene: {
        preload: function() {
            this.load.image('logo', 'assets/phaser3-logo.png');
        },
        create: function() {
            this.logo = this.add.image(400, 300, 'logo');
        },
        update: function() {
            this.logo.x += 1;
            if (this.logo.x > this.sys.canvas.width) this.logo.x = 0;
        }
    }
};

const game = new Phaser.Game(config);

Этот пример демонстрирует:

  • Создание игрового канваса и сцены.
  • Загрузку и отображение изображения.
  • Обновление позиции объекта в цикле update().

Такая структура является фундаментом для всех проектов на Phaser и позволяет постепенно добавлять новые сцены, анимации, интерактивность и физику.

Оглавление