Share
Phaser este un cadru open source HTML5 creat de Photon Storm. Este conceput pentru a crea jocuri care se vor difuza pe browsere web desktop și mobile. O atenție deosebită a fost acordată performanței în interiorul browserelor mobile web, o zonă în creștere și importantă a jocurilor web. Dacă dispozitivul este capabil, atunci folosește WebGL pentru redare, dar în caz contrar se reîntoarce fără probleme la Canvas. În acest articol, voi acoperi resursele pentru a învăța Phaser, precum și pentru a arăta ce poate face și despre o parte din gândirea care a intrat în designul său.
Este corect să spunem că se simte ca și cum un nou cadru de joc HTML5 este lansat în fiecare săptămână, cum ar fi proliferarea acestora. Deci, de ce ar trebui să-l consideri pe Phaser printre opțiunile uriașe? Îmi place să cred că motivul are legătură cu moștenirea echipei implicate în construirea acesteia.
Noi, cei de la Photon Storm, ne-am dedicat dezvoltării a mai multor jocuri HTML5 acum câțiva ani, înapoi în momentul în care într-adevăr nu exista o mare posibilitate de alegere a cadrului și puteți număra numărul de playere HTML5 în cifre unice. Intrăm în spațiu atât de devreme, și venind din Flash, am simțit instantaneu nevoia de a construi uneltele la care ne-am obișnuit în AS3.
Am fost mari fani ai Flixel și ne-am bucurat de succes atât cu propriile noastre jocuri, cât și cu Flixel Power Tools. A fost un adevărat buzz văzând alți utilizatori să le folosească pentru a-și elibera jocurile, iar asta a fost ceva pe care am dori să-l duplicăm în HTML5.
Ceea ce nu ne-am pregătit, totuși, a fost cât de repede se schimbase peisajul HTML5. Chiar și astăzi, am prezentat prezentările mele pe care le arăt la conferințe spunând "Fiți pregătit să dezvăluiți ceea ce cunoașteți la fiecare șase luni"și cred că acest lucru rămâne valabil, vânzătorii de browsere se iteră și se îmbunătățesc la o rată fenomenală chiar acum, deoarece este nevoie de doar câteva săptămâni pentru ca noile caracteristici să treacă prin bătăi către public și dacă ești împovărat de un cadru de joc care este menținut în timpul liber al cuiva sau este pe un ciclu de eliberare lentă, atunci nu durează mult înainte ca lucrurile să fie foarte depășite.
Un alt semn al acestei schimbări a fost în tipurile de lucrări pe care ni le-am comandat să le construim. Ca o companie facem doar două lucruri: construirea de jocuri HTML5 și construirea Phaser. Am construit jocuri HTML5 pentru unele dintre cele mai mari branduri de divertisment din lume, ceea ce ne-a dat o imagine clară asupra tipurilor de cerințe pe care le cer. Cea mai mare zonă pe care am fost rugată să o lucrăm a fost jocurile care rulează în browserul mobil; atât de multe cadre HTML5 se concentrează pe spațiul de lucru, unde performanța este abundentă și conexiunile rapide și stabile și ignoră aspectul browserului mobil al vieții. Cu toate acestea, în cazul în care văd că cererea clienților este mai puternică. Așadar, era vital ca Phaser să poată fi folosit pentru a construi jocurile noastre client, indiferent de platformă.
De la lansarea Phaser 1.0, actualizările au fost regulate și complete, cu multe caracteristici noi și reparații în loc rapid. Lucrăm la o schimbare de aproximativ o lună de la dev la master - puteți vedea un schimbător complet de informații despre GitHub. Interesant este că acum avem o cerere de jocuri care rulează în interiorul unui WebView, așa că vom asigura că Phaser funcționează bine în acest mediu, mergând în 2014.
Pe lângă păstrarea actuală a lui Phaser, a fost, de asemenea, foarte important pentru noi să construim ceva care a fost într-adevăr ușor de folosit. Și veți vedea acest lucru reflectat pe întregul cadru. Acest lucru provine din experiența noastră cu Flixel Power Tools și dincolo de asta când am lucrat pentru The Game Creators, ajutând la definirea formei limbajului lor de joc. Cred că a fost întotdeauna o parte din mine că am vrut să fac dezvoltarea jocului cât mai ușoară posibil pentru dezvoltatori, o tendință pe care o voi continua pe măsură ce Phaser evoluează.
Îmi cer scuze în avans de oricare dintre următoarele (sau de mai sus!) Sună un pic "marketing". Phaser este un produs gratuit, nu facem bani de la tine folosind-o, și dacă am entuziasm despre asta, numai pentru că sunt pasionat de ceea ce am creat. Deci, vă rog să purtați cu mine!
Phaser este o bibliotecă JavaScript proiectată pentru a rula pe toate browserele desktop importante. Aceasta include Internet Explorer 9 și versiuni ulterioare, Firefox, Chrome și Safari. Înainte de IE9 nu a suportat panza, deci dacă aveți absolut nevoie de un cadru care să poată efectua redarea DOM, atunci Phaser nu va fi potrivit. Cu toate acestea, cererea pentru aceste tipuri de jocuri devine din ce în ce mai mică; dacă nu, se schimbă cealaltă direcție (spre WebGL).
Pe telefonul mobil, Phaser rulează pe iOS5 și mai sus în interiorul Mobile Safari. Pe Android, rulează în 2.2 și mai mult atât în browserul de stoc, cât și în Chrome. Chrome este acum browserul standard Android, iar versiunile recente suportă chiar și WebGL, dar totuși nu puteți ignora milioane de dispozitive Android vechi care rămân în uz.
Mulțumită Mozilla, am primit o grămadă de dispozitive de testare FFOS și am început să ne asigurăm că Phaser rulează bine pe ele. Până acum, lucrurile arată bine și vom produce ghiduri de desfășurare în noul an.
Am văzut, de asemenea, că jocurile Phaser rulează bine pe dispozitivele Tizen și fără probleme în pachetul Kindle HTML5, ceea ce înseamnă că le puteți utiliza pe aceste dispozitive "afară din cutie". Pe măsură ce mai multe telefoane conectate pe web încep să intre pe piață, vom asigura că Phaser va fi actualizat pentru ei.
Există o alegere atât de vastă de pachete excelente de dezvoltare a jocului care vizează crearea de aplicații native (Unity, Corona, Loom și așa mai departe), că nu a fost o zonă pe care am dori să o petrecem mai mult efort la început, mai ales atunci când este comparată cu cele deservite piața de browser-uri mobile.
Cu toate acestea, odată cu dezvoltarea unor pachete cum ar fi CocoonJS și Ejecta, vedem că dezvoltatorii care folosesc Phaser își înfășoară jocurile și le eliberează ca aplicații native. Deci, mergând în 2014, vom începe să adăugăm suportul pentru CocoonJS direct în nucleu, precum și suportul pentru agregatele desktop cum ar fi nodul-webkit.
Vom sublinia câteva din ceea ce considerăm că sunt cele mai importante caracteristici ale Phaser din punctul de vedere al dezvoltatorului:
Acest lucru poate părea o caracteristică ciudată, dar ar trebui să fie într-adevăr unul convingător. Phaser nu folosește intern practicile de stil OO. Nu există nici un lanț de moștenire masiv sau un sistem de componente și nu trebuie să forțați obiectele în nici o structură de clasă fixă. Este un simplu lanț de prototip simplu, modul în care a fost creat JavaScript.
Acest lucru nu înseamnă că nu vă puteți construi jocul într-un mod structurat; departe de. Tot ce înseamnă înseamnă că nu facem asta impune aceasta. De asemenea, înseamnă că Phaser este foarte ușor la îndemână pe plan intern.
Dar îmi place tipul de scriere!
Bine - pentru că avem și un fișier de definiții tip text! Există un ghid specific cu privire la utilizarea Phaser cu TypeScript disponibil.
Phaser are un încărcător integrat de active care poate gestiona:
Exportați în mod curent fișierele de atlas de text din Flash direct în jocurile noastre Phaser și sprijină atlasele complet curățate. Activele pot fi parțial încărcate, cacheate și trase de la diferite adrese URL (pentru suportul CDN) și puteți chiar transforma orice sprite într-o bară de progres cu o singură linie de cod.
Pe plan intern, Phaser utilizează Pixi.js pentru redare. Pixi este o bibliotecă de redare rapidă, care se concentrează pe Canvas și WebGL. Este o bibliotecă pe care continuăm să o contribuim pentru a ajuta la împingerea lucrurilor.
Pentru jocurile dvs., aceasta înseamnă că, dacă browserul acceptă WebGL, atunci jucătorul va avea de multe ori o experiență mai ușoară. WebGL este obișnuit pe desktop, dar se dezvoltă tot pe mobil; chiar și așa, acolo unde jocurile HTML5 se îndreaptă în viitor, susținerea este vitală. Ultima versiune a Phaser a introdus tehnologia WebGL Shader și suport pentru filtre, iar cele viitoare vor implementa hărți normale, astfel încât să puteți beneficia de noi instrumente, cum ar fi Sprite Lamp.
Audio-ul a fost unul dintre cele mai slabe puncte ale jocurilor HTML pentru o lungă perioadă de timp. Cu doar câțiva ani în urmă, ne-am confruntat cu alegerea unui singur canal de latență de mare lățime, care ar putea afecta dispozitivul în timpul redării sau nu avea niciun sunet deloc. Dar vremurile s-au schimbat și API-ul Web Audio a venit la mântuirea noastră. Acesta permite suportul audio adecvat bazat pe noduri, cu mai multe canale, rutare nod și tot felul de efecte. Deci, Phaser suportă pe deplin Web Audio.
Cu toate acestea, în special Android, o mulțime de dispozitive încă nu suportă acest lucru, așa că susținem, de asemenea, moștenirea Audio și utilizarea Audio Sprites: metoda de ambalare a unui lot de eșantioane împreună într-un singur fișier și utilizarea markerilor de redare pentru a sări la diferite efecte. Phaser va schimba între cele două, în funcție de capabilitățile dispozitivului, și va include de asemenea deblocarea sub-sistemului audio automat pentru dvs., ceva ce captează o mulțime de dispozitive mobile pentru prima dată!
Când se acceptă desktop și mobil, există un număr din ce în ce mai variat de opțiuni potențiale de introducere. Phaser acceptă tastatura, mouse-ul, touch, MSPointer (acum Pointer sub IE11) și combinații ale acestora. De exemplu, pe dispozitive Windows Surface, puteți schimba între utilizarea unui mouse și atingeți sau chiar utilizați ambele împreună.
Pentru intrarea pe atingere, Phaser se ocupă atât de mediile touch-touch, cât și de cele multi-touch. Puteți defini până la 10 puncte de atingere și le puteți urmări independent, utilizând evenimentele lor pentru a gestiona interacțiunile Sprite, cum ar fi tragerea, atingerea și coliziunea.
Sunt incluse în biblioteca principală sistemele ArcadePhysics și ArcadeParticles. Acestea sunt biblioteci ușoare de greutate AABB care vă permit să aplicați gravitație și mișcare oricărui Sprite, apoi testați pentru coliziune și separare. Folosind un quadtree bazat pe lume pentru a ajuta la minimizarea testelor de coliziune, puteți obține rapid rezultate decente, cu un timp de procesare redus.
Cu toate acestea, înțelegem că acest lucru nu se va potrivi tuturor tipurilor de jocuri, astfel încât sistemul fizicii este ușor de înlocuit și niciuna dintre proprietățile fizicii nu este legată de spritele actuale (ci mai degrabă de o componentă a corpului), deci pot fi schimbate pentru place de Box2D sau p2.js. De asemenea, este încorporat un sistem de completare, care vă permite să faceți ușor obiecte sau proprietăți. Și dacă jocul va întrerupe, atunci toate tweens-urile dvs. se vor întrerupe automat și se vor relua după cum este necesar.
Scopul nostru este ca nucleul Phaser-ului să se stabilească în cele din urmă și să lovească un echilibru frumos, în care nu este probabil să-l atingem cu mult dincolo de corecții și actualizări ale browserului. Cu toate acestea, dorim ca Phaser să continue să crească, oferind caracteristici pentru toate tipurile de jocuri, dar fără ca biblioteca centrală să explodeze în creștere. În acest scop, am construit un sistem de pluginuri.
Pluginurile Phaser se pot înregistra la baza de date, pot fi actualizate în conformitate cu bucla de joc de bază și pot efectua toate tipurile de sarcini suplimentare utile. Un exemplu excelent al acestui lucru este lansarea recentă a pluginului EasyStar. Vom elibera plugin-urile noi și ne așteptăm să vină mai mult din comunitate în viitor.
Aici vom vedea unde să descărcați Phaser, cum să vă configurați pentru dezvoltare și de unde să începeți.
Proiectul Phaser este găzduit pe GitHub la adresa https://github.com/photonstorm/phaser. Există două ramuri principale: master-ul este locul în care se poate găsi cea mai recentă versiune stabilă și dev este locul unde este construită versiunea work-in-progress. Imediat ce o nouă versiune este finalizată, vom împinge de la dev la master și apoi dev va fi actualizată pentru a se pregăti pentru următoarea versiune. Dacă nu știți că aveți nevoie de ramura dev, ar trebui să începeți întotdeauna cu maestrul.
În mod ideal, ar trebui să utilizați git și checkout sau furculița depozitului, astfel încât să îl puteți actualiza cu ușurință. Dar dacă sunteți nou la git sau nu sunteți confortabil să-l utilizați încă, există opțiunea de a descărca un fișier zip al întregului depozit, de asemenea.
postări asemănatoare
Odată descărcate, vă sugerăm să urmați Ghidul oficial începător. Aceasta vă va ajuta să configurați un server web local, să alegeți un mediu de dezvoltare și chiar să construiți în nor dacă doriți.
Ghidul se descompune în următoarele secțiuni:
Există, de asemenea, un ghid echivalent pentru TypeScript.
Cu mediul de dezvoltare stabilit, este timpul să construim un joc. Vă recomandăm să începeți cu Efectuarea primului dvs. tutorial pentru jocuri Phaser. Acesta vă va ajuta să vă creați un simplu joc de platformă, să vă prezentați conceptele de bază ale funcționării Phaser și să vă pregătiți să vă extindeți și să aflați mai multe.
Când faceți checkout sau descărcați Phaser, acesta va veni cu suita noastră Exemple. Acesta este un site web care conține peste 170 de exemple diferite de cod, împărțite în domenii cheie: Fizică, Coliziune, Sprites, Text și multe altele. Fiecare exemplu este o bucată de cod care se deschide, se poate edita ușor și se poate învăța. Folosite în colaborare cu doc-urile API, acestea sunt rapid pentru a învăța rapid despre anumite părți ale Phaser.
Documentele API sunt disponibile în repozitoriul Phaser din Documente pliant. Am muncit din greu pe docs timp de câteva luni și, în timp ce încă puțin cam aspre în jurul marginilor, sunt acum cuprinși, acoperind întregul cadru.
Cea mai recentă versiune (1.1.3) a văzut o altă actualizare majoră a acestora, cu o mulțime de zone completate cu mai multe detalii și este misiunea noastră continuă de a îmbunătăți documentele cu fiecare nou lansare Phaser.
De la versiunea 1.1.3 a Phaser, întregul cadru este acum rulat prin JSHint înainte de lansare. Oferim fișierul nostru de configurare și în repozitoriu.
JSHint este o modalitate pentru noi de a ne asigura că codul cadru urmează un set fix de orientări pentru structura de cod, de la modul în care gestionăm filele și indentarea la numele variabilelor și stilurile de cotare. Cei care doresc să contribuie la Phaser ar trebui să verifice actualizările lor împotriva configurației JSHint.
Dacă ați urmărit acest articol, veți înțelege de ce este excelent Phaser, ce ne-am propus să realizăm și cum puteți învăța să faceți jocuri cu el. Dar cel mai important aspect al oricărui cadru de joc nu este atât de caracteristicile pe care le are sportul sau demo-ul tehnic, ci și comunitatea din spatele acestuia.
Efectuarea unui joc este o muncă grea, perioadă. Și este chiar mai greu de făcut în mod izolat, cu un nou cadru care aproape sigur funcționează diferit față de tot ce ați folosit în trecut. Din fericire, Phaser are o comunitate înfloritoare în jurul ei.
Am creat forumul HTML5 Game Devs cu puțin timp în urmă, nu în mod specific pentru Phaser, ci pur și simplu pentru că a face jocuri HTML5 a fost o zonă nouă pe care am vrut să o putem vorbi cu alții despre asta. De atunci, a trecut de la putere la putere, cu panouri active, 250.000 de vizionări pe lună și o bază de utilizatori prietenoasă și profesională.
Era logic să folosim acest lucru ca o casă oficială pentru Phaser și veți găsi o mulțime de colegi prietenoși de acolo, pentru a sări idei și întrebări. Forumul găzduiește, de asemenea, alte biblioteci mari, inclusiv Pixi.js și cadrul 3D Babylon.js, și există o zonă minunată de jocuri Showcase pentru a arăta tot ce faci - a cădea acolo în fiecare zi este o sursă constantă de inspirație pentru mine și este cu adevărat minunat să vedem ce devii reușesc să obțină HTML5 în aceste zile.
Buletinul informativ Phaser este lansat o dată pe lună și conține detalii despre noile versiuni, articole scurte despre noile subiecte și pluginuri Phaser și tutoriale. Abonamentul este, desigur, gratuit și este gestionat prin intermediul programului Monitor de campanie, astfel încât să puteți fi siguri că nu există spam și o modalitate ușoară de a vă dezabona, dacă doriți.
Vă puteți ajuta să modelați modul în care Phaser crește. Dacă găsești o eroare, raportează-o. Nu vă va lua mult timp și până în prezent am stabilit peste 91% din toate problemele raportate (și încă lucrăm la celelalte 9%). De asemenea, puteți să emiteți cereri de tragere împotriva dezvoltării sau să lansați propriile pluginuri sau filtre.
Ne petrecem multe ore neobosite de lucru pe Phaser, deoarece dorim ca acesta să fie cel mai bun cadru de dezvoltare a jocului HTML5 posibil. Înțelegem că nu va fi perfect pentru toată lumea și că suntem mândri cu asta. Dar dacă îl folosiți și faceți ceva, indiferent cât de mic credeți că este, vă rugăm să ne spuneți. Nu veți crede cu un stimulent motivator real, atunci când devs ne arată jocurile la care lucrează! Rugați-vă la noi pe forum, prin Twitter (@photonstorm) sau prin e-mail.
Cel mai mult, totuși, sperăm cu adevărat să te distrezi să îți faci jocul.
Accentsconagua