Konverter Flash Games til HTML5

Flash bliver langsomt forladt af Adobe til fordel for HTML5 og JavaScript; Dens officielle udgang er fastsat for år 2020. Og det er her, hvor denne artikel vil komme til nytte.

• Genopbyg en 2004 Flash Website for 2018

De nedenfor beskrevne tips har til formål at hjælpe HTML5-spiludviklere, undgå almindelige fejl, når du konverterer flash-spil til JavaScript, samt at gøre hele udviklingsprocessen gå så glat som muligt. Alt du behøver er grundlæggende kendskab til JavaScript, WebGL og Phaser Framework.

Ændring af dit spildesign fra SWF til JavaScript kan give en bedre brugererfaring , som igen giver det et moderne udseende. Men hvordan man gør det? Har du brug for en dedikeret JavaScript Game Converter for at slippe af med denne forældede teknologi? Nå, blitz til HTML5-konvertering kan være et stykke kage - her er hvad en erfaren JavaScript-spiludvikler har at sige om sagen.

Kan du lide at holde din designproces simpelt? EN Website Builder. og højre Web Hosting. Udbyderen kan holde det på den måde.

01. Forbedre HTML5-spiloplevelsen

Konvertering af et spil til en anden platform er en glimrende mulighed for at forbedre det, løse sine problemer og øge publikum. Nedenfor er få ting, der nemt kan gøres og er værd at overveje:

• Støtte til mobile enheder
  Konvertering fra Flash til JavaScript gør det muligt at nå et bredere publikum - brugere af mobile enheder, der understøtter berøringsskærmskontroller, skal normalt implementeres i spillet. Heldigvis understøtter både Android og IOS-enheder nu også WebGL, så 30 eller 60 FPS-gengivelse kan normalt let opnås. I mange tilfælde vil 60 fps ikke forårsage problemer, som kun vil forbedre med tiden, da mobile enheder bliver mere og mere forestående.
• Forbedring af præstationen
  Når det kommer til at sammenligne ActionScript og JavaScript, er sidstnævnte hurtigere. Bortset fra det, konvertere et spil er en god lejlighed til at revidere algoritmer, der bruges i spilkode. Med JavaScript Game Development kan du optimere dem eller helt stribet ubrugt kode, der er efterladt af originale udviklere.
• Fastsættelse af fejl og forbedringer af gameplayet
  At have nye udviklere, der ser på spil kildekoden, kan hjælpe med at rette kendte bugs eller opdage nye og meget sjældne. Dette ville gøre spillet mindre irriterende for spillerne, hvilket ville få dem til at bruge mere tid på dit websted og opfordre dem til at prøve dine andre spil.
• Tilføjelse af Web Analytics.
  Udover at spore trafikken kan webanalyser også bruges til at samle viden om, hvordan spillerne opfører sig i et spil, og hvor de sidder fast under gameplay.
• Tilføjer lokalisering
  Dette ville øge publikum og er vigtigt for børn fra andre lande, der spiller dit spil. Eller måske er dit spil ikke på engelsk, og du vil støtte dette sprog?

02. Opnå 60 fps

Når det kommer til JavaScript Game Development, kan det være fristende at udnytte HTML og CSS til in-game knapper, widgets og andre GUI-elementer. Vores råd er at være forsigtig her. Det er kontraintuitivt, men faktisk udnytte DOM Elements er mindre effektivt på komplekse spil, og det får mere betydning på mobilen. Hvis du vil opnå konstant 60 fps på alle platforme, kan det være nødvendigt at fravage fra HTML og CSS.

Ikke-interaktive GUI-elementer, såsom sundhedsbjælker, ammunitionsbjælker eller scoretællere kan nemt implementeres i Phaser ved hjælp af regelmæssige billeder ('Phaser.Image' -klassen), hvilket udnytter '.Crop-ejendommen til trimning og' Phaser '. Tekst 'klasse for enkle tekstetiketter.

Interaktive elementer som knapper og afkrydsningsfelter kan implementeres ved hjælp af den indbyggede 'Phaser.Button' klasse. Andre, mere komplekse elementer kan bestå af forskellige enkle typer, som grupper, billeder, knapper og tekstmærker.

03. Indlæser brugerdefinerede skrifttyper

Hvis du vil gøre tekst med en brugerdefineret vektor skrifttype (f.eks. TTF eller OTF), skal du sikre dig, at skrifttypen allerede er indlæst af browseren, før du gengiver nogen tekst. Phaser v2.6 giver ikke en løsning til dette formål, men et andet bibliotek kan bruges - Web Font Loader .

Hvis du antager, at du har en skrifttypefil og inkludere webfontlæsseren på din side, er nedenstående et simpelt eksempel på, hvordan du indlæser en skrifttype. Lav en simpel CSS-fil, der vil blive indlæst af Web Font Loader (du behøver ikke at inkludere den i din HTML):

 @ font-face {
  // dette navn du vil bruge i JS
  Font-familie: 'Gunplay';
  // URL til skrifttypefilen, kan være relativ eller absolut
  SRC: URL ('../ skrifttyper / gunplay.ttf') format ('TrueType');
  skrifttype-vægt: 400;
} 

Definer nu en global variabel ved navn WebfontConfig. Noget så enkelt som dette vil normalt være tilstrækkeligt:

 var webfontconfig = {
  'klasser': falsk,
  'timeout': 0,
  'Aktiv': Funktion () {
  // Skrifttypen har lagt succesfuldt ...
  },
  'brugerdefinerede': {
  'familier': ['gunplay'],
  // URL til de tidligere nævnte CSS
  'URLS': ['Styles / fonts.css']
  }
}; 

Husk at sætte din kode i den 'Aktive' tilbagekald, der vises ovenfor. Og det er det!

04. Gem spillet

Nu er vi i midten af ​​vores flash til JavaScript konvertering - det er på tide at tage sig af de shaders. For vedvarende at gemme lokale data i ActionScript, ville du bruge 'SharedObject' -klassen. I JavaScript er den enkle udskiftning den LocalStorage Api. , som gør det muligt at lagre strenge til senere hentning, overlevende side genindlæsninger.

Gemme data er meget enkle:

 VAR PROGRESS = 15;
LocalStorage.SetItem ('MyGame.Progress', fremskridt); 

Bemærk, at i ovenstående eksempel vil "Progress" -variablen, som er et nummer, omdannes til en streng.

Indlæsning er også enkel, men husk at hentede værdier vil strenge eller null, hvis de ikke eksisterer.

 Var Progress = Parseint (LocalStorage.GetItem ('MyGame.Progress')) || 0; 

Her sikrer vi, at returværdien er et nummer. Hvis det ikke eksisterer, bliver 0 tildelt "Progress" -variablen.

Du kan også gemme og hente flere komplekse strukturer, for eksempel JSON:

 VAR STATS = {'MÅL': 13, 'WINS': 7, 'Tab': 3, 'Tegninger': 1
};
localstorage.SetItem ('MyGame.stats', JSON.StringIdy (Stats));
...
Var Stats = json.parse (localstorage.getitem ('myGame.stats')) || {}; 

Der er nogle tilfælde, når "LocalStorage" -objektet ikke vil være tilgængeligt. For eksempel, når du bruger filen: // protokollen eller når en side er indlæst i et privat vindue. Du kan bruge 'Prøv og fange' -opgørelsen for at sikre, at din kode begge vil fortsætte med at arbejde og bruge standardværdier, som vises i eksemplet nedenfor:

 Prøv {
    Var Progress = LocalStorage.GetItem ('MyGame.Progress');
} fangst (undtagelse) {
  // LocalStorage ikke tilgængelig, brug standardværdier
} 

En anden ting at huske er, at de lagrede data gemmes pr. Domæne, ikke pr. URL. Så hvis der er risiko for, at mange spil er hostet på et enkelt domæne, så er det bedre at bruge et præfiks (navneområde), når du gemmer. I eksemplet ovenfor er 'MyGame.' er et præfiks, og du vil normalt erstatte det med navnet på spillet.

Hvis dit spil er indlejret i en iframe, vil LocalStorage ikke fortsætte på iOS. I dette tilfælde skal du gemme data i forældren i iframe i stedet.

05. Standardfragment Shader

Når Phaser og Pixijs gør dine sprites, bruger de en simpel intern fragment shader. Det har ikke mange funktioner, fordi det er skræddersyet til hastighed. Du kan dog erstatte den shader til dine formål. For eksempel kan du udnytte den til at inspicere overdragelse eller støtte flere funktioner til gengivelse. Nedenfor er et eksempel på, hvordan du leverer din egen standardfragment Shader til Phaser V2.

 Funktion preload () {
  this.load.shader ('filename.frag', 'shaders / filename.frag');
}
Funktion Opret () {
  var renderer = denne.renderer;
  Var batch = renderer.Spritebatch;
  Batch.Defaultshader =
  Ny pixi.abstractfilter (This.Cache.GetShader ('filename.frag'));
  batch.setcontext (renderer.gl);
} 

06. Skift tintningsmetode

En brugerdefineret standardskærm kan bruges til at erstatte standardfarvemetoder i Phaser og Pixijs. Tinting i Phaser og Pixijs virker ved at multiplicere teksturpixel med en given farve. Multiplikation mørkner altid farver, hvilket naturligvis ikke er et problem; Det er simpelthen anderledes end flash-farvet. For et af vores spil havde vi brug for at implementere farvning svarende til Flash og besluttede at en brugerdefineret standardstangsførende kunne bruges. Nedenfor er et eksempel på en sådan fragment shader:

// Specifik farvevariant, svarende til flashfarven, der tilføjer
// til farven og mangler ikke. Et negativt af en farve
// skal leveres til denne shader til at fungere korrekt, dvs. sæt
// sprite.tint til 0 for at vende hele sprite til hvid.
præcision lowp float;
varierende VEC2 VTEXTURECOORD;
varierende VEC4 vcolor;
ensartet sampler2d USAMPLER;
void hoved (tomrum) {
  VEC4 F = TEXTURE2D (USAMPLER, VTEXTURECOORD);
  flyde a = klemme (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;
} 

Denne skyder lyser pixels ved at tilføje en basisfarve til farven. For at dette skal fungere, skal du levere negativer af den farve, du ønsker. Derfor skal du for at få hvid, du skal indstille:

 sprite.tint = 0x000000; // disse farver spritten til hvidt
Sprite.tint = 0x00ffff; // Dette giver rødt 

07. Undersøg overdragelse

Udskiftning af en standardskærm kan også leveres til at hjælpe med debugging. Nedenfor har vi forklaret, hvordan overtræk kan detekteres med en sådan shader.

Overdragelse sker, når mange eller alle pixels på skærmen gøres flere gange. For eksempel tager mange genstande det samme sted og gøres en over en anden. Hvor mange pixels en GPU kan gøre pr. Sekund beskrevet som fyldningshastighed. Moderne desktop GPU'er har overdreven fyldningshastighed for sædvanlige 2D-formål, men mobile er meget langsommere.

Der er en simpel metode til at finde ud af, hvor mange gange hver pixel på skærmen er skrevet ved at erstatte standard Global Fragment Shader i Pixijs og Phaser med denne:

 void hoved (tomrum) {
  Gl_fragcolor.rgb + = 1,0 / 7,0;
} 

Denne shader lyser pixels, der behandles. Nummeret 7.0 angiver, hvor mange skriver der er nødvendige for at blive pixels hvide; Du kan tune dette nummer til din smag. Med andre ord blev lettere pixels på skærmen skrevet flere gange, og hvide pixels blev skrevet mindst syv gange.

Denne shader hjælper også med at finde begge 'usynlige' genstande, at der af en eller anden grund stadig er gengivet, og sprites, der har for store gennemsigtige områder omkring, der skal fjernes (GPU stadig skal behandle gennemsigtige pixels i dine teksturer).

08. Hvorfor fysikmotorer er dine venner

En fysikmotor er en middleware, der er ansvarlig for simulering af fysikområder (normalt stiv kropsdynamik) og deres kollisioner. Fysikmotorer simulerer 2D eller 3D-rum, men ikke begge. En typisk fysikmotor vil give:

• Objektbevægelse ved at fastsætte hastigheder, accelerationer, led og motorer;
• Påvisning af kollisioner mellem forskellige formtyper;
• Beregning af kollisionsresponser, dvs. hvordan to objekter skal reagere, når de kolliderer.

Der er et Phaser plugin, der fungerer godt til dette formål. Box2D bruges også i Unity Game Engine og Gamemaker Studio 2.

Mens en fysikmotor vil fremskynde din udvikling, er der en pris, du skal betale: Reduceret runtime ydeevne. Detektering af kollisioner og beregning af svar er en CPU-intensiv opgave. Du kan være begrænset til flere dusin dynamiske objekter i en scene på mobiltelefoner eller ansigt nedbrudt ydeevne, samt reduceret billedhastighed dybt under 60 fps.

09. Eksport lyde

Hvis du har en flash-spil lydeffekter inde i en .fla-fil, så er eksport af dem fra GUI ikke mulig (i det mindste ikke i Adobe Anime CC 2017) på grund af manglen på menupunkter, der betjener dette formål. Men der er en anden løsning - et dedikeret script, der gør det bare:

 Funktion normalizefilename (navn) {
  // konverterer et kamelcase navn til Snake_case navn
  Returnavn.replace (/ ([A-Z]) / G, '_ $ 1'). Udskift (/ ^ _ /, '') .tolowercase ();
}
Funktion Displaypath (PATH) {
  // gør filbanen mere læsbar
  returnere unescape (sti) .replace ('fil: ///', '') .replace ('|', ':');
}
fl.outputpanel.clear ();
hvis (fl.getdocumentdom (). Library.getselectedItems (). Længde & GT; 0)
  // få kun udvalgte elementer
  Var Library = FL.GetDocumentdom (). Bibliotek.getSelectedItems ();
andet
  // få alle varer
  Var Library = FL.GetDocumentdom (). Bibliotek.Items;
// Spørg bruger til eksportdestinationskataloget
Var Root = FL.BrowSeforFolderurl ('Vælg en mappe.');
Var fejl = 0;
for (var I = 0; I & LT; Bibliotek.Længde; I ++) {
  VAR Vare = Bibliotek [I];
  hvis (item.ittype! == 'lyd')
  Blive ved;
  VAR PATH = Root + '/';
  hvis (item.OriginalcompressionType === 'RAW')
  sti + = normalizefilnavn (item.name.split ('.') 
) + '.wav';
  andet
  sti + = normalizefilename (item.name);
  Var Success = item.exporttofile (sti);
  Hvis (! succes)
  fejl + = 1;
  fl.Trace (Displaypath (PATH) + ':' + (succes? 'OK': 'Fejl'));
}
fl.Trace (fejl + 'fejl (er)'); 

Sådan bruges scriptet til at eksportere lydfiler:

1. Gem koden ovenfor som en .jsfl-fil på din computer.
2. Åbn en .fla-fil med Adobe ANIMATE.
3. Vælg kommandoer & GT; Kør kommando fra topmenuen og vælg scriptet i den dialog, der åbnes.
4. Nu vises en anden dialogfil til at vælge eksportdestinationskataloget.

Det er gjort! Du skal nu have WAV-filer i den angivne mappe. Hvad der er tilbage at gøre, konverterer dem til, for eksempel MP3, OGG eller AAC. (Hvis du har spilfiler for at holde sig sikker, opgraderes til anstændigt Sky lagring .)

10. Sådan bruges MP3'er

Det gode gamle MP3-format er tilbage, da nogle patenter er udløbet, og nu kan hver browser afkode og afspille MP3'er. Dette gør udviklingen lidt lettere, da der endelig ikke er behov for at forberede to separate lydformater. Tidligere har du brug for, for eksempel ogg og AAC-filer, mens nu MP3 vil være tilstrækkelig.

Ikke desto mindre er der to vigtige ting, du har brug for at huske om MP3:

• MP3'er skal afkode efter indlæsning, hvilket kan være tidskrævende, især på mobile enheder. Hvis du ser en pause, efter at alle dine aktiver har ladet, betyder det sandsynligvis, at MP3'er bliver dekodet
• Gaplessly at spille looped mp3s er lidt problematisk. Løsningen er at bruge MP3LOOP, Læs mere i denne artikel Indsendt af Compu Fase.

Denne artikel blev oprindeligt offentliggjort i udstedelse 277 af Creative Web Design Magazine Web Designer. Køb problem 277 her eller Abonner på Web Designer her .

Relaterede artikler:

• 5 Casual Games For Designers
• Byg dit eget Webgl Physics Game
• Forstå Unity Asset import pipeline