Darba sākšana ar Phaser spēļu izstrādei

Phaser ir ietvars 2D videospēļu radīšanai. Spēles parādīšanai tiek izmantots HTML5 audekls un spēles palaišanai JavaScript. Phaser izmantošanas priekšrocība salīdzinājumā ar vaniļas JavaScript ir tā, ka tai ir plaša bibliotēka, kas papildina lielu daļu videospēļu fizikas, ļaujot jums koncentrēties uz pašas spēles dizainu.

Phaser samazina izstrādes laiku un atvieglo darbplūsmu. Uzzināsim, kā izveidot pamata spēli ar Phaser.

Kāpēc attīstīties kopā ar Phaser?

Phaser ir līdzīgs citām vizuālās programmēšanas valodām, jo ​​programma ir balstīta uz atjauninātajiem atjauninājumiem. Phaser ir trīs galvenie posmi: sākotnēja ielāde, izveidošana un atjaunināšana.

Iepriekš ielādējot, spēles aktīvi tiek augšupielādēti un padarīti pieejami spēlei.

Izveidot Izveido spēli un visus spēles sākuma elementus. Katra no šīm funkcijām tiek palaista vienreiz, kad tiek sākta spēle.

No otras puses, atjaunināšana visu ciklu darbojas ciklā. Darba zirgs atjaunina spēles elementus, lai padarītu to interaktīvu.

Iestatiet savu sistēmu, lai attīstītu spēles ar Phaser

Neskatoties uz to, ka Phaser darbojas ar HTML un JavaScript, spēles faktiski tiek palaistas nevis servera, bet gan servera pusē. Tas nozīmē, ka jums būs jāpalaiž spēle vietējais saimnieks. Spēļu servera palaišana ļauj jūsu spēlei piekļūt papildu failiem un aktīviem ārpus programmas. ES iesaku izmantojot vietni Host, izmantojot XAMPP ja jums vēl nav viena iestatīšana.

Kas ir 127.0 0.1, Localhost vai Loopback adrese?

Jūs savā datorā esat redzējis “localhost”, bet kas tas ir? Ko nozīmē adrese 127.0.0.1? Vai esat uzlauzts?

Tālāk redzamais kods ļaus jums sākt darboties. Tas izveido pamata spēles vidi.

Lai palaistu spēli, būs nepieciešams PNG attēls ar nosaukumu "gamePiece", kas tiks saglabāts jūsu vietējā mitinātāja mapē "img". Vienkāršības labad šajā piemērā tiek izmantots 60xgame de60px oranžs kvadrāts. Jūsu spēlei vajadzētu izskatīties apmēram šādi:

Ja jums rodas problēma, izmantojiet pārlūkprogrammas atkļūdotāju, lai noskaidrotu, kas ir nepareizi. Ja trūkst pat viena rakstzīme, tas var izraisīt haosu, taču parasti jūsu atkļūdotājs noķers šīs mazās kļūdas.

Iestatīšanas koda izskaidrojums

Pagaidām spēle neko nedara. Bet mēs jau esam pārņēmuši daudz zemes! Apskatīsim kodu dziļāk.

Lai palaistu Phaser spēli, jums jāimportē Phaser bibliotēka. Mēs to darām 3. līnijā. Šajā piemērā mēs saistījāmies ar avota kodu, taču jūs varat to lejupielādēt savā vietējā mitinātājā un norādīt arī failu.

Liela daļa koda līdz šim konfigurē spēles vidi, kuru mainīgais konfigurēt veikalos. Šajā piemērā mēs izveidojam Phaser spēli ar zilu (CCFFFF sešpadsmit krāsu kodā) fonu, kas ir 600 x 600 pikseļi. Pagaidām spēles fizika ir iestatīta uz pasāža, bet Phaser piedāvā dažādas fizikas.

Visbeidzot, aina liek programmai palaist iepriekš ielādēt funkcija pirms spēles sākuma un izveidot funkcija, lai sāktu spēli. Visa šī informācija tiek nodota nosauktajam spēles objektam spēle.

Saistīts: 6 labākie klēpjdatori programmēšanai un kodēšanai

Nākamā koda sadaļa ir vieta, kur spēle patiešām veidojas. Sākotnējās ielādes funkcija ir tā, kurā vēlaties inicializēt visu, kas nepieciešams spēles vadīšanai. Mūsu gadījumā mēs esam iepriekš ielādējuši sava spēles gabala attēlu. Pirmais parametrs .attēls nosauc mūsu attēlu, bet otrais norāda programmai, kur attēlu atrast.

GamePiece attēls tika pievienots spēlei izveides funkcijā. 29. rindā teikts, ka mēs pievienojam attēlu gamePiece kā sprītu 270px pa kreisi un 450px uz leju no mūsu spēles apgabala augšējā kreisā stūra.

Mūsu spēles gabala kustība

Pagaidām to diez vai var saukt par spēli. No vienas puses, mēs nevaram pārvietot savu spēles gabalu. Lai varētu mainīt lietas mūsu spēlē, mums būs jāpievieno atjaunināšanas funkcija. Mums būs jāpielāgo arī konfigurācijas mainīgā aina, lai spēlei pateiktu, kuru funkciju izpildīt, kad mēs atjauninām spēli.

Atjaunināšanas funkcijas pievienošana

Jauna aina konfigurācijā:

aina: {
preload: preload,
izveidot: izveidot,
atjaunināt: atjaunināt
}

Pēc tam pievienojiet atjaunināšanas funkciju zem izveides funkcijas:

funkciju atjauninājums () {
}

Galveno ievadu iegūšana

Lai spēlētājs varētu vadīt spēles gabalu ar bulttaustiņiem, mums būs jāpievieno mainīgais, lai izsekotu, kuras atslēgas spēlētājs nospiež. Paziņojiet mainīgo, ko sauc par keyInputs zemāk, kur mēs deklarējām gamePieces. To deklarējot, visas funkcijas ļaus piekļūt jaunajam mainīgajam.

var gamePiece;
var keyIevades;

Mainīgais keyInput ir jāinicializē, kad spēle tiek izveidota izveides funkcijā.

funkcija create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
}

Tagad atjaunināšanas funkcijā mēs varam pārbaudīt, vai spēlētājs nospiež bultiņas taustiņu, un, ja tā ir, attiecīgi pārvietojiet mūsu spēles gabalu. Tālāk sniegtajā piemērā spēles gabals tiek pārvietots 2 pikseļus, taču jūs varat to padarīt par lielāku vai mazāku skaitli. Gabala pārvietošana pa 1 pikseļiem vienā reizē šķita nedaudz lēna.

funkciju atjauninājums () {
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;
}
}

Spēlei tagad ir kustīgs raksturs! Bet, lai patiesi būtu spēle, mums ir nepieciešams mērķis. Pievienosim dažus šķēršļus. Šķēršļu apmānīšana bija pamats daudzām spēlēm 8 bitu laikmetā.

Šķēršļu pievienošana spēlei

Šajā koda piemērā tiek izmantoti divi šķēršļu vārti, kurus sauc par šķērsli1 un šķērsli 2. šķērslis1 ir zils kvadrāts, bet šķērslis2 ir zaļš. Katrs attēls būs iepriekš jāielādē tāpat kā gamepiece sprite.

funkcija preload () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('šķērslis1', 'img / šķērslis1.png');
this.load.image ('šķērslis2', 'img / šķērslis2.png');
}

Tad katrs šķēršļa sprīts būs jāinicializē izveidošanas funkcijā, tāpat kā gamepiece.

funkcija create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
šķērslis1 = this.fizika.add.sprite (200, 0, 'šķērslis1');
šķērslis2 = this.fizika.add.sprite (0, 200, 'šķērslis2');
}

Šķēršļu pārvietošana

Lai šoreiz pārvietotu figūras, mēs nevēlamies izmantot atskaņotāja ievadi. Tā vietā pieņemsim, ka viens gabals pārvietojas no augšas uz leju, bet otrs - pa kreisi uz labo pusi. Lai to izdarītu, atjaunināšanas funkcijai pievienojiet šādu kodu:

šķērslis1.y = šķērslis1.y + 4;
ja (šķērslis1.y> 600) {
šķērslis1.y = 0;
šķērslis1.x = Phaser. Matemātika. Starp (0, 600);
}
šķērslis2.x = šķērslis2.x + 4;
ja (šķērslis2.x> 600) {
šķērslis2.x = 0;
šķērslis2.y = Phaser. Matemātika. Starp (0, 600);
}

Iepriekš minētais kods pārvietos šķērsli 1 uz ekrāna un šķērsli 2 pa spēles laukumu 4 pikseļus katrā kadrā. Kad kvadrāts ir izslēgts no ekrāna, tas tiek pārvietots atpakaļ uz pretējo pusi jaunā nejaušā vietā. Tas nodrošinās, ka spēlētājam vienmēr ir jauns šķērslis.

Sadursmju noteikšana

Bet mēs vēl neesam to darījuši. Jūs, iespējams, pamanījāt, ka mūsu spēlētājs var iziet cauri šķēršļiem. Mums ir jāpanāk, lai spēle atklāj, kad spēlētājs trāpās šķērslim, un spēle jāpārtrauc.

Phaser fizikas bibliotēkā ir sadursmes detektors. Viss, kas mums jādara, ir inicializēt to izveidošanas funkcijā.

this.physics.add.collider (gamePiece, šķērslis1, funkcija (gamePiece, šķērslis1) {
gamePiece.destroy ();
šķērslis.iznīcināt ();
šķērslis2.iznīcināt ();
});
this.physics.add.collider (gamePiece, šķērslis2, funkcija (gamePiece, šķērslis2) {
gamePiece.destroy ();
šķērslis.iznīcināt ();
šķērslis2.iznīcināt ();
});

Kolidera metodei ir nepieciešami trīs parametri. Pirmie divi parametri identificē objektus, kas saduras. Tātad iepriekš mēs esam izveidojuši divus sadursmes dalībniekus. Pirmais atklāj, kad rotaļlieta saduras ar šķērsli1, bet otrais sadursme meklē sadursmes starp spēles un šķērsli2.

Trešais parametrs norāda koliderim, kā rīkoties, kad tas konstatē sadursmi. Šajā piemērā ir funkcija. Ja notiek sadursme, visi spēles elementi tiek iznīcināti; tas pārtrauc spēli. Tagad spēlētājs pārspēs, ja trāpīs šķērsli.

Izmēģiniet spēļu izstrādi ar Phaser

Ir daudz dažādu veidu, kā šo spēli var uzlabot un padarīt sarežģītāku. Mēs esam izveidojuši tikai vienu atskaņotāju, bet otru spēlējamo varoni varētu pievienot un kontrolēt ar "awsd" vadību. Tāpat jūs varētu eksperimentēt, pievienojot vairāk šķēršļu un mainot to kustības ātrumu.

Šis ievads ļaus jums sākt darbu, taču ir vēl daudz ko mācīties. Phaser lieliskā lieta ir tā, ka liela daļa spēles fizikas tiek veikta jūsu vietā. Tas ir lielisks vienkāršs veids, kā sākt veidot 2D spēles. Turpiniet veidot šo kodu un pilnveidojiet savu spēli.

Ja rodas kādas kļūdas, pārlūkprogrammas atkļūdotājs ir lielisks veids, kā atklāt problēmu.

Kā izmantot Chrome DevTools, lai novērstu vietņu problēmas

Uzziniet, kā vietņu uzlabošanai izmantot pārlūkprogrammas Chrome iebūvētos izstrādes rīkus.

Par autoru