Начало работы с Phaser для разработки игр
Phaser – это фреймворк для создания 2D-видеоигр. Он использует HTML5 Canvas для отображения игры и JavaScript для запуска игры. Преимущество использования Phaser по сравнению с обычным JavaScript заключается в том, что он имеет обширную библиотеку, которая завершает большую часть физики видеоигр, позволяя вам сосредоточиться на разработке самой игры.
Phaser сокращает время разработки и упрощает рабочий процесс. Давайте узнаем, как создать простую игру с Phaser.
Зачем разрабатывать с Phaser?
Phaser похож на другие языки визуального программирования в том, что программа основана на циклических обновлениях. Phaser имеет три основных этапа: предварительная загрузка, создание и обновление.
При предварительной загрузке игровые ресурсы загружаются и становятся доступными для игры.
Create инициализирует игру и все начальные игровые элементы. Каждая из этих функций запускается один раз при запуске игры.
Обновление же выполняется циклически на протяжении всей игры. Это рабочая лошадка, которая обновляет элементы игры, чтобы сделать ее интерактивной.
Настройте свою систему для разработки игр с помощью Phaser
Несмотря на то, что Phaser работает на HTML и JavaScript, игры на самом деле запускаются на стороне сервера, а не на стороне клиента. Это означает, что вам нужно будет запустить игру на локальном хосте . Запуск игры на стороне сервера позволяет вашей игре получать доступ к дополнительным файлам и ресурсам вне программы. Я рекомендую использовать XAMPP для настройки локального хоста, если у вас еще нет одной настройки.
Приведенный ниже код поможет вам начать работу. Он устанавливает базовую игровую среду.
<html>
<head>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
</head>
<body>
<script>
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};
var gamePiece;
var game = new Phaser.Game(config);
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}
</script>
</body>
</html>Для запуска игре потребуется изображение в формате PNG с именем «gamePiece», сохраненное в папке «img» на вашем локальном хосте. Для простоты в этом примере используется оранжевый квадрат 60xgame de60px. Ваша игра должна выглядеть примерно так:
Если вы столкнулись с проблемой, воспользуйтесь отладчиком своего браузера, чтобы выяснить, что пошло не так. Отсутствие даже одного символа может вызвать хаос, но обычно ваш отладчик улавливает эти маленькие ошибки.
Объяснение кода установки
Пока игра ничего не делает. Но мы уже многое сделали! Давайте посмотрим на код более подробно.
Для запуска игры Phaser вам необходимо импортировать библиотеку Phaser. Мы делаем это в строке 3. В этом примере мы связались с исходным кодом, но вы можете загрузить его на свой локальный хост и сослаться на файл.
Большая часть кода до сих пор настраивает игровую среду, которую хранит переменная config . В нашем примере мы настраиваем фазерную игру с синим (CCFFFF в шестнадцатеричном цветовом коде) фоном размером 600 пикселей на 600 пикселей. На данный момент физика игры настроена на аркадную , но Phaser предлагает другую физику.
Наконец, сцена сообщает программе запустить функцию предварительной загрузки перед запуском игры и функцию создания для запуска игры. Вся эта информация передается игровому объекту под названием game .
В следующем разделе кода игра действительно обретает форму. Функция предварительной загрузки – это то место, где вы хотите инициализировать все, что вам нужно для запуска игры. В нашем случае мы предварительно загрузили изображение нашей игровой фишки. Первый параметр .image дает имя нашему изображению, а второй сообщает программе, где найти изображение.
Изображение gamePiece было добавлено в игру в функции создания. Строка 29 говорит, что мы добавляем изображение gamePiece как спрайт на 270 пикселей влево и 450 пикселей вниз от верхнего левого угла нашей игровой области.
Заставляем наш игровой элемент двигаться
Пока это сложно назвать игрой. Во-первых, мы не можем двигать игровую фишку. Чтобы иметь возможность что-то изменить в нашей игре, нам нужно будет добавить функцию обновления. Нам также нужно будет настроить сцену в переменной config, чтобы сообщить игре, какую функцию запускать при обновлении игры.
Добавление функции обновления
Новая сцена в конфиге:
scene: {
preload: preload,
create: create,
update: update
}Затем добавьте функцию обновления под функцией создания:
function update(){
}Получение ключевых входов
Чтобы позволить игроку управлять игровым элементом с помощью клавиш со стрелками, нам нужно будет добавить переменную, чтобы отслеживать, какие клавиши нажимает игрок. Объявите переменную с именем keyInputs ниже, где мы объявили gamePieces. Объявление его там позволит всем функциям получить доступ к новой переменной.
var gamePiece;
var keyInputs;Переменная keyInput должна быть инициализирована при создании игры в функции create.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}Теперь в функции обновления мы можем проверить, нажимает ли игрок клавишу со стрелкой, и, если они нажимают, соответственно переместить наш игровой элемент. В приведенном ниже примере игровая часть перемещается на 2 пикселя, но вы можете увеличить или уменьшить это число. Перемещение части на 1 пиксель за раз казалось немного медленным.
function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}В игре появился подвижный персонаж! Но чтобы по-настоящему быть игрой, нам нужна цель. Добавим препятствия. Уклонение от препятствий было основой многих игр в 8-битную эпоху.
Добавление препятствий в игру
В этом примере кода используются два спрайта препятствий, называемые препятствием1 и препятствием 2. Препятствие1 – это синий квадрат, а препятствие2 – зеленый. Каждое изображение нужно будет предварительно загрузить, как и спрайт игрового объекта.
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}Затем каждый спрайт препятствия нужно будет инициализировать в функции create, как и игровой элемент.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}Заставляя препятствия двигаться
На этот раз для перемещения фигур мы не хотим использовать ввод игрока. Вместо этого давайте переместим одну фигуру сверху вниз, а другую слева направо. Для этого добавьте в функцию обновления следующий код:
obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}
obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}Приведенный выше код будет перемещать препятствие1 вниз по экрану и препятствие2 через игровую область на 4 пикселя за каждый кадр. Когда квадрат выходит за пределы экрана, он перемещается обратно на противоположную сторону в новое случайное место. Это гарантирует, что у игрока всегда будет новое препятствие.
Обнаружение столкновений
Но мы еще не закончили. Вы могли заметить, что наш игрок может проходить сквозь препятствия. Нам нужно заставить игру определять, когда игрок сталкивается с препятствием, и завершать игру.
В библиотеке физики Phaser есть детектор коллайдеров. Все, что нам нужно сделать, это инициализировать его в функции создания.
this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});Метод коллайдера требует трех параметров. Первые два параметра определяют, какие объекты сталкиваются. Итак, выше мы установили два коллайдера. Первый обнаруживает, когда игровой элемент сталкивается с препятствием1, а второй коллайдер ищет столкновения между игровым элементом и препятствием2.
Третий параметр сообщает коллайдеру, что делать, когда он обнаруживает столкновение. В этом примере есть функция. При столкновении все игровые элементы уничтожаются; это останавливает игру. Теперь игрок завершит игру, если столкнется с препятствием.
Попробуйте разработку игр с Phaser
Есть много разных способов улучшить и сделать эту игру более сложной. Мы создали только одного игрока, но можно добавить второго игрового персонажа и управлять им с помощью элементов управления «awsd». Точно так же вы можете поэкспериментировать с добавлением дополнительных препятствий и изменением скорости их движения.
Это введение поможет вам начать работу, но еще многое предстоит узнать. В Phaser замечательно то, что большая часть игровой физики сделана за вас. Это отличный простой способ начать разрабатывать 2D-игры. Продолжайте развивать этот код и улучшать свою игру.
Если вы столкнетесь с какими-либо ошибками, отладчик вашего браузера – отличный способ обнаружить проблему.