О чем этот пример
Этот пример из официальной документации — отличная стартовая точка для знакомства с Phaser. Он демонстрирует ключевые концепции игрового движка: управление физикой Arcade, создание анимаций, обработку ввода и построение простой игровой логики. Разобрав этот пример, вы получите фундамент для создания собственных 2D-платформеров и аркадных игр.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class GameScene extends Phaser.Scene
{
constructor ()
{
super({ key: 'gameScene', active: true });
this.player = null;
this.cursors = null;
this.score = 0;
this.scoreText = null;
}
preload ()
{
// this.load.setBaseURL('https://cdn.phaserfiles.com/v385');
this.load.image('sky', 'src/games/firstgame/assets/sky.png');
this.load.image('ground', 'src/games/firstgame/assets/platform.png');
this.load.image('star', 'src/games/firstgame/assets/star.png');
this.load.image('bomb', 'src/games/firstgame/assets/bomb.png');
this.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}
create ()
{
this.add.image(400, 300, 'sky');
const platforms = this.physics.add.staticGroup();
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
platforms.create(600, 400, 'ground');
platforms.create(50, 250, 'ground');
platforms.create(750, 220, 'ground');
const player = this.physics.add.sprite(100, 450, 'dude');
player.setBounce(0.2);
player.setCollideWorldBounds(true);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
this.cursors = this.input.keyboard.createCursorKeys();
const stars = this.physics.add.group({
key: 'star',
repeat: 11,
setXY: { x: 12, y: 0, stepX: 70 }
});
stars.children.forEach(child =>
{
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});
this.scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
this.physics.add.collider(player, platforms);
this.physics.add.collider(stars, platforms);
this.physics.add.overlap(player, stars, this.collectStar, null, this);
this.player = player;
}
update ()
{
const cursors = this.cursors;
const player = this.player;
if (cursors.left.isDown)
{
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
player.setVelocityX(160);
player.anims.play('right', true);
}
else
{
player.setVelocityX(0);
player.anims.play('turn');
}
if (cursors.up.isDown && player.body.touching.down)
{
player.setVelocityY(-330);
}
}
collectStar (player, star)
{
star.disableBody(true, true);
this.score += 10;
this.scoreText.setText(`Score: ${this.score}`);
}
}
const config = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
parent: 'phaser-example',
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 800,
height: 600
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: [ GameScene ]
};
const game = new Phaser.Game(config);
Настройка сцены и загрузка ресурсов
Вся игра происходит в одном классе сцены GameScene. В конструкторе мы задаём ключ сцены и инициализируем свойства для игрока, управления и счёта.
Метод preload отвечает за загрузку всех необходимых графических ресурсов — фона, платформ, звёзд, бомб и спрайтшита персонажа. Обратите внимание на load.spritesheet, который загружает спрайтшит, указывая размер одного кадра.
preload ()
{
this.load.image('sky', 'src/games/firstgame/assets/sky.png');
this.load.image('ground', 'src/games/firstgame/assets/platform.png');
this.load.image('star', 'src/games/firstgame/assets/star.png');
this.load.image('bomb', 'src/games/firstgame/assets/bomb.png');
this.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}Создание мира и физических объектов
Метод create запускается один раз после загрузки ресурсов и отвечает за построение игрового мира.
Сначала добавляется статический фон через this.add.image. Затем создаётся группа статических физических тел platforms для платформ. Объекты в ней не двигаются под действием физики. Первая платформа масштабируется и требует вызова refreshBody(), так как её физическое тело изменилось после создания.
Персонаж создаётся как динамическое физическое тело с помощью this.physics.add.sprite. Для него настраивается упругость (setBounce) и ограничение выхода за границы мира (setCollideWorldBounds).
const platforms = this.physics.add.staticGroup();
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
const player = this.physics.add.sprite(100, 450, 'dude');
player.setBounce(0.2);
player.setCollideWorldBounds(true);Анимация персонажа и управление
Phaser использует систему анимаций, основанную на ключах. В примере созданы три анимации: 'left', 'turn' и 'right'. Анимация ходьбы использует generateFrameNumbers для автоматического создания массива кадров из спрайтшита.
Управление привязывается к стрелкам клавиатуры через this.input.keyboard.createCursorKeys().
Логика движения и воспроизведения анимации обрабатывается в методе update, который вызывается на каждом кадре. В зависимости от нажатой клавиши меняется горизонтальная скорость (setVelocityX) и проигрывается соответствующая анимация (anims.play). Прыжок (setVelocityY) возможен только когда персонаж касается земли (player.body.touching.down).
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.cursors = this.input.keyboard.createCursorKeys();
// В методе update:
if (cursors.left.isDown)
{
player.setVelocityX(-160);
player.anims.play('left', true);
}Создание и сбор игровых предметов
Звёзды создаются как группа физических тел (this.physics.add.group). Параметр setXY с шагом автоматически расставляет 12 звёзд в ряд. Для каждой звезды задаётся случайный отскок по оси Y.
Коллизии (столкновения) настраиваются методами this.physics.add.collider. Благодаря им персонаж и звёзды не проваливаются сквозь платформы. Взаимодействие персонажа со звездой (пересечение) обрабатывается через this.physics.add.overlap, который вызывает функцию collectStar при наложении тел.
В функции сбора звезда деактивируется (disableBody), а счёт увеличивается и отображается в текстовом объекте.
const stars = this.physics.add.group({
key: 'star',
repeat: 11,
setXY: { x: 12, y: 0, stepX: 70 }
});
this.physics.add.collider(player, platforms);
this.physics.add.collider(stars, platforms);
this.physics.add.overlap(player, stars, this.collectStar, null, this);
collectStar (player, star)
{
star.disableBody(true, true);
this.score += 10;
this.scoreText.setText(`Score: ${this.score}`);
}Конфигурация игры и масштабирование
Конфигурационный объект config передаётся в конструктор Phaser.Game. Важная часть — настройка масштабирования в свойстве scale. Режим Phaser.Scale.FIT гарантирует, что игра будет растянута с сохранением пропорций, чтобы целиком вписаться в родительский контейнер (parent). Phaser.Scale.CENTER_BOTH центрирует игровое поле по обеим осям.
Физический движок Arcade настраивается с гравитацией по оси Y. Сцена передаётся в виде массива, так как их может быть несколько.
const config = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
parent: 'phaser-example',
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 800,
height: 600
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: [ GameScene ]
};Что попробовать дальше
Этот пример покрывает основы создания интерактивного мира в Phaser. Вы научились работать с физикой, анимациями и группами объектов. Для экспериментов попробуйте добавить врагов (бомбы уже загружены!), реализовать систему жизней, создать несколько уровней или увеличить сложность, заставив звёзды двигаться. Изучите отладку физики, установив debug: true, чтобы видеть хитбоксы объектов.