Conversia jocurilor flash la HTML5

Flash este lent abandonat de Adobe în favoarea HTML5 și JavaScript; End-of-ul său oficial este stabilit pentru anul 2020. Și acolo va veni acest articol la îndemână.

• Reconstruiți un site Flash 2004 pentru 2018

Sfaturile descrise mai jos scopul de a ajuta dezvoltatorii de jocuri HTML5 Evitați greșelile comune atunci când convertiți jocurile flash la JavaScript, precum și făcând întregul proces de dezvoltare să meargă cât mai bine posibil. Tot ce aveți nevoie este cunoașterea de bază a JavaScript, WebGL și cadrul Phaser.

Schimbarea proiectului dvs. de joc de la SWF la JavaScript poate genera o mai bună experiența utilizatorului , care la rândul său îi conferă un aspect modern. Dar cum să o faci? Aveți nevoie de un convertor dedicat jocului JavaScript pentru a scăpa de această tehnologie depășită? Ei bine, Flash la conversia HTML5 poate fi o bucată de tort - Iată ce are un dezvoltator de jocuri JavaScript cu experiență despre această chestiune.

Vreți să vă păstrați procesul de proiectare simplu? A Builder de site-uri web și dreptul web hosting Furnizorul poate să o păstreze așa.

01. Îmbunătățiți experiența jocului HTML5

Conversia unui joc la o altă platformă este o oportunitate excelentă de ao îmbunătăți, remedia problemele și de a spori publicul. Mai jos sunt puține lucruri care pot fi ușor de făcut și merită luate în considerare:

• Sprijinirea dispozitivelor mobile
  Conversia de la Flash la JavaScript permite atingerea unui public mai larg - Utilizatorii de dispozitive mobile Suport pentru controalele touchscreen trebuie, de obicei, să fie implementate în joc. Din fericire, ambele dispozitive Android și IOS, de asemenea, suportă, de asemenea, WebGL, astfel încât 30 sau 60 de FPS, de obicei pot fi realizate cu ușurință. În multe cazuri, 60 de FPS nu vor provoca probleme, care se vor îmbunătăți doar cu timpul, deoarece dispozitivele mobile devin din ce în ce mai performante.
• Îmbunătățirea performanței
  Când vine vorba de compararea ActionScript și JavaScript, acesta din urmă este mai rapid. În afară de aceasta, convertirea unui joc este o ocazie bună de a revizui algoritmii utilizați în codul de joc. Cu dezvoltarea jocului JavaScript puteți să le optimizați sau să eliminați complet codul neutilizat care este lăsat de dezvoltatorii originali.
• Fixarea bug-urilor și făcând îmbunătățiri la gameplay
  Având noi dezvoltatori care caută codul sursă al jocului poate ajuta la repararea bug-urilor cunoscute sau pentru a descoperi cele noi și foarte rare. Acest lucru ar face jocul mai puțin iritant pentru jucători, ceea ce le-ar face să petreacă mai mult timp pe site-ul dvs. și să le încurajeze să încerce celelalte jocuri.
• Adăugarea de web analitică
  În plus față de urmărirea traficului, Web Analytics poate fi, de asemenea, folosit pentru a strânge cunoștințe despre modul în care jucătorii se comportă într-un joc și unde se blochează în timpul gameplay-ului.
• Adăugarea localizării
  Acest lucru ar spori publicul și este important pentru copiii din alte țări care vă joacă jocul. Sau poate că jocul dvs. nu este în limba engleză și doriți să sprijiniți limba respectivă?

02. Realizați 60 de FPS

Când vine vorba de dezvoltarea jocului JavaScript, poate fi tentant să folosiți HTML și CSS pentru butoanele, widget-urile și alte elemente GUI. Sfatul nostru este să fii atent aici. Este contraintuitiv, dar, de fapt, leveraging elementele DOM este mai puțin performant pe jocuri complexe și acest lucru câștigă mai multe semnificații pe telefonul mobil. Dacă doriți să obțineți constantă 60 fps pe toate platformele, atunci demisionarea de la HTML și CSS poate fi necesară.

Elementele GUI non-interactive, cum ar fi barele de sănătate, barurile de muniție sau contoarele de scor pot fi implementate cu ușurință în Phaser prin utilizarea imaginilor regulate (clasa "Phaser.Image", folosind proprietatea ".crop" pentru tăiere și "Phaser". Clasa de text pentru etichete simple de text.

Elemente interactive, cum ar fi butoanele și casetele de selectare, pot fi implementate utilizând clasa "Phaser.button" încorporată. Alte elemente mai complexe pot fi compuse din diferite tipuri simple, cum ar fi grupuri, imagini, butoane și etichete de text.

03. Încărcarea fonturilor personalizate

Dacă doriți să trimiteți text cu un font vectorial (de exemplu, TTF sau OTF), atunci trebuie să vă asigurați că fontul a fost deja încărcat de browser înainte de a face orice text. Phaser V2.6 nu oferă o soluție în acest scop, dar poate fi utilizată o altă bibliotecă - Web Font încărcător .

Presupunând că aveți un fișier de font și includeți încărcătorul de font Web în pagina dvs., apoi mai jos este un exemplu simplu de utilizare a unui font. Faceți un fișier CSS simplu care va fi încărcat de Web Font încărcător (nu este necesar să îl includeți în HTML):

 @ font-fata {
  // acest nume pe care îl veți folosi în JS
  Font-Family: "Gunplay";
  // URL în fișierul font, poate fi relativă sau absolută
  SRC: URL ("../ fonts / gunplay.ttf") ("TrueType");
  Greutate font: 400;
} 

Definiți acum o variabilă globală numită WebFontConfig. Ceva la fel de simplu ca acesta va fi suficient:

 var webfontconfig = {
  "Clase": FALSE,
  "Timeout": 0,
  "Activ": funcția () {
  // fontul a încărcat cu succes ...
  },
  'personalizat': {
  "Familiile": ["Gunplay"],
  // URL-ul la CSS menționate anterior
  "URL-uri": [stiluri / fonturi.css "]
  }
}; 

Nu uitați să vă puneți codul în apelul "activ" afișat mai sus. Si asta e!

04. Salvați jocul

Acum suntem în punctul de mijloc al flash-ului nostru la conversia JavaScript - este timpul să avem grijă de umbre. Pentru a stoca în mod persistent datele locale în ActionScript, veți folosi clasa "Sharedobject". În JavaScript, înlocuirea simplă este LocalStorage API. , care permite stocarea șirurilor de descărcare ulterioară, reîncărcarea paginii supraviețuitoare.

Economisirea datelor sunt foarte simple:

 Var Progress = 15;
LocalStorage.setitem ("Mygame.progress", Progress); 

Rețineți că, în exemplul de mai sus, variabila "progres", care este un număr, va fi convertită într-un șir.

Încărcarea este prea simplă, dar amintiți-vă că valorile recuperate vor fi șiruri de caractere sau null dacă nu există.

 VAR PROGRESS = PARSINT (localStorage.getitem ("mygame.progress ')) || 0; 

Aici vă asiguram că valoarea de returnare este un număr. Dacă nu există, atunci 0 va fi atribuită variabila "progresului".

De asemenea, puteți să stocați și să recuperați mai multe structuri complexe, de exemplu, JSON:

 Statistici var = {"Obiective": 13, "câștigă": 7, "pierderi": 3, "trage": 1
};
LocalStorage.SetITEM ("Mygame.Stats", JSON.Stringfy (statistici));
...
Var stats = json.parse (localStorage.getitem ("mygame.stats ')) || {}; 

Există câteva cazuri în care obiectul "localstatoraj" nu va fi disponibil. De exemplu, atunci când utilizați fișierul: // protocol sau când o pagină este încărcată într-o fereastră privată. Puteți utiliza instrucțiunea "Încercați și captura" pentru a vă asigura că codul va continua să lucreze, cât și să utilizeze valorile implicite, care sunt afișate în exemplul de mai jos:

 Încercați {
    VAR PROGRESS = LOCALSTORAGE.GETITEM ("Mygame.progress");
} captura (Excepție) {
  // LocalStorage nu este disponibil, utilizați valorile implicite
} 

Un alt lucru de reținut este că datele stocate sunt salvate pe domeniu, nu pe adresa URL. Deci, dacă există riscul ca multe jocuri să fie găzduite pe un singur domeniu, atunci este mai bine să utilizați un prefix (spațiu de nume) atunci când economisiți. În exemplul de mai sus, "Mygame". Este un prefix și de obicei doriți să îl înlocuiți cu numele jocului.

Dacă jocul dvs. este încorporat într-un iFrame, atunci localStorage nu va persista pe iOS. În acest caz, va trebui să stocați date în iframe-ul părinte.

05. Shader implicit Shader

Când Phaser și Pixijs vă fac spritele, ele folosesc un shader simplu de fragment intern. Nu are multe caracteristici pentru că este adaptat la viteză. Cu toate acestea, puteți înlocui acel shader pentru scopurile dvs. De exemplu, puteți să o folosiți pentru a inspecta supraîncărcarea sau pentru a susține mai multe caracteristici pentru redare. Mai jos este un exemplu de cum să furnizați propriul dvs. fragment implicit la Phaser V2.

 Preîncărcați funcția () {
  acest.load.shader ('Filename.frag', 'Shaders / Filename.frag');
}
Funcție Creați () {
  Var Renderer = this.renderer;
  var latch = redenrer.spritebatch;
  batch.defaultshader =.
  New Pixi.AbstractFilter (the the.Cache.getshader (denumit "filename.frag '));
  batch.SetContext (Renderer.gl);
} 

06. Schimbați metoda de tăcere

O shader implicită personalizată poate fi utilizată pentru a înlocui metodele implicite de tentare în Phaser și Pixijs. Continsul în Phaser și Pixijs funcționează prin multiplicarea pixelilor de textură printr-o anumită culoare. Multiplicarea întotdeauna întunecă culorile, ceea ce evident nu este o problemă; Este pur și simplu diferit de tinutul blițului. Pentru unul dintre jocurile noastre, aveam nevoie pentru a implementa tinting similar cu Blițul și a decis că ar putea fi utilizat un shader implicit personalizat. Mai jos este un exemplu de un astfel de shader de fragment:

// varianta specifică, similară cu tinutul flash care adaugă
// la culoare și nu se înmulțește. Un negativ de o culoare
// trebuie să fie furnizate pentru ca acest shader să funcționeze corect, adică set
// sprite.tint la 0 pentru a transforma întreaga sprite la alb.
Precision Lowp Float;
VEC2 VEC2 VETIMECOORD;
VEC4 VC4 VCOLOR;
uniformă de eșantion2D USAMPLER;
Void principal (gol) {
  VEC4 F = Texture2D (USAMPLER, VTETOORD);
  float a = clemă (vcolor.a, 0.00001, 1.0);
  GL_FRAGCOLOR.RGB = F.RGB * VCOLOR.A + CLAMP (1.0 - VCOLOR.RGB / A, 0.0, 1.0) * VCOLOR.A * F.A;
  GL_FRAGCOLOR.A = F.A * VCOLOR.A;
} 

Acest Shader luminează pixelii prin adăugarea unei culori de bază la ceață. Pentru ca acest lucru să funcționeze, trebuie să furnizați negative despre culoarea dorită. Prin urmare, pentru a obține alb, trebuie să setați:

 Sprite.Tint = 0x000000; // aceste culori sprite la alb
Sprite.tint = 0x00ffff; // aceasta dă roșu 

07. Inspectați exagerat

Înlocuirea unui shader implicit poate fi, de asemenea, influențat pentru a ajuta la depanarea. Mai jos am explicat cât de suprasolicită poate fi detectată cu un astfel de shader.

Supravegherea se întâmplă atunci când mulți sau toți pixelii de pe ecran sunt prestate de mai multe ori. De exemplu, multe obiecte care au același loc și fiind prestate unul peste altul. Câți pixeli Un GPU poate reda pe secundă este descris ca rată de umplere. GPU-urile desktop moderne au o rată excesivă de umplere pentru scopuri 2D obișnuite, dar cele mobile sunt mult mai lente.

Există o metodă simplă de a afla câte ori fiecare pixel de pe ecran este scris prin înlocuirea shader-ului implicit de fragmente globale din Pixijs și Phaser cu aceasta:

 Void principal (void) {
  GL_FRAGCOLOR.RGB + = 1.0 / 7.0;
} 

Acest Shader luminează pixelii care sunt procesați. Numărul 7.0 indică câte scrieri sunt necesare pentru a transforma pixelii albi; Puteți să vă reglați acest număr la preferințele dvs. Cu alte cuvinte, pixelii mai brichete pe ecran au fost scrise de mai multe ori, iar pixelii albi au fost scrise de cel puțin șapte ori.

Acest Shader ajută, de asemenea, să găsească atât obiectele "invizibile" încât, din anumite motive, sunt încă prestate și sprite care au suprafețe transparente excesive în jurul care trebuie să fie dezbrăcate (GPU trebuie încă să proceseze pixeli transparenți în textura dvs.).

08. De ce motoarele fizice sunt prietenii tăi

Un motor de fizică este un mijloc de middleware care este responsabil pentru simularea corpurilor de fizică (de obicei dinamica corpului rigid) și coliziunile lor. Motoarele fizicii simulează spațiile 2D sau 3D, dar nu ambele. Un motor de fizică tipic va oferi:

• Mișcarea obiectului prin setarea vitezelor, accelerațiilor, articulațiilor și motoarelor;
• Detectarea coliziunilor între diferite tipuri de formă;
• Calculul răspunsurilor de coliziune, adică cum trebuie să reacționeze două obiecte atunci când se ciocnesc.

Există un plugin fazer care funcționează bine în acest scop. Box2D este de asemenea utilizat în motorul jocului de unitate și studioul de gamemaker 2.

În timp ce un motor de fizică va accelera dezvoltarea dvs., există un preț pe care va trebui să-l plătiți: reducerea performanței runtime. Detectarea coliziunilor și calcularea răspunsurilor este o sarcină intensivă a CPU. S-ar putea să fiți limitat la mai multe duzini de obiecte dinamice într-o scenă pe telefoane mobile sau o performanță degradată față, precum și o rată a cadrului redus sub 60 fps.

09. Exportați sunete

Dacă aveți un joc de sunet flash în interiorul unui fișier .fla, atunci exportul lor de la GUI nu este posibil (cel puțin nu în Adobe Animate CC 2017) din cauza lipsei de opțiuni de meniu care servește acest scop. Dar există o altă soluție - un script dedicat care face doar:

 Funcție normalizatăName (nume) {
  // convertește un nume de camelcase la numele Snake_case
  return name.replace (/ (a-z]) / g, "_ $ 1 '). Înlocuiți (/ ^ _ /,' ') .tolowowercase ();
}
Funcție DisplayPath (PATH) {
  // face calea fișierului mai ușor de citit
  Întoarceți Unescape (calea) .Replace ('File: //', '') .Replace ('|', '' ');
}
fl.outputpanel.clear ();
dacă (fl.getdocumentdom (). biblioteca.GetSelecteditems () lungime & gt; 0)
  // obțineți numai elemente selectate
  VAR LIBRARY = FL.GETDOCUMENTDOM (). Biblioteca.GetSelectionitems ();
altfel
  // obțineți toate elementele
  VAR Library = Fl.getDocumentdom (). Biblioteca.items;
// Cereți utilizatorului pentru directorul de destinație la export
var root = fl.frowsefolderurl ("Selectați un dosar");
erori var = 0;
pentru (var i = 0; i & lt; bibliotecă.Lend; i ++) {
  var item = biblioteca [i];
  Dacă (item.Itemtype! == "sunet")
  continua;
  calea var = rădăcină + '/';
  dacă (item.OniginalCompressionType === "brut")
  calea + = normalizateName (element.name.split ('.') 
) + '.wav';
  altfel
  calea + = normalizateName (element.name);
  var succes = item.exporttofile (calea);
  Dacă (! succesul)
  Erori + = 1;
  fl.trace (DisplayPath (PATH) + ":" + (Succes? "OK": "eroare"));
}
FLTRACE (Eroare (erori) "); 

Cum se utilizează scriptul pentru a exporta fișierele de sunet:

1. Salvați codul de mai sus ca fișier .JSFL de pe computer.
2. Deschideți un fișier .fla cu Adobe Animate.
3. Selectați comenzi & gt; Rulați comanda din meniul de sus și selectați scriptul din dialogul care se deschide.
4. Acum, un alt fișier de dialog apare pentru selectarea directorului de destinație la export.

Este gata! Ar trebui să aveți acum fișiere WAV în directorul specificat. Ceea ce a mai rămas este să le convertiți, de exemplu, MP3, OGG sau AAC. (Dacă aveți fișiere de joc pentru a păstra în siguranță, faceți upgrade la decent Stocare in cloud .)

10. Cum să utilizați MP3-uri

Formatul bun vechi MP3 se întoarce, deoarece unele brevete au expirat și acum fiecare browser poate decoda și a juca MP3-uri. Acest lucru face ca dezvoltarea să fie mai ușoară, deoarece în cele din urmă nu este nevoie să pregătiți două formate audio separate. Anterior aveți nevoie, de exemplu, fișiere OGG și AAC, în timp ce MP3 va fi suficient.

Cu toate acestea, există două lucruri importante pe care trebuie să le amintiți despre MP3:

• MP3-urile trebuie să decode după încărcare, care poate fi consumatoare de timp, în special pe dispozitivele mobile. Dacă vedeți o pauză după ce toate activele dvs. au încărcat, atunci probabil că înseamnă că MP3 sunt decodificate
• Redarea fără mișcare MP3-uri cu buclă este puțin problematică. Soluția este de a utiliza MP3LOOP, Citiți mai multe în acest articol postat de faza compu.

Acest articol a fost publicat inițial în numărul 277 din revista Creative Web Design Web Designer. Cumpăra problema 277 aici sau Aboneaza-te la designerul web aici .

Articole similare:

• 5 jocuri casual pentru designeri
• Construiți-vă propriul joc de fizică WebGL
• Înțelegeți conducta de import a unității