В первой части мы создали новый проект и добавили сцену GameScene
. Если вы еще этого не сделали, то перейдите к первой части и выполните указания в ней.
Чтобы добавить землю и платформы в нашу игру, мы будем использовать ресурс ground
, который мы предварительно загрузили в 1 части.
Код будет помещен в новый метод, а не как в официальном руководстве в метод create()
. Организация кода в виде функций и методов для многократного использования помогает писать лучший код.
import Phaser from 'phaser'
export default class GameScene extends Phaser.Scene
{
//Методы constructor() и preload() остались без изменений
// ....
create()
{
this.add.image(400, 300, 'sky');
//this.add.image(400, 300, 'star');
this.createPlatforms();
}
createPlatforms()
{
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');
}
}
Строка добавления звезды закомментирована (строка 11), чтобы показать, что она нам больше не нужна. Вы можете удалить ее.
Код создания платформы такой же, как и в официальном руководстве Phaser, за исключением того, что мы организовали его так, чтобы его было удобнее читать. Ознакомьтесь с частью 4 официального руководства, если хотите понять, как работает код.
Вы должны увидеть зеленые платформы, добавленные в вашу игру по адресу http://localhost:8000/. Он должен обновиться автоматически, если вы оставили браузер открытым в 1 части.
Возможно вы слышали о принципе DRY (не повторяйся) в разработке программного обеспечения. Это замечательный метод. Мы собираемся применить его к нашим строковым литералам.
Вы можете видеть, что мы использовали строку 'ground' 4 раза в методе createPlatforms()
и 1 раз в preload()
. Но люди склонны делать опечатки. Лучший способ избежать опечаток - не печатать. 😂
Мы можем избежать ввода, используя константу.
import Phaser from 'phaser'
const GROUND_KEY = 'ground'
export default class GameScene extends Phaser.Scene
{
// ....
preload()
{
this.load.image('sky', 'assets/sky.png');
this.load.image(GROUND_KEY, 'assets/platform.png');
this.load.image('star', 'assets/star.png');
this.load.image('bomb', 'assets/bomb.png');
this.load.spritesheet('dude',
'assets/dude.png',
{ frameWidth: 32, frameHeight: 48 }
);
}
//...
createPlatforms()
{
const platforms = this.physics.add.staticGroup();
platforms.create(400, 568, GROUND_KEY).setScale(2).refreshBody();
platforms.create(600, 400, GROUND_KEY);
platforms.create(50, 250, GROUND_KEY);
platforms.create(750, 220, GROUND_KEY);
}
}
В продвинутых редакторах кода и средах разработки при использовании констант, вы можете использовать автозаполнение, которое не требуется ввод текста! Что позволяет избавиться от ошибок неправильного написания строки.
Персонаж будет создан с использованием файла dude.png
, загруженного в спрайт-лист в методе preload()
. Код создания персонажа разместим в методе createPlayer()
, который аналогичен тому, что мы сделали для платформ.
import Phaser from 'phaser'
const GROUND_KEY = 'ground'
const DUDE_KEY = 'dude'
export default class GameScene extends Phaser.Scene
{
constructor()
{
super('game-scene');
this.player = undefined;
}
preload()
{
this.load.image('sky', 'assets/sky.png');
this.load.image(GROUND_KEY, 'assets/platform.png');
this.load.image('star', 'assets/star.png');
this.load.image('bomb', 'assets/bomb.png');
this.load.spritesheet(DUDE_KEY,
'assets/dude.png',
{ frameWidth: 32, frameHeight: 48 }
);
}
create()
{
this.add.image(400, 300, 'sky');
this.createPlatforms();
this.createPlayer();
}
//...
createPlayer()
{
this.player = this.physics.add.sprite(100, 450, DUDE_KEY);
this.player.setBounce(0.2);
this.player.setCollideWorldBounds(true);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers(DUDE_KEY, { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: DUDE_KEY, frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers(DUDE_KEY, { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
}
}
Обратите внимание, что мы применили принцип DRY к строковому литералу 'dude' в виде констатнты DUDE_KEY
.
Мы добавили свойство player
в классе GameScene и установили его в undefined
в конструкторе. Это не обязательно, но объявление всех свойств экземпляра перед их использованием упрощает просмотр всех свойств с первого взгляда.
Экземпляр персонажа создается в методе createPlayer()
, который вызывается из create()
.
Откройте окно браузера и перейдите по адресу http://localhost:8000/, и вы должны увидеть, что ваш персонаж падает в нижнюю часть экрана.
Мы преобразовали в современный JavaScript 3, 4 и 5 части из официального руководства по игре Создание вашей первой игры в Phaser 3.
В следующей части мы рассмотрим столкновения между игроком и платформами и добавим элементы управления с клавиатуры для перемещения игрока .