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

Преглед садржаја
Долазак ХТМЛ5 То је променило начин на који видимо веб, не само да нам је дало боље алате за њихов развој, већ нам је и отворило могућности за развој апликација које иду даље, као у случају видео игара.
Предност прављења видео игре у ХТМЛ5 то је да је компатибилан са готово свим уређајима који имају претраживач и што је још боље без преузимања или додатних инсталација.
Захваљујући овој новој популарности, оквири за развој видео игара су се увећали, сваки са својим карактеристикама и предностима, овог пута ћемо се концентрисати на Пхасер, разлога је неколико и можемо их видети на следећој листи:
  • Има велику заједницу и активан је.
  • Периодично се ажурира.
  • Бесплатно је коришћење.
  • Има физичке алате који нам олакшавају живот.
Дакле, пошто видимо да има неке занимљиве предности, ми ћемо га инсталирати, али прво да видимо неке захтеве које оквир захтева.
1- Потребан нам је приступ Интернету да бисмо могли да преузмемо све ресурсе који настају током инсталације оквира, укључујући и овај.
2- Мора да смо инсталирали или могли да инсталирамо веб сервер у стилу ЛАМП или ВАМП или МАМП у зависности од нашег оперативног система, то је зато што Пхасер користи ХТМЛ5 а такође ЈаваСцрипт Због тога, због безбедносних мера, наш прегледач неће прихватити локална извршења.
3- Потребне су нам дозволе за приступ неопходним фасциклама и услугама које су постављене током инсталације оквира.
4- Потребан нам је претраживач компатибилан са ХТМЛ5 и да има алате за отклањање грешака, у случају овог водича ћемо користити Фирефок Девелопер Едитион у најновијој верзији у овом тренутку, међутим, они могу слободно изабрати ону која им се чини најбољом.
5- Коначно нам је потребан уређивач текста да бисмо могли написати код за примере, јер он увек може бити оно што имамо, мада препоручујемо Узвишени текст о НотеПад ++ због великог броја додатака који имају оба који нам олакшавају живот као програмерима.
Прва ствар коју ћемо учинити да бисмо могли да је инсталирамо Пхасер је да одете на његову званичну веб страницу и овде ћемо пронаћи неколико ресурса, међутим за сада ћемо отићи у одељак који каже Преузимање:

ЕНЛАРГЕ

Имамо неколико опција за преузимање, две које можемо користити су за преузимање компримованог .зип или .тар.гз, такође можемо направити клон из Гитхуб пројекта, у нашем случају ћемо преузети пројекат у .зип -у како бисмо убрзали процес. Када преузмемо или клонирамо пројекат, најважнији директоријуми су следећи:
доцс / индек.хтмлОвде имамо унос у офлајн и званичну документацију верзије коју смо управо преузели, може нам помоћи да прегледамо неке детаље, мада ако имамо могућност да одемо на Интернет и документујемо се, увек ћемо имати боље опције.
буилд / пхасер.мин.јсОво је наш оквир као такав, то је умањена и компримована библиотека која садржи све алате који ће нам бити потребни за покретање наших првих пројеката.
Пошто смо преузели пројекат, да бисмо проверили да ли је све исправно, једноставно морамо копирати распакирану фасциклу у коју јој можемо приступити са нашим веб сервером, обично је то директоријум ввв или публиц_хтмл, све заиста зависи од нашег окружења.
Када стигнемо тамо, морамо отићи у наш прегледач и покренути наш лоцалхост / пхасер или име које смо поставили и видећемо листу датотека, овде морамо да одемо до следеће фасцикле: ресоурцес / туториалс / 01 Први кораци / хеллопхасер / индек.хтмл и можемо ценити оно што видимо на следећем снимку екрана:

ЕНЛАРГЕ

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

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

Наша прва игра =)

Ово ће бити основа на којој ће наша игра бити подржана тако да корисник може прегледати садржај. Следећи корак у изградњи наше прве игре је писање кода за маин.јс, који ће обрадити сву логику наше игре и садржи три кључне методе, да видимо:
прелоадОва метода је одговорна за унапред учитавање свих ресурса који су потребни нашој игри, било да се ради о сликама, звуку, видео записима итд. Увек ради при покретању.
КреирајОва метода се примењује након што се заврши прелоад а његова функција је да укључи учитане ресурсе у нашу игру, осим што нам даје могућност успостављања почетног подешавања исте.
ажурирањеКоначно, ова метода ради 60 пута у секунди и садржи праву логику наше игре, то је оно што нам даје покрет, да тако кажемо.
Као што видимо, свака од ових метода је задужена за стање у игри, прве две су пре почетка игре, док ажурирање настаје током извођења. Када дефинишемо шта свака метода ради, остаје нам само да видимо код који нам је потребан:
 вар маинСтате = {прелоад: фунцтион () {// Учитавамо слику гаме.лоад.имаге ('лого', 'лого.пнг'); }, цреате: фунцтион () {// Показујемо нашу слику у игри тхис.сприте = гаме.адд.сприте (200, 150, 'лого'); }, упдате: фунцтион () {// мењамо угао за једну јединицу 60 пута у секунди // ово ће нам дати ефекат ротације слике тхис.сприте.англе + = 1; }}; // овде почињемо нашу игру и подешавамо је // да користимо див гамеДив који смо ставили у нашу ХТМЛвар игру = нев Пхасер.Гаме (400, 300, Пхасер.АУТО, 'гамеДив'); гаме.стате. адд ('маин', маинСтате); гаме.стате.старт ('маин');
Као што видимо на крају метода, креирамо променљиву тзв игра и у овом извршавамо инстанцу Пхасер.Гаме где преносимо неке параметре, тренутно није потребно знати много о њима, једноставно их копирамо онако како их видимо. Али отприлике ово је део где кажемо нашој апликацији да тражи Пхасер тако да вам говори шта да радите са методама које смо створили горе и на крају са гаме.стате.старт ту кажемо оквиру да започне нашу игру.
Сада, ако је све прошло добро, ми ћемо покренути наш пројекат у прегледачу и требали бисмо видети да се изабрана слика ротира на екрану:

У случају овог примера користили смо слику која долази у оквиру ресурса ПхасерМеђутим, то заправо није услов, са било којом сликом могли бисмо постићи исте резултате. Још једна ствар коју можемо приметити у нашем примеру је да испод имамо отворену конзолу за отклањање грешака у прегледачу, овај алат је најбољи пријатељ кога ћемо имати јер ту можемо отклонити грешке које можемо пронаћи при развоју наших игара.
Овим смо завршили овај водич, успешно смо га инсталирали Пхасер, знали смо неке од почетних карактеристика овог сјајног оквира и са овим смо створили малу апликацију или игру. Важно је узети овај водич као полазну тачку за мало дубље истраживање Пхасер, будући да ово није ни 1% свега што нам нуди, међутим то је први корак који нас често кошта подузети.
wave wave wave wave wave