Első lépések a Phaser játékfejlesztéshez

Első lépések a Phaser játékfejlesztéshez

A Phaser egy keretrendszer 2D videojátékok létrehozásához. A játék megjelenítéséhez HTML5 vásznat és a játék futtatásához JavaScriptet használ. A Phaser használatának előnye a vaníliás JavaScripthez képest az, hogy kiterjedt könyvtárával rendelkezik, amely befejezi a videojátékok fizikájának nagy részét, lehetővé téve, hogy magára a játék tervezésére koncentráljon.





A Phaser csökkenti a fejlesztési időt és megkönnyíti a munkafolyamatot. Tanuljunk meg egy alapjátékot létrehozni a Phaser segítségével.



Miért érdemes a Phaserrel fejleszteni?

Phaser hasonló a többi vizuális programozási nyelvhez, mivel a program hurkolt frissítéseken alapul. A Phaser három fő szakaszból áll: előtöltés, létrehozás és frissítés.





Az előtöltés során a játék eszközeit feltöltik és elérhetővé teszik a játék számára.

A Create inicializálja a játékot és az összes kezdőjáték -elemet. Mindegyik funkció egyszer fut a játék indításakor.



A frissítés viszont ciklusban fut végig a játék során. A munkaló frissíti a játék elemeit, hogy interaktívvá váljon.

Állítsa be rendszerét a játékok fejlesztéséhez a Phaser segítségével

Annak ellenére, hogy a Phaser HTML-en és JavaScripten fut, a játékok valójában szerveroldalon futnak, nem ügyféloldalon. Ez azt jelenti, hogy futtatnia kell a játékot a helyi gazda . A játék szerveroldali futtatásával a játék további fájlokhoz és eszközökhöz férhet hozzá a programon kívül. ajánlom az XAMPP használatával helyi szerver beállításához ha még nem rendelkezik egy beállítással.



Az alábbi kód segítségével elindulhat. Alapvető játékkörnyezetet hoz létre.







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');
}


A játék futtatásához a „gamePiece” nevű PNG -képre lesz szükség, amelyet a helyi gép „img” mappájába kell menteni. Az egyszerűség kedvéért ez a példa 60xgame de60px narancssárga négyzetet használ. A játékodnak valahogy így kell kinéznie:



Ha problémába ütközik, használja a böngésző hibakeresőjét, hogy kiderítse, mi történt. Még egyetlen karakter hiánya is pusztítást okozhat, de általában a hibakereső fogja észlelni ezeket az apró hibákat.

A beállítási kód magyarázata

Eddig a játék nem tesz semmit. De már sok területet lefedtünk! Nézzük meg részletesebben a kódot.

A Phaser játék futtatásához importálnia kell a Phaser könyvtárat. Ezt a 3. sorban tesszük. Ebben a példában hivatkoztunk a forráskódra, de letöltheti azt a localhost -ra, és hivatkozhat a fájlra is.

hogyan lehet megkerülni a Windows XP bejelentkezést

Az eddigi kód nagy része konfigurálja a játékkörnyezetet, amelyet a változó config üzletek. Példánkban egy fázisjátékot állítunk be kék (CCFFFF hexadecimális színkódban) háttérrel, amely 600 x 600 képpont méretű. Egyelőre a játékfizika beállítása árkádiai , de a Phaser különböző fizikákat kínál.

Végül, színhely azt mondja a programnak, hogy futtassa előtöltés funkció a játék kezdete előtt és a teremt funkció a játék elindításához. Mindezeket az információkat továbbítják az ún játszma, meccs .

Összefüggő: A 6 legjobb laptop programozáshoz és kódoláshoz

A kód következő része az, ahol a játék valóban formát ölt. Az előtöltési funkcióval inicializálhat mindent, ami a játék futtatásához szükséges. Esetünkben előre feltöltöttük játékrészünk képét. Az első paraméter .kép megnevezi a képünket, a második pedig megmondja a programnak, hol találja meg a képet.

A gamePiece kép hozzáadásra került a játékhoz a Create funkcióban. A 29. sor azt mondja, hogy hozzáadjuk a gamePiece képeket sprite 270px balra és 450px lefelé a játékterületünk bal felső sarkától.

Mozgassa játékunkat

Ez eddig aligha nevezhető játéknak. Egyrészt nem tudjuk mozgatni a játékrészünket. Ahhoz, hogy változtatni tudjunk a játékunkon, hozzá kell adnunk egy frissítési funkciót. Ezenkívül módosítanunk kell a konfigurációs változó jelenetét, hogy megmondjuk a játéknak, hogy melyik funkciót kell futtatni a játék frissítésekor.

Frissítési funkció hozzáadása

Új jelenet a konfigurációban:

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

Ezután adjon hozzá egy frissítési funkciót a létrehozási függvény alá:

láthatod a dms -t az instagramon online
function update(){
}

Kulcsbemenetek beszerzése

Ahhoz, hogy a játékos a nyilakkal vezérelhesse a játékot, hozzá kell adnunk egy változót, amely nyomon követi, hogy a játékos mely gombokat nyomja meg. Deklarálja a keyInputs nevű változót alább, ahol a gamePieces -t deklaráltuk. Ha ott deklarálja, az összes függvény hozzáfér az új változóhoz.

var gamePiece;
var keyInputs;

A keyInput változót inicializálni kell, amikor a játékot létrehozzák a Create függvényben.

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

Most a frissítési funkcióban ellenőrizhetjük, hogy a játékos megnyom -e egy nyílbillentyűt, és ha igen, akkor ennek megfelelően mozgassa a játékrészünket. Az alábbi példában a játékdarabot 2 képpontban mozgatják, de nagyobb vagy kisebb számot is készíthet. A darab 1px mozgatása kicsit lassúnak tűnt.

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;
}
}

A játéknak most mozgatható karaktere van! De ahhoz, hogy valóban játék lehessünk, szükségünk van egy célra. Tegyünk hozzá néhány akadályt. A 8 bites korszak sok játékának az akadályok elhárítása volt az alapja.

Akadályok hozzáadása a játékhoz

Ez a kódpélda két akadályspritet használ, amelyeket akadálynak1 és akadálynak nevezünk. Az akadály1 kék négyzet, az akadály2 zöld. Minden képet előre be kell tölteni, akárcsak a játékdarab sprite -ját.

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

Ezután minden akadály sprite -t ​​inicializálni kell a létrehozási funkcióban, akárcsak a játékot.

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');
}

Az akadályok elmozdítása

A darabok áthelyezéséhez ezúttal nem szeretnénk lejátszó bemenetet használni. Ehelyett az egyik rész mozogjon felülről lefelé, a másik pedig balról jobbra. Ehhez adja hozzá a következő kódot a frissítési funkcióhoz:

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);
}

A fenti kód az akadály 1 -et lefelé mozgatja a képernyőn, és az akadály 2 -t a játékterületen minden képkockán 4px. Ha egy négyzet ki van kapcsolva a képernyőről, akkor egy új véletlenszerű ponton visszakerül a másik oldalra. Ez biztosítja, hogy a játékosnak mindig új akadálya legyen.

Ütközések észlelése

De még nem végeztünk teljesen. Lehet, hogy észrevette, hogy játékosunk képes átjutni az akadályokon. Érzékelnünk kell a játékot, amikor a játékos ütközik egy akadályba, és véget kell vetni a játéknak.

A Phaser fizika könyvtár ütközésérzékelővel rendelkezik. Csak annyit kell tennünk, hogy inicializáljuk a create függvényben.

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();
});

Az ütköző módszer három paramétert igényel. Az első két paraméter azonosítja, hogy mely objektumok ütköznek. Tehát fent két ütközőt állítottunk be. Az első érzékeli, amikor a játék ütközik az akadályt1, a második ütköző pedig a játék és az akadály2 közötti ütközést keresi.

A harmadik paraméter megmondja az ütközőnek, hogy mit kell tennie, miután észleli az ütközést. Ebben a példában van egy függvény. Ütközés esetén a játék minden eleme megsemmisül; ez leállítja a játékot. Most a játékos átlép, ha akadályba ütközik.

Próbálja ki a játékfejlesztést a Phaser segítségével

Ezt a játékot sokféleképpen lehet javítani és összetettebbé tenni. Mi csak egy játékost hoztunk létre, de egy második játszható karakter hozzáadható és vezérelhető az 'awsd' vezérlőkkel. Hasonlóképpen kísérletezhet további akadályok hozzáadásával és mozgásuk sebességének változtatásával.

videó mentése egy webhelyről

Ez a bevezető elindít, de még sok tanulnivalója van. A Phaser nagyszerű tulajdonsága az, hogy a játékfizika nagy részét az Ön számára végzik. Ez egy nagyszerű módja annak, hogy elkezdje a 2D -s játékok tervezését. Továbbra is építkezzen erre a kódra, és finomítsa a játékot.

Ha bármilyen hibába ütközik, a böngésző hibakeresője nagyszerű módja annak, hogy felfedezze a problémát.

Részvény Részvény Csipog Email A Chrome DevTools használata a webhelyproblémák elhárításához

Ismerje meg, hogyan használhatja webhelyeit a Chrome böngésző beépített fejlesztői eszközeivel.

Olvassa tovább Kapcsolódó témák
  • Programozás
  • JavaScript
  • HTML5
  • Játékfejlesztés
A szerzőről Jennifer Seaton(21 cikk megjelent)

J. Seaton tudományos író, aki összetett témák lebontására szakosodott. PhD fokozatot szerzett a Saskatchewan Egyetemen; kutatása a játékon alapuló tanulás felhasználására összpontosított, hogy növelje a diákok online elkötelezettségét. Amikor nem dolgozik, megtalálhatja őt olvasással, videojátékokkal vagy kertészkedéssel.

Bővebben: Jennifer Seaton

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide