Структура типового проекта

Phaser — это мощная библиотека для создания 2D-игр на JavaScript, основанная на концепции сцен (Scenes) и объектов игрового мира. Любой проект в Phaser состоит из нескольких ключевых компонентов:

  1. Конфигурация игры (GameConfig) Определяет параметры и поведение игры на старте:

    • type — рендерер (Phaser.AUTO, Phaser.CANVAS, Phaser.WEBGL)
    • width и height — размеры канваса
    • physics — настройки физического движка
    • scene — массив сцен или одиночная сцена
    const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    scene: [BootScene, MainScene, UIScene]
};

const game = new Phaser.Game(config);

  2. Сцены (Scenes) Сцена представляет собой отдельный этап или экран игры: загрузка ресурсов, главный уровень, меню, экран победы/поражения. Основные методы сцены:

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

    Каждая сцена наследует Phaser.Scene и может управляться через методы this.scene.start(), this.scene.pause(), this.scene.stop().

  3. Ассеты и менеджеры загрузки Phaser предоставляет встроенный загрузчик через this.load. Поддерживаются форматы:

    • Изображения (image, spritesheet)
    • Анимации (atlas)
    • Аудио (audio, audioSprite)
    • JSON и другие данные

    Загрузка должна происходить в методе preload():

    preload() {
    this.load.image('player', 'assets/player.png');
    this.load.spritesheet('explosion', 'assets/explosion.png', { frameWidth: 64, frameHeight: 64 });
    this.load.audio('bgm', 'assets/music.mp3');
}

Организация файлов проекта

Структура типового проекта делится на несколько каталогов:

/src
   /scenes
       BootScene.js
       MainScene.js
       UIScene.js
   /sprites
       player.png
       enemy.png
   /audio
       bgm.mp3
       sfx.wav
   /animations
       explosion.json
   /js
       main.js
  • scenes — отдельные сцены игры, каждая в своем файле
  • sprites и audio — хранилища ассетов
  • animations — JSON-файлы с данными анимаций
  • js/main.js — точка входа, создание конфигурации и экземпляра Phaser.Game

Такое разделение упрощает масштабирование проекта, повторное использование кода и поддержку.

Игровые объекты и группы

Phaser разделяет объекты на несколько типов:

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

Пример создания группы врагов:

this.enemies = this.physics.add.group({
    key: 'enemy',
    repeat: 5,
    setXY: { x: 100, y: 0, stepX: 120 }
});

Работа с физикой

Phaser поддерживает несколько движков: Arcade, Matter, Impact. Наиболее часто используется Arcade:

  • Легковесный и быстрый для платформеров и стрелялок
  • Поддержка столкновений, гравитации, ограничений по скорости
  • Свойства объектов: body.velocity, body.gravity, body.collideWorldBounds

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

this.physics.add.collider(this.player, this.enemies, this.hitEnemy, null, this);

Анимации

Анимации создаются через менеджер this.anims и могут быть назначены спрайтам:

this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 5 }),
    frameRate: 10,
    repeat: -1
});
this.player.anims.play('walk');

Использование повторов, скоростей кадров и событий анимаций позволяет создавать динамичные эффекты и реакции на действия игрока.

Менеджеры интерфейса и пользовательского ввода

  • Ввод (Input) — клавиатура, мышь, сенсорный экран:
this.cursors = this.input.keyboard.createCursorKeys();
if (this.cursors.left.isDown) { this.player.setVelocityX(-160); }
  • UI (DOM Elements или Text) — для отображения очков, жизней, диалогов:
this.scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#fff' });

Асинхронная организация проекта

Крупные проекты разбиваются на сцены и модули с использованием ES6 модулей:

import BootScene from './scenes/BootScene.js';
import MainScene from './scenes/MainScene.js';

const config = { scene: [BootScene, MainScene] };
const game = new Phaser.Game(config);

Это позволяет:

  • Изолировать логику каждой сцены
  • Ускорить загрузку через lazy-loading ассетов
  • Повысить читаемость и тестируемость кода

Использование тайловых карт и уровней

Для сложных платформеров и RPG часто применяются Tilemaps:

  • Хранят данные о расположении тайлов в JSON
  • Поддерживают слои (layers) и объекты (objects)
  • Интегрируются с физикой для столкновений

Пример загрузки карты:

const map = this.make.tilemap({ key: 'level1' });
const tileset = map.addTilesetImage('tiles', 'tilesImage');
const platforms = map.createLayer('Platforms', tileset, 0, 0);
platforms.setCollisionByExclusion([-1]);

Подход к масштабируемости

Крупные игры на Phaser строятся с использованием:

  • Разделения на сцены и менеджеры
  • Модульной структуры ассетов
  • Централизованного контроля состояния игры через глобальный объект или GameState
  • Переиспользуемых классов спрайтов и врагов
  • Событийной системы для коммуникации между сценами и объектами

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

Оглавление