Muistatko Flashin? Kymmenen vuotta sitten melkein jokainen selainpeli tarvitsi sen. Adobe lopetti Flash Playerin tuen vuoden 2020 lopussa, ja selaimet heittivät lisäosan pois. Pelit eivät silti kadonneet mihinkään. Ne vain muuttivat tekniikkaan, joka on jo valmiina jokaisessa selaimessa: HTML5:een, JavaScriptiin ja WebGL:ään.
Katso vaikka nettikasinoita. Esimerkiksi lucky casino pyörii suoraan puhelimen selaimessa: kolikkopelit, jättipotit, jopa pöytäpelit oikeiden jakajien kanssa. Mitään sovellusta ei ladata. Avaat sivun, peli latautuu samaan välilehteen, ja siinä se. Kulissien takana tapahtuu kuitenkin aika paljon ennen kuin ensimmäinen rulla lähtee pyörimään.
Kolme kerrosta yhdessä välilehdessä
Selainpelissä on yleensä kolme osaa, ja jokaisella on oma hommansa.
HTML5 antaa pelille paikan
HTML5 tuo sivulle canvasin. Se on käytännössä tyhjä piirtoalue, johon peli piirtää kaiken, mitä näet. Valikot, napit ja tekstit voi tehdä tavallisella HTML:llä ja CSS:llä. Hyöty? Ne skaalautuvat ruudun mukaan, ruudunlukuohjelma osaa lukea ne, ja ne voi kääntää toiselle kielelle koskematta pelin grafiikkaan.
JavaScript pitää pelin käynnissä
JavaScript on pelin aivot. Se huomaa kosketukset ja klikkaukset, laskee animaatiot ja päättää, mitä ruudulle piirretään seuraavaksi. Ajoituksesta huolehtii selaimen funktio requestAnimationFrame, joka tahdistaa piirtämisen näytön virkistystaajuuteen, yleensä 60 kertaa sekunnissa. Kun välilehti jää taustalle, selain hidastaa tahtia. Akku kiittää.
WebGL siirtää piirtämisen näytönohjaimelle
WebGL on selaimen rajapinta, joka pohjautuu grafiikkastandardiin OpenGL ES. Versio 1.0 nojaa OpenGL ES:n versioon 2.0 ja WebGL 2.0 versioon 3.0. Mitä tapahtuisi ilman sitä? Suoritin joutuisi laskemaan jokaisen kuvan itse, ja raskaammat animaatiot alkaisivat nykiä, puhelimessa varsinkin.
Mitä näytönohjain tekee
Näytönohjaimen vahvuus on se, että se tekee paljon asioita yhtä aikaa. Se käsittelee tuhansia kuvapisteitä kerralla pienillä ohjelmilla, joita kutsutaan varjostimiksi. Ne kirjoitetaan GLSL:llä, omalla varjostinkielellään. Kärkipistevarjostin laskee, mihin kohtaan ruutua kukin muoto osuu. Pikselivarjostin päättää, minkä värinen kukin piste on.
Kolikkopelissä tämän näkee heti. Symbolit hehkuvat, pyörivissä rullissa on liikesumeutta ja voittorivin ympärillä lentää kipinöitä. Flashin aikaan tällaiset efektit söivät koneen tehot. Näytönohjaimelle ne ovat kevyttä työtä.
Harva kehittäjä kirjoittaa WebGL:ää käsin. Kaksiulotteisissa peleissä suosittu kirjasto on PixiJS, joka piirtää WebGL:llä ja vaihtaa tarvittaessa canvasin omaan piirtotapaan, jos laite ei tue näytönohjainta. Phaser taas on kokonainen pelimoottori, joka hoitaa grafiikan lisäksi fysiikan, äänet ja ohjauksen. Kolmiulotteisissa peleissä käytetään esimerkiksi Three.js:ää tai Babylon.js:ää, ja Unitylla tehdyn pelin voi viedä selaimeen WebGL:n kautta.
Lataus ratkaisee ensivaikutelman
Selainpelillä on vihollinen, jota sovelluksella ei ole: kärsimätön pelaaja. Jos ruudulla ei tapahdu mitään muutamaan sekuntiin, välilehti sulkeutuu. Sovellus on jo puhelimessa valmiina, mutta selainpeli haetaan verkosta joka kerta, ellei selain ole tallentanut sitä välimuistiin.
Siksi lataus tehdään paloissa. Ensin kevyt latausruutu, sitten pelin ydin ja vasta viimeisenä raskaat äänet ja bonuskierrosten grafiikat. Kuvat pakataan usein yhdeksi isoksi tekstuurikartaksi. Miksi? Yksi pyyntö on nopeampi kuin kymmenen, ja näytönohjain säästyy turhalta tekstuurien vaihtelulta. Entä tiedostomuoto? Nykyään usein WebP tai AVIF. Ne ovat kevyempiä kuin vanhat PNG:t ja JPEG:t.
Entä äänet? Niille on oma rajapinta, Web Audio API. Selaimet eivät anna sivun soittaa ääntä ennen kuin käyttäjä on koskenut siihen, joten moni peli pyytää ensin napautusta. Vasta sitten musiikki alkaa.
Raskaampaan laskentaan selaimissa on WebAssembly. Se ajaa käännettyä koodia lähes tavallisen ohjelman nopeudella, ja esimerkiksi Unityn selainversiot käyttävät sitä. Kehittäjä voi siis kirjoittaa pelin C#:lla tai C++:lla ja pyörittää sitä silti selaimessa.
Missä pelin tulos syntyy
Tässä kohtaa kasinopelit eroavat tavallisista selainpeleistä. Kolikkopelin tulosta ei arvota selaimessa. Kun painat pyöräytä, selain lähettää pyynnön palvelimelle. Siellä satunnaislukugeneraattori päättää tuloksen, palvelin lähettää sen takaisin, ja selain vain näyttää animaation.
Miksi näin? Jos tulos laskettaisiin omalla laitteellasi, koodia voisi peukaloida. Kun päätös tehdään palvelimella, rullien pyöriminen ja kaikki efektit ovat pelkkää esitystä. Myös pelin teoreettinen palautusprosentti asuu palvelimen logiikassa eikä grafiikassa. Hidas puhelin ja nopea pöytäkone pelaavat siis täsmälleen samoilla mahdollisuuksilla.
Pöytäpeleissä oikea jakaja näkyy videovirtana studiosta. Selain piirtää kuvan päälle panostusnapit, pelimerkit ja tulokset HTML:llä tai WebGL:llä. Yhteys palvelimeen pidetään auki WebSocketilla, jotta panokset ja tulokset kulkevat molempiin suuntiin pienellä viiveellä.
Haluatko pidemmän kaaren mekaanisista koneista nykypäivään? Lue juttu kolikkopelien kehityksestä. Selaintekniikka on siinä tarinassa uusin luku.
Sama peli puhelimessa ja tietokoneella
Sama koodi pyörii sekä tietokoneella että puhelimessa, mutta ilmaiseksi se ei onnistu. Peli tarkistaa laitteen pikselitiheyden ja piirtää canvasin sen mukaan. Muuten grafiikka näyttäisi suttuiselta tarkalla puhelinnäytöllä. Kun käännät puhelimen, peli asettelee rullat ja napit uudelleen.
Puhelimen näytönohjain on heikompi kuin pöytäkoneen, joten moni peli tehdään kahdella laatutasolla. Kevyemmässä on vähemmän hiukkasia ja pienemmät tekstuurit. Akkukin pitää muistaa. Jatkuva piirtäminen 60 kertaa sekunnissa lämmittää puhelinta, joten monet pelit hidastavat piirtämistä, kun rullat seisovat.
Testaamiseen menee siksi paljon aikaa. Sama koodi voi käyttäytyä eri tavalla uudessa iPhonessa, halvassa puhelimessa, jossa on Android, ja vanhassa läppärissä. Kehittäjät ajavat peliä kymmenillä laitteilla ja seuraavat kuvanopeutta, muistia ja latausaikaa ennen julkaisua.
Myös selaimen versio vaikuttaa. WebGL 2.0 toimii nykyisissä Chromen, Firefoxin, Edgen ja Safarin versioissa. Vanha selain voi pudottaa pelin hitaampaan piirtotapaan tai estää latauksen kokonaan. Yle on koonnut ohjeet siihen, miten tarkistat, onko nettiselaimesi päivitetty. Sama kannattaa tarkistaa puhelimesta.
Välimuisti nopeuttaa seuraavaa käyntiä
Ensimmäinen lataus on aina se raskain. Kun palaat samaan peliin, selain voi hakea suuren osan tiedostoista omasta välimuististaan. Tätä ohjataan service workerilla, joka on selaimen taustalla pyörivä pieni skripti. Se voi tallentaa pelin grafiikat, äänet ja koodin laitteelle, jolloin seuraava käynti on paljon nopeampi.
Sama tekniikka on progressiivisten verkkosovellusten pohjalla. Voit lisätä sivun puhelimen kotinäytölle, ja se aukeaa omaan ikkunaansa ilman osoiteriviä. Näyttää sovellukselta, vaikka mitään ei ole asennettu sovelluskaupasta.
Välimuistissa on toki kääntöpuolensa. Kun peli päivittyy, vanha versio voi jäädä laitteelle kummittelemaan. Siksi tiedostojen nimiin lisätään usein versionumero, joka pakottaa selaimen hakemaan uuden tiedoston heti julkaisun jälkeen.
Salattu yhteys ja eristetty koodi
Rahapeleissä suojattu yhteys on itsestäänselvyys. Selaimen ja palvelimen väliset viestit kulkevat HTTPS:n yli salattuina. WebSocketin liikenne myös. Osoiterivin pieni lukko kertoo, että salaus on päällä. Lisäksi jokainen sivusto pyörii selaimessa omassa hiekkalaatikossaan. Pelin koodi ei siis pääse kurkkimaan muihin välilehtiin tai laitteen tiedostoihin.
Mitä WebGL:n jälkeen tulee
WebGL:n rinnalle on tullut WebGPU. Se on uudempi rajapinta, jolla kehittäjä pääsee näytönohjaimeen käsiksi suoremmin. Chrome otti sen käyttöön versiossa 113 vuonna 2023, ja Firefox ja Safari ovat tulleet perässä. WebGPU:lla voi myös laskea muuta kuin grafiikkaa, mikä avaa ovia esimerkiksi monimutkaisemmille fysiikkamalleille. Siirtymän voi tehdä vähitellen, koska selain kertoo, kumpaa rajapintaa laite tukee.
Kasinopeleissä muutos etenee hitaasti. Syy on käytännöllinen. Kaksiulotteisten rullien pyörittämiseen WebGL riittää mainiosti, ja se toimii lähes missä tahansa laitteessa. Jos peli ei käynnisty mummon vanhalla puhelimella, uusi efekti ei paljon lohduta. Kolmiulotteiset pelit ja raskaat efektit ovatkin se paikka, missä WebGPU:n hyödyt näkyvät ensin.
