Konvertera Flash-spel till html5

Flash är långsamt övergiven av Adobe till förmån för HTML5 och JavaScript; Dess officiella livslängd är för år 2020. Och det är där den här artikeln kommer att vara till nytta.

• Rebuild A 2004 Flash-webbplats för 2018

De tips som beskrivs nedan syftar till att hjälpa HTML5-spelutvecklare att undvika vanliga misstag när man konverterar Flash-spel till JavaScript, samt att hela utvecklingsprocessen går så smidigt som möjligt. Allt du behöver är grundläggande kunskaper om JavaScript, WebGL och Phaser-ramen.

Att ändra din speldesign från SWF till Javascript kan ge en bättre användarupplevelse , som i sin tur ger det ett modernt utseende. Men hur man gör det? Behöver du en dedikerad JavaScript-spelomvandlare för att bli av med den här föråldrade tekniken? Tja, flash till html5 konvertering kan vara en bit tårta - här är vad en erfaren JavaScript-spelutvecklare har att säga om frågan.

Gilla att hålla din designprocess enkel? A Website Builder och höger webbhotell leverantören kan hålla det så.

01. Förbättra HTML5-spelupplevelsen

Att konvertera ett spel till en annan plattform är ett utmärkt tillfälle att förbättra det, fixa sina problem och öka publiken. Nedan är några saker som lätt kan göras och är värda att överväga:

• Stödja mobila enheter
  Konvertera från Flash till JavaScript Tillåter att nå en bredare publik - användare av mobila enheter stöd för pekskärmskontroller behöver vanligtvis implementeras i spelet. Lyckligtvis stödjer både Android och IOS-enheter nu WebGL, så 30 eller 60 FPS-återgivning kan vanligtvis enkelt uppnås. I många fall kommer 60 fps inte att orsaka några problem, som bara kommer att förbättras med tiden, eftersom mobila enheter blir alltmer prestanda.
• Förbättra prestanda
  När det gäller att jämföra ActionScript och JavaScript, är den senare snabbare. Annat än det är konvertering av ett spel ett bra tillfälle att revidera algoritmer som används i spelkoden. Med JavaScript-spelutveckling kan du optimera dem eller helt remsa oanvänd kod som lämnas av originalutvecklare.
• Fixa buggar och göra förbättringar av spelet
  Att ha nya utvecklare som tittar på spelets källkod kan hjälpa till att fixa kända buggar eller upptäcka nya och mycket sällsynta. Detta skulle göra spelet mindre irriterande för spelarna, vilket skulle få dem att spendera mer tid på din webbplats och uppmuntra dem att prova dina andra spel.
• Lägga till webbanalys
  Förutom att spåra trafiken kan Web Analytics också användas för att samla kunskap om hur spelarna beter sig i ett spel och där de fastnar under gameplayen.
• Lägga till lokalisering
  Detta skulle öka publiken och är viktigt för barn från andra länder som spelar ditt spel. Eller kanske är ditt spel inte på engelska och du vill stödja det språket?

02. Uppnå 60 fps

När det gäller JavaScript-spelutveckling kan det vara frestande att utnyttja HTML och CSS för spelknappar, widgets och andra GUI-element. Vårt råd är att vara försiktig här. Det är motintuitivt, men faktiskt utnyttjar DOM-element är mindre performant på komplexa spel och detta får mer betydelse för mobilen. Om du vill uppnå konstant 60 fps på alla plattformar, kan det krävas från HTML och CSS.

Icke-interaktiva GUI-element, som hälsofält, ammunitionstänger eller poängräknare kan enkelt implementeras i Phaser genom att använda vanliga bilder ("Phaser.image" -klassen), utnyttja ".crop" -egenskapen för trimning och "Phaser. Text 'klass för enkla textetiketter.

Interaktiva element som knappar och kryssrutor kan implementeras med hjälp av den inbyggda "Phaser.Button" -klassen. Andra, mer komplexa element kan bestå av olika enkla typer, som grupper, bilder, knappar och textetiketter.

03. Laddar anpassade teckensnitt

Om du vill göra text med en anpassad vektorfont (t.ex. TTF eller OTF), måste du se till att teckensnittet redan har laddats av webbläsaren innan du gör någon text. Phaser v2.6 ger inte en lösning för detta ändamål, men ett annat bibliotek kan användas - Web Font Loader .

Om du antar att du har en teckensnittsfil och inkludera webfontellastaren på din sida, så är det ett enkelt exempel på hur du laddar ett teckensnitt. Gör en enkel CSS-fil som laddas av Web Font Loader (du behöver inte inkludera den i din HTML):

 @ font-ansikte {
  // det här namnet du kommer att använda i JS
  Font-familj: "Gunplay";
  // URL till teckensnittsfilen, kan vara relativ eller absolut
  SRC: URL ('../ FONTS / GUNPLAY.TTF') Format ('TrueType');
  FONT-VIKT: 400;
} 

Definiera nu en global variabel med namnet WebFontConfig. Något så enkelt som detta brukar vara tillräckligt:

 var webfontconfig = {
  "Klasser": FALSE,
  'Timeout': 0,
  'Aktiv': Funktion () {
  // Teckensnittet har framgångsrikt laddat ...
  },
  "Custom": {
  "Familjer": ["Gunplay"],
  // URL till den tidigare nämnda CSS
  'URLS': ['Styles / Fonts.css']
  }
}; 

Kom ihåg att sätta din kod i den aktiva återuppringningen som visas ovan. Och det är allt!

04. Spara spelet

Nu är vi i mittpunkten i vår flash till Javascript-konvertering - det är dags att ta hand om shadersna. För att ihållande lagra lokala data i ActionScript skulle du använda klassen SharedObject '. I JavaScript är den enkla ersättningen Lokalstorlek API , som gör det möjligt att lagra strängar för senare hämtning, överlevnadsblad.

Spara data är väldigt enkelt:

 var framsteg = 15;
localstorage.setitem ('mygame.progress', framsteg); 

Observera att i det ovannämnda exemplet kommer "Progress" -variabeln, som är ett nummer, att konverteras till en sträng.

Laddning är också enkelt, men kom ihåg att hämtade värden kommer att vara strängar eller null om de inte existerar.

 Var Progress = Parseint (LocalStorage.getItem ('myGame.Progress')) || 0; 

Här ser vi till att returvärdet är ett nummer. Om det inte existerar, kommer 0 att tilldelas "Progress" -variabeln.

Du kan också lagra och hämta mer komplexa strukturer, till exempel JSON:

 Var Stats = {'Mål': 13, "vinner": 7, "förluster": 3, "Draws": 1
};
localstorage.setitem ('mygame.stats', Json.Stringify (Statistik));
...
var statistik = json.parse (localstorage.getitem ('mygame.stats')) || {}; 

Det finns några fall när "localstorag" -objektet inte kommer att finnas tillgängligt. Till exempel, när du använder filen: // protokoll eller när en sida är laddad i ett privat fönster. Du kan använda "försök och fånga" -utlåtandet för att säkerställa att din kod både kommer att fortsätta arbeta och använda standardvärden, som visas i exemplet nedan:

 Prova {
    var framsteg = localstorage.getitem ('mygame.progress');
} fånga (undantag) {
  // Lokalstorage Ej tillgängligt, använd standardvärdena
} 

En annan sak att komma ihåg är att de lagrade data sparas per domän, inte per webbadress. Så om det finns risk för att många spel är värd på en enda domän, är det bättre att använda ett prefix (namespace) när du sparar. I exemplet ovan, "mygame". är ett prefix och du brukar vilja byta ut det med namnet på spelet.

Om ditt spel är inbäddat i en iframe, kommer localstorage inte att fortsätta på iOS. I det här fallet måste du lagra data i förälder iframe istället.

05. Standardfragment Shader

När Phaser och Pixijs gör dina sprites, använder de en enkel intern fragment shader. Det har inte många funktioner eftersom det är skräddarsydd för fart. Du kan dock ersätta den skuggaren för dina ändamål. Till exempel kan du utnyttja det för att inspektera överdrag eller stödja fler funktioner för återgivning. Nedan är ett exempel på hur du levererar din egen standardfragmentskärmare till Phaser V2.

 Funktion preload () {
  this.load.shader ('filename.frag', 'shaders / filename.frag';
}
funktion skapa () {
  var renderer = this.renderer;
  var batch = renderer.Spritebatch;
  batch.defaultshader =
  Ny Pixi.AbstractFilter (this.cache.Getshader ('filename.frag'));
  batch.setcontext (renderer.gl);
} 

06. Ändra toneringsmetod

En anpassad standardskärm kan användas för att ersätta standardtonningsmetoder i Phaser och Pixijs. Tontering i Phaser och Pixijs fungerar genom att multiplicera texturpixlar med en given färg. Multiplikation mörknar alltid färgerna, vilket uppenbarligen inte är ett problem; Det är helt enkelt annorlunda än blixten. För ett av våra spel behövde vi implementera toning som liknar Flash och bestämde att en anpassad standard shader kunde användas. Nedan är ett exempel på en sådan fragment Shader:

// specifik nyansvariant, liknande den flashton som tillägger
// till färgen och multiplicerar inte. En negativ av en färg
// måste levereras för denna shader för att fungera ordentligt, dvs uppsättning
// Sprite.tint till 0 för att vända hela sprite till vitt.
Precision Lowp Float;
Varierande Vec2 vtexturecoord;
Varierande Vec4 Vcolor;
enhetlig sampler2d umpler;
void main (void) {
  VEC4 F = Texture2D (USAMPLER, VTextureCoord);
  float a = klämma (vcolor.a, 0,00001, 1,0);
  GL_FRAGCOLOR.RGB = F.RGB * VCOLOR.A + Klämma (1,0 - VCOLOR.RGB / A, 0,0, 1,0) * VCOLOR.A * F.A;
  gl_fragcolor.a = f.a * vcolor.a;
} 

Denna Shader Lightens pixlar genom att lägga till en basfärg till nyansen. För att detta ska fungera måste du leverera negativ av den färg du vill ha. Därför måste du ställa in: för att bli vit, för att få vit,

 Sprite.tint = 0x000000; // dessa färger sprite till vit
Sprite.tint = 0x00ffff; // Detta ger rött 

07. Kontrollera överdrag

Att ersätta en standard shader kan också levereras för att hjälpa till med debugging. Nedan har vi förklarat hur överdrag kan detekteras med en sådan skuggare.

Överdrag händer när många eller alla pixlar på skärmen görs flera gånger. Till exempel, många föremål tar samma plats och görs en över en annan. Hur många pixlar kan en GPU göra per sekund beskrivs som fyllningsfrekvens. Modernt skrivbordsgpus har överdriven fyllnadshastighet för vanliga 2D-ändamål, men mobila är mycket långsammare.

Det finns en enkel metod att ta reda på hur många gånger varje pixel på skärmen är skriven genom att ersätta den kommande globala fragmentskärmen i Pixijs och Phaser med den här:

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

Denna Shader Lightens pixlar som behandlas. Numret 7.0 indikerar hur många skrivningar som behövs för att vrida pixlar vita; Du kan ställa in det här numret till din smak. Med andra ord skrivits lättare pixlar på skärmen flera gånger, och vita pixlar skrevs minst sju gånger.

Denna shader hjälper också till att hitta båda "osynliga" objekt som av någon anledning fortfarande är gjorda, och sprites som har överdrivna transparenta områden runt som behöver avlägsnas (GPU behöver fortfarande bearbeta transparenta pixlar i dina texturer).

08. Varför fysikmotorer är dina vänner

En fysikmotor är en middleware som är ansvarig för att simulera fysikkroppar (vanligtvis styv kroppsdynamik) och deras kollisioner. Fysikmotorer simulerar 2D- eller 3D-utrymmen, men inte båda. En typisk fysikmotor kommer att ge:

• Objektrörelse genom att ställa in hastigheter, accelerationer, leder och motorer;
• Detektera kollisioner mellan olika formtyper;
• Beräkning av kollisionsreaktioner, dvs hur två objekt ska reagera när de kolliderar.

Det finns ett phaser-plugin som fungerar bra för detta ändamål. Box2d används också i Unity Game Engine och GameMaker Studio 2.

Medan en fysikmotor kommer att påskynda din utveckling, det finns ett pris som du måste betala: minskad runtime-prestanda. Detektering av kollisioner och beräkning av svar är en CPU-intensiv uppgift. Du kan vara begränsad till flera dussin dynamiska föremål i en scen på mobiltelefoner eller ansiktsförstörda prestanda, liksom minskad bildhastighet djupt under 60 fps.

09. Exportera ljud

Om du har en flash spel ljudeffekter inuti en .fla-fil, är det inte möjligt att exportera dem från GUI (åtminstone inte i Adobe Animate CC 2017) på grund av bristen på menyalternativ som betjänar detta ändamål. Men det finns en annan lösning - ett dedikerat skript som gör det bara:

 Funktion Normalizefilename (Namn) {
  // Konverterar ett kamelcase namn till Snake_Case namn
  returnamn.replace (/ ([a-z]) / g, '_ $ 1'). Byt ut (/ ^ _ /, '') .tolowercase ();
}
Funktion DisplayPath (Path) {
  // gör filvägen mer läsbar
  returnera unescape (väg) .replace ('fil: ///', '') .replace ('|', ':');
}
fl.outputpanel.clear ();
Om (FL.GETDOCUMENTOM (). Bibliotek.GetselectedItems (). Längd & GT; 0)
  // få bara valda objekt
  var bibliotek = fl.getDokumentdom (). Bibliotek.Getselecteditems ();
annan
  // få alla objekt
  var bibliotek = fl.getDokumentdom (). bibliotek.Items;
// Be användaren för exportdestinationskatalogen
Var root = fl.browseforfolderurl ("Välj en mapp. ');
Varfel = 0;
för (var i = 0; i & lt; bibliotek.length; i ++) {
  Var Artikel = Bibliotek [i];
  Om (item.itemtype! == 'Sound')
  Fortsätta;
  Varväg = Root + '/';
  Om (item.eRiginalCompressionType === 'RAW')
  PATH + = normalizeFileName (item.name.split ('.') 
) + '.wav';
  annan
  PATH + = normalizeFileName (artikel.name);
  var framgång = item.exporttofile (väg);
  Om (! framgång)
  Fel + = 1;
  FL.Trace (DisplayPath (Path) + ':' + (Framgång? "OK": "Fel"));
}
FL.TRACE (Fel + "Fel (er) '); 

Så här använder du skriptet för att exportera ljudfiler:

1. Spara koden ovan som en .jsfl-fil på din dator.
2. Öppna en .fla-fil med Adobe Animate.
3. Välj kommandon och GT; Kör kommandot från toppmenyn och välj skriptet i dialogen som öppnas.
4. Nu dyker en annan dialogfil för att välja exportdestinationskatalogen.

Det är gjort! Du borde nu ha WAV-filer i den angivna katalogen. Vad som är kvar att göra är att konvertera dem till exempelvis MP3, OGG eller AAC. (Om du har spelfiler för att hålla dig trygg, uppgradera till anständigt molnlagring .)

10. Hur man använder MP3-filer

Det goda gamla MP3-formatet är tillbaka, eftersom vissa patent har löpt ut och nu kan varje webbläsare avkoda och spela MP3-filer. Detta gör utvecklingen lite lättare, eftersom det äntligen inte behöver förbereda två separata ljudformat. Tidigare behövde du, till exempel OGG och AAC-filer, medan nu mp3 räcker.

Ändå finns det två viktiga saker du behöver komma ihåg om MP3:

• MP3-filer måste avkoda efter lastning, vilket kan vara tidskrävande, särskilt på mobila enheter. Om du ser en paus efter alla dina tillgångar har laddats, betyder det förmodligen att MP3-filer avkodas
• Gapplöst att spela looped mp3s är lite problematisk. Lösningen är att använda mp3loop, Läs mer i den här artikeln postat av Compu Phase.

Denna artikel publicerades ursprungligen i utgåva 277 av kreativ webbdesignmagasin webbdesigner. Köp utgåva 277 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

• 5 casual spel för designers
• Bygg ditt eget WebGL-fysikspel
• Förstå Unity Asset Import Pipeline