Html5 platformer a phaser-en
A böngészők és a HTML lehetőségeinek fejlesztésével minden évben egyre népszerűbbé válik a platformok közötti platformok és alkalmazások létrehozásának ötlete. Már sok olyan megoldás létezik, amely egyszerűsíti az ilyen alkalmazások létrehozását. A vskidkuon hívhatja a WinJS, az Intel XDK, a Sencha, az Ionic, az Enyo, az Adobe AIR programot. És természetesen népszerű játékgépek, mint például a Cocos2D, az EasyJS, a Three.js és a Phaser.
Nagyon kedvelem a TypeScript nyelvet, és ennek megfelelően a kereteket, amelyek lehetővé teszik annak használatát. Különösen azt szeretném megmutatni, hogyan használhatja a Phaser keretrendszert és a TypeScript nyelvet egyszerű platformer létrehozásához. A GulpJS projektgyűjtőt is használjuk.
A Phaser az asztali és mobil HTML5 játékok fejlesztésének kerete. A HTML5 és a JS képességek segítségével írsz egy játékot, akkor ez a játék bármilyen modern böngészőben indítható, beleértve a mobil eszközöket is. Mobileszközökön azonban a hasonló alkalmazások általában a PhoneGap vagy a CocoonJS használatával indulnak el, amely lehetővé teszi a jobb teljesítmény elérését és a fejlett eszközökhöz való hozzáférést, például az értesítéseket, az eszközkontaktusokkal való munkát és a különböző érzékelők adatainak olvasását.
Szóval, mit kell kezdeni a Phaser használatával?
Webkiszolgáló
A jelenlegi böngészők, sajnos, és talán szerencsére paranoiálisak a helyi fájlrendszerről letöltött fájlokról, ezért a Phaser-motor teljes munkájához helyi webszervert kell telepíteni. Számos webkiszolgáló van, és a választás nem alapvető. Ha korábban dolgozott az Apache-val, használd. Ha Ön IIS-rajongó vagy, IIS Express, nginx, Mongoose vagy egy csupasz webszerver, amelyet nodejs ír, akkor válaszd ki a legközelebb.
A legegyszerűbb módja az, ha egy egyszerű webszervert használ a Node.JS-hez. Például az NPM segítségével telepítheti a http-kiszolgálócsomagot.
Phaser csomagokra van szükségünk. amely tartalmazza a motort, és a csomag http-kiszolgálót - a legegyszerűbb webszervert a csomóponton. Ehhez a parancssorban menjen a kívánt mappába, és telepítse a szükségeseket:
Itt kifejezetten jeleztem a Phaser 2.1.0 verzióját, ugyanúgy, mint az API különböző verzióiban.
Most, ha futtatja a parancsot
Feladatkezelő
Szükségünk van egy feladatkezelőre a szkriptek és számos plug-in létrehozásához. Kedvelem a Gulp alkalmazását, de használhatod mind a Grunt-ot, mind a többieket, amelyek kényelmesek az Ön számára. Szóval vagy más módon telepítenie kell a Gulpot a kötegelt kezelő használatával:
A TypeScript fájlok létrehozásához telepítenie kell a gulp-típusú írást.
Szintén szükséges létrehozni a gyülekezetünk forgatókönyvének leírását a gulpfile.js fájlban. Tartalma egyszerű lesz:
Itt két feladatot deklarálunk:
- Phaser - másolja a motor szkriptjét a kiadási mappába.
- compile-Scripts - összeállítja az összes TypeScript fájlt a lib mappából és elhelyezi őket a kiadási mappába.
Most beírhatja a parancsot a parancssorba. és a projekt összeáll.
Növekményes összeszerelés
Mivel minden egyes alkalommal, amikor manuálisan kell beadni a gulpust az összeszereléshez, nem engedélyezheti a módosított fájlok automatikus összeszerelését gulpóra segítségével. Ehhez kicsit megváltoztatjuk gulpfiles.js:
Most beírhatja a gulp watch-ot a parancssorba. A TypeScript fájlok nyomon követésének engedélyezése és a módosított fájlok automatikus összeállítása. Van egy külön parancssor megnyitása ehhez: egy http-kiszolgáló fut. a másikban - inkrementális összeállítás.
Nagyszerű, a motor le van töltve, a webszerver működik. Próbáljuk meg létrehozni a legegyszerűbb alkalmazást a TypeScript és a Phaser eszközön.
Ehhez létre kell hoznunk a legegyszerűbb index.html-et a projektünk gyökerében, amely betölti a parancsfájlokat:
És egy egyszerű dosszié file.ts a lib mappában:
A kód legérdekesebb része a Phaser.Game osztály konstruktora. Paraméterként elfogadja:
- A szélesség képpontokban vagy százalékokban (százalékos esetekben az értéknek stringnek kell lennie).
- Magasságot.
- Kimeneti módszer: Phaser.AUTO (automatikus kiválasztás), Phaser.CANVAS, Phaser.WEBGL, Phaser.HEADLESS (renderelés nélkül).
- Az a elem DOM-azonosítója, amelyre a játék megjelenik, vagy maga a DOM elem.
- Eseménykezelőket tartalmazó objektum: előtöltés, létrehozás, frissítés, renderelés. Az előtöltés a játékadatok betöltésére szolgál. A létrehozás az adatok betöltése után hívódik meg. A frissítést és a renderelést a játékmodell állapotának megváltoztatására és a megjelenítésre hívják.
A képek letöltése a Phaser-ben egyszerű. Minden szükséges erőforrás betöltődik a preload funkcióba. Letöltheti a képet hívással
Ezután hozzáadhatjuk a letöltött sprite-t a teremtés funkció helyszínéhez:
Hozzáadtam az összes képet az eszköz mappába. Ez a grafikonkészlet tartalmazza a karakterek összes szükséges csempeit és animációit, de egyszerűen csak egy képet adunk ki:
Az animált karakterekkel ellátott Spritesheet már elkészült számunkra, csak letölteni kell. A Spritesheet mellett a Phaser támogatja az animációt egy textúra atlaszból (Texture Atlas), amely a Texture Packer segítségével hozható létre.
A Texture Packer beállításai Phaser-kompatibilis atlasz létrehozásához szükségesek:
- Adatformátum: JSON (Array)
- Textúra formátum: PNG
- Maximális méret: 2048
- Forgatás engedélyezése: hamis
- Határbetöltés: 0
- Alaktömítés: 0
Az atlasz betöltéséhez használja a game.load.atlas függvényt. amely az erőforrás és az elérési út nevét veszi át a json és a png fájlokhoz. Mivel a Spritesheet-el foglalkozunk, a game.load.spritesheet-ot fogjuk használni. amely az erőforrás nevét, a png fájl elérési útját és a keretméreteket veszi át. A sprite animációját a spriteObject.animations.add függvény adja hozzá - az animáció neve és a benne foglalt keretek megjelennek. Az atlasz esetében a fájlnevek a Spritesheet esetében a keretszámok.
A Spritesheet karakter 4 képkockát tartalmaz. Az első egy csendes állapot, a második és a harmadik a mozgásanimáció és az utolsó - a karakter felnéz.
Van egy karakterünk, most létre kell hoznunk egy szintes térképet. Ehhez szükségünk van egy földrajzi csempefestékkel, mi már megvan. A Kerámia alkalmazással szintetikus térképet készíthet a csempékből.
Hozzon létre egy új térkép méretét, mondjuk 50 és 50 között. A csempe mérete 16x16px.
Ezután adja hozzá a Tileset-et
És felhívja a szintet.
Az eredményt JSON fájlszintű.json fájlként mentse ugyanabban az eszköz mappában. Fontos, hogy a Tiledben használt csempefájl ugyanaz legyen, mint a feltölteni kívánt fájl.
A Phaser-ben több elérhető fizikai motor van: Arcade, Ninja és P2. Elméletileg egy másik Box2D és Chipmunk áll rendelkezésre, de még fejlesztés alatt áll, ezért saját veszélyeivel és kockázatával használhatja őket. Több motor is beletartozhat ugyanabban az időben, de minden játékobjektum csak egyhez van kötve. A motorokat a szimuláció részlete és ennek megfelelően a teljesítmény határozza meg, ezért a fizika optimalizálás céljából értelemszerűen egyszerűbb motorral számolható.
A Box2D-ről és a Chipmunkről már hallhatóak, mivel népszerűek. Az Arcade, a Ninja és a P2 mind a Phaser fejlesztői.
Az Arcade Physics az AABB ütközések nagyon egyszerű és gyors megvalósításán dolgozik, azaz Az ütközésvizsgálatot téglalapok alapján végzik el anélkül, hogy figyelembe vennék a négyszögek forgatását.
A Ninja Physics figyelembe veszi a négyszögek forgatását, így összetettebb geometriára használható, de lassabb, mint az Arcade.
A P2 egy teljes értékű fizikai motor, már a Box2D képességek mellett.
Az Arcade legegyszerűbb és leggyorsabb fizikai modelljét fogjuk használni.
A vezérlőgombokat regisztrálni kell a game.input.keyboard objektumban:
Ezután ellenőrizheti, hogy megnyomott-e egy gombot
A szóközt lenyomva a karakterünk lesz. Mi akkor állítjuk be egy negatív függőleges sebességgel, ha a karakter a földön van.
Amikor balra és jobbra megnyomja a gombokat - megváltoztatjuk a vízszintes sebességet és megfordítjuk a karakteres sprite-t.
Nagyszerű, most a karakter futhat és átugorhat a térképen, de sajnos túlmegy a kamera határain. Ennek a hátránynak a kiküszöböléséhez elegendő ahhoz, hogy engedélyezze a kamera megfigyelését
Tehát egy egyszerű platformer áll rendelkezésünkre. Az egész kódot megtekintheti a projekt oldalon. de itt egy példa. Kétségtelenül finomítani kell: meg kell adnod a kereszteződés feldolgozását a tüskés farokkal és lépcsőkkel. Ezt az ütközéskezelőben teheti meg:
Hozzá kell adnia az ellenségeket és az ütközéskezelőket nekik, menüket, hangokat, meg kell törniük a kódot modulokká, de ez túlmutat ezen a bemutatón.
Általánosságban elmondható, hogy a Phaser kellemes benyomást kelt, és mindent tartalmaz, amire szükséged van egyszerű 2d játék létrehozásához:
- sprite
- fizika
- Csempe térképek
- Animáció, beleértve a csontok alapján
- Részecske-rendszerek
- fényképezőgép
- hang