Darbo su „Phaser“ pradžia žaidimų kūrimui

„Phaser“ yra 2D vaizdo žaidimų kūrimo sistema. Žaidimui rodyti naudojama HTML5 drobė, o žaidimui paleisti - „JavaScript“. „Phaser“ naudojimo, palyginti su „vanilla JavaScript“, pranašumas yra tas, kad jame yra plati biblioteka, kuri užbaigia didžiąją vaizdo žaidimų fizikos dalį, leidžiančią susikoncentruoti ties paties žaidimo kūrimu.

„Phaser“ sutrumpina kūrimo laiką ir palengvina darbo eigą. Sužinokime, kaip sukurti pagrindinį žaidimą su „Phaser“.

Kodėl verta kurti kartu su „Phaser“?

Phaser yra panašus į kitas vaizdinio programavimo kalbas tuo, kad programa yra pagrįsta atnaujintais ciklais. „Phaser“ turi tris pagrindinius etapus: išankstinį įkėlimą, kūrimą ir atnaujinimą.

Iš anksto įkeliant, žaidimo turtas yra įkeltas ir prieinamas žaidimui.

„Create“ inicijuoja žaidimą ir visus pradinius žaidimo elementus. Kiekviena iš šių funkcijų yra paleista vieną kartą, kai žaidimas pradedamas.

Kita vertus, „Update“ veikia visą žaidimą. Būtent darbinis arklys atnaujina žaidimo elementus, kad jis taptų interaktyvus.

Nustatykite savo žaidimų kūrimo sistemą naudodami „Phaser“

Nepaisant to, kad „Phaser“ veikia HTML ir „JavaScript“, žaidimai iš tikrųjų vykdomi serverio, o ne kliento pusėje. Tai reiškia, kad turėsite paleisti žaidimą jūsų vietinis šeimininkas. Vykdydami žaidimo serverio pusę, jūs galite pasiekti papildomus failus ir išteklius už programos ribų. Rekomenduoju naudodami XAMPP nustatykite vietinį kompiuterį jei dar neturite vienos sąrankos.

Kas yra 127,0 0,1, „Localhost“ arba „Loopback“ adresas?

Savo kompiuteryje matėte „localhost“, bet kas tai? Ką reiškia 127.0.0.1 adresas? Ar jums buvo nulaužta?

Žemiau pateiktas kodas padės jums pradėti veikti. Tai sukuria pagrindinę žaidimo aplinką.

Norint paleisti žaidimą, reikės PNG atvaizdo, vadinamo „gamePiece“, išsaugotu jūsų vietinio kompiuterio aplanke „img“. Kad būtų paprasčiau, šiame pavyzdyje naudojamas 60xgame de60px oranžinis kvadratas. Jūsų žaidimas turėtų atrodyti maždaug taip:

Jei susiduriate su problema, naudokite naršyklės derintuvą, kad sužinotumėte, kas nepavyko. Trūkstant net vieno simbolio, gali kilti sumaištis, tačiau paprastai jūsų derintojas užfiksuos tas mažas klaidas.

Sąrankos kodo paaiškinimas

Kol kas žaidimas nieko nedaro. Bet mes jau padengėme daug žemės! Pažvelkime į kodą išsamiau.

Kad būtų galima paleisti „Phaser“ žaidimą, turite importuoti „Phaser“ biblioteką. Tai darome 3 eilutėje. Šiame pavyzdyje mes susiejome su šaltinio kodu, tačiau galite jį atsisiųsti į savo vietinį prieglobą ir nurodyti failą.

Didžioji kodo dalis iki šiol sukonfigūruoja žaidimo aplinką, kurią kintamasis konfigūruoti parduotuvės. Mūsų pavyzdyje mes kuriame Phaser žaidimą su mėlynu (CCFFFF šešiakampės spalvos kodu) fonu, kuris yra 600 x 600 taškų. Kol kas žaidimo fizika nustatyta pasažas, bet Phaseris siūlo skirtingą fiziką.

Pagaliau, scena liepia programai paleisti išankstinė apkrova funkcija prieš prasidedant žaidimui ir sukurti funkcija pradėti žaidimą. Visa ši informacija perduodama vadinamam žaidimo objektui žaidimas.

Susijęs: 6 geriausi nešiojamieji kompiuteriai programavimui ir kodavimui

Kitas kodo skyrius yra tas, kur žaidimas iš tikrųjų įgauna formą. Išankstinio įkėlimo funkcija yra vieta, kur norite inicijuoti viską, ko reikia norint paleisti žaidimą. Mūsų atveju mes iš anksto įkėlėme savo žaidimo vaizdą. Pirmasis parametras .vaizdą įvardija mūsų atvaizdą, o antrasis nurodo programai, kur rasti vaizdą.

„GamePiece“ vaizdas buvo pridėtas prie žaidimo kūrimo funkcijoje. 29 eilutėje sakoma, kad mes pridėjome vaizdo žaidimą „GamePiece“ kaip 270 taškų kairę ir 450 taškų žemyn nuo viršutinio kairiojo mūsų žaidimo zonos kampo.

Mūsų žaidimo gabalas

Kol kas tai vargu ar galima pavadinti žaidimu. Viena vertus, mes negalime perkelti savo žaidimo. Norėdami pakeisti savo žaidimo dalykus, turėsime pridėti atnaujinimo funkciją. Taip pat turėsime pakoreguoti kintamojo konfigūracijos sceną, kad žaidime būtų nurodyta, kurią funkciją paleisti, kai atnaujinsime žaidimą.

Naujinimo funkcijos pridėjimas

Nauja scena konfigūracijoje:

scena: {
išankstinė apkrova: išankstinė apkrova,
kurti: kurti,
atnaujinti: atnaujinti
}

Tada pridėkite atnaujinimo funkciją po kūrimo funkcija:

funkcijos atnaujinimas () {
}

Gauti pagrindinius duomenis

Norėdami leisti žaidėjui valdyti žaidimą rodyklių klavišais, turėsime pridėti kintamąjį, kad galėtume stebėti, kuriuos klavišus groja žaidėjas. Deklaruokite kintamąjį, vadinamą keyInputs žemiau, kur mes paskelbėme „gamePieces“. Jį paskelbus, visos funkcijos leis pasiekti naują kintamąjį.

var gamePiece;
var keyInputs;

„KeyInput“ kintamasis turėtų būti inicializuotas, kai žaidimas sukuriamas kūrimo funkcijoje.

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

Dabar naudodamiesi atnaujinimo funkcija, mes galime patikrinti, ar žaidėjas paspaudžia rodyklės klavišą, ir, jei jie yra, atitinkamai perkelkite mūsų žaidimą. Žemiau pateiktame pavyzdyje žaidimo dalis perkeliama 2 taškus, bet jūs galite padaryti didesnį ar mažesnį skaičių. Perkelti kūrinį po 1px atrodė šiek tiek lėtai.

funkcijos atnaujinimas () {
jei (keyInputs.left.isDown) {
gamePiece.x = gamePiece.x - 2;
}
jei (keyInputs.right.isDown) {
gamePiece.x = gamePiece.x + 2;
}
jei (keyInputs.up.isDown) {
gamePiece.y = gamePiece.y - 2;
}
jei (keyInputs.down.isDown) {
gamePiece.y = gamePiece.y + 2;
}
}

Dabar žaidimas turi kilnojamą pobūdį! Tačiau norint iš tikrųjų būti žaidimu, mums reikia tikslo. Pridėkime keletą kliūčių. Daugelio 8 bitų eros žaidimų pagrindas buvo kliūčių apgaudinėjimas.

Kliūčių įtraukimas į žaidimą

Šiame kodo pavyzdyje naudojamos dvi kliūčių spragos, vadinamos kliūtimi1 ir kliūtimi 2. kliūtis1 yra mėlynas kvadratas, o kliūtis2 - žalia. Kiekvieną vaizdą reikės iš anksto įkelti taip, kaip žaidimo elementą.

funkcija išankstinė apkrova () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('kliūtis1', 'img / kliūtis1.png');
this.load.image ('kliūtis2', 'img / kliūtis2.png');
}

Tada kiekvieną kliūčių spratą reikės inicijuoti kūrimo funkcijoje, kaip ir žaidimo elementą.

funkcija sukurti () {
gamePiece = tai.fizika.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
kliūtis1 = this.fizika.add.sprite (200, 0, 'kliūtis1');
kliūtis2 = this.fizika.add.sprite (0, 200, 'kliūtis2');
}

Kliūčių judėjimas

Norėdami šį kartą perkelti kūrinius, nenorime naudoti grotuvo įvesties. Vietoj to, leiskime vienam gabalui judėti iš viršaus į apačią, o kitą - kairėn į dešinę. Norėdami tai padaryti, pridėkite šį kodą prie naujinimo funkcijos:

kliūtis1.y = kliūtis1.y + 4;
jei (kliūtis1.y> 600) {
kliūtis1.y = 0;
kliūtis1.x = Phaser. Matematika. Tarp (0, 600);
}
kliūtis2.x = kliūtis2.x + 4;
jei (kliūtis2.x> 600) {
kliūtis2.x = 0;
kliūtis2.y = Phaser. Matematika. Tarp (0, 600);
}

Aukščiau pateiktas kodas perkelia kliūtį1 žemyn ekranu ir kliūtį2 per žaidimo zoną po 4 taškus kiekviename kadre. Kai kvadratas bus atjungtas nuo ekrano, jis bus perkeltas atgal į priešingą pusę naujoje atsitiktinėje vietoje. Tai užtikrins, kad žaidėjui visada atsiras naujų kliūčių.

Avarijų nustatymas

Bet mes dar ne viskas darėme. Galbūt pastebėjote, kad mūsų žaidėjas gali praeiti pro kliūtis. Mes turime priversti žaidimą aptikti, kai žaidėjas patenka į kliūtį, ir baigti žaidimą.

„Phaser“ fizikos bibliotekoje yra susidūrimo detektorius. Viskas, ką turime padaryti, tai inicializuoti jį kūrimo funkcijoje.

this.physics.add.collider (gamePiece, kliūtis1, funkcija (gamePiece, kliūtis1) {
gamePiece.destroy ();
kliūtis.sunaikinti ();
kliūtis2.sunaikinti ();
});
this.physics.add.collider (gamePiece, kliūtis2, funkcija (gamePiece, kliūtis2) {
gamePiece.destroy ();
kliūtis.sunaikinti ();
kliūtis2.sunaikinti ();
});

Susidūrimo metodui reikalingi trys parametrai. Pirmieji du parametrai nurodo, kurie objektai susiduria. Taigi aukščiau turime du susidūrėjusius. Pirmasis aptinka, kai žaidimo elementas susiduria su kliūtimi1, o antrasis - ieško susidūrimų tarp žaidimo ir kliūties2.

Trečiasis parametras nurodo susidūrėjui, ką reikia daryti aptikus susidūrimą. Šiame pavyzdyje yra funkcija. Jei įvyksta susidūrimas, visi žaidimo elementai sunaikinami; tai sustabdo žaidimą. Dabar žaidėjas žaidžia, jei pataiko į kliūtį.

Išbandykite žaidimų kūrimą su „Phaser“

Yra daug įvairių būdų, kaip šį žaidimą galima patobulinti ir padaryti sudėtingesnį. Mes sukūrėme tik vieną grotuvą, tačiau antrą grojamą personažą būtų galima pridėti ir valdyti valdant „awsd“. Panašiai galite eksperimentuoti pridėdami daugiau kliūčių ir keisdami jų judėjimo greitį.

Ši įžanga padės jums pradėti, tačiau dar daug ko reikia išmokti. Puikus „Phaser“ dalykas yra tai, kad daug žaidimų fizikos yra padaryta už jus. Tai puikus paprastas būdas pradėti kurti 2D žaidimus. Toliau kurkite šį kodą ir tobulinkite savo žaidimą.

Jei susiduriate su klaidomis, jūsų naršyklės derintuvas yra puikus būdas sužinoti problemą.

Kaip naudoti „Chrome DevTools“ šalinant svetainės problemas

Sužinokite, kaip patobulinti savo svetaines naudoti „Chrome“ naršyklės įmontuotus kūrimo įrankius.

Apie autorių