Mängude arendamise Phaseriga alustamine

Mängude arendamise Phaseriga alustamine

Phaser on raamistik 2D videomängude loomiseks. See kasutab mängu kuvamiseks HTML5 lõuendit ja mängu käivitamiseks JavaScripti. Phaseri kasutamise eeliseks vanilje JavaScripti ees on see, et sellel on lai teek, mis täidab suure osa videomängude füüsikast, mis võimaldab teil keskenduda mängu enda kujundamisele.





Phaser vähendab arendusaega ja lihtsustab töövoogu. Õpime, kuidas luua Phaseriga põhimäng.



Miks arendada koos Phaseriga?

Phaser sarnaneb teiste visuaalsete programmeerimiskeeltega selle poolest, et programm põhineb silmusvärskendustel. Phaseril on kolm põhietappi: eellaadimine, loomine ja värskendamine.





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

Create initsialiseerib mängu ja kõik algavad mänguelemendid. Kõiki neid funktsioone käivitatakse mängu käivitamisel üks kord.



Seevastu värskendus töötab kogu mängu vältel. Just tööhobune uuendab mängu elemente, et muuta see interaktiivseks.

Seadistage oma süsteem mängude arendamiseks Phaseriga

Vaatamata sellele, et Phaser töötab HTML-i ja JavaScriptiga, käivad mängud tegelikult serveripoolsel, mitte kliendipoolsel. See tähendab, et peate oma mängu jätkama teie kohalik peremees . Mängu serveripoolne käivitamine võimaldab teie mängul juurde pääseda täiendavatele failidele ja varadele väljaspool programmi. Ma soovitan kasutades XAMPP -i kohaliku hosti seadistamiseks kui teil pole veel ühte seadistust.



Allolev kood paneb teid tööle. See loob põhilise mängukeskkonna.







var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};

var gamePiece;
var game = new Phaser.Game(config);

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}


Mängu käivitamiseks on vaja PNG -pilti nimega „gamePiece”, mis on salvestatud teie kohaliku hosti kausta „img”. Lihtsuse huvides kasutab see näide 60xgame de60px oranži ruutu. Teie mäng peaks välja nägema umbes selline:



Kui teil tekib probleem, kasutage oma brauseri silurit, et välja selgitada, mis valesti läks. Isegi ühe tähemärgi puudumine võib põhjustada hävingut, kuid üldiselt saab silur need väikesed vead kätte.

Seadistuskoodi selgitamine

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

Phaseri mängu käivitamiseks peate importima Phaseri kogu. Me teeme seda real 3. Selles näites linkisime lähtekoodi, kuid saate selle oma kohalikule hostile alla laadida ja ka failile viidata.

imessage ütleb, et pole kohale toimetatud, kuid on

Suur osa senisest koodist konfigureerib mängukeskkonda, mida muutuja config kauplustes. Meie näites seadistame sinise (heksade värvikoodiga CCFFFF) taustaga faasermängu, mille suurus on 600 x 600 pikslit. Praeguseks on mängufüüsika seatud Arkaadlane , kuid Phaser pakub erinevat füüsikat.

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

Seotud: 6 parimat sülearvutit programmeerimiseks ja kodeerimiseks

Järgmine koodilõik on koht, kus mäng tõesti kuju võtab. Eellaadimisfunktsioon on koht, kus soovite initsialiseerida kõik, mida vajate oma mängu käivitamiseks. Meie puhul oleme oma mängutüki pildi eellaadinud. Esimene parameeter .pilt nimetab meie pildi ja teine ​​ütleb programmile, kust seda pilti leida.

GamePiece pilt lisati mängule loomise funktsioonis. Rida 29 ütleb, et lisame mängu gamePiece sprindina 270 pikslit vasakule ja 450 pikslit allapoole meie mänguala vasakust ülanurgast.

Paneme meie mängutüki liikuma

Seni ei saa seda vaevalt mänguks nimetada. Esiteks ei saa me oma mängu tükki liigutada. Selleks, et saaksime oma mängus asju muuta, peame lisama värskendusfunktsiooni. Samuti peame kohandama muutuja konfiguratsiooni stseeni, et öelda mängule, millist funktsiooni mängu värskendamisel käivitada.

Värskendusfunktsiooni lisamine

Uus stseen konfiguratsioonis:

scene: {
preload: preload,
create: create,
update: update
}

Seejärel lisage loomise funktsiooni alla värskendusfunktsioon:

kuidas lubada hdr arvutis
function update(){
}

Võtmesisendite hankimine

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

var gamePiece;
var keyInputs;

Muutuja keyInput tuleks initsialiseerida, kui mäng on loodud funktsioonis create.

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

Värskendusfunktsioonis saame nüüd kontrollida, kas mängija vajutab nooleklahvi, ja kui on, siis liigutage oma mängu vastavalt. Allolevas näites liigutatakse mängutükki 2 pikslit, kuid saate selle suuremaks või väiksemaks muuta. Tüki liigutamine 1px korraga tundus pisut aeglane.

function update(){
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 liigutatav iseloom! Kuid selleks, et olla tõeline mäng, vajame eesmärki. Lisame mõned takistused. Takistuste peksmine oli paljude 8-bitise ajastu mängude aluseks.

Mängule takistuste lisamine

Selles koodinäites kasutatakse kahte takistusspritti, mida nimetatakse takistuseks1 ja takistuseks 2. takistus1 on sinine ruut ja takistus2 on roheline. Iga pilt tuleb eelsalvestada nagu mängupildi sprite.

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}

Seejärel tuleb iga takistusjooks vormindamisfunktsioonis initsialiseerida, nagu ka mängupilt.

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}

Takistuste liikumine

Tükkide teisaldamiseks ei soovi me mängija sisendit kasutada. Selle asemel liigutage üks tükk ülevalt alla ja teine ​​vasakult paremale. Selleks lisage värskendusfunktsioonile järgmine kood:

obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}

obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}

Ülaltoodud kood liigutab takistuse1 ekraanil allapoole ja takistust2 üle mänguvälja 4 kaadrit kaadris. Kui ruut on ekraanilt väljas, liigutatakse see uuele juhuslikule kohale vastasküljele. See tagab, et mängija jaoks on alati uus takistus.

Kokkupõrgete avastamine

Kuid me pole veel päris valmis. Võib -olla olete märganud, et meie mängija saab takistustest mööda. Peame panema mängu tuvastama, millal mängija tabab takistust, ja lõpetama mängu.

Phaseri füüsikaraamatukogus on põrketeadur. Kõik, mida peame tegema, on selle loomine funktsioonis lähtestada.

this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});

Kokkupõrke meetod nõuab kolme parameetrit. Kaks esimest parameetrit tuvastavad, millised objektid kokku põrkavad. Eespool on meil seadistatud kaks põrkurit. Esimene tuvastab, kui mänguasi põrkub kokku takistusega1, ja teine ​​otsib kokkupõrkeid mänguriista ja takistuse2 vahel.

Kolmas parameeter ütleb kokkupõrke tegijale, mida teha pärast kokkupõrke avastamist. Selles näites on funktsioon. Kokkupõrke korral hävitatakse kõik mängu elemendid; see peatab mängu. Nüüd mängib mängija üle, kui tabab takistust.

Proovige mänguarendust Phaseriga

Seda mängu saab täiustada ja keerulisemaks muuta mitmel erineval viisil. Oleme loonud ainult ühe mängija, kuid teise mängitava tegelase saab lisada ja juhtida awsd -juhtelementidega. Samamoodi võite katsetada, lisades rohkem takistusi ja muutes nende liikumiskiirust.

kuidas androidis Google'i kontost mööda minna

See sissejuhatus aitab teil alustada, kuid teil on veel palju õppida. Phaseri suurepärane asi on see, et suur osa mängufüüsikast tehakse teie eest ära. See on suurepärane lihtne viis 2D mängude kujundamise alustamiseks. Jätkake selle koodi kasutamist ja täiustage oma mängu.

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

Jaga Jaga Piiksuma E -post Kuidas kasutada Chrome DevToolsi veebisaidi probleemide tõrkeotsinguks

Siit saate teada, kuidas kasutada veebisaitide täiustamiseks Chrome'i brauseri sisseehitatud arendustööriistu.

Loe edasi Seotud teemad
  • Programmeerimine
  • JavaScript
  • HTML5
  • Mängu arendamine
Autori kohta Jennifer Seaton(Avaldatud 21 artiklit)

J. Seaton on teaduskirjanik, kes on spetsialiseerunud keeruliste teemade lõhkumisele. Tal on doktorikraad Saskatchewani ülikoolist; tema uurimus keskendus mängupõhise õppe kasutamisele õpilaste veebipõhise kaasamise suurendamiseks. Kui ta ei tööta, leiad ta koos tema lugemisega, videomängude mängimise või aiandusega.

Veel Jennifer Seatonilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin