Първи стъпки с Phaser за разработване на игри

Phaser е рамка за създаване на 2D видео игри. Той използва HTML5 Canvas за показване на играта и JavaScript за стартиране на играта. Ползата от използването на Phaser над ванилия JavaScript е, че разполага с обширна библиотека, която завършва голяма част от физиката на видео игрите, което ви позволява да се концентрирате върху проектирането на самата игра.

Phaser намалява времето за разработка и улеснява работния процес. Нека се научим как да създадем основна игра с Phaser.

Защо да се разработваме с Phaser?

Фазер е подобен на други езици за визуално програмиране, тъй като програмата се основава на циклични актуализации. Phaser има три основни етапа: предварително зареждане, създаване и актуализиране.

При предварително зареждане активите на играта се качват и се предоставят на разположение на играта.

Create инициализира играта и всички начални елементи на играта. Всяка от тези функции се стартира веднъж при стартиране на играта.

Актуализацията, от друга страна, се изпълнява в цикъл през цялата игра. Именно работният кон актуализира елементите на играта, за да я направи интерактивна.

Настройте вашата система за разработване на игри с Phaser

Въпреки че Phaser работи на HTML и JavaScript, игрите всъщност се изпълняват от страна на сървъра, а не от страна на клиента. Това означава, че ще трябва да стартирате играта си вашия локален хост. Стартирането на сървъра на играта позволява на играта ви достъп до допълнителни файлове и активи извън програмата. препоръчвам използване на XAMPP за настройване на localhost ако все още нямате една настройка.

Какво е 127.0 0.1, Localhost или Loopback адрес?

Виждали сте „localhost“ на компютъра си, но какво е това? Какво означава адресът 127.0.0.1? Хакнат ли сте?

Кодът по-долу ще ви подготви за работа. Той създава основна игрална среда.

За да стартирате, играта ще изисква PNG изображение, наречено "gamePiece", запазено в папка "img" на вашия локален хост. За опростяване този пример използва оранжев квадрат 60xgame de60px. Играта ви трябва да изглежда по следния начин:

Ако срещнете проблем, използвайте дебъгера на браузъра си, за да разберете какво се е объркало. Липсата дори на един символ може да причини хаос, но като цяло вашият дебъгер ще улови тези малки грешки.

Обяснение на кода за настройка

Засега играта не прави нищо. Но ние вече покрихме много земя! Нека разгледаме кода по-задълбочено.

За да се стартира игра Phaser, трябва да импортирате библиотеката Phaser. Правим това на ред 3. В този пример се свързахме с изходния код, но можете да го изтеглите на вашия localhost и да препратите файла също.

Голяма част от кода досега конфигурира средата на играта, която е променливата конфиг магазини. В нашия пример настройваме фазерна игра със син (CCFFFF в шестнадесетичен цветен код) фон, който е 600px на 600px. Засега физиката на играта е настроена на аркада, но Phaser предлага различна физика.

И накрая, сцена казва на програмата да стартира предварително зареждане функция преди началото на играта и създайте функция за стартиране на играта. Цялата тази информация се предава на игралния обект, наречен игра.

Свързани: 6-те най-добри лаптопа за програмиране и кодиране

Следващият раздел на кода е мястото, където играта наистина се оформя. Функцията за предварително зареждане е мястото, където искате да инициализирате всичко, от което се нуждаете, за да стартирате играта си. В нашия случай сме предварително заредили изображението на нашата игра. Първият параметър на .изображение назовава нашето изображение, а вторият казва на програмата къде да намери изображението.

Изображението gamePiece е добавено към играта във функцията за създаване. Ред 29 казва, че добавяме изображението gamePiece като спрайт 270px вляво и 450px надолу от горния ляв ъгъл на нашата игрална зона.

Преместване на нашата игра

Засега това трудно може да се нарече игра. Първо, не можем да преместим нашата игра. За да можем да променим нещата в нашата игра, ще трябва да добавим функция за актуализиране. Също така ще трябва да коригираме сцената в променливата config, за да кажем на играта коя функция да стартира, когато актуализираме играта.

Добавяне на функция за актуализиране

Нова сцена в config:

сцена: {
предварително зареждане: предварително зареждане,
създаване: създаване,
актуализация: актуализация
}

След това добавете функция за актуализация под функцията за създаване:

актуализация на функцията () {
}

Получаване на ключови входове

За да позволим на играча да контролира играта с клавишите със стрелки, ще трябва да добавим променлива, за да проследим кои клавиши играчът натиска. Декларирайте променлива, наречена keyInputs по-долу, където декларирахме gamePieces. Декларирането му там ще позволи на всички функции да имат достъп до новата променлива.

var gamePiece;
var keyInputs;

Променливата keyInput трябва да се инициализира, когато играта е създадена във функцията за създаване.

функция create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
}

Сега във функцията за актуализиране можем да проверим дали играчът натиска клавиш със стрелка и ако са, преместете съответно нашата игра. В примера по-долу фигурата на играта се премества с 2 пиксела, но можете да направите това по-голямо или по-малко число. Преместването на парчето с 1 пиксел в даден момент изглеждаше малко бавно.

актуализация на функцията () {
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 е зелен. Всяко изображение ще трябва да бъде предварително заредено, точно както спрайтът на играта.

функция предварително зареждане () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('препятствие1', 'img / препятствие1.png');
this.load.image ('препятствие2', 'img / препятствие2.png');
}

Тогава всеки спрайт с препятствия ще трябва да бъде инициализиран във функцията за създаване, точно като геймплея.

функция create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
препятствие1 = this.physics.add.sprite (200, 0, 'препятствие1');
препятствие2 = this.physics.add.sprite (0, 200, 'препятствие2');
}

Преместване на препятствията

За да преместим фигурите този път, не искаме да използваме въвеждането на плейъра. Вместо това нека нека едното парче се премести отгоре надолу, а другото да се движи отляво надясно. За да направите това, добавете следния код към функцията за актуализация:

препятствие1.y = препятствие1.y + 4;
ако (препятствие1.y> 600) {
препятствие1.y = 0;
препятствие1.x = Фазер. Математика. Между (0, 600);
}
препятствие2.x = препятствие2.x + 4;
ако (препятствие2.x> 600) {
препятствие2.x = 0;
препятствие2.y = Фазер. Математика. Между (0, 600);
}

Кодът по-горе ще премести препятствие1 надолу по екрана и препятствие2 в зоната на играта 4px всеки кадър. След като квадратът е извън екрана, той се премества обратно в противоположната страна на ново произволно място. Това ще гарантира, че винаги има ново препятствие за играча.

Откриване на сблъсъци

Но все още не сме приключили. Може би сте забелязали, че нашият играч може да премине право през препятствията. Трябва да накараме играта да открие кога играчът удря препятствие и да прекрати играта.

Физическата библиотека на Phaser има детектор на сблъсък. Всичко, което трябва да направим, е да го инициализираме във функцията за създаване.

this.physics.add.collider (gamePiece, Obstacle1, функция (gamePiece, Obstacle1) {
gamePiece.destroy ();
препятствие.разрушаване ();
препятствие2.разрушаване ();
});
this.physics.add.collider (gamePiece, Obstacle2, функция (gamePiece, Obstacle2) {
gamePiece.destroy ();
препятствие.разрушаване ();
препятствие2.разрушаване ();
});

Методът на колайдера изисква три параметъра. Първите два параметъра идентифицират кои обекти се сблъскват. И така, по-горе, имаме настроени два брояча. Първият засича, когато геймплейът се сблъска с препятствие1, а вторият сблъсък търси сблъсъци между геймплея и препятствието2.

Третият параметър казва на колайдера какво да прави, след като открие сблъсък. В този пример има функция. Ако има сблъсък, всички елементи на играта се унищожават; това спира играта. Сега играчът ще играе, ако удари препятствие.

Опитайте разработката на игри с Phaser

Има много различни начини тази игра да бъде подобрена и усложнена. Създали сме само един играч, но може да се добави и управлява втори герой, който може да се контролира с контролите "awsd". По същия начин можете да експериментирате с добавяне на повече препятствия и промяна на скоростта на тяхното движение.

Това въведение ще ви започне, но има още много да научите. Страхотното при Phaser е, че голяма част от физиката на играта е направена за вас. Това е чудесен лесен начин да започнете да проектирате 2D игри. Продължете да надграждате този код и да усъвършенствате играта си.

Ако срещнете някакви грешки, дебъгерът на браузъра ви е чудесен начин да откриете проблема.

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

Научете как да използвате вградените инструменти за разработка на браузъра Chrome, за да подобрите уебсайтовете си.

За автора