Muunna Flash-pelit HTML5

Salama on hitaasti luopumassa Adoben hyväksi HTML5 ja JavaScript; virallisen lopun elämän asetetaan vuodelle 2020. Ja siellä tämä artikkeli tulee kätevä.

• Uudistaa 2004 Flash verkkosivuilla 2018

Alla kuvatut vinkit tarkoituksena on auttaa HTML5 pelin kehittäjät välttämään yleisiä virheitä, kun muunnetaan Flash-pelejä JavaScript, sekä tehdä koko kehitysprosessi mennä mahdollisimman sujuvasti. Kaikki mitä tarvitset on perustiedot JavaScript, WebGL ja Phaser puitteissa.

Vaihtaminen pelisuunnittelu SWF JavaScriptiä voi tuottaa parempaa käyttäjäkokemus , Mikä puolestaan ​​antaa sille modernin ilmeen. Mutta miten se tehdään? Tarvitsetko oma JavaScript pelin muuntimen päästä eroon tästä vanhentunutta tekniikkaa? No, Flash HTML5 muuntaminen voi olla helppo nakki - tässä mitä kokenut Javascript pelikehittäjä on sanottavaa asiasta.

Haluavat pitää suunnitteluprosessisi yksinkertainen? A Verkkosivuston rakentaja ja oikea sivujen ylläpito tarjoaja voi pitää sen sellaisena.

01. Paranna HTML5 pelikokemusta

Muuntaminen pelin toiselle alustalle on erinomainen tilaisuus parantaa, vahvistetaan ohjelman kysymyksiä ja lisätä yleisön. Alla on muutamia asioita, jotka voidaan helposti tehdä ja ovat harkitsemisen arvoinen:

• Tukevat mobiililaitteet
  Muuntaminen Flashilta JavaScript mahdollistaa saavuttaa laajempi yleisö - käyttäjät mobiililaitteiden tukea kosketusnäyttö valvontaa täytyy yleensä toteuttaa peliin. Onneksi sekä Android- ja iOS-laitteilla nyt myös tukea WebGL, joten 30 tai 60 FPS tekee yleensä voidaan helposti saavuttaa. Monissa tapauksissa 60 FPS ei aiheuta ongelmia, mikä vain parantaa ajan, kuten mobiililaitteisiin tullut yhä performant.
• tehokkuuden parantaminen
  Kun se tulee vertaamalla ActionScript ja JavaScript, jälkimmäinen on nopeampi. Muuta kuin, että muuntamalla peli on hyvä tilaisuus palata algoritmeja pelissä koodin. JavaScript pelin kehittäminen voi optimoida niitä tai kokonaan nauhat käyttämätön koodi on jäljellä alkuperäisen kehittäjille.
• Bugien ja tehdä parannuksia pelin
  Ottaa uusia kehittäjiä tutkii pelin lähdekoodiin voi auttaa korjata tunnettuja vikoja tai löytää uusia ja hyvin harvinaiset. Tämä tekisi pelaa peliä vähemmän ärsyttävää pelaajille, mikä tekisi niistä enemmän aikaa sivuston ja kannustaa heitä kokeilla muita pelejä.
• Lisääminen Web-analytiikka
  Lisäksi seurata liikennettä, Web Analytics voidaan käyttää myös kerätä tietoa siitä, miten pelaajat käyttäytyvät pelin ja missä ne jumiin pelin aikana.
• lisääminen lokalisointi
  Tämä lisäisi yleisön ja on tärkeää lapsille muista maista pelaamisen peli. Tai ehkä peli ei ole Englanti ja haluat tue kyseistä kieltä?

02. Saavutetaan 60 FPS

Kun se tulee JavaScript pelin kehittämiseen, se voi olla houkuttelevaa vipuvaikutus HTML ja CSS-pelin painikkeiden, widgetit ja muut GUI elementtejä. Neuvomme on olla varovaisia. Se counterintuitive, mutta todellisuudessa hyödyntämällä DOM elementtejä on heikommin monimutkaisten pelien ja tämä saa enemmän merkitystä mobiili. Jos haluat saavuttaa jatkuvasti 60 FPS kaikilla alustoilla, niin eroamista HTML ja CSS voi olla tarpeen.

Ei-interaktiivinen GUI elementtejä, kuten terveys baareja, ammuksia baareissa tai pisteet laskurit voidaan helposti toteuttaa Phaser käyttämällä säännöllisesti kuvia (ns Phaser.Image-luokan), hyödyntäen ".crop omaisuuden trimmaamiseen ja 'Phaser. teksti-luokan yksinkertaisiin teksteineen.

Interaktiivisia elementtejä kuten painikkeita ja valintaruudut voidaan toteuttaa käyttämällä sisäänrakennettua "Phaser.Button luokassa. Muut, monimutkaisempia elementit voivat koostua eri yksinkertaisia ​​tyyppejä, kuten ryhmät, kuvat, painikkeet ja teksteineen.

03. Ladataan muokattuja kirjasimia

Jos haluat tehdä tekstiä muokatun vektori fontti (esim TTF tai organisoidun), sinun täytyy varmistaa, että fontti on jo ladattu selaimen ennen tekee mitä tahansa tekstiä. Phaser v2.6 ei tarjoa ratkaisua tähän tarkoitukseen, mutta toinen kirjasto voi käyttää - Web Font Loader .

Olettaen, että olet fonttitiedostoon ja sisältää Web Font Loader sivusi, niin alla on yksinkertainen esimerkki siitä, miten ladata fontin. Tee yksinkertainen CSS-tiedosto, joka ladataan Web Font Loader (et tarvitse sisällyttää sen HTML):

 @ fontti-face {
  // Tämä nimi käytätte JS
  font-family: 'ammuskelua';
  // URL fonttitiedosto voi olla suhteellinen tai absoluuttinen
  src: url ( '../ fontit / gunplay.ttf ') muodossa (' truetype');
  fontti-paino: 400;
} 

Nyt määritellä globaali muuttuja nimeltä WebFontConfig. Jotain niin yksinkertaista kuin tämä on yleensä riittävä:

 var WebFontConfig = {
  'Luokkiin': väärä,
  'Timeout': 0,
  'Aktiivinen': toiminto () {
  // fontti on ladattu onnistuneesti ...
  },
  'mukautettu': {
  "Perheiden: [ 'ammuskelua'],
  // URL aiemmin mainittu CSS
  "URL-osoitteet: [ 'tyylit / fonts.css']
  }
}; 

Muista laittaa koodia 'aktiivinen' soittopyynnön yllä. Ja se on siinä!

04. Tallenna peli

Nyt olemme keskellä pisteen meidän Flash JavaScript muuntaminen - On aika huolehtia shadereita. Sitkeästi tallentaa paikallista dataa ActionScript voisitte käyttää "SharedObject luokassa. JavaScript, täydellinen korvautuminen on localStoragea API , Mikä mahdollistaa tallentamisen jousille myöhemminkin, elossa sivujen uudelleenlataamisista.

Tietojen tallentaminen on hyvin yksinkertainen:

 var kehitys = 15;
Localstorage.SETITEM ("mygame.progress", edistys); 

Huomaa, että yllä olevassa esimerkissä Eteneminen muuttuja, joka on numero, muunnetaan merkkijono.

Lastaus on yksinkertainen liikaa, mutta muista, että haettu arvot ovat nauhojen tai nolla, jos niitä ei ole olemassa.

 var kehitys = parseInt (localStorage.getItem ( 'myGame.progress')) || 0; 

Täällä olemme siitä, että paluu arvo on numero. Jos se ei ole, niin 0 osoitetaan sille Eteneminen muuttuja.

Voit myös tallentaa ja hakea monimutkaisempia rakenteita, esimerkiksi JSON:

 var tilastot = { 'tavoitteet': 13, 'voittoa': 7, 'tappiot': 3, 'kiinnittää': 1
};
localStorage.setItem (myGame.stats ", JSON.stringify (tilastot));
...
Var Tilastot = JSON.PARSE (Localstorage.getitem ('mygame.stats') || {}; 

On joitakin tapauksia, joissa 'localStoragea' objekti ei ole käytettävissä. Esimerkiksi käytettäessä file: // protokollan tai kun sivu ladataan yksityisessä ikkunassa. Voit käyttää 'yrittää saalis' toteamus varmistaa koodin molemmat jatkaa työskentelyä ja käyttöä oletusarvot, jotka on esitetty alla olevassa esimerkissä:

 try {
    var kehitys = localStorage.getItem ( 'myGame.progress');
} Saalis (lukuun ottamatta) {
  // localStoragea ole käytettävissä, käytä oletusarvot
} 

Toinen asia on muistaa, että tallennetut tiedot tallennetaan verkkotunnusta kohden, ei URL-osoitetta kohden. Joten jos on olemassa vaara, että monet pelit ovat isännöi yhden verkkotunnuksen, niin se on parempi käyttää etuliitettä (namespace) tallennettaessa. Yllä olevassa esimerkissä, 'myGame.' on etuliite ja haluat yleensä korvata sen pelin.

Jos peli on upotettu iframe, niin localStorage ei jatkuu iOS. Tällöin sinun pitäisi tallentaa tietoja vanhemman iframe sijaan.

05. Oletus fragmentti Shader

Kun Phaser ja PixiJS renderöimiseen sprite, ne käyttävät yksinkertaista sisäinen fragmentti shader. Sillä ei ole monia ominaisuuksia, koska se on räätälöity nopeutta. Voit kuitenkin korvata shader asiakkaan tarpeisiin. Esimerkiksi voit hyödyntää sen tarkastaa-ylitys tai tukea enemmän ominaisuuksia tekee. Alla on esimerkki siitä, miten toimittaa oman oletuksena fragmentti shader ja Phaser v2.

 toiminto esikuormituksen () {
  this.load.shader (filename.frag ', 'shaders / filename.frag');
}
toiminto luoda () {
  var näytin = this.renderer;
  var erä = renderer.spriteBatch;
  batch.defaultShader =
  uusi pixi.abstractfilter (this.cache.gethader ('filename.frag'));
  batch.setContext (renderer.gl);
} 

06. Muutos sävytysmenetelmässä

Custom oletuksena Shader voidaan korvata oletuksena tapoja sävyttää vuonna Phaser ja PixiJS. Sävytystä Phaser ja PixiJS toimii kertomalla tekstuuri pikseliä tietyn värin. Kertominen aina tummentaa värejä, joka ilmeisesti ei ole ongelma; se on yksinkertaisesti erilainen kuin Flash sävytystä. Yhdelle pelimme tarvitsimme toteuttamaan sävytys samanlainen Flash ja päätti, että Omien ensisijaisten shader voitaisiin käyttää. Alla on esimerkki tällaisesta fragmentti Shader:

// Erityinen sävy variantti, samanlainen Flash sävytystä joka lisää
// väriin ja ei moninkertaistuvat. Negatiivinen jonka väri
// on toimitettava tämän Shader toimisi oikein, eli asettaa
// sprite.tint 0 kääntyä koko Sprite valkoiseksi.
tarkkuus lowp float;
vaihtelevia vec2 vTextureCoord;
vaihtelevia vec4 vColor;
yhtenäinen sampler2D uSampler;
void main (void) {
  vec4 f = texture2D (uSampler, vTextureCoord);
  float = puristin (vColor.a, 0,00001, 1,0);
  gl_fragcolor.rgb = f.rgb * vcolor.a + puristin (1.0 - vcolor.rgb / a, 0,0, 1,0) * vcolor.a * f.a;
  gl_FragColor.a = f.a * vColor.a;
} 

Tämän Shader keventää pikseliä lisäämällä emästä värin värisävy yksi. Jotta tämä onnistuisi, sinun täytyy toimittaa negatiivit värin haluat. Siksi saadakseen valkoinen, sinun on asetettava:

 sprite.tint = 0x000000; // Tämä värejä Sprite valkoiseksi
Sprite.tint = 0x00ffff; // Tämä antaa punainen 

07. Tarkista-ylitys

Vaihtaminen oletuksena shader voi myös panostettava apua virheenkorjaus. Ohessa on selittänyt, kuinka-ylitys voidaan havaita sellaisella shader.

Overdrawing tapahtuu, kun monet tai kaikki pikseleitä ruudulla on suoritettu useita kertoja. Esimerkiksi monet esineet ottaen samaan paikkaan ja saa luovuttaa toistensa päälle. Kuinka monta kuvapistettä GPU voi tehdä sekunnissa kuvataan täyttösuhteeseen. Modernin työpöydän GPU on liiallinen täytön hinnan tavallista 2D tarkoituksiin, mutta mobiili niistä ovat paljon hitaampia.

On yksinkertainen tapa selvittää, kuinka monta kertaa kukin pikselin ruudulla kirjoitetaan korvaamalla oletusarvoisesti globaali fragmentti shader vuonna PixiJS ja Phaser tässä yksi:

 void main (void) {
  gl_FragColor.rgb + = 1,0 / 7,0;
} 

Tämä shader keventää pikseleitä, joita käsitellään. Määrä 7.0 kertoo, kuinka monta kirjoitusta tarvitaan puolestaan ​​pikseliä valkoisia; voit virittää tämän numeron mieleisekseen. Toisin sanoen, kevyempi pikseliä ruudulla kirjoitettiin useita kertoja, ja valkoinen pikseliä kirjoitettiin ainakin seitsemän kertaa.

Tämä shader auttaa myös löytää sekä näkymättömiä objekteja, jotka jostain syystä ovat vielä suoritettu, ja sprite, joilla liiallinen läpinäkyvät alueilla ympäri olemassa ja niihin on riisuttu (GPU vielä käsitellä läpinäkyvät pikselit pintakuvioinnit).

08. Miksi fysiikka moottorit ovat ystäviäsi

Fysiikka moottori on middleware, joka on vastuussa simuloidaan fysiikan laitokset (yleensä jäykän kappaleen dynamiikka) ja niiden törmäykset. Fysiikka moottorit simuloida 2D- tai 3D-tiloja, mutta ei molempia. Tyypillinen fysiikkamoottori tarjoaa:

• Vastustaa liikettä asettamalla nopeudet, kiihtyvyydet, nivelet, ja moottorit;
• Havaitaan törmäyksiä eri muoto tyyppejä;
• Laskettaessa törmäys vastauksia, eli kuinka kahden objektin pitäisi reagoida, kun he törmäävät.

On Phaser plugin, joka toimii hyvin tähän tarkoitukseen. Box2D käytetään myös Unity pelimoottori ja GameMaker Studio 2.

Vaikka fysiikka moottori nopeuttaa kehitystä, on hinta joudut maksamaan: alennettu runtime suorituskykyä. Havaitaan törmäyksiä ja lasketaan vasteet on CPU-intensiivinen tehtävä. Saatat rajoittua useita kymmeniä dynaamisia objekteja kohtauksessa matkapuhelimiin tai kasvojen suorituskyky on heikentynyt sekä vähennetään ruutunopeuksilla syvällä alle 60 FPS.

09. Vienti äänet

Jos sinulla on Flash-peli äänitehosteet sisällä FLA tiedosto ja viedä niitä GUI ei ole mahdollista (ainakaan Adobe Animoi CC 2017) puutteen Valikkovaihtoehtojen palvelevat tätä tarkoitusta. Mutta on toinenkin ratkaisu - oma skripti, joka tekee juuri sitä:

 toiminto normalizeFilename (nimi) {
  // Muuntaa CamelCase nimi snake_case nimi
  paluu name.replace (/ ([A-Z]) / G, '_ $ 1'). Vaihda (/ ^ _ /, '') .toLowerCase ();
}
toiminto displayPath (polku) {
  // Tekee tiedoston polku luettavampi
  tuotto unescape (polku) .Aseta ( 'file: ///', '') .Aseta ( '|', ':');
}
fl.outputPanel.clear ();
jos (fl.getDocumentDOM (). library.getSelectedItems (). pituus & gt; 0)
  // Hanki vain valitut kohteet
  var kirjasto = fl.getDocumentDOM (). library.getSelectedItems ();
muu
  // Saat kaikki kohteet
  var kirjasto = fl.getDocumentDOM (). library.items;
// Pyydä käyttäjä vientiä kohdehakemisto
var root = fl.browseForFolderURL ( 'Valitse kansio.');
var virheitä = 0;
ja (var i = 0; i & lt; library.length; i ++) {
  var tuote = kirjasto [i];
  jos (item.itemType! == 'ääni')
  jatkaa;
  var polku = root + '/';
  jos (item.originalCompressionType === 'RAW')
  polku + = normalizeFilename (item.name.split ( ' ') 
) +' .wav';
  muu
  polku + = normalizeFilename (item.name);
  var menestys = item.exportToFile (polku);
  if (! onnistuminen)
  virheet + = 1;
  fl.trace (displayPath (polku) + ':' + (menestys? 'OK': 'Error'));
}
fl.trace (virheet + 'virhe (t)'); 

Kuinka käyttää script viedä äänitiedostoja:

1. Tallentaaksesi koodin edellä kuin .jsfl tiedostona tietokoneelle.
2. Avaa FLA tiedosto Adobe Animate.
3. Valitse komennot & gt; Suorita komento ylävalikosta ja valitse käsikirjoituksen vuoropuhelussa avautuvassa.
4. Nyt toinen vuoropuhelu tiedosto avautuu valittaessa vientikohde hakemistoon.

Se on tehty! Sinun pitäisi nyt olla WAV-tiedostoja määritettyyn hakemistoon. Mitä voimme tehdä, on muuntaa ne esimerkiksi MP3, OGG tai AAC. (Jos peli tiedostoja säilyttääkseen, päivitä kunnollinen pilvivarasto .)

10. Miten MP3

Vanha kunnon MP3-muodossa on palannut, kuten jotkut patentit ovat rauenneet ja nyt jokainen selain pystyy purkamaan ja pelata MP3. Tämä tekee kehitys hieman helpompaa, koska lopulta ei tarvitse laatia kaksi erillistä ääniformaatteja. Jos aiemmin tarvitaan esimerkiksi, OGG ja AAC-tiedostoja, kun taas nyt MP3 riittää.

On kuitenkin olemassa kaksi tärkeää asiaa sinun täytyy muistaa MP3:

• MP3 täytyy purkaa latauksen jälkeen, joka voi olla aikaa vievää, erityisesti mobiililaitteissa. Jos näet tauon jälkeen kaikki omaisuus on ladattu, se todennäköisesti tarkoittaa, että MP3 ollaan dekoodataan
• Gaplessly pelaa silmukkaan MP3 on hieman ongelmallinen. Ratkaisu on käyttää mp3loop, lue lisää tässä artikkelissa lähettänyt Compu vaihe.

Tämä artikkeli on julkaistu alunperin kysymys 277 luovan web design -lehden Web Designer. Osta numero 277 täällä tai Tilaa Web-suunnittelija tähän .

Aiheeseen liittyvät artikkelit:

• 5 casual-pelejä suunnittelijoille
• Rakenna oma WebGL fysiikka peli
• Ymmärtää Unity hyödykkeen tuontiputkella