A Phaser használatának megkezdése a játékfejlesztéshez

A Phaser egy keretrendszer a 2D-s videojátékok létrehozásához. HTML5 Canvas segítségével jeleníti meg a játékot, a JavaScript pedig a játék futtatásához. A Phaser használatának előnye a vanília JavaScript-sel szemben az, hogy kiterjedt könyvtárral rendelkezik, amely kiegészíti a videojátékok fizikájának nagy részét, lehetővé téve, hogy magának a játéknak a tervezésére koncentrálhasson.

A Phaser csökkenti a fejlesztési időt és megkönnyíti a munkafolyamatot. Tanuljuk meg, hogyan lehet egy alap játékot létrehozni a Phaserrel.

Miért kell fejleszteni a Phaserrel?

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

Az előzetes betöltésben a játék eszközei feltöltésre kerülnek, és elérhetővé válnak a játék számára.

A Create inicializálja a játékot és az összes kezdő játékelemet. Ezeket a funkciókat a játék indításakor egyszer futtatják.

Az Update viszont az egész játék alatt hurokban fut. A játék ló frissíti a játék elemeit interaktívvá.

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

Annak ellenére, hogy a Phaser HTML-en és JavaScript-en fut, a játékokat valójában szerver, és nem kliens oldalon futtatják. Ez azt jelenti, hogy a játékot tovább kell futtatnia a helyi gazda. A játék szerver oldali futtatása lehetővé teszi a játék számára, hogy további fájlokhoz és eszközökhöz férjen hozzá a programon kívül. ajánlom az XAMPP használatával állítson be egy helyi gépet ha még nem rendelkezik egy beállítással.

Mi a 127.0 0.1, a Localhost vagy a visszacsatolási cím?

Látta a "localhost" -t a számítógépén, de mi ez? Mit jelent a 127.0.0.1 cím? Feltörték?

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

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ékának valami ilyennek kell kinéznie:

Ha problémába ütközik, használja a böngésző hibakeresőjét, hogy kiderítse, mi lett a baj. Hiányzik akár egyetlen karakter is, pusztítást okozhat, de általában a hibakereső elkapja ezeket az apró hibákat.

A telepítési kód ismertetése

Eddig a játék nem tesz semmit. De már rengeteg földet 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. vonalon tesszük. Ebben a példában a forráskódhoz kapcsoltunk, de letöltheti a localhost-ra, és hivatkozhat a fájlra is.

Az eddigi kód nagy része konfigurálja a játék környezetét, amelyet a változó konfig üzletek. Példánkban egy phaser játékot állítunk fel kék (CCFFFF hexadecimális színkódban) háttérrel, amely 600 x 600 képpont. Egyelőre a játékfizikát beállították árkád, de a Phaser különböző fizikát kínál.

Végül, színhely utasítja a programot a előtöltés funkció a játék megkezdése előtt és a teremt funkció a játék elindításához. Ezeket az információkat az úgynevezett játékobjektumhoz továbbítják játszma, meccs.

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

A következő kódrész az, ahol a játék valóban formát ölt. Az előfeltöltés funkcióval inicializálni kell bármit, ami a játék futtatásához szükséges. Esetünkben előre betöltöttük a játékdarab képét. Az első paraméter a .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á lett adva a játékhoz a létrehozás funkcióban. A 29. sor azt mondja, hogy hozzáadjuk a gamePiece képet, mint sprite 270px balra és 450px lefelé a játékterületünk bal felső sarkától.

A játékdarab mozgatása

Eddig ezt aligha lehet játéknak nevezni. Egyrészt nem tudjuk mozgatni a játékot. Ahhoz, hogy változtatni tudjunk a játékunk dolgain, hozzá kell adnunk egy frissítési funkciót. Be kell állítanunk a jelenetet a config változóban, hogy megmondjuk a játéknak, hogy melyik funkciót kell futtatni, amikor frissítjük a játékot.

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

Új jelenet a konfigurációban:

színhely: {
előterhelés: előretöltés,
létrehozni: létrehozni,
frissítés: frissítés
}

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

függvényfrissítés () {
}

A legfontosabb bemenetek beszerzése

Ahhoz, hogy a játékos a nyílbillentyűkkel irányítsa a játékot, hozzá kell adnunk egy változót, hogy nyomon kövessük, mely gombokat nyomja meg a játékos. Deklarálja a KeyInput nevű változót alább, ahol a gamePieces-t deklaráltuk. Ha ezt deklarálja, akkor az összes funkció hozzáférhet az új változóhoz.

var gamePiece;
var keyInputs;

A keyInput változót inicializálni kell, amikor a játék létrehozásra kerül a Create funkcióban.

függvény létrehozása () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
}

Most a frissítés funkcióban ellenőrizhetjük, hogy a játékos megnyom-e egy nyíl gombot, és ha igen, akkor ennek megfelelően mozgassa a játékdarabunkat. Az alábbi példában a játékdarabot 2px-rel elmozdítják, de ezt megteheti nagyobb vagy kisebb számként is. A darab 1x-es mozgatása egyszerre kissé lassúnak tűnt.

függvényfrissítés () {
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ó jellege van! Ahhoz azonban, hogy valóban játék lehessünk, szükségünk van egy célkitűzésre. Tegyünk hozzá néhány akadályt. Az akadályok elhárítása sok játék alapja volt a 8 bites korszakban.

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

Ez a kódpélda két akadály-spritet használ, amelyeket akadálynak1 és akadálynak neveznek. Az akadály1 kék négyzet, az akadály2 pedig zöld. Minden képet elő kell tölteni, csakúgy, mint a játékdarabot.

függvény preload () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('akadály1', 'img / akadály1.png');
this.load.image ('akadály2', 'img / akadály2.png');
}

Ezután minden akadály sprite-et inicializálni kell a create funkcióban, csakúgy, mint a játékdarabot.

függvény létrehozása () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
akadály1 = this.fizika.add.sprite (200, 0, 'akadály1');
akadály2 = this.fizika.add.sprite (0, 200, 'akadály2');
}

Az akadályok mozgása

A darabok mozgatásához ezúttal nem akarunk lejátszó bemenetet használni. Ehelyett tegyünk egy darabot fentről lefelé, a másikat balról jobbra. Ehhez adja hozzá a következő kódot a frissítési funkcióhoz:

akadály1.y = akadály1.y + 4;
if (akadály1.y> 600) {
akadály1.y = 0;
akadály1.x = Phaser. Math. (0, 600) között;
}
akadály2.x = akadály2.x + 4;
if (akadály2.x> 600) {
akadály2.x = 0;
akadály2.y = Phaser. Math. (0, 600) között;
}

A fenti kód mozgatja az akadályt1 a képernyőn lefelé, az akadályt pedig 2 képpontonként a játékterületen. Amint egy négyzet nem jelenik meg a képernyőn, egy új véletlenszerű helyen visszahelyezzük a szemközti oldalra. Ez biztosítja, hogy mindig új akadály álljon a játékos elé.

Ütközések észlelése

De még nem vagyunk készen. Lehet, hogy észrevette, hogy játékosunk áthaladhat az akadályokon. A játékot észlelni kell, amikor a játékos akadályba ütközik, és be kell fejeznünk a játékot.

A Phaser fizikai könyvtárban van egy ütközésérzékelő. Csak annyit kell tennünk, hogy inicializáljuk a create függvényben.

this.physics.add.collider (gamePiece, akadály1, függvény (gamePiece, akadály1) {
gamePiece.destroy ();
akadály.pusztítsa el ();
akadály2.megsemmisíteni ();
});
this.physics.add.collider (gamePiece, akadály2, függvény (gamePiece, akadály2) {
gamePiece.destroy ();
akadály.pusztítsa el ();
akadály2.megsemmisíteni ();
});

Az ütköző módszer három paramétert igényel. Az első két paraméter meghatározza, hogy mely objektumok ütköznek. Tehát fentebb két ütközőt állítottunk fel. Az első azt észleli, amikor a játékdarab ütközik az akadályba1, a második pedig az ütközést keresi a játékgép és az akadály között2.

A harmadik paraméter megmondja az ütközőnek, mit kell tennie, ha ütközést észlel. Ebben a példában van egy függvény. Ha ütközés történik, az összes játékelem megsemmisül; ezzel leáll a játék. Most a játékos akkor lép át, ha akadályba ütközik.

Próbálja ki a játékfejlesztést a Phaser-rel

Sokféle módon lehet ezt a játékot fejleszteni és összetettebbé tenni. 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.

Ez a bevezetés megkezdi Önt, de még rengeteg minden maradt hátra. A Phaser nagyszerű tulajdonsága, hogy a játékfizika nagy részét elvégzik helyetted. Ez egy nagyon egyszerű módszer a 2D-s játékok tervezésének megkezdéséhez. Fejlessze tovább ezt a kódot, és finomítsa a játékot.

Ha bármilyen hibába ütközik, a böngésző hibakeresője nagyszerű módja a probléma felfedezésének.

A Chrome DevTools használata a webhelyekkel kapcsolatos problémák elhárításához

Ismerje meg, hogyan használhatja a Chrome böngésző beépített fejlesztői eszközeit webhelyeinek fejlesztésére.

A szerzőről