Теория

Игра и сцена

Зачем движок

В курсе Canvas мы всё делали сами: игровой цикл, dt, отрисовку, столкновения, клавиатуру. Это полезно для понимания, но для настоящей игры нужно ещё много чего: картинки и анимации, звук, камера, физика, сцены (меню, уровень, конец игры), поддержка телефонов. Игровой движок даёт всё это готовым. Phaser — самый популярный движок для 2D-игр в браузере; на нём сделаны тысячи игр для сайтов, Telegram и Facebook.

Игра и её настройки

Игра создаётся одним объектом с настройками:

const game = new Phaser.Game({
  type: Phaser.AUTO,          // WebGL, а если не поддерживается — Canvas
  width: 800,
  height: 600,
  parent: "game",             // id элемента страницы, куда вставить холст
  backgroundColor: "#1d2b53",
  physics: { default: "arcade" },   // физика (тема 3)
  scene: MainScene,           // сцена или массив сцен
});

Phaser сам создаёт <canvas>, запускает игровой цикл и вызывает методы сцены. На нашем сайте Phaser подключён как глобальный объект Phaser; в проекте его ставят npm install phaser и пишут import Phaser from "phaser".

Сцена

Игра состоит из сцен: экран загрузки, меню, уровень, «Game Over». Сцена — класс, наследник Phaser.Scene, с тремя главными методами:

class MainScene extends Phaser.Scene {
  preload() {
    // загрузить картинки и звуки (до create)
  }

  create() {
    // один раз: создать объекты, подписаться на клавиши
  }

  update(time, delta) {
    // каждый кадр: двигать, проверять, считать
  }
}

Это тот же игровой цикл из курса Canvas: create — подготовка состояния, update — шаг игры. Но рисовать вручную не нужно: Phaser сам рисует все объекты сцены каждый кадр.

update получает time — время с запуска игры и delta — миллисекунды с прошлого кадра (наш старый dt, только в мс).

Игровые объекты

Всё, что видно на экране, создаётся фабрикой this.add:

create() {
  this.add.rectangle(200, 150, 80, 40, 0xff5722);        // x, y, ширина, высота, цвет
  this.add.circle(100, 100, 25, 0x42a5f5);                // x, y, радиус, цвет
  this.add.text(10, 10, "Score: 0", { fontSize: "20px", color: "#ffffff" });
  this.add.image(300, 200, "hero");                       // картинка, загруженная в preload
}

Две важные отличия от canvas:

x, y — центр объекта, а не левый верхний угол (для текста — левый верхний угол). Точку привязки меняет setOrigin(0, 0).
Цвет — число в шестнадцатеричной записи: 0xff5722 (как #ff5722, но с 0x).

Объект — это обычный JavaScript-объект с свойствами, их можно менять в любой момент, и на следующем кадре он появится в новом виде:

const box = this.add.rectangle(200, 150, 80, 40, 0xff5722);
box.x += 50;
box.angle = 45;          // повернуть на 45°
box.setScale(2);         // увеличить вдвое
box.setAlpha(0.5);       // полупрозрачный
box.setVisible(false);   // спрятать
box.destroy();           // удалить со сцены

Сохраняй объекты в this

Объект, созданный в create, понадобится в update. Поэтому его сохраняют в свойство сцены:

create() {
  this.player = this.add.rectangle(200, 150, 30, 30, 0x4caf50);
  this.scoreText = this.add.text(10, 10, "Score: 0");
}

update(time, delta) {
  this.player.x += 100 * (delta / 1000);    // 100 пикселей в секунду
}

Текст

this.label = this.add.text(10, 10, "Lives: 3", {
  fontFamily: "Arial",
  fontSize: "24px",
  color: "#ffeb3b",
});
this.label.setText("Lives: 2");   // поменять строку

Картинки

Картинки загружают в preload по ключу, а потом используют этот ключ:

preload() {
  this.load.image("sky", "assets/sky.png");
  this.load.spritesheet("hero", "assets/hero.png", { frameWidth: 32, frameHeight: 48 });
}
create() {
  this.add.image(400, 300, "sky");
}

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

Итог

new Phaser.Game({...}) — игра: размер, место на странице, физика, сцены.
Сцена — класс с preload (загрузка), create (один раз), update(time, delta) (каждый кадр).
this.add.rectangle / circle / text / image — объекты; x, y у фигур — центр, цвет — 0xRRGGBB.
Нужные в update объекты сохраняем в this.