Konverter Flash-spill til HTML5

Flash blir sakte forlatt av Adobe til fordel for HTML5 og JavaScript; Den offisielle enden av livet er satt for år 2020. Og det er her denne artikkelen vil komme til nytte.

• Rebuild A 2004 Flash Website for 2018

Tipsene som er beskrevet nedenfor, tar sikte på å hjelpe HTML5-spillutviklere, unngå vanlige feil når du konverterer flashspill til JavaScript, samt å gjøre hele utviklingsprosessen gå så jevnt som mulig. Alt du trenger er grunnleggende kunnskap om JavaScript, Webgl og Phaser Framework.

Endre spilldesignet fra SWF til JavaScript kan gi en bedre Brukererfaring , som i sin tur gir det et moderne utseende. Men hvordan å gjøre det? Trenger du en dedikert JavaScript-spillkonverter for å kvitte seg med denne utdaterte teknologien? Vel, flash til html5 konvertering kan være et stykke kake - her er hva en erfaren javascript spillutvikler har å si om saken.

Liker å holde designprosessen enkel? EN Nettstedbygger og retten Web Hosting. Leverandøren kan holde det på den måten.

01. Forbedre HTML5-spillopplevelsen

Konvertering av et spill til en annen plattform er en utmerket mulighet til å forbedre den, fikse sine problemer og øke publikum. Nedenfor er få ting som kan gjøres enkelt og er verdt å vurdere:

• Støtter mobile enheter
  Konvertering fra Flash til JavaScript tillater å nå et bredere publikum - Brukere av mobile enheter Støtte for berøringsskjermkontroller må vanligvis implementeres i spillet. Heldigvis støtter både Android og iOS-enheter nå også WebGL, så 30 eller 60 fps gjengivelse kan vanligvis lett oppnås. I mange tilfeller vil 60 FPS ikke forårsake noen problemer, som bare vil forbedre med tiden, da mobile enheter blir mer og mer utførende.
• Forbedre ytelsen
  Når det gjelder å sammenligne ActionScript og JavaScript, er sistnevnte raskere. Annet enn det, er konvertering av et spill en god anledning til å besøke algoritmer som brukes i spillkoden. Med JavaScript spillutvikling kan du optimalisere dem eller helt stripe ubrukt kode som er igjen av originale utviklere.
• Fikse feil og gjøre forbedringer i spillet
  Å ha nye utviklere som ser på spillets kildekode, kan bidra til å fikse kjente feil eller oppdage nye og svært sjeldne. Dette ville gjøre å spille spillet mindre irriterende for spillerne, noe som ville få dem til å bruke mer tid på nettstedet ditt og oppfordre dem til å prøve dine andre spill.
• Legge til webanalyse
  I tillegg til å spore trafikken, kan webanalyser også brukes til å samle kunnskap om hvordan spillerne oppfører seg i et spill og hvor de sitter fast under gameplay.
• Legge til lokalisering
  Dette ville øke publikum og er viktig for barn fra andre land som spiller spillet ditt. Eller kanskje spillet ditt ikke er på engelsk, og du vil støtte det språket?

02. Oppnå 60 fps

Når det gjelder JavaScript spillutvikling, kan det være fristende å utnytte HTML og CSS for i-spill-knapper, widgets og andre GUI-elementer. Vårt råd er å være forsiktig her. Det er counterintuitive, men faktisk Leveraging Dom Elements er mindre utførende på komplekse spill, og dette får større betydning på mobilen. Hvis du vil oppnå konstant 60 fps på alle plattformer, kan det være nødvendig med å trekke seg fra HTML og CSS.

Ikke-interaktive GUI-elementer, for eksempel helsestangene, ammo barer eller score tellere kan enkelt implementeres i Phaser ved å bruke vanlige bilder ("Phaser.Image" -klassen), og utnytte ".crop" -boligen for trimning og "Phaser. Tekst 'klasse for enkle tekstetiketter.

Interaktive elementer som knapper og avkrysningsbokser kan implementeres ved å bruke den innebygde "Phaser.Button" -klassen. Andre, mer komplekse elementer kan bestå av forskjellige enkle typer, som grupper, bilder, knapper og tekstetiketter.

03. Laster til egendefinerte fonter

Hvis du vil gjøre tekst med en tilpasset Vector Font (f.eks. TTF eller OTF), må du sørge for at fonten allerede er lastet inn av nettleseren før du gjør noen tekst. Phaser v2.6 gir ikke en løsning for dette formålet, men et annet bibliotek kan brukes - Web font laster .

Forutsatt at du har en skriftfil og inkluderer webkontaktlaster på siden din, er det et enkelt eksempel på hvordan du legger en skrift. Lag en enkel CSS-fil som skal lastes av Web Font Loader (du trenger ikke å inkludere den i HTML):

 @ font-face {
  // dette navnet du vil bruke i js
  Font-Family: 'Gunplay';
  // URL til skriftfilen, kan være relativt eller absolutt
  SRC: URL ('../ fonts / gunplay.ttf') format ('truetype');
  font-vekt: 400;
} 

Definer nå en global variabel som heter WebfontConfig. Noe så enkelt som dette vil vanligvis være tilstrekkelig:

 var webfontconfig = {
  'klasser': false,
  'timeout': 0,
  'Aktiv': Funksjon () {
  // skrifttypen har lastet inn ...
  },
  'tilpasset': {
  'Familier': ['Gunplay'],
  // URL til de tidligere nevnte CSS
  'URLS': ['Styles / fonts.css']
  }
}; 

Husk å sette koden i "Aktiv" tilbakeringing som er vist ovenfor. Og det er det!

04. Lagre spillet

Nå er vi i midten av vår flash til JavaScript-konvertering - det er på tide å ta vare på skyggeene. For å vedvarende lagre lokale data i ActionScript, vil du bruke "SharedObject" -klassen. I JavaScript er den enkle utskiftningen den LocalStorage API. , som gjør det mulig å lagre strenger for senere gjenfinning, overlevende sideopplastinger.

Lagring av data er veldig enkelt:

 varprosess = 15;
LocalStorage.Setitem ('MyGame.Progress', Fremgang); 

Merk at i eksemplet ovenfor vil "fremdrift" -variabelen, som er et tall, konverteres til en streng.

Lasting er også enkelt, men husk at hentede verdier vil være strenge eller null hvis de ikke eksisterer.

 Var Progress = Parseint (LocalStorage.getitem ("MyGame.Progress")) || 0; 

Her sikrer vi at returverdien er et tall. Hvis det ikke eksisterer, vil 0 bli tildelt den "fremdrift" -variabelen.

Du kan også lagre og hente mer komplekse strukturer, for eksempel JSON:

 varstatistikk = {'mål': 13, 'WINS': 7, 'Tap': 3, 'Tegner': 1
};
LocalStorage.Setitem ('myGame.Stats', JSON.Stringify (Statistikk));
...
varstatistikk = json.parse (localstorage.getitem ('myGame.Stats')) || {}; 

Det er noen tilfeller når "LocalStorage" -objektet ikke vil være tilgjengelig. For eksempel, når du bruker filen: // protokollen eller når en side er lagt i et privat vindu. Du kan bruke "Prøv og fange" -oppgaven for å sikre at koden din begge vil fortsette å fungere og bruke standardverdier, som er vist i eksemplet nedenfor:

 Prøv {
    Var Progress = LocalStorage.getitem ('myGame.Progress');
} fangst (unntak) {
  // LocalStorage Ikke tilgjengelig, bruk standardverdier
} 

En annen ting å huske er at de lagrede dataene er lagret per domene, ikke per nettadresse. Så hvis det er fare for at mange spill er vert på et enkelt domene, så er det bedre å bruke et prefiks (navneområde) når du lagrer. I eksemplet ovenfor, "MyGame". er et prefiks, og du vil vanligvis erstatte det med navnet på spillet.

Hvis spillet ditt er innebygd i et Iframe, vil LocalStorage ikke fortsette på iOS. I dette tilfellet trenger du å lagre data i foreldre iframe i stedet.

05. Standard fragment shader

Når Phaser og Pixijs gjør dine sprites, bruker de en enkel intern fragment shader. Det har ikke mange funksjoner fordi den er skreddersydd for fart. Du kan imidlertid erstatte den skyggen for dine formål. For eksempel kan du utnytte den for å inspisere overtrekk eller støtte flere funksjoner for gjengivelse. Nedenfor er et eksempel på hvordan du leverer din egen standardfragmentskader til Phaser V2.

 Funksjonsforlasting () {
  this.Load.Shader ('filnavn.frag', 'shaders / filnavn.frag');
}
Funksjon Opprett () {
  Var Renderer = This.Renderer;
  VAR BATCH = RENGERER.SPRITEBATCH;
  batch.defaultShader =.
  ny pixi.abstractilter (denne.cache.getShader ('filnavn.frag'));
  batch.setContext (Renderer.gl);
} 

06. Endre toningsmetode

En egendefinert standard skygger kan brukes til å erstatte standard tunnemetoder i Phaser og Pixijs. Tinting i Phaser og Pixijs fungerer ved å multiplisere teksturpiksler med en gitt farge. Multiplikasjon mørkner alltid farger, som åpenbart ikke er et problem; Det er rett og slett forskjellig fra flash-tonen. For et av våre spill måtte vi implementere toning som ligner på Flash og bestemte seg for at en tilpasset standard shader kunne brukes. Nedenfor er et eksempel på en slik fragment shader:

// Spesifikk tintvariant, som ligner blits-tonen som legger til
// til fargen og multipliserer ikke. Et negativt av en farge
// må leveres for denne skyggen for å fungere skikkelig, dvs. sett
// sprite.Tint til 0 for å slå hele sprite til hvitt.
presisjon lowp float;
varierende VEC2 VTEXTORECOORD;
varierende VEC4 vcolor;
Uniform Sampler2D Usampler;
Void Main (Void) {
  VEC4 F = TEXTURE2D (USAMPLER, VTEXTORECOORD);
  flyte a = klemme (vcolor.a, 0.00001, 1.0);
  gl_fragcolor.rgb = f.rgb * vcolor.a + klemme (1.0 - vcolor.rgb / a, 0,0, 1.0) * vcolor.a * f.a;
  GL_FRAGCOLOR.A = F.A * vcolor.a;
} 

Denne skyggen lyser piksler ved å legge til en basefarge på fargen en. For at dette skal fungere, må du levere negativer i fargen du vil ha. Derfor, for å bli hvit, må du sette:

 sprite.tint = 0x000000; // denne fargene sprite til hvitt
Sprite.tint = 0x00FFFF; // Dette gir rød 

07. Kontroller overdragningen

Bytte ut en standard skygger kan også leveres for å hjelpe med feilsøking. Nedenfor har vi forklart hvordan overtaket kan oppdages med en slik skygger.

Overtakelse skjer når mange eller alle piksler på skjermen blir gjengitt flere ganger. For eksempel tar mange gjenstander samme sted og blir gjort en over en annen. Hvor mange piksler en GPU kan gjengi per sekund, er beskrevet som fyllhastighet. Moderne Desktop GPUer har overdreven fyllpris for vanlige 2D-formål, men mobile er mye tregere.

Det er en enkel metode for å finne ut hvor mange ganger hver piksel på skjermen er skrevet ved å erstatte standard global fragment shader i Pixijs og Phaser med denne:

 Void Main (Void) {
  GL_FRAGCOLOR.RGB + = 1,0 / 7,0;
} 

Denne skyggen lyser piksler som blir behandlet. Nummeret 7.0 indikerer hvor mange skriver som trengs for å slå piksler hvite; Du kan stille dette nummeret til din smak. Med andre ord ble lettere piksler på skjermen skrevet flere ganger, og hvite piksler ble skrevet minst syv ganger.

Denne skyggen bidrar også til å finne begge "usynlige" objekter som av en eller annen grunn fortsatt er gjengitt, og sprites som har overdrevne gjennomsiktige områder rundt som må fjernes (GPU fortsatt trenger å behandle gjennomsiktige piksler i teksturene dine).

08. Hvorfor fysikkmotorer er vennene dine

En fysikkmotor er en mellomvare som er ansvarlig for å simulere fysikklegemer (vanligvis stive kroppsdynamikk) og deres kollisjoner. Fysikkmotorer simulerer 2D- eller 3D-mellomrom, men ikke begge deler. En typisk fysikkmotor vil gi:

• Objektbevegelse ved å sette hastigheter, akselerasjoner, ledd og motorer;
• Oppdage kollisjoner mellom ulike formtyper;
• Beregning av kollisjonsresponser, dvs. hvordan to objekter skal reagere når de kolliderer.

Det er et Phaser Plugin som fungerer bra for dette formålet. Box2D brukes også i Unity Game Engine og Gamemaker Studio 2.

Mens en fysikkmotor vil øke utviklingen din, er det en pris du må betale: Redusert runtime ytelse. Detektering av kollisjoner og beregning av svar er en CPU-intensiv oppgave. Du kan være begrenset til flere dusin dynamiske objekter i en scene på mobiltelefoner eller ansiktsforringet ytelse, samt redusert bildefrekvens dyp under 60 fps.

09. Eksportlyder

Hvis du har en flash spill lydeffekter inne i en .fla-fil, er det ikke mulig å eksportere dem fra GUI (i hvert fall ikke i Adobe Animate CC 2017) på grunn av mangelen på menyalternativer som betjener dette formålet. Men det er en annen løsning - et dedikert skript som bare gjør det:

 Funksjon NormalIzEfilnavn (navn) {
  // konverterer en kamelettnavn til snake_case navn
  Return navn.replace (/ ([A-Z]) / g, '_ $ 1'). Erstatt (/ ^ _ /, '') .Tolowercase ();
}
Funksjon DisplayPath (banen) {
  // gjør filbanen mer lesbar
  Returner UNESCAD (sti) .replace ('Fil: ///', '') .replace ('|', ':');
}
fl.outputpanel.clear ();
hvis (fl.getdocumentdom (). Bibliotek. GetSelecteditems (). Lengde & GT; 0)
  // Få bare valgte elementer
  VAR-bibliotek = fl.getDocumentdom (). Bibliotek. Getelecteditems ();
ellers
  // få alle elementene
  var bibliotek = fl.getdocumentdom (). Bibliotek.Items;
// Spør brukeren for eksportdestinasjonskatalogen
varrot = fl.browseforfolderurl ('Velg en mappe.');
VAR-feil = 0;
for (var i = 0; i & lt; biblioteket.lengde; i ++) {
  var element = biblioteket [i];
  hvis (item.itemtype! == 'Sound')
  Fortsette;
  var sti = rot + '/';
  hvis (item.originalcompressiontype === 'rå')
  sti + = normalizefilename (item.name.split ('.') 
) + '.wav';
  ellers
  sti + = normalizefilnavn (item.name);
  VAR-suksess = item.exporttofile (bane);
  hvis (! suksess)
  feil + = 1;
  fl.trace (displaypath (sti) + ':' + (suksess? 'OK': 'feil'));
}
fl.trace (feil + 'feil (er)'); 

Slik bruker du skriptet til å eksportere lydfiler:

1. Lagre koden ovenfor som en .jsfl-fil på datamaskinen din.
2. Åpne en .fla-fil med Adobe Animate.
3. Velg kommandoer og GT; Kjør kommandoen fra toppmenyen og velg skriptet i dialogen som åpnes.
4. Nå kommer en annen dialogfil dukker opp for å velge eksportdestinasjonskatalogen.

Det er gjort! Du bør nå ha WAV-filer i den angitte katalogen. Det som er igjen å gjøre er å konvertere dem til, for eksempel MP3, OGG eller AAC. (Hvis du har spillfiler for å holde trygt, oppgrader du til anstendig skylagring .)

10. Hvordan bruke MP3s

Det gode gamle MP3-formatet er tilbake, da noen patenter er utløpt, og nå kan hver nettleser dekode og spille mp3s. Dette gjør at utviklingen litt enklere, siden endelig ikke er nødvendig å forberede to separate lydformater. Tidligere trengte du, for eksempel OGG og AAC-filer, mens MP3 vil være tilstrekkelig.

Likevel er det to viktige ting du må huske om MP3:

• MP3s må dekode etter lasting, noe som kan være tidkrevende, spesielt på mobile enheter. Hvis du ser en pause etter at alle dine eiendeler har lastet, betyr det sannsynligvis at MP3-er dekodes
• Gaplessly spiller looped mp3s er litt problematisk. Løsningen er å bruke MP3LOOP, Les mer i denne artikkelen postet av kompufasen.

Denne artikkelen ble opprinnelig publisert i utgave 277 av Creative Web Design Magazine webdesigner. Kjøp problem 277 her eller Abonner på webdesigner her .

Relaterte artikler:

• 5 uformelle spill for designere
• Bygg ditt eget WebGl Physics-spill
• Forstå Unity Asset Import Pipeline