Начало работы с Phaser для разработки игр

Если вы столкнулись с проблемой, воспользуйтесь отладчиком браузера, чтобы выяснить, что пошло не так. Отсутствие даже одного символа может вызвать хаос, но обычно ваш отладчик улавливает эти маленькие ошибки.

Объяснение кода установки

Пока игра ничего не делает. Но мы уже многое сделали! Давайте посмотрим на код более подробно.

Для запуска игры Phaser вам необходимо импортировать библиотеку Phaser. Мы делаем это в строке 3. В этом примере мы связались с исходным кодом, но вы можете загрузить его на свой локальный хост и сослаться на файл.

Большая часть кода до сих пор настраивает игровую среду, которую переменная config магазины. В нашем примере мы настраиваем фазерную игру с синим (CCFFFF в шестнадцатеричном цветовом коде) фоном размером 600 пикселей на 600 пикселей. На данный момент физика игры установлена ​​на аркада, но Phaser предлагает другую физику.

В заключение, место действия сообщает программе запустить предварительная нагрузка перед запуском игры и Создайте функция, чтобы начать игру. Вся эта информация передается игровому объекту с именем игра.

Связанный: 6 лучших ноутбуков для программирования и кодирования

В следующем разделе кода игра действительно обретает форму. Функция предварительной загрузки – это то место, где вы хотите инициализировать все, что вам нужно для запуска игры. В нашем случае мы предварительно загрузили изображение нашей игровой фишки. Первый параметр .образ называет наше изображение, а второе сообщает программе, где найти изображение.

Изображение 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-игры. Продолжайте развивать этот код и улучшать свою игру.

Если вы столкнетесь с какими-либо ошибками, отладчик вашего браузера – отличный способ обнаружить проблему.

Как использовать Chrome DevTools для устранения проблем с веб-сайтом

Узнайте, как использовать встроенные инструменты разработки браузера Chrome для улучшения своих веб-сайтов.

Об авторе