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

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

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





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



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

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





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

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



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

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

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



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







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');
}


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



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

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

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

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

колко устройства мога да гледам netflix с един акаунт

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

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

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

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

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

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

Засега това едва ли може да се нарече игра. От една страна, не можем да преместваме игралното си парче. За да можем да променим нещата в нашата игра, ще трябва да добавим функция за актуализация. Също така ще трябва да коригираме сцената в променливата 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 пиксела, но можете да направите това по -голямо или по -малко число. Преместването на парчето 1px наведнъж изглеждаше малко бавно.

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 през областта на играта 4px всеки кадър. След като квадратът е извън екрана, той се премества обратно на противоположната страна на ново произволно място. Това ще гарантира, че винаги има ново препятствие за играча.

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

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

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

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“. По същия начин можете да експериментирате с добавяне на повече препятствия и промяна на скоростта на тяхното движение.

как да възстановите акаунта си във Facebook

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

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

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

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

Прочетете Напред Свързани теми
  • Програмиране
  • JavaScript
  • HTML5
  • Разработка на игри
За автора Дженифър Сийтън(21 статии са публикувани)

Дж. Сийтън е научен писател, специализиран в разбиването на сложни теми. Има докторска степен от университета в Саскачеван; нейното изследване се фокусира върху използването на базирано на игри обучение за повишаване на ангажираността на учениците онлайн. Когато тя не работи, ще я намерите с четене, игра на видео игри или градинарство.

Още от Дженифър Сийтън

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате