Odată cu dezvoltarea capacităților browserelor și a HTML-ului, ideea creării de jocuri și aplicații cross-platforme devine din ce în ce mai populară în fiecare an. Deja există multe soluții care simplifică crearea unor astfel de aplicații. Pe vskidku puteți apela WinJS, Intel XDK, Sencha, Ionic, Enyo, Adobe AIR. Și, desigur, motoarele de jocuri populare precum Cocos2D, EasyJS, Three.js și Phaser.
Sunt un mare fan al limbajului TypeScript și, în consecință, cadrele care permit utilizarea acestuia. În special, vreau să vă arăt cum puteți utiliza cadrul Phaser și limbajul TypeScript pentru a crea un simplu platformer. Vom folosi de asemenea colectorul de proiecte GulpJS.
Phaser este un cadru pentru dezvoltarea de jocuri desktop HTML5 și mobile. Scrii un joc folosind HTML5 oportunități și JS, atunci acest joc poate fi rulat în orice browser modern, inclusiv pe dispozitive mobile. Cu toate acestea, dispozitive mobile astfel de aplicații de obicei rula folosind PhoneGap sau CocoonJS, care permite pentru a obține cea mai bună performanță și capacitățile avansate ale dispozitivelor, cum ar fi notificarea dispozitivului de operare cu contacte, citire a datelor de la senzori diferiți.
Deci, de ce trebuie să începem să lucrăm cu Phaser?
Web Server
browsere curente, din păcate, sau poate din fericire, paranoic în ceea ce privește fișierele încărcate din sistemul de fișiere local, deci vom avea nevoie pentru a instala un server web local pentru motorul Phaser finaliza lucrările. Există o mulțime de servere Web, iar alegerea nu este fundamentală. Dacă ați mai colaborat cu Apache, utilizați-l. Daca sunteti un fan al IIS, IIS Express, Nginx, Mongoose, sau un server de web gol, scrieți pe nodejs, - apoi alegeți ce mai aproape.
Cea mai ușoară cale, desigur, este să folosiți un server web simplu pentru Node.JS. De exemplu, puteți utiliza NPM pentru a instala pachetul http-server.
Avem nevoie de pachete phaser. care conține motorul și pachetul http-server - cel mai simplu server web de pe Nod. Pentru aceasta, în linia de comandă, accesați dosarul dorit și instalați tot ce este necesar:
Am indicat în mod explicit aici versiunea Phaser 2.1.0, deoarece în diferite versiuni ale API pot fi diferite.
Acum, dacă executați comanda
Manager de activități
De asemenea, avem nevoie de un manager de sarcini pentru a construi scripturile noastre și mai multe plug-in-uri pentru aceasta. Prefer sa folosesc Gulp, dar poti folosi atat Grunt, cat si pe oricare altul care iti este potrivit. Deci, sau altfel, trebuie să instalați Gulp folosind managerul lotului:
Pentru a construi fișierele TypeScript, trebuie să instalați gulp-typcript.
De asemenea, este necesar să creați o descriere a scriptului adunării noastre în fișierul gulpfile.js. Conținutul său va fi simplu:
Aici declarăm două sarcini:
- phaser - copiază scriptul motorului în folderul de lansare.
- compile-scripts - compilează toate fișierele TypeScript din folderul lib și le pune în folderul de lansare.
Acum puteți introduce gulp în linia de comandă. iar proiectul va fi compilat.
Amestecare incrementală
Întrucât de fiecare dată pentru a rula gulp manual pentru asamblare nu este convenabil, puteți permite asamblarea automată a fișierelor modificate cu ceas de gulp. Pentru aceasta vom schimba ușor gulpfiles.js noastre:
Acum puteți introduce ceasul de gulp în linia de comandă. Pentru a permite urmărirea fișierelor TypeScript și compilarea automată a fișierelor modificate. Este logic să deschideți o linie de comandă separată pentru aceasta: una va rula http-server. în cealaltă - o adunare incrementală.
Mare, motorul este descărcat, serverul web este în funcțiune. Să încercăm să creăm cea mai simplă aplicație pe TypeScript și Phaser.
Pentru aceasta, trebuie să creăm cel mai simplu index.html în rădăcina proiectului nostru, care va încărca scripturile noastre:
Și un simplu game.ts fișier cu fișiere în folderul lib:
Partea cea mai interesantă în acest cod este constructorul de clasă Phaser.Game. Ca parametri accepta:
- Lățimea în pixeli sau procente (în cazul procentajelor, valoarea trebuie să fie un șir).
- Înălțime.
- Metoda de ieșire: Phaser.AUTO (selecție automată), Phaser.CANVAS, Phaser.WEBGL, Phaser.HEADLESS (fără redare).
- ID-ul DOM al elementului la care jocul va fi redat, sau elementul DOM însuși.
- Un obiect care conține procesatori de evenimente: preload, create, update, rendering. Preload-ul este folosit pentru a încărca datele jocului. Crearea se numește după încărcarea datelor. Update și Render sunt chemați să modifice starea modelului de joc și când este afișat.
Descărcarea imaginilor în Phaser este ușoară. Toate resursele necesare sunt încărcate în interiorul funcției de preîncărcare. Puteți descărca imaginea apelând
Apoi putem adăuga sprite-ul descărcat în scenă în funcția de creare:
Am adăugat toate imaginile în dosarul de materiale. Acest set de grafică conține toate plăcile și animațiile necesare ale personajului, dar vom începe prin a ieși dintr-o singură imagine:
Foaia de spionaj cu caracter animat a fost deja pregătită pentru noi, trebuie doar să o descărcăm. În plus față de Spritesheet, Phaser acceptă animația dintr-un atlas de textură (Atlas de textură), care poate fi creat utilizând Texture Packer.
Setări pentru pachetul de textură necesar pentru a genera un atlas compatibil cu Phaser:
- Formatul datelor: JSON (Array)
- Textură Format: PNG
- Dimensiunea maximă: 2048
- Permiteți rotirea: falsă
- Plăcuță de fundal: 0
- Formă de umplutură: 0
Pentru a încărca atlasul, utilizați funcția game.load.atlas. care ia numele de intrare al resursei și calea către fișierele json și png. Deoarece avem de-a face cu Spritesheet, vom folosi game.load.spritesheet. care ia numele resursei, calea către fișierul png și dimensiunile cadrelor. Animația pentru sprite este adăugată de funcția spriteObject.animations.add - sunt indicate numele animației și cadrele pe care le include. În cazul atlasului, numele fișierelor sunt specificate, în cazul lui Spritesheet, numerele cadrelor.
Spritesheet caracter conține 4 cadre. Prima este o stare liniștită, a doua și a treia sunt animația mișcării, iar cea de-a doua - personajul se uită în sus.
Avem un personaj, acum avem nevoie pentru a crea o hartă nivel. Pentru aceasta avem nevoie de o foaie de sprite cu dale de pământ, deja o avem. Puteți compila o hartă de nivel din plăci utilizând aplicația Tiled.
Creați o nouă hartă în dimensiune, de exemplu 50 până la 50. Dimensiunea plăcii este de 16x16 px.
Apoi, adăugați Tileset-ul nostru
Și trageți nivelul nostru.
Salvați rezultatul ca fișier JSON level.json în același folder de materiale. Este important ca fișierul de țiglă folosit în Tiling să fie denumit același fișier ca fișierul pe care îl încărcați.
În Phaser există mai multe motoare fizice accesibile: Arcade, Ninja și P2. Teoretic, un alt Box2D și Chipmunk sunt disponibile, dar sunt încă în curs de dezvoltare, astfel încât să le poți folosi la propriul pericol și risc. Puteți include mai multe motoare în același timp, dar fiecare obiect de joc este legat numai de unul dintre ele. Motoarele se disting prin detaliile simulării și, prin urmare, performanțele, astfel încât unele fizici pentru scopuri de optimizare au sens să fie calculate cu un motor mai simplu.
Despre Box2D și Chipmunk ați auzit deja, deoarece sunt populare. Arcade, Ninja și P2 sunt toate invențiile dezvoltatorilor Phaser.
Arcade Physics lucrează la o implementare foarte simplă și rapidă a coliziunilor AABB, adică Verificarea coliziunii se efectuează pe baza dreptunghiurilor, fără a lua în considerare rotația acestor dreptunghiuri.
Ninja Physics ia în considerare rotația dreptunghiurilor, astfel încât poate fi folosită pentru o geometrie mai complexă, dar funcționează mai lent decât Arcade.
P2 este un motor de fizică mai plin de caracteristici, aproape de capabilități deja Box2D.
Vom folosi cel mai simplu și mai rapid model fizic al Arcade.
Cheile de control trebuie să fie înregistrate în obiectul game.input.keyboard:
Apoi puteți verifica dacă ați apăsat o cheie
Apăsarea caracterului spațial va sări peste caracterul nostru. Vom fixa aceasta la o viteză verticală negativă, dacă caracterul este la sol.
Când apăsați tastele stânga și dreapta - vom schimba viteza orizontală și vom inversa sprite-ul caracterului.
Mare, acum personajul poate rula și să sară peste plăcile hărții, dar, din nefericire, poate depăși limitele camerei. Pentru a corecta acest dezavantaj, este suficient să permiteți urmărirea camerei pentru sprite
Avem un platformer simplu. Întregul cod poate fi vizualizat pe pagina proiectului. dar un exemplu aici. Este, fără îndoială, necesar să fie rafinat: trebuie să adăugați procesarea intersecției cu cozile și scările spicate. Puteți face acest lucru în dispozitivul de manipulare a coliziunilor:
Trebuie să adăugați dușmani și manipulatori de coliziune pentru ei, meniuri, sunete, rupeți codul în module, dar acest lucru depășește scopul acestui tutorial.
În general, Phaser oferă o impresie plăcută și conține tot ce aveți nevoie pentru a crea jocuri simple 2d:
- sprite
- fizică
- Placi de hărți
- Animație, inclusiv pe bază de oase
- Sisteme de particule
- aparat foto
- sunet
Articole similare
Trimiteți-le prietenilor: