Pirmie soļi spēļu izstrādei, izmantojot Phaser

Ierašanās HTML5 Tas mainīja veidu, kā mēs redzam tīmekli, ne tikai ir devis mums labākus rīkus to attīstībai, bet arī ir pavēris mums iespējas izstrādāt lietojumprogrammas, kas iet tālāk, piemēram, videospēļu gadījumā.
Videospēles veidošanas priekšrocība HTML5 tas ir tas, ka tas ir saderīgs ar praktiski jebkuru ierīci, kurai ir pārlūkprogramma, un kas ir vēl labāk, bez nepieciešamības lejupielādēt vai veikt papildu instalācijas.
Pateicoties šai jaunajai popularitātei, ir paplašinājušās videospēļu izstrādes sistēmas, kurām katrai ir savas īpašības un priekšrocības, un šoreiz mēs koncentrēsimies uz Phaser, iemesli ir vairāki, un mēs tos varam redzēt šajā sarakstā:

• Tai ir lieliska kopiena un tā ir aktīva.
• Tas tiek periodiski atjaunināts.
• To var izmantot bez maksas.
• Tam ir fizikas rīki, kas mums atvieglo dzīvi.

Tātad, tā kā mēs redzam, ka tam ir dažas interesantas priekšrocības, mēs to instalēsim, bet vispirms apskatīsim dažas prasības, kas ir nepieciešamas ietvaram.
1- Mums ir nepieciešama piekļuve internetam, lai varētu lejupielādēt visus resursus, kas rodas sistēmas instalēšanas laikā, ieskaitot šo.
2- Mums jābūt instalētam vai jāspēj instalēt šāda veida tīmekļa serveri LAMPA vai WAMP vai MAMP Atkarībā no mūsu operētājsistēmas tas notiek tāpēc Phaser izmanto HTML5 un arī JavaScript Tāpēc drošības pasākumu dēļ mūsu pārlūkprogramma nepieņems vietējās izpildes.
3- Mums ir vajadzīgas atļaujas, lai piekļūtu nepieciešamajām mapēm un pakalpojumiem, kas tiek iestatīti sistēmas instalēšanas laikā.
4- Mums ir nepieciešama pārlūkprogramma, kas ir saderīga ar HTML5 un ka tai ir atkļūdošanas rīki, šīs apmācības gadījumā mēs izmantosim Firefox izstrādātāju izdevums jaunākajā versijā, taču viņi var brīvi izvēlēties to, kas viņiem šķiet vislabākais.
5- Visbeidzot, mums ir nepieciešams teksta redaktors, lai mēs varētu uzrakstīt piemēru kodu, jo tas vienmēr var būt viss, kas mums ir, lai gan mēs iesakām Cildens teksts o NotePad ++, jo abiem ir liels spraudņu skaits, kas atvieglo mūsu kā izstrādātāju dzīvi.
Pirmā lieta, ko mēs darīsim, lai varētu instalēt Phaser ir doties uz tās oficiālo vietni, un šeit mēs atradīsim vairākus resursus, tomēr pagaidām mēs dosimies uz sadaļu, kurā teikts Lejupielādēt:

PALIELINĀT

Mums ir vairākas lejupielādes iespējas, divas no tām mēs varam izmantot, lai lejupielādētu saspiestu .zip vai .tar.gz, mēs varam arī izveidot klonu no Github no projekta, mūsu gadījumā mēs lejupielādēsim projektu .zip, lai paātrinātu procesu. Kad esam lejupielādējuši vai klonējuši projektu, vissvarīgākie katalogi ir šādi:
docs / index.htmlŠeit mums ir ieraksts tikko lejupielādētās versijas bezsaistes un oficiālajā dokumentācijā, tas var mums palīdzēt pārskatīt dažus datus, lai gan, ja mums ir iespēja doties uz internetu un dokumentēt sevi, mums vienmēr būs labākas iespējas.
build / phaser.min.jsŠī ir mūsu sistēma kā tāda, tā ir saīsināta un saspiesta bibliotēka, kurā ir visi rīki, kas mums būs nepieciešami mūsu pirmo projektu uzsākšanai.
Tā kā mēs esam lejupielādējuši projektu, lai pārliecinātos, ka viss ir pareizi, mums vienkārši ir jākopē neizpakotā mape, kur mums tai var piekļūt, izmantojot mūsu tīmekļa serveri, parasti tā ir direktorija www vai public_html, tas viss ir atkarīgs no mūsu vides.
Kad esam tur, mums jāiet uz mūsu pārlūkprogrammu un jāpalaiž mūsu localhost / fāzētājs vai nosaukumu, ko esam ievietojuši, un mēs redzēsim failu sarakstu, šeit mums jāpārvietojas uz šādu mapi: resursi / apmācības / 01 Darba sākšana / hellophaser / index.html un mēs varam novērtēt to, ko redzam šajā ekrānuzņēmumā:

PALIELINĀT

Mūsu pirmā spēleTā kā mēs esam pārliecinājušies, ka mūsu vide darbojas nevainojami, ir pienācis laiks sākt savu pirmo spēli, tāpēc mēs šajā laikā izvirzīsim sasniedzamu mērķi savam līmenim, kur piemēra beigās mums jāspēj parādīt Sprite uz ekrāna.
Mapē, kurā mūsu tīmekļa serverī ir ietvars, mēs izveidosim jaunu mapi, šajā gadījumā mēs to sauksim fāzes piemērs, iekšā mēs ievietosim failu phaser.min.js tās saknē mēs izveidosim failu ar nosaukumu index.html un sauc citu failu main.js, mums arī jāievieto attēls ar nosaukumu logo.png.webp kas būs sprite, ko mēs parādīsim, un to var atrast ietvara resursos, un tas var būt ieteicamais izmērs 180 x 64 pikseļi. Galu galā mūsu direktorijam vajadzētu izskatīties šādi:

Tā kā mūsu struktūra ir izveidota, mums jāsāk rakstīt sava pirmā projekta kods, tāpēc mums ir jāatver mūsu fails index.html un tur mēs iekļausim failus .js ko esam izveidojuši, papildus a kuram kā identifikators būs vārds gameDiv. Apskatīsim, kā izskatās mūsu kods:

 Mūsu pirmā spēle par Phaser
Mūsu pirmā spēle =)

Tas būs pamats, uz kura tiks atbalstīta mūsu spēle, lai lietotājs varētu skatīt saturu. Nākamais solis pirmās spēles veidošanā ir uzrakstīt kodu main.js, kas apstrādās visu mūsu spēles loģiku un satur trīs galvenās metodes, redzēsim:
iepriekšēja ielādeŠī metode ir atbildīga par visu mūsu spēlei nepieciešamo resursu iepriekšēju ielādi, vai tie būtu attēli, audio, video utt. Tas vienmēr darbojas palaišanas laikā.
izveidotŠī metode darbojas pēc tās pabeigšanas iepriekšēja ielāde un tā funkcija ir iekļaut ielādētos resursus mūsu spēlē, turklāt dodot mums iespēju noteikt tās sākotnējo iestatījumu.
AtjauninātVisbeidzot, šī metode darbojas 60 reizes sekundē, un tā satur mūsu spēles patieso loģiku, tā dod mums tā teikt kustību.
Kā redzam, katra no šīm metodēm ir atbildīga par spēles stāvokli, pirmās divas ir pirms spēles sākuma, bet Atjaunināt notiek izpildes laikā. Kad esam definējuši katras metodes darbību, mums ir jāredz tikai nepieciešamais kods:

 var mainState = {preload: function () {// Mēs ielādējam attēlu game.load.image ('logo', 'logo.png.webp'); }, izveidot: function () {// Mēs parādām savu tēlu spēlē this.sprite = game.add.sprite (200, 150, 'logo'); }, update: function () {// mēs mainām leņķi par vienu vienību 60 reizes sekundē // tas mums dos attēla rotācijas efektu this.sprite.angle + = 1; }}; // šeit mēs sākam savu spēli un iestatām to //, lai izmantotu div gameDiv, ko ievietojām savā HTMLvar spēlē = new Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add ('main', mainState); game.state.start ('galvenais');

Kā mēs varam redzēt metožu beigās, mēs izveidojam mainīgo ar nosaukumu spēle un šajā mēs izpildām gadījumu Phaser. Spēle kur mēs nododam dažus parametrus, šobrīd par tiem nav jāzina daudz, mēs vienkārši tos kopējam, kā mēs tos redzam. Bet aptuveni šī ir tā daļa, kurā mēs liekam meklēt mūsu lietojumprogrammu Phaser lai tas jums pastāstītu, ko darīt ar metodēm, kuras mēs izveidojām iepriekš un beigās ar game.state.start ir vieta, kur mēs sakām ietvaru, lai sāktu savu spēli.
Tagad, ja viss ir noritējis labi, mēs veiksim savu projektu pārlūkprogrammā, un ekrānā vajadzētu redzēt rotējošu izvēlēto attēlu:

Šī piemēra gadījumā mēs esam izmantojuši attēlu, kas ietilpst resursos PhaserTomēr tā nav īsti prasība, ar jebkuru attēlu mēs varētu sasniegt tādus pašus rezultātus. Vēl viena lieta, ko mēs varam pamanīt mūsu piemērā, ir tā, ka zemāk mums ir atvērta pārlūkprogrammas atkļūdošanas konsole, šis rīks ir labākais draugs, kas mums būs, jo tieši šeit mēs varam atkļūdot dažādas kļūdas, kuras mēs varam atrast, izstrādājot spēles.
Ar to mēs esam pabeiguši šo apmācību, mēs esam veiksmīgi instalējuši Phaser, mēs esam zinājuši dažas šī lieliskā ietvara sākotnējās īpašības un ar to esam izveidojuši nelielu lietojumprogrammu vai spēli. Ir svarīgi šo pamācību izmantot kā sākumpunktu, lai veiktu nedaudz padziļinātāku izpēti Phaser, jo tas nav pat 1% no visa, ko tas mums piedāvā, tomēr tas ir pirmais solis, kas mums tik bieži maksā.