Архитектурные принципы Phaser 3

Phaser 3 представляет собой мощный игровой фреймворк для JavaScript, построенный вокруг концепции сцен (Scenes) и игровых объектов (Game Objects). Центральной точкой является объект Phaser.Game, который управляет всеми системами, включая рендеринг, обновление логики и обработку ввода. Архитектура Phaser разделена на модули, что обеспечивает гибкость и масштабируемость проектов.

Объект Phaser.Game

Объект Phaser.Game создаётся с конфигурационным объектом, который задаёт:

  • Рендерер (type): WebGL или Canvas.
  • Размеры канваса (width, height).
  • Сцены (scene): массив или одиночная сцена.
  • Физика (physics): поддержка Arcade, Matter.js и других движков.

Пример конфигурации:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: { gravity: { y: 300 }, debug: false }
    },
    scene: [BootScene, MainScene]
};

const game = new Phaser.Game(config);

Сцены

Сцена (Scene) — это изолированное состояние игры, которое управляет ресурсами, объектами и логикой. Каждая сцена имеет несколько ключевых методов:

  • preload() — загрузка ресурсов.
  • create() — инициализация игровых объектов.
  • update(time, delta) — обновление логики на каждом кадре.

Сцены могут переключаться, останавливаться и возобновляться, что позволяет создавать сложные переходы и меню.

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

    preload() {
        this.load.image('player', 'assets/player.png');
    }

    create() {
        this.player = this.add.sprite(400, 300, 'player');
    }

    update(time, delta) {
        this.player.x += 1;
    }
}

Игровые объекты и контейнеры

Phaser 3 использует иерархию объектов, где базовый класс — GameObject. Основные категории объектов:

  • Спрайты (Sprite) — изображения с поддержкой анимации.
  • Текст (Text) — отображение текста.
  • Группы (Group) — коллекции объектов для массового управления.
  • Контейнеры (Container) — позволяют объединять объекты в иерархию с общей трансформацией.

Контейнеры упрощают управление сложными структурами, например, персонажем с оружием и эффектами:

const container = this.add.container(100, 100);
const playerSprite = this.add.sprite(0, 0, 'player');
const weaponSprite = this.add.sprite(20, 0, 'weapon');
container.add([playerSprite, weaponSprite]);

Система ввода

Phaser 3 имеет встроенные менеджеры ввода, которые обрабатывают клавиатуру, мышь и сенсорные события. Ввод интегрирован с объектами через:

  • this.input.keyboard — клавиши и события.
  • this.input.mouse — мышь, движение, клики.
  • this.input.pointer — указатели, касания на мобильных устройствах.

Пример движения спрайта с помощью клавиш:

const cursors = this.input.keyboard.createCursorKeys();

update() {
    if (cursors.left.isDown) this.player.x -= 5;
    if (cursors.right.isDown) this.player.x += 5;
    if (cursors.up.isDown) this.player.y -= 5;
    if (cursors.down.isDown) this.player.y += 5;
}

Физические системы

Phaser 3 поддерживает несколько движков физики, каждый с собственными характеристиками:

  • Arcade Physics — легковесная система, идеально подходит для платформеров и простых столкновений.
  • Matter.js — продвинутый движок с поддержкой тел с физикой, силы, трения и столкновений.
  • Impact Physics — встроенный и оптимизированный движок с простыми столкновениями.

Физические объекты создаются через this.physics.add.sprite и могут иметь свойства:

  • body.velocity — скорость движения.
  • body.acceleration — ускорение.
  • body.collideWorldBounds — ограничение по границам канваса.
this.player = this.physics.add.sprite(100, 100, 'player');
this.player.setCollideWorldBounds(true);
this.player.setBounce(0.5);

Тайминг и обновление

Phaser использует циклическое обновление, где каждая сцена вызывается через метод update(time, delta). Время между кадрами (delta) позволяет создавать плавную анимацию, независимую от FPS.

Для событий с задержкой и повторов применяются:

  • this.time.addEvent({ delay, callback, loop })
  • this.time.delayedCall(delay, callback)

Пример таймера с повтором:

this.time.addEvent({
    delay: 1000,
    callback: () => console.log('Tick'),
    loop: true
});

Менеджеры ресурсов

Phaser 3 разделяет управление ресурсами на Loaders:

  • this.load.image() — изображения.
  • this.load.spritesheet() — спрайт-листы.
  • this.load.audio() — звуки и музыка.
  • this.load.json() — данные уровня или конфигурации.

Ресурсы могут быть загружены асинхронно, а сцена автоматически ожидает завершения загрузки.

Событийная система

Phaser 3 построен на событийной архитектуре, позволяющей реагировать на действия объектов, сцены или глобальные события. Основные методы:

  • scene.events.on(event, callback) — слушатель событий сцены.
  • this.input.on('pointerdown', callback) — обработка пользовательского ввода.
  • this.time.events.on('complete', callback) — события таймера.

События позволяют строить гибкую логику без жёсткой зависимости объектов друг от друга.

Архитектурные принципы

  • Модульность — сцены, группы и контейнеры отделены, что облегчает расширение.
  • Событийность — объекты взаимодействуют через события, а не прямые вызовы.
  • Системность — каждая подсистема (ввод, физика, анимация) управляется централизованно.
  • Производительность — оптимизированный рендеринг WebGL, возможность переключения на Canvas.
  • Расширяемость — пользователи могут создавать собственные компоненты, плагины и классы игровых объектов.

Эта архитектура делает Phaser 3 гибким инструментом для создания как простых аркад, так и сложных многосценных игр с динамическими объектами, физикой и полноценным управлением ресурсами.

Оглавление