Vuoden 2020 viimeisenä päivänä Adobe lopetti Flash Playerin tuen, ja samalla päättyi aikakausi, jolloin lähes jokainen selainpeli, mainosbanneri ja interaktiivinen esittely vaati erillisen liitännäisen. Siirtymä ei tapahtunut yhdessä yössä. Kehittäjät olivat jo vuosia rakentaneet uusia projekteja avoimien verkkostandardien varaan, ja Flashin poistuminen vain sinetöi muutoksen.
Mitä tilalle tuli
Nykyinen selainpeli koostuu yleensä muutamasta peruspalikasta:
- Canvas-elementti piirtää kaksiulotteista grafiikkaa suoraan selaimessa ilman liitännäisiä.
- WebGL tuo näytönohjaimen tehot käyttöön, mikä mahdollistaa sujuvat 3D-efektit ja partikkelit.
- Web Audio API hoitaa äänet tarkasti ajoitettuina, mikä on peleissä tärkeämpää kuin moni arvaa.
- requestAnimationFrame synkronoi piirtämisen näytön virkistystaajuuteen ja säästää akkua, kun välilehti ei ole näkyvissä.
Responsiivisuus on pelinkin perusvaatimus
Flash-aikaan peli tehtiin yleensä kiinteään kokoon, esimerkiksi 800 × 600 pikseliin. Nyt saman koodin pitää toimia leveällä näytöllä, tabletilla ja pystyasennossa olevalla puhelimella. Käytännössä tämä tarkoittaa skaalautuvaa käyttöliittymää, kosketukselle mitoitettuja painikkeita ja grafiikkaa, joka ladataan laitteen tarkkuuden mukaan. Hyvä nyrkkisääntö on suunnitella ensin pienimmälle näytölle ja laajentaa vasta sitten.
Latausaika ratkaisee
Pelin assetit eli kuvat, äänet ja animaatiot ovat usein raskain osa kokonaisuutta. Spritesheetit, modernit kuvaformaatit kuten WebP ja laiska lataus auttavat saamaan ensimmäisen näkymän ruudulle nopeasti. Mobiiliverkossa jokainen säästetty megatavu tuntuu käyttäjälle.
Toinen usein unohdettu asia on saavutettavuus. Selainpelissäkin painikkeilla pitää olla riittävä kontrasti, näppäimistöllä ohjaamisen pitää onnistua, ja äänet kannattaa voida mykistää yhdellä painalluksella. Jos pelissä on vilkkuvia efektejä, niiden voimakkuutta on hyvä pystyä säätämään. Selaimet tarjoavat myös prefers-reduced-motion-mediakyselyn, jolla animaatioita voi keventää käyttäjille, jotka ovat pyytäneet vähemmän liikettä käyttöjärjestelmän asetuksissa. Pieni lisätyö parantaa kokemusta kaikille.
Esimerkki arjesta
HTML5:n läpimurron näkee hyvin rahapelialalla, jossa koko pelikirjasto siirtyi muutamassa vuodessa liitännäisistä avoimiin standardeihin. Esimerkiksi kolikkopelit ilman rekisteröintiä toimivat nykyään samalla koodilla niin tietokoneella kuin puhelimella, ilman sovelluslatauksia. Kehittäjän näkökulmasta ne ovat kiinnostavia tapaustutkimuksia animaatioiden ja äänen ajoituksesta; pelaajan kannattaa muistaa, että ne on tarkoitettu täysi-ikäisille viihteeksi, jolle asetetaan oma budjetti.
Opittavaa omiin projekteihin
Jos suunnittelet omaa selainpeliä tai interaktiivista elementtiä, aloita kevyestä kehyksestä, mittaa suorituskykyä aidoilla laitteilla ja testaa erityisesti edullisia Android-puhelimia. Juuri niissä näkyy, onko koodi oikeasti tehokasta vai pelkästään tehokkaan koneen varassa.