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

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

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

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

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

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

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

Ажурирање, с друге стране, ради петљу током целе игре. Коњ за рад је тај који ажурира елементе игре како би постала интерактивна.

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

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

Шта је 127.0 0.1, Лоцалхост или Лоопбацк адреса?

Видели сте „лоцалхост“ на свом рачунару, али шта је то? Шта значи адреса 127.0.0.1? Јесте ли хаковани?

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

Да би се покренула, игра ће захтевати ПНГ слику под називом „гамеПиеце“ сачувану у „имг“ директоријуму на вашем локалном хосту. Ради једноставности, овај пример користи наранџасти квадрат од 60кгаме де60пк. Ваша игра би требала изгледати отприлике овако:

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

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

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

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

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

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

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

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

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

Покретање наше игре

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

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

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

сцена: {
прелоад: прелоад,
цреате: цреате,
упдате: упдате
}

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

ажурирање функције () {
}

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

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

вар гамеПиеце;
вар кеиИнпутс;

Варијабла кеиИнпут треба бити иницијализована када се игра креира у функцији креирања.

функција цреате () {
гамеПиеце = тхис.пхисицс.адд.сприте (270, 450, 'гамеПиеце');
кеиИнпутс = тхис.инпут.кеибоард.цреатеЦурсорКеис ();
}

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

ажурирање функције () {
иф (кеиИнпутс.лефт.исДовн) {
гамеПиеце.к = гамеПиеце.к - 2;
}
иф (кеиИнпутс.ригхт.исДовн) {
гамеПиеце.к = гамеПиеце.к + 2;
}
иф (кеиИнпутс.уп.исДовн) {
гамеПиеце.и = гамеПиеце.и - 2;
}
иф (кеиИнпутс.довн.исДовн) {
гамеПиеце.и = гамеПиеце.и + 2;
}
}

Игра сада има покретни карактер! Али да бисмо заиста били игра, потребан нам је циљ. Додајмо неке препреке. Измицање препрекама било је основа за многе игре у 8-битној ери.

Додавање препрека у игру

Овај пример кода користи два спритета препрека који се називају препрека1 и препрека 2. препрека1 је плави квадрат, а препрека2 је зелена. Свака слика мораће бити унапред учитана, баш као и сприт игре.

прелоад функције () {
тхис.лоад.имаге ('гамеПиеце', 'имг / гамеПиеце.пнг');
тхис.лоад.имаге ('препрека1', 'имг / препрека1.пнг');
тхис.лоад.имаге ('препрека2', 'имг / препрека2.пнг');
}

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

функција цреате () {
гамеПиеце = тхис.пхисицс.адд.сприте (270, 450, 'гамеПиеце');
кеиИнпутс = тхис.инпут.кеибоард.цреатеЦурсорКеис ();
препрека1 = тхис.пхисицс.адд.сприте (200, 0, 'препрека1');
препрека2 = тхис.пхисицс.адд.сприте (0, 200, 'препрека2');
}

Покретање препрека

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

препрека1.и = препрека1.и + 4;
ако (препрека1.и> 600) {
препрека1.и = 0;
препрека1.к = Пхасер. Математика. Између (0, 600);
}
препрека2.к = препрека2.к + 4;
ако (препрека2.к> 600) {
препрека2.к = 0;
препрека2.и = Пхасер. Математика. Између (0, 600);
}

Горњи код ће преселити препреку1 низ екран и препреку2 преко подручја игре 4пк сваки кадар. Једном када се квадрат искључи са екрана, он се враћа на супротну страну на новом случајном месту. Ово ће осигурати да увек постоји нова препрека за играча.

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

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

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

тхис.пхисицс.адд.цоллидер (гамеПиеце, препрека1, функција (гамеПиеце, препрека1) {
гамеПиеце.дестрои ();
препрека.дестрои ();
обстацле2.дестрои ();
});
тхис.пхисицс.адд.цоллидер (гамеПиеце, препрека2, функција (гамеПиеце, препрека2) {
гамеПиеце.дестрои ();
препрека.дестрои ();
обстацле2.дестрои ();
});

Метода сударача захтева три параметра. Прва два параметра идентификују који се објекти сударају. Дакле, горе смо поставили два сударача. Први открива када се гамепиеце судара са препреком1, а други сударач тражи сударе између гамепиеце-а и препреке2.

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

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

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

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

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

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

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

О аутору