Converteer Flash Games naar HTML5

Flash wordt langzaam verlaten door Adobe ten gunste van HTML5 en JavaScript; Het officiële einde van de levensduur is ingesteld voor het jaar 2020. En dat is waar dit artikel van pas komt.

• Rebuild A 2004 Flash-website voor 2018

De hieronder beschreven tips zijn erop gericht om HTML5-game-ontwikkelaars te helpen veel voorkomende fouten bij het converteren van flashgames naar Javascript, evenals het mogelijk maken van het hele ontwikkelingsproces zo soepel mogelijk. Het enige dat u nodig hebt, is basiskennis van JavaScript, WebGL en het Phaser Framework.

Het veranderen van je game-ontwerp van SWF naar Javascript kan een beter opleveren gebruikerservaring , wat op zijn beurt het een moderne look geeft. Maar hoe het te doen? Heeft u een toegewijde JavaScript-game-converter nodig om van deze verouderde technologie af te komen? Nou, Flash naar HTML5-conversie kan een fluitje van een cent zijn - hier is wat een ervaren javascript-game-ontwikkelaar te zeggen heeft over de kwestie.

Hou ervan om je ontwerpproces eenvoudig te houden? EEN website bouwer en het recht web hosting provider kan het op die manier houden.

01. Verbeter de HTML5-game-ervaring

Een spel omzetten naar een ander platform is een uitstekende gelegenheid om het te verbeteren, zijn problemen op te lossen en het publiek te vergroten. Hieronder staan ​​weinige dingen die gemakkelijk kunnen worden gedaan en zijn de moeite waard om te overwegen:

• Ondersteuning van mobiele apparaten
  Het converteren van Flash naar Javascript maakt het bereiken van een breder publiek - gebruikers van ondersteuning voor mobiele apparaten voor touchscreen-controles moeten meestal in het spel worden geïmplementeerd. Gelukkig ondersteunen zowel Android als iOS-apparaten nu ook WebGL, dus 30 of 60 FPS-rendering kan meestal gemakkelijk worden bereikt. In veel gevallen zullen 60 fps geen problemen veroorzaken, wat alleen maar verbetert met de tijd, omdat mobiele apparaten steeds meer performant worden.
• Prestaties verbeteren
  Als het gaat om het vergelijken van ActionScript en JavaScript, is de laatste sneller. Anders dan dat, is het converteren van een game een goede gelegenheid om algoritmen opnieuw te bekijken die wordt gebruikt in de spelcode. Met JavaScript Game Development kunt u deze optimaliseren of ongebruikte code laten strippen die achtergelaten is door originele ontwikkelaars.
• Fixing Bugs en het maken van verbeteringen aan de gameplay
  Het hebben van nieuwe ontwikkelaars die op zoek zijn naar de broncode van het spel kan helpen om bekende bugs op te lossen of nieuwe en zeer zeldzame te ontdekken. Dit zou het spelen van het spel minder irriterend maken voor de spelers, waardoor ze meer tijd op je site zouden laten doorbrengen en ze aanmoedigen om je andere games te proberen.
• Web Analytics toevoegen
  Naast het volgen van het verkeer, kan webanalyse ook worden gebruikt om kennis te verzamelen over hoe spelers zich gedragen in een spel en waar ze vast komen te zitten tijdens gameplay.
• Lokalisatie toevoegen
  Dit zou het publiek verhogen en is belangrijk voor kinderen uit andere landen die je spel spelen. Of misschien is je spel niet in het Engels en wil je die taal ondersteunen?

02. Bereik 60 fps

Als het gaat om JavaScript Game Development, kan het verleidelijk zijn om HTML en CSS voor in-game-knoppen, widgets en andere GUI-elementen te benutten. Ons advies is om hier voorzichtig te zijn. Het is tegen intuïtief, maar daadwerkelijk leveraging van DOM-elementen is minder performant op complexe games en dit krijgt meer betekenis op mobiel. Als u constant 60 fps op alle platforms wilt bereiken, kunt u ontslag nemen van HTML en CSS vereist.

Niet-interactieve GUI-elementen, zoals gezondheidsstaven, munitiestangen of scorecellers kunnen eenvoudig worden geïmplementeerd in Phaser met behulp van reguliere afbeeldingen (de klasse 'Phaser.image'), gebruik het gebruik van de eigenschap '.crop' voor het trimmen en de 'Phaser. Tekst 'Klasse voor eenvoudige tekstlabels.

Interactieve elementen zoals knoppen en selectievakjes kunnen worden geïmplementeerd door gebruik te maken van de ingebouwde 'Phaser.button' klasse. Andere, complexere elementen kunnen zijn samengesteld uit verschillende eenvoudige typen, zoals groepen, afbeeldingen, knoppen en tekstlabels.

03. Aangepaste lettertypen laden

Als u tekst wilt maken met een aangepast vectorlettertype (bijv. TTF of OOTF), moet u ervoor zorgen dat het lettertype al door de browser is geladen voordat u een tekst weergeeft. Phaser V2.6 biedt geen oplossing voor dit doel, maar een andere bibliotheek kan worden gebruikt - Web-lettertype loader ​

Ervan uitgaande dat u een lettertype-bestand hebt en de weblader in uw pagina opneemt, is hieronder een eenvoudig voorbeeld van het laden van een lettertype. Maak een eenvoudig CSS-bestand dat wordt geladen door Web Font Loader (u hoeft het niet op te nemen in uw HTML):

 @ Font-Face {
  // Deze naam gebruikt u in JS
  Font-familie: 'Gunplay';
  // URL naar het Font-bestand, kan relatief of absoluut zijn
  SRC: URL ('../ fonts / gunplay.ttf') -indeling ('TrueType');
  FONT-Gewicht: 400;
} 

Definieer nu een globale variabele genaamd Webfontconfig. Iets zo eenvoudig, omdat dit meestal volstaat:

 Var Webfontconfig = {
  'Classes': FALSE,
  'Time-out': 0,
  'Active': functie () {
  // Het lettertype heeft met succes geladen ...
  ​
  'Op maat': {
  'Families': ['Gunplay'],
  // URL naar de eerder genoemde CSS
  'URL's': ['stijlen / fonts.css']
  ​
}; 

Vergeet niet om uw code te plaatsen in de bovenstaande 'Actieve' callback. En dat is het!

04. Sla het spel op

Nu zijn we in het middenpunt van onze flits naar Javascript-conversie - het is tijd om voor de shaders te zorgen. Om de lokale gegevens in ActionScript voortdurend op te slaan, gebruik dan de klasse 'SharedObject'. In JavaScript is de eenvoudige vervanging de LocalStorage API , waardoor het opslaan van snaren voor latere retrieval, overlevende pagina opnieuw wordt geladen.

Gegevens besparen is heel eenvoudig:

 Var vooruitgang = 15;
localstorage.Setitem ('mygame.progress', vooruitgang); 

Merk op dat in het bovenstaande voorbeeld de 'voortgang' variabele, die een getal is, omgezet in een tekenreeks.

Laden is ook eenvoudig, maar vergeet niet dat opgehaalde waarden snaren of null zullen zijn als ze niet bestaan.

 Var Progress = Parrseint (localstorage.getitem ('mygame.progress')) || 0; 

Hier zorgen we ervoor dat de retourwaarde een getal is. Als het niet bestaat, wordt er 0 toegewezen aan de variabele 'Progress'.

U kunt ook meer complexe structuren opslaan en ophalen, bijvoorbeeld JSON:

 Var stats = {'GOEDERS': 13, 'WINS': 7, 'Verliezen': 3, 'Draws': 1
​
localstorage.Setitem ('mygame.stats', json.stringify (stats));
​
VAR-statistieken = JSON.parse (localstorage.getitem ('mygame.stats') || {}; 

Er zijn enkele gevallen waarin het object 'Localstorage' niet beschikbaar zal zijn. Bijvoorbeeld bij gebruik van het bestand: // -protocol of wanneer een pagina in een privévenster wordt geladen. U kunt de verklaring 'Try and Catch' gebruiken om ervoor te zorgen dat uw code beide doorgaan met werken en de standaardwaarden gebruiken, die in het onderstaande voorbeeld wordt weergegeven:

 Probeer {
    Var Progress = localstorage.getitem ('mygame.progress');
} Catch (uitzondering) {
  // localstorage niet beschikbaar, gebruik standaardwaarden
} 

Een ander ding om te onthouden is dat de opgeslagen gegevens per domein worden opgeslagen, niet per URL. Dus als er een risico bestaat dat veel games worden gehost op een enkel domein, dan is het beter om een ​​voorvoegsel (naamruimte) te gebruiken bij het besparen. In het bovenstaande voorbeeld, 'mygame'. Is een voorvoegsel en wil je het meestal vervangen door de naam van het spel.

Als je spel is ingebed in een iframe, dan zal LocalStorage niet aan IOS blijven bestaan. In dit geval zou u in plaats daarvan gegevens in de bovenliggende iframe opslaan.

05. Standaard Fragment Shader

Wanneer Phaser en Pixijs je sprites maken, gebruiken ze een eenvoudige interne fragment-shader. Het heeft niet veel functies omdat het op maat is gemaakt voor snelheid. U kunt die Shader echter voor uw doeleinden vervangen. U kunt het bijvoorbeeld gebruiken om overdrijving te inspecteren of meer functies te ondersteunen voor weergave. Hieronder is een voorbeeld van het leveren van uw eigen standaardfragmentschaker aan Phaser V2.

 Functie Preload () {
  This.Load.Shader ('bestandsnaam.frag', 'Shaders / FileName.frag');
​
functie maken () {
  Var Renderer = This.Renderer;
  var batch = renderer.spriteBatch;
  batch.defaultshader =
  Nieuwe PIXI.ABStractFilter (this.cache.getShader ('bestandsnaam.frag'));
  batch.SetContext (renderer.gl);
} 

06. Wijzig de tintingsmethode

Een aangepaste standaardscholder kan worden gebruikt om standaard tintingsmethoden in Phaser en Pixijs te vervangen. Het tint in Phaser en Pixijs werkt door textuurpixels te vermenigvuldigen met een bepaalde kleur. Vermenigvuldiging wordt altijd de kleuren verduisterd, wat uiteraard geen probleem is; Het is gewoon anders dan de flash-tinting. Voor een van onze spellen moesten we het verven vergelijken met Flash en besloten dat een aangepaste standaard shader kan worden gebruikt. Hieronder is een voorbeeld van een dergelijke fragmentschaker:

// Specifieke tint-variant, vergelijkbaar met de flash-tint die toevoegt
// naar de kleur en vermenigvuldigt niet. Een negatief van een kleur
// moet worden geleverd voor deze shader om goed te werken, d.w.z. set
// sprite.tint naar 0 om hele sprite naar wit te worden.
Precision lowp float;
Variërend VEC2 VTEXTURECOORORD;
Variërend VEC4 VCOLOR;
uniform sampler2d usampler;
void hoofd (leeg) {
  VEC4 F = TEXTE2D (USAMPLER, VTEXTUURECOORD);
  zweven a = klem (vcolor.a, 0,00001, 1.0);
  GL_FRACCOLOR.RGB = F.RGB * VCOLOR.A + klem (1.0 - vcolor.RGB / A, 0.0, 1.0) * VC0OR.A * F.A;
  gl_fragcolor.a = f.a * vclokor.a;
} 

Deze shader verlicht pixels door een basiskleur aan de tint toe te voegen. Voor dit aan het werk moet u negatieven van de gewenste kleur leveren. Daarom moet u om wit te worden, moet u instellen:

 Sprite.tint = 0x000000; // deze kleuren de sprite tot wit
Sprite.tint = 0x00FFFF; // dit geeft rood 

07. Inspecteer overstroom

Het vervangen van een standaardschadder kan ook worden gebruikt om te helpen bij het debuggen. Hieronder hebben we uitgelegd hoe OverDRAW kan worden gedetecteerd met zo'n schaduw.

Overtrekking gebeurt wanneer veel of alle pixels op het scherm meerdere keren worden weergegeven. Veel objecten nemen bijvoorbeeld dezelfde plaats en worden er een ten opzichte van een andere. Hoeveel pixels kan een GPU per seconde worden weergegeven, wordt beschreven als vulsnelheid. Moderne Desktop GPU's hebben overmatige vulfrequentie voor gebruikelijke 2D-doeleinden, maar Mobiele zijn een stuk langzamer.

Er is een eenvoudige methode om erachter te komen hoe vaak elke pixel op het scherm is geschreven door de standaard globale fragmentschaker in Pixijs en Phaser te vervangen door deze:

 VOID MAIN (leegte) {
  gl_fragcolor.rgb + = 1,0 / 7.0;
} 

Deze shader lichten pixels die worden verwerkt. Het nummer 7.0 geeft aan hoeveel schrijft nodig zijn om pixels wit te maken; U kunt dit nummer naar wens afstemmen. Met andere woorden, lichtere pixels op het scherm werden verschillende keren geschreven en werden witte pixels minstens zeven keer geschreven.

Deze Shader helpt ook om zowel 'onzichtbare' objecten te vinden die om een ​​of andere reden nog steeds worden weergegeven en sprites met overmatige transparante gebieden die moeten worden gestript (GPU moet nog steeds transparante pixels in uw texturen worden verwerkt).

08. Waarom Natuurkunde-engines zijn je vrienden

Een fysica-engine is een middleware die verantwoordelijk is voor het simuleren van natuurkundige lichamen (meestal stijve lichaamsdynamica) en hun botsingen. Fysica-motoren simuleren 2D of 3D-ruimtes, maar niet allebei. Een typische fysica-engine zal leveren:

• Objectbeweging Door snelheden, versnellingen, gewrichten en motoren in te stellen;
• Het detecteren van botsingen tussen verschillende vormtypen;
• Het berekenen van de reacties van botsingen, d.w.z. hoe twee objecten moeten reageren wanneer ze botsen.

Er is een Phaser-plug-in die goed voor dit doel werkt. Box2D wordt ook gebruikt in de Unity Game Engine en GameMaker Studio 2.

Terwijl een fysica-engine je ontwikkeling zal versnellen, is er een prijs die je moet betalen: verminderde runtime-prestaties. Het detecteren van botsingen en het berekenen van reacties is een CPU-intensieve taak. Mogelijk bent u beperkt tot verschillende dozijn dynamische objecten in een scène op mobiele telefoons of afgebroken prestaties, evenals een verminderde framesnelheid diep onder de 60 fps.

09. Exporteergeluiden

Als u een Flash Game-geluidseffecten in een .fla-bestand hebt, is het exporteren van ze van GUI niet mogelijk (althans niet in Adobe Animate CC 2017) vanwege het ontbreken van menu-opties die dit doel dienen. Maar er is een andere oplossing - een speciaal script dat precies dat doet:

 Functie NormalizeFiliëName (naam) {
  // Converteert een Camelcase-naam naar de naam van Snake_ Case
  Naam retourneren.Replace (/ ([A-Z]) / g, '_ $ 1'). Vervang (/ ^ _ /, ''). ToLowerCase ();
​
Functie DisplayPath (pad) {
  // maakt het bestandspad leesbaarder
  Retourneer UNESCAPE (PATCH) .EPLAD ('Bestand: ///', '') .Replace ('|', ':');
​
fl.outputpanel.clear ();
if (fl.getdocumentdom (). Bibliotheek.getselectionsitems (). Lengte & GT; 0)
  // krijg alleen geselecteerde items
  Var-bibliotheek = fl.getdocumentdom (). Bibliotheek.GetSeSedIdensMems ();
anders
  // pak alle items
  varbibliotheek = fl.getdocumentdom (). Bibliotheek.items;
// Vraag de gebruiker voor de directory van de exportbestemming
Var root = fl.braweforfolderurl ('Selecteer een map.');
var-fouten = 0;
voor (var i = 0; i & lt; bibliotheek.lengte; i ++) {
  Var Item = Library [I];
  if (item.itemtype! == 'geluid')
  doorgaan met;
  Var pad = root + '/';
  if (item.Origalcompressionype === 'rauw')
  PATH + = NIMALIZEFILENAME (item.name.split ('.') 
) + '.wav';
  anders
  PATH + = NIMALIZEFILENAME (ITEM.NAME);
  varucces = item.xporttofile (pad);
  Als (! succes)
  Fouten + = 1;
  fl.trace (dispathad (pad) + ':' + (succes? 'OK': 'Fout'));
​
fl.trace (fouten + 'fout (en)'); 

Hoe het script te gebruiken om geluidsbestanden te exporteren:

1. Sla de bovenstaande code op als een .jsfl-bestand op uw computer.
2. Open een .fla-bestand met Adobe Animate.
3. Selecteer opdrachten & GT; Voer opdracht uit het hoofdmenu en selecteer het script in de dialoog die wordt geopend.
4. Nu verschijnt een ander dialoogbestand voor het selecteren van de directory van de exportbestemming.

Het is klaar! U moet nu WAV-bestanden in de opgegeven map hebben. Wat er nog over is om ze te converteren naar, bijvoorbeeld MP3, OGG of AAC. (Als u game-bestanden hebt om veilig te blijven, upgrade om fatsoenlijk cloud opslag ​

10. Hoe gebruik ik MP3's

Het goede oude MP3-indeling is terug, omdat sommige patenten zijn verlopen en nu elke browser kan decoderen en spelen MP3's. Dit maakt ontwikkeling een beetje eenvoudiger, want ten slotte is het niet nodig om twee afzonderlijke audioformaten te bereiden. Eerder heb je bijvoorbeeld OGG- en AAC-bestanden nodig, terwijl nu MP3 volstaat.

Desalniettemin zijn er twee belangrijke dingen die u moet onthouden over MP3:

• MP3's moeten na het laden decoderen, wat tijdrovend kan zijn, vooral op mobiele apparaten. Als u een pauze ziet nadat al uw activa zijn geladen, dan betekent dit waarschijnlijk dat MP3's worden gedecodeerd
• Gaply Playing Looped MP3's is een beetje problematisch. De oplossing is om MP3LOOP te gebruiken, Lees meer in dit artikel gepost door de Compu-fase.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 277 van Creative Web Design Magazine Web Designer. Koop nummer 277 hier of Abonneer u hier op Web Designer ​

Gerelateerde artikelen:

• 5 casual spellen voor ontwerpers
• Bouw je eigen WebGL Physics-spel
• Begrijp de importpijpleiding van de eenheid