Први кораци са Пхасером за развој игара

Први кораци са Пхасером за развој игара

Пхасер је оквир за креирање 2Д видео игара. Користи ХТМЛ5 Цанвас за приказ игре и ЈаваСцрипт за покретање игре. Предност коришћења Пхасера ​​у односу на ванилин ЈаваСцрипт је у томе што има опсежну библиотеку која употпуњује велики део физике видео игара омогућавајући вам да се концентришете на дизајнирање саме игре.





Пхасер скраћује време развоја и олакшава ток рада. Научимо како да направимо основну игру са Пхасером.



Зашто се развијати са Пхасером?

Пхасер сличан је другим визуелним програмским језицима по томе што се програм заснива на петљама ажурираним верзијама. Пхасер има три главне фазе: унапред учитавање, креирање и ажурирање.





У прелоад -у, средства игре се учитавају и стављају на располагање игри.

Цреате покреће игру и све почетне елементе игре. Свака од ових функција се покреће једном када се игра покрене.



Ажурирање, с друге стране, ради у току кроз игру. Радни коњ ажурира елементе игре како би била интерактивна.

Подесите свој систем за развој игара помоћу Пхасер -а

Упркос томе што Пхасер ради на ХТМЛ-у и ЈаваСцрипт-у, игре се заправо покрећу на страни сервера, а не на страни клијента. То значи да ћете морати да покренете игру ваш локални домаћин . Покретање игре на серверу омогућава вашој игри приступ додатним датотекама и средствима изван програма. препоручујем помоћу КСАМПП -а за постављање локалног хоста ако већ немате једно подешавање.



Доњи код ће вас покренути. Поставља основно окружење за игру.







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


За покретање игре је потребна ПНГ слика под називом 'гамеПиеце' сачувана у фолдеру 'имг' на вашем локалном хосту. Ради једноставности, овај пример користи наранџасти квадрат од 60 к 100 и 60 пиксела. Ваша игра би требала изгледати отприлике овако:



Ако наиђете на проблем, помоћу програма за отклањање грешака у прегледачу откријте шта је пошло по злу. Недостатак чак и једног знака може изазвати пустош, али генерално, ваш дебагер ће ухватити те мале грешке.

Објашњење кода за подешавање

До сада игра не ради ништа. Али већ смо покрили доста терена! Погледајмо код детаљније.

Да бисте покренули Пхасер игру, морате да увезете Пхасер библиотеку. Ово радимо на линији 3. ​​У овом примеру смо се повезали са изворним кодом, али можете га преузети на свој локални сервер и референцирати датотеку.

ствари које треба радити на интернету када вам је досадно

Велики део досадашњег кода конфигурише окружење игре, што је променљива цонфиг продавнице. У нашем примеру постављамо фазерску игру са плавом (ЦЦФФФФ у хексадецималном коду боје) позадином која је 600 к 600 пиксела. За сада је физика игре постављена на Аркадијски , али Пхасер нуди другачију физику.

Коначно, сцена говори програму да покрене прелоад функцију пре почетка игре и Креирај функцију за покретање игре. Све ове информације се прослеђују објекту игре који се зове игра .

Повезан: 6 најбољих преносних рачунара за програмирање и кодирање

Следећи одељак кода је место где се игра заиста обликује. Функција унапред учитавања је место где желите да покренете све што вам је потребно за покретање игре. У нашем случају, унапред смо учитали слику нашег комада игре. Први параметар .слика именује нашу слику, а друга говори програму где да пронађе слику.

Слика гамеПиеце је додата игри у функцији креирања. Ред 29 каже да додајемо слику гамеПиеце као сприте 270пк лево и 450пк доле из горњег левог угла нашег подручја за игру.

Кретање нашег комада игре

До сада се ово тешко може назвати игром. Као прво, не можемо да померимо наш комад игре. Да бисмо могли да променимо ствари у нашој игри, мораћемо да додамо функцију ажурирања. Такође ћемо морати да прилагодимо сцену у променљивој цонфиг да бисмо рекли игри коју функцију да покренемо када ажурирамо игру.

Додавање функције ажурирања

Нова сцена у конфигурацији:

scene: {
preload: preload,
create: create,
update: update
}

Затим додајте функцију ажурирања испод функције креирања:

како отпремити хд видео записе на фацебоок са андроида
function update(){
}

Добијање кључних уноса

Да бисмо омогућили играчу да контролише део игре помоћу тастера са стрелицама, мораћемо да додамо променљиву да бисмо пратили које тастере играч притиска. Промените променљиву под називом кеиИнпутс испод где смо декларисали гамеПиецес. Ако га тамо прогласите, све функције ће приступити новој променљивој.

var gamePiece;
var keyInputs;

Променљиву кеиИнпут треба покренути када се игра креира у функцији цреате.

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

Затим ће сваки спрајт с препреком морати бити иницијализиран у функцији цреате, баш као и комад игре.

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 пиксела за сваки кадар. Када је квадрат ван екрана, помера се назад на супротну страну на новом случајном месту. Ово ће осигурати да увек постоји нова препрека за играча.

Откривање судара

Али још нисмо завршили. Можда сте приметили да наш играч може проћи право кроз препреке. Морамо да учинимо да игра открије када играч наиђе на препреку и заврши игру.

Библиотека Пхасер физике има детектор сударача. Све што треба да урадимо је да га иницијализујемо у функцији цреате.

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.

Трећи параметар говори сударачу шта да уради када открије судар. У овом примеру постоји функција. Ако дође до судара, сви елементи игре се уништавају; ово зауставља игру. Сада ће играч прећи ако налети на препреку.

Испробајте развој игара са Пхасером

Постоји много различитих начина на које се ова игра може побољшати и учинити сложенијом. Створили смо само једног играча, али други лик који се може играти може се додати и контролисати помоћу 'авсд' контрола. Слично томе, могли бисте експериментирати с додавањем више препрека и промјеном брзине њиховог кретања.

како сакрити фасцикле виндовс 10

Овај увод ће вас покренути, али има још много тога за научити. Одлична ствар у вези Пхасера ​​је то што је много физике игре урађено за вас. То је одличан једноставан начин за почетак дизајнирања 2Д игара. Наставите да градите на овом коду и побољшајте игру.

Ако наиђете на било коју грешку, програм за отклањање грешака у прегледачу је одличан начин да откријете проблем.

Објави Објави Твеет Емаил Како користити Цхроме ДевТоолс за решавање проблема са веб страницама

Сазнајте како да користите уграђене развојне алате прегледача Цхроме за побољшање веб локација.

Прочитајте следеће Повезане теме
  • Програмирање
  • ЈаваСцрипт
  • ХТМЛ5
  • Развој игара
О аутору Јеннифер Сеатон(Објављен 21 чланак)

Ј. Сеатон је научни писац који се специјализовао за разбијање сложених тема. Докторирала је на Универзитету Саскатцхеван; њено истраживање се фокусирало на коришћење учења заснованог на играма за повећање ангажовања ученика на мрежи. Кад не ради, затећи ћете је како чита, игра видео игрице или се бави вртларством.

Више од Јеннифер Сеатон

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили