Mängude arendamiseks Phaseriga alustamine

Phaser on raamistik 2D-videomängude loomiseks. Mängu kuvamiseks kasutatakse HTML5 lõuendit ja mängu käitamiseks JavaScripti. Phaseri kasutamise eelis vanilli JavaScripti ees on see, et sellel on ulatuslik raamatukogu, mis täiendab videomängude füüsikat, võimaldades teil keskenduda mängu enda kujundamisele.

Phaser vähendab arendusaega ja hõlbustab töövoogu. Õppime, kuidas luua Phaseriga põhimängu.

Miks areneda koos Phaseriga?

Phaser on sarnane teiste visuaalsete programmeerimiskeeltega selle poolest, et programm põhineb silmustatud värskendustel. Phaseril on kolm peamist etappi: eellaadimine, loomine ja värskendamine.

Eellaadimisel laaditakse mängu varad üles ja tehakse mängule kättesaadavaks.

Loo lähtestab mängu ja kõik mängu alguselemendid. Kõiki neid funktsioone käivitatakse mängu alustamisel üks kord.

Värskendus töötab aga kogu mängu vältel silmusena. Tööhobune värskendab mängu elemente interaktiivseks muutmiseks.

Seadistage oma süsteem Phaseriga mängude arendamiseks

Vaatamata sellele, et Phaser töötab HTML-i ja JavaScripti abil, töötavad mängud tegelikult serveri-, mitte kliendipoolselt. See tähendab, et peate oma mängu käivitama

teie kohalik host. Mänguserveripoole käivitamine võimaldab teie mängul juurde pääseda täiendavatele failidele ja varadele väljaspool programmi. Ma soovitan kasutades XAMPP-d kohaliku hosti seadistamiseks kui teil pole veel ühte seadistust.

Mis on 127.0 0.1, Localhost või tagasisideaadress?

Olete oma arvutis näinud "localhostit", aga mis see on? Mida tähendab aadress 127.0.0.1? Kas teid on häkitud?

Allpool olev kood aitab teil tööle asuda. See loob põhilise mängukeskkonna.

Mängimiseks on vaja PNG-pilti nimega "gamePiece", mis salvestatakse teie kohaliku hosti kausta "img". Lihtsuse huvides kasutatakse selles näites 60xgame de60px oranži ruutu. Teie mäng peaks välja nägema umbes selline:

Kui teil tekib mõni probleem, saate oma brauseri siluriga teada, mis valesti läks. Isegi ühe märgi puudumine võib põhjustada kaose, kuid üldiselt tabab teie silur need väikesed vead.

Seadistuskoodi selgitamine

Siiani ei tee mäng midagi. Kuid me oleme juba palju maad katnud! Vaatame koodi põhjalikumalt.

Phaseri mängu käitamiseks peate importima Phaseri teegi. Me teeme seda 3. real. Selles näites seostasime lähtekoodiga, kuid saate selle alla laadida oma kohalikule hostile ja viidata ka failile.

Suur osa senisest koodist konfigureerib mängukeskkonna, mille muutuja konfig kauplustes. Meie näites seadistame phaser-mängu sinise taustaga (CCFFFF heksavärvilises koodis), mille suurus on 600 x 600 pikslit. Praeguseks on mängufüüsika seatud arkaad, kuid Phaser pakub erinevat füüsikat.

Lõpuks stseen käsib programmil käivitada eellaadimine funktsioon enne mängu algust ja luua funktsioon mängu alustamiseks. Kogu see teave edastatakse mängu nimele mäng.

Seotud: 6 parimat programmeerimise ja kodeerimise sülearvutit

Järgmine koodilõik on koht, kus mäng tegelikult kuju võtab. Eellaadimise funktsioon on koht, kus soovite oma mängu käivitamiseks lähtestada kõik. Meie puhul oleme oma mängutüki pildi eelnevalt laadinud. Esimene parameeter .kujutis nimetab meie pildi ja teine ​​ütleb programmile, kust pilt leida.

GamePiece pilt lisati mängule loomisfunktsiooniga. Rida 29 ütleb, et lisame pildimängu GamePiece oma mänguala vasakust ülanurgast 270px vasakule ja 450px alla.

Meie mängutüki liikumine

Siiani ei saa seda vaevalt mänguks nimetada. Esiteks ei saa me oma mängu tükki liigutada. Oma mängu muutmiseks peame lisama värskendusfunktsiooni. Samuti peame seadistama muutuja config stseeni, et öelda mängule, millist funktsiooni mängu värskendamisel käivitada.

Uuendusfunktsiooni lisamine

Uus stseen konfiguratsioonis:

stseen: {
eellaadimine: eellaadimine,
loo: loo,
uuendus: uuendus
}

Järgmisena lisage loomisfunktsiooni alla värskendusfunktsioon:

funktsiooni värskendus () {
}

Võtmesisendite hankimine

Selleks, et mängija saaks mängunuppu nooleklahvide abil juhtida, peame lisama muutuja, et jälgida, milliseid klahve mängija vajutab. Deklareerige muutuja nimega keyInputs allpool, kus me deklareerisime mänguPieces. Selle deklareerimine võimaldab kõigil funktsioonidel uuele muutujale juurde pääseda.

var gamePiece;
var keySisendid;

Muutuja keyInput tuleks lähtestada, kui mäng luuakse funktsiooni loomisel.

funktsioon create () {
gamePiece = see.füüsika.add.sprite (270, 450, 'mängutükk');
keyInputs = this.input.keyboard.createCursorKeys ();
}

Nüüd värskendusfunktsioonis saame kontrollida, kas mängija vajutab nooleklahvi, ja kui on, siis liigutage meie mängutükki vastavalt. Allpool toodud näites liigutatakse mängutükki 2 pikslit, kuid saate selle muuta väiksemaks või suuremaks. Tüki 1px kaupa liikumine tundus veidi aeglane.

funktsiooni värskendus () {
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;
}
}

Mängul on nüüd liikuv iseloom! Kuid selleks, et tõeliselt mäng olla, vajame eesmärki. Lisame mõned takistused. Takistuste viskamine oli paljude 8-bitiste mängude aluseks.

Takistuste lisamine mängule

Selles koodinäites kasutatakse kahte takistuse spritti, mida nimetatakse takistuseks1 ja takistuseks 2. takistus1 on sinine ruut ja takistus2 on roheline. Iga pilt tuleb eellaadida täpselt nagu mängutükk.

funktsiooni eellaadimine () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('takistus1', 'img / takistus1.png');
this.load.image ('takistus2', 'img / takistus2.png');
}

Seejärel tuleb iga takistusjooksu initsialiseerida loomisfunktsioonis, nagu ka mängutükk.

funktsioon create () {
gamePiece = see.füüsika.add.sprite (270, 450, 'mängutükk');
keyInputs = this.input.keyboard.createCursorKeys ();
takistus1 = this.füüsika.add.sprite (200, 0, 'takistus1');
takistus2 = this.füüsika.add.sprite (0, 200, 'takistus2');
}

Takistuste liikumine

Nuppude seekordseks liigutamiseks ei soovi me kasutada mängija sisestust. Selle asemel laseme ühel tükil liikuda ülevalt alla ja teisel vasakult paremale. Selleks lisage värskendusfunktsioonile järgmine kood:

takistus1.y = takistus1.y + 4;
kui (takistus1.y> 600) {
takistus1.y = 0;
takistus1.x = Phaser. Matemaatika. Vahemikus (0, 600);
}
takistus2.x = takistus2.x + 4;
kui (takistus2.x> 600) {
takistus2.x = 0;
takistus2.y = Phaser. Matemaatika. Vahemikus (0, 600);
}

Ülaltoodud kood liigutab takistuse1 ekraanil alla ja takistuse2 kogu mängualal 4px igas kaadris. Kui ruut on ekraanilt väljas, viiakse see uude juhuslikku kohta tagasi vastasküljele. See tagab, et mängijal on alati uus takistus.

Kokkupõrgete tuvastamine

Kuid me pole veel päris läbi. Võib-olla olete märganud, et meie mängija pääseb takistustest läbi. Peame panema mängu avastama, kui mängija takistuse tabab, ja mängu lõpetama.

Phaseri füüsikaraamatukogus on kokkupõrke detektor. Kõik, mida peame tegema, on selle lähtestamine loomise funktsioonis.

this.physics.add.collider (gamePiece, takistus1, funktsioon (gamePiece, takistus1) {
gamePiece.destroy ();
takistus.hävitada ();
takistus2.hävitada ();
});
this.physics.add.collider (gamePiece, takistus2, funktsioon (gamePiece, takistus2) {
gamePiece.destroy ();
takistus.hävitada ();
takistus2.hävitada ();
});

Kokkupõrke meetod nõuab kolme parameetrit. Esimesed kaks parameetrit tuvastavad, millised objektid kokku põrkavad. Nii et eespool on meil üles seatud kaks kokkupõrget. Esimene tuvastab, kui mängukell põrkab kokku takistusega1 ja teine ​​põrkab otsib kokkupõrkeid gamepiece'i ja takistuse2 vahel.

Kolmas parameeter annab kokkupõrkjale teada, mida teha, kui ta kokkupõrke tuvastab. Selles näites on funktsioon. Kokkupõrke korral hävitatakse kõik mänguelemendid; see peatab mängu. Nüüd mängija mängib üle takistuse.

Proovige mänguarendust Phaseriga proovida

Selle mängu täiustamiseks ja keerukamaks muutmiseks on palju erinevaid võimalusi. Oleme loonud ainult ühe mängija, kuid teise mängitava tähemärgi saab lisada ja juhtida "awsd" juhtnuppude abil. Samamoodi võiksite katsetada lisatakistuste lisamist ja nende liikumiskiiruse muutmist.

Selle sissejuhatuse abil saate alustada, kuid õppimiseks on veel palju muud. Phaseri puhul on tore see, et teie jaoks tehakse palju mängufüüsikat. See on suurepärane lihtne viis 2D-mängude kujundamise alustamiseks. Jätkake selle koodi loomist ja täiustage oma mängu.

Kui teil tekib mõni viga, on teie brauseri silur suurepärane viis probleemi avastamiseks.

Kuidas kasutada Chrome'i DevToolsi veebisaidi probleemide tõrkeotsinguks

Vaadake, kuidas oma veebisaitide täiustamiseks kasutada Chrome'i brauseri sisseehitatud arendustööriistu.

Autori kohta