Flash játékok átalakítása HTML5

A villanást lassan elhagyják az Adobe által a HTML5 és a JavaScript javára; A hivatalos életét a 2020-as évre határozzák meg. Ez az, ahol ez a cikk hasznos lesz.

• REBUILD A 2004 FLASH weboldal 2018-ra

Az alábbiakban ismertetett tippek célja, hogy segítsen a HTML5 játékfejlesztőknek, elkerüljék a gyakori hibákat, amikor a flash játékokat a JavaScriptbe konvertálják, valamint az egész fejlesztési folyamat a lehető legmélyebben mozognak. Mindössze annyit kell, hogy a JavaScript, a WebGl és a Phaser keretrendszer alapvető ismerete.

A játéktervezés megváltoztatása SWF-től a JavaScript-ről jobb lehet felhasználói tapasztalat , ami viszont modern megjelenést ad. De hogyan kell csinálni? Szüksége van egy dedikált JavaScript játék-átalakítóra, hogy megszabaduljon ebből az elavult technológiából? Nos, a Flash a HTML5 konverzió lehet egy darab torta - itt van egy tapasztalt JavaScript játékfejlesztőnek az ügyről.

Szeretné megőrizni a tervezési folyamatot? A weboldal építője és a jobb web hosting A szolgáltató így tudja megtartani.

01. Javítsa a HTML5 játékélményt

A játék konvertálása egy másik platformra kiváló lehetőség, hogy javítsa, javítsa meg problémáit és növelje a közönséget. Az alábbiakban kevés dolog könnyen elvégezhető, és érdemes megfontolni:

• A mobileszközök támogatása
  A vakuból a JavaScripthez való áttérés lehetővé teszi a szélesebb közönség elérését - a mobileszközök felhasználói az érintőképernyős vezérlők támogatását általában a játékba kell végrehajtani. Szerencsére mind az Android és az iOS eszközök is támogatják a WebGL-t, így 30 vagy 60 FPS renderelés általában könnyen megvalósítható. Sok esetben 60 fps nem okoz semmilyen problémát, amely csak az idővel javul, mivel a mobileszközök egyre inkább előbb lesznek.
• A teljesítmény javítása
  Amikor az Actionscript és a JavaScript összehasonlításakor az utóbbi gyorsabb. Azon kívül, hogy a játék konvertálása jó alkalom a játékkódban használt algoritmusok újrafelhasználására. A JavaScript játékfejlesztéssel optimalizálhatja őket, vagy teljesen fel nem használt kódot, amelyet az eredeti fejlesztők hagynak.
• Hibák rögzítése és javítása a játékmenethez
  A játék forráskódjának új fejlesztők segíthetnek az ismert hibák javításában, vagy új és nagyon ritka. Ez kevésbé irritálja a játékot a játékosok számára, amelyek több időt töltenek a webhelyén, és arra ösztönzik őket, hogy kipróbálják a többi játékot.
• Webes elemzés hozzáadása
  A forgalom nyomon követése mellett a webes elemzés is felhasználható a tudás összegyűjtésére, hogy a játékosok hogyan viselkednek a játékban, és ahol a játékmenet során elakadtak.
• Lokalizáció hozzáadása
  Ez növelné a közönséget, és fontos a többi országból származó gyerekek számára. Vagy talán a játékod nem angolul, és támogatni szeretné ezt a nyelvet?

02. 60 fps elérése

Amikor a JavaScript játékfejlesztésről van szó, akkor csábító lehet, hogy kihasználja a HTML és a CSS-t a játék gombokhoz, a widgetekhez és más GUI elemekhez. Tanácsunk, hogy vigyázzunk itt. Ez ellentmondásos, de valójában a dom elemek kihasználása kevésbé előadója a komplex játékokon, és ez nagyobb jelentősége a mobilon. Ha minden platformon állandó 60 fps-t szeretne elérni, akkor szükség lehet a HTML-ről és a CSS-ről.

Nem interaktív grafikus elemek, mint például az egészségügyi bar, lőszer rudak vagy pontszám számlálók könnyen megvalósítható Phaser segítségével rendszeresen képeket (a „Phaser.Image” osztályú), kihasználva a „.crop” -nak vágás és a „Phaser. Szöveges "osztály az egyszerű szövegcímkékhez.

Az interaktív elemek, mint például a gombok és a jelölőnégyzetek a beépített "Phaser.Button" osztály használatával valósíthatók meg. Egyéb, összetettebb elemek különböző egyszerű típusokból, például csoportokból, képekből, gombokból és szöveges címkékből állhatnak.

03. Egyéni betűtípusok betöltése

Ha szöveges vektoros betűtípust (pl. TTF vagy OTF) szeretne megjeleníteni, akkor biztosítani kell, hogy a betűtípust már betöltötte a böngésző által, mielőtt bármilyen szöveget rendezne. A Phaser v2.6 nem nyújt megoldást erre a célra, de egy másik könyvtár használható - Webes betűtípus .

Feltételezve, hogy van egy betűfájlja, és tartalmazza az oldaladon lévő webes betűterelőt, majd az alábbi példa a betűtípus betöltésére. Készítsen egy egyszerű CSS-fájlt, amelyet a webes betűtípus terheli (nem kell beillesztenie a HTML-be):

 @ font-face {
  // Ez a név JS-ben fog használni
  Font-Család: "Gunplay";
  // URL a betűtípus fájlhoz, lehet relatív vagy abszolút
  SRC: URL ('../ betűtípusok / gunplay.ttf) formátum ("TrueType");
  betűtípus: 400;
} 

Most definiáljon egy WebfontConfig nevű globális változót. Valami olyan egyszerű, mint ez általában elegendő:

 var Webfontconfig = {
  "osztályok": hamis,
  "Timeout": 0,
  "Aktív": funkció () {
  // A betűtípus sikeresen betöltötte ...
  },
  'egyedi': {
  "Családok": ['Gunplay'],
  // URL a korábban említett CSS-hez
  "URL-ek": ['Styles / fonts.css']
  }
}; 

Ne feledje, hogy a kódot az "aktív" visszahívásba helyezi. És ez az!

04. Mentse el a játékot

Most a flash középpontjában vagyunk a JavaScript-átalakításhoz - itt az ideje, hogy vigyázzon az árnyékolókra. Ahhoz, hogy tartósan tárolja a helyi adatokat az Actionscript-ben, akkor a "SharedObject" osztályt használja. A JavaScript esetben az egyszerű csere a localStorage API , amely lehetővé teszi a húrok tárolását a későbbi visszakereséshez, a túlélő oldal újratöltéséhez.

Az adatok mentése nagyon egyszerű:

 VAR Progress = 15;
localstorage.setitem ("mygame.progress", előrehaladás); 

Ne feledje, hogy a fenti példában a "Progress" változó, amely egy szám, egy karakterláncra kerül átalakításra.

A betöltés is egyszerű, de ne feledje, hogy a letöltött értékek húrok vagy null, ha nem léteznek.

 VAR progress = parseint (localstorage.getitem ('mygame.progress')) || 0; 

Itt biztosítjuk, hogy a visszatérési érték egy szám. Ha nem létezik, akkor 0 lesz hozzárendelve a "Progress" változóhoz.

Bonyolultabb struktúrákat is tárolhat és letölthet, például JSON:

 Var Stats = {"Célok": 13, "nyer": 7, "veszteségek": 3, 'rajzok': 1
};
localstorage.setitem ('mygame.stats', json.stringify (stats));
...
var stats = json.parse (localstorage.getitem ('mygame.stats')) || {}; 

Vannak esetek, ha a "localStorage" objektum nem lesz elérhető. Például a fájl használata: // protokoll, vagy ha egy oldalt egy privát ablakban töltenek be. A "próbálkozás és fogás" nyilatkozat segítségével a kód továbbra is működik, és az alapértelmezett értékeket használja, amelyet az alábbi példában mutat be:

 Próbáld meg {
    var progress = localstorage.getitem ("mygame.progress");
} fogás (kivétel) {
  // localStorage Nem elérhető, használja az alapértelmezett értékeket
} 

Egy másik dolog, hogy emlékezzünk arra, hogy a tárolt adatok domainként kerülnek mentésre, nem URL-re. Tehát ha fennáll annak a veszélye, hogy sok játékot egyetlen tartományban is tárolnak, akkor jobb, ha megmenti az előtagot (névtér). A fenti példában a "MyGame". egy előtag, és általában a játék nevével kívánja helyettesíteni.

Ha a játékod beágyazódik egy iframe-be, akkor a localStorage nem fog fennmaradni az iOS-on. Ebben az esetben inkább az adatokat kell tárolni a szülő iframe helyett.

05. Alapértelmezett töredék árnyékoló

Amikor a Phaser és a Pixijs rendezi a spriteit, egy egyszerű belső fragmentum árnyékot használnak. Nincs sok funkciója, mert a sebességre szabott. Az árnyékolót azonban helyettesítheti az Ön céljára. Például kihasználhatja azt, hogy ellenőrizze a túlterhelt vagy támogatja a további funkciókat a rendereléshez. Az alábbi példa a saját alapértelmezett fragmentum árnyékolójának szállítása a Phaser V2-re.

 Funkció előterhelés () {
  this.load.shader ('filename.frag', 'shaders / filename.frag);
}
Funkció létrehozása () {
  var renderer = ez.Renderer;
  var batch = renderer.spritebeatch;
  batch.defaultshader =
  új pixi.abrectFilter (this.cache.getshader ('filename.frag));
  batch.setContext (renderer.gl);
} 

06. Választási mód megváltoztatása

Egyéni alapértelmezett árnyékoló használható az alapértelmezett színezési módszerek helyettesítésére a Phaser és a Pixijs. A Phaser és a Pixijs színezése úgy működik, hogy egy adott színnel szorozzuk meg a textúra képpontjait. A szorzás mindig sötétíti a színeket, ami nyilvánvalóan nem jelent problémát; Ez egyszerűen eltér a vaku színezésétől. Az egyik játékunknak szüksége volt arra, hogy a vakpróbáláshoz hasonlóan tegyenek, és úgy döntöttünk, hogy az egyéni alapértelmezett árnyékoló használható. Az alábbiakban egy példa egy ilyen töredék árnyékolóra:

// specifikus árnyalatváltozat, hasonlóan a flash árnyalathoz, amely hozzáadódik
// a színre, és nem szaporodik. Negatív szín
// meg kell adni az árnyékoló számára, hogy megfelelően dolgozzon, azaz beállítva
// sprite.tint 0-ra, hogy az egész spritet fehérre váltson.
Precíziós Lowp úszó;
változó vec2 vtexturecoord;
változó vec4 vcolor;
Egységes SAMPLER2D USAMPLER;
Void Main (Void) {
  Vec4 f = textúra2D (USAMPLER, VTEXTURECOORD);
  float a = bilincs (vcolor.a, 0,00001, 1.0);
  gl_fragcolor.rgb = f.RGB * vcolor.a + bilincs (1.0 - vcolor.rgb / a, 0,0, 1.0) * vcolor.a * f.a;
  gl_fragcolor.a = f.a * vcolor.a;
} 

Ez az árnyékoló megkönnyíti a pixeleket azáltal, hogy hozzáad egy alapszínt a színárnyalathoz. Ahhoz, hogy ez működjön, meg kell adnia a kívánt szín negatíváit. Ezért, annak érdekében, hogy fehér legyen, be kell állítania:

 sprite.tint = 0x000000; // ez a színek a sprite fehérre
Sprite.tint = 0x00FFFF; // ez piros 

07. Ellenőrizze a túlhajtót

Az alapértelmezett árnyékoló cseréje is kihasználható a hibakereséshez. Az alábbiakban elmagyaráztuk, hogy a túlfeszültség hogyan lehet észlelni egy ilyen árnyékolóval.

A túlterhelés akkor történik, ha a képernyőn sok vagy minden képpont többször jelenik meg. Például sok olyan tárgy, amely ugyanazt a helyet veszi, és egy másik felett. Hány képpont A GPU-t másodpercenként adhat ki töltési sebességként. A modern asztali GPU-k túlzott töltési aránya van a szokásos 2d célú, de a mobilok sokkal lassabbak.

Van egy egyszerű módja kideríteni, hogy hány alkalommal minden egyes pixel a képernyőn van írva helyett az alapértelmezett globális fragment shader a PixiJS és a Phaser ezzel egyet:

 Void Main (Void) {
  gl_fragcolor.rgb + = 1,0 / 7.0;
} 

Ez az árnyékoló megvilágítja a feldolgozott pixeleket. A 7.0-es szám azt jelzi, hogy hány írásra van szükség a pixels fehér forgatáshoz; Ezt a számot úgy foghatja, hogy tetszésed legyen. Más szóval, a képernyőn könnyebb képpontokat írtak többször, és a fehér pixeleket legalább hét alkalommal írták.

Ez az árnyékoló segít megtalálni mind a "láthatatlan" objektumokat is, amelyek valamilyen oknál fogva még mindig megjelennek, és a túlzott átlátszó területeket, amelyek túlzott átlátszó területeket kell eltávolítani (GPU-nak még mindig átlátszó képpontokat kell feldolgozni a textúrákban).

08. Miért vannak a fizikai motorok a barátaid

A fizikai motor egy middleware, amely felelős a fizikai testületek (általában merev testdinamika) és ütközéseinek szimulálásáért. A fizikai motorok szimulálják a 2D vagy 3D-s tereket, de nem mindkettő. A tipikus fizikai motor biztosítja:

• Objektummozgás sebességgel, gyorsulásokkal, ízületekkel és motorokkal történő beállításával;
• A különböző alakú típusok közötti ütközések felderítése;
• Az ütközési válaszok kiszámítása, azaz, hogy a két tárgynak hogyan reagáljon, amikor ütköznek.

Van egy phaser plugin, amely jól működik erre a célra. A Box2d az Unity Game Engine és a Gamemaker Studio 2-ben is használható.

Míg a fizikai motor felgyorsítja a fejlesztést, van egy ár, amit kell fizetni: csökkentett futásidejű teljesítmény. Az ütközések felderítése és a válaszok kiszámítása CPU-intenzív feladat. Lehet, hogy több tucat dinamikus objektumra korlátozódik a mobiltelefonokon vagy az arc degradált teljesítményű jelenetben, valamint a 60 fps alatti csökkentett képsebességet.

09. Export hangok

Ha van egy Flash játék hanghatások belsejében egy Fla fájlt, majd exportálja őket a GUI-nem lehetséges (legalábbis nem az Adobe Animate CC 2017) hiánya miatt menüpontok ezt a célt szolgáló. De van egy másik megoldás - egy dedikált szkript, amely csak azt jelenti:

 Funkció NormalizeFilename (név) {
  // Camelcase nevet átalakít a Snake_Case névre
  Visszatérés neve.replace (/ ([A-Z]) / g, '_ $ 1'). Cserélje ki (/ ^ _ /, '') .tolowercase ();
}
Funkció DisplayPath (Path) {
  // a fájl elérési útját olvashatóbbá teszi
  Vissza az UNESCAPE (PATH) .REACEPLEPLEPLEPLEPLEPLEPLE ('FILE: ////', '') .REAPEPLEPLEPLEPLEPLEPLE ('|', ':');
}
fl.outputpanel.clear ();
ha (fl.getdocumentdom (). Library.getselectedItems (). Hossz és gt; 0)
  // csak kiválasztott elemeket kap
  var könyvtár = fl.getdocumentom (). Library.getselectedItems ();
más
  // kap minden elemet
  var könyvtár = fl.getdocument dom (). Library.Items;
// kéri a felhasználót az export célkönyvtárhoz
var root = fl.browseforfolderurl ('Válasszon ki egy mappát.');
var hibák = 0;
mert (var i = 0; i & lt; könyvtár.Length, i ++) {
  var item = könyvtár [I];
  ha (item.itemtype! == hang ")
  folytatni;
  VAR PATH = ROOT + '/';
  ha (item.originalcompressionType === 'nyers ")
  elérési út + = normalizeFilename (item.name.split ('.') 
) + '.wav';
  más
  elérési út + = normalizeFilename (item.name);
  var success = item.exporttofile (pálya);
  Ha (! siker)
  hibák + = 1;
  fl.trace (DisplayPath (Path) + ':' + (siker? OK ':' Hiba '));
}
fl.trace (hibák + 'hiba (ek)'); 

A szkript használata a hangfájlok exportálásához:

1. Mentse el a fenti kódot a .jsfl fájlként a számítógépen.
2. Nyissa meg a .fla fájlt az Adobe Animálással.
3. Válassza a Parancsok & GT; Futtassa a parancsot a felső menüből, és válassza ki a megnyíló párbeszéd parancsát.
4. Most egy másik párbeszédfájl jelenik meg az export célkönyvtár kiválasztásához.

Kész! Most már WAV fájlokat kell tartalmaznia a megadott könyvtárban. Mi maradt, hogy átalakítsa őket, például MP3, OGG vagy AAC. (Ha van játékfájlja, hogy biztonságban maradjon, frissítsen tisztességesnek felhő tároló .)

10. Hogyan kell használni az MP3-eket

A jó régi mp3 formátum visszatért, mivel néhány szabadalom lejárt, és most minden böngésző dekódolhat és lejátszhat mp3-eket. Ez egy kicsit könnyebbé teszi a fejlődést, mivel végül nincs szükség két különálló hangformátum készítésére. Korábban volt szüksége, például OGG és AAC fájlok, míg most az MP3 elegendő.

Mindazonáltal két fontos dolog van meg kell emlékezni az MP3-ról:

• Az MP3-nak meg kell dekódolni a betöltés után, amely időigényes lehet, különösen a mobileszközökön. Ha az összes eszköz betöltése után szünetet lát, akkor valószínűleg azt jelenti, hogy az MP3-eket dekódolják
• A hurkolt mp3-k gaplessly játszik, egy kicsit problémás. A megoldás az MP3LOOP használatára szolgál, További információ ebben a cikkben Posted by Compu fázis.

Ezt a cikket eredetileg a Creative Web Design magazin webdesigner 277-es kiadásában tették közzé. Vásároljon 277 kérdést vagy Iratkozzon fel itt a webdesignerre .

Kapcsolódó cikkek:

• 5 alkalmi játék a tervezők számára
• Építsen saját WebGL fizikai játékot
• Értsd meg az UNity Asset import csővezetéket