Игры могут быть одним из самых сложных видов программного обеспечения, которые вы можете создавать, и самым интересным. Данная статья поможет использовать современные передовые методы, чтобы избежать различных ошибок или более легко исправлять возникающие. Она сэкономит ваше время и избавит от головной боли. Но самое главное, она поможет вам сделать игру лучше. В этой статье мы покажем вам, как создавать игры в Phaser 3, используя современный JavaScript и лучшие практики. Мы будем создавать ту же игру, что создаем в официального руководстве Создание вашей первой игры в Phaser 3. Таким образом вы сможете сравнить и сопоставить различия. Здесь можно взять все исходные файлы проекта.
Мы начнем наш проект на базе шаблона phaser3-parcel-template. Данный шаблон настроит все, что нам нужно для запуска сервера разработки и создания готовых к публикации файлов.
Если вам неизвестно как использовать шаблон phaser3-parcel-template, то перейдите сюда.
В официальном руководстве Phaser все находится в одном HTML-файле, так что это точка входа или место, где начинается наш код.
Наш код разделен на несколько файлов для лучшей организации, понимания и чтения. Для нас точкой входа является файл main.js
.
import Phaser from 'phaser'
import HelloWorldScene from './scenes/HelloWorldScene'
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: [HelloWorldScene]
}
export default new Phaser.Game(config)
Он похож на файл part1.html в официальное руководстве Phaser. Мы переместили пример сцены, которая содержит функции preload()
, create()
и update()
, в свой собственный файл с именем HelloWorldScene.js
.
В современном JavaScript мы используем синтаксис import
для ссылки на файлы проекта и внешние библиотеки. В приведенном выше примере Phaser
- это внешняя библиотека, а HelloWorldScene.js
- файл проекта. Расширение .js
нам не нужно, потому что оно подразумевается.
Официальное руководство Phaser добавляет файлы библиотеки Phaser в виде отдельного тега <script>
в файле index.html
. Вся информация о свойствах конфигурации Phaser, описанная в официальном руководстве, по-прежнему применима и сейчас.
Свойство scene
в нашем объекте config
является массивом, а не объектом с функциями preload()
, create()
и update()
как было в оригинальном руководстве.
При этом наш файл HelloWorldScene.js
включает в себя только функции preload()
и create()
, но не содержит функцию update()
, потому что мы не будем использовать ее в нашем новом более структурированном формате.
Мы используем классы, которые поддерживаются в современном JavaScript, а не просто создаем объекты или новые функции - не беспокойтесь, если вы не знаете, что это такое.
Все функции, которые вы могли бы поместить в объект-сцену вроде preload()
и create()
, могут быть помещены в классе сцены.
Давайте создадим класс GameScene
для хранения нашей игровой логики. Используйте в качестве примера HelloWorldScene
. Мы должны изменить уникальный ключ в constructor
и удалить всю логику в методах preload
и create
.
import Phaser from 'phaser'
export default class GameScene extends Phaser.Scene
{
constructor()
{
super('game-scene')
}
preload()
{
}
create()
{
}
}
Мы будем использовать те же ресурсы, что использовались в официальном руководстве Phaser. Вы можете скачать их здесь.
Создайте в вашем проекте папку public
(она должна быть на том же уровне, что и папка src
). Скопируйте из архива папку assets
в папку public
вашего проекта.
Теперь мы можем загрузить ресурсы, которые будем использовать дальнейшем, а также создать фон и звездочку, чтобы увидеть их в работе.
import Phaser from 'phaser'
export default class GameScene extends Phaser.Scene
{
constructor()
{
super('game-scene')
}
preload()
{
this.load.image('sky', 'assets/sky.png');
this.load.image('ground', '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 }
);
}
create()
{
this.add.image(400, 300, 'sky');
this.add.image(400, 300, 'star');
}
}
Теперь нам нужно добавить нашу сцену GameScene
в список scene
. Обновите свой файл main.js
следующим образом:
import Phaser from 'phaser'
import HelloWorldScene from './scenes/HelloWorldScene'
import GameScene from './scenes/GameScene'
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 }
}
},
scene: [GameScene, HelloWorldScene]
}
export default new Phaser.Game(config)
Обратите внимание, что мы изменили значение gravity.y
c 200 на 300, чтобы оно соответствовало официальному руководству Phaser.
Если хотите вы можете удалить ссылки на HelloWorldScene
.
Теперь мы можем протестировать наши изменения, открыв терминал, перейдя в папку нашего проекта и выполнив эту команду:
npm run start
Примечание: не забудьте выполнить команду npm install
после создания проекта, как указано в шаблоне phaser3-parcel-template.
Откройте окно браузера и перейдите по адресу http://localhost:8000/, и вы должны увидеть синий фон с желтой звездой посередине.
Мы преобразовали в современный JavaScript 1 и 2 части из официального руководства по игре Создание вашей первой игры в Phaser 3.
В следующей части мы займемся созданием платформ и персонажа игрока.