Mayan aarre -nettiarpa testaa uusimpien HTML-teknologioiden rajoja

Jouni Airaksinen

Mistä on hyvät pelit tehty? Helppo on vastata, että tottakai hyvästä visuaalisesta ilmeestä, äänimaailmasta ja pelattavuudesta. Kuulostavat helpoilta, mutta näiden asioiden yhteen sovittaminen on tekijöiden ammattitaidon mittari. Mutta mitä kaikkea sitten matkan varrella tulee ottaa huomioon? Päätimmekin avata hiukan Veikkaukselle suunnitellun Mayan aarre -nettiarvan suunnittelu- ja tuotantoprosessia, jotta näette, mitä kaikkia vaiheita matkassa oli!

SC5:n tiimiimme kuuluivat koodari ja graafisesta ulkoasusta vastaava designeri. Äänituotanto ulkoistettiin loistavaksi havaitulle kumppanillemme Tempo Musicille.

Olimme jo toimittaneet Veikkaukselle aikaisemmin HTML-pohjaisen Flaxi-nettiarvan. Tähän oltiin tyytyväisiä, koska sama peli toimi yhtenä toteutuksena suoraan eri laitteissa. Aikaisemmin, jos peli oli tehty esimerkiksi Flash-tekniikalla (joka ei toimi lainkaan mm. Applen mobiililaitteilla), on jouduttu tekemään erillinen mobiiliversio. Tämän asiakkaamme ongelman SC5 onkin pyrkinyt ratkaisemaan. Yksi peli, monta alustaa.

mayanaarre_smaller

Mobiililaitteet nykypäivänä ovat erittäin tehokkaita ja selaimet kehittyneitä. Tämä on entistä tärkeämpi sektori myös Veikkauksen nettiarvoille, sillä ne avaavat mahdollisuuksia uudenlaisiin elämyksiin, jollaisia perinteiset raaputettavat paperiarvat eivät voi tarjota.

KONSEPTISTA PELIKSI

Tällä kertaa meitä pyydettiin ideoimaan mitä kuviobingo voisi olla. Klassinen kuviobingo on bingon muoto, jossa voitto syntyy ruudukolta suorien linjojen muodostamisen sijaan erilaisen kuvion perusteella. Tähän haasteeseen vastasimme kahdella konseptilla, joista toinen oli lähempänä klassista kuviobingoa ja toisessa kuviot oli ruudukon sijaan jaettu palapelimaisiin osiin. Molemmat konseptit miellyttivät asiakasta ideoina ja niistä jälkimmäinen, Mayan aarre, toteutettiin ensimmäiseksi.

desktop-start

Eri laitteille mukautuvuus ei ole uutta verkkosivuille, mutta suunnitellessa kävi selväksi, että perinteinen HTML-pohjainen ratkaisu ei voi tarjota riittävää alustaa nopeille ja visuaalisille animaatioille. Ratkaisuksi päädyttiin käyttämään Canvas/WebGL-tekniikka, jolloin pelin tuottaminen lähentelee jo perinteistä pelituotantoa.

Valinnassa oli toki riskejä; Riittääkö mobiililaitteiden suorituskyky? Tiimin kompetenssi on kohdallaan, mutta tekniikka on uusi tiimille. Välillä täytyy uskaltaa, jotta voidaan rikkoa rajoja ja oppia. Äänipuolen ongelmista varoiteltiin jo Flaxin kokemuksien perusteella, ja nyt oli tavoitteet vielä korkeammalla. Mitäpä muuta sitä voi tiimi toivoa, kuin mielenkiintoisia haasteita?

LUODAAN JÄNNITYSTÄ

Nettiarvat ovat itsessään mielenkiintoisia tapauksia, koska ne ovat käytännössä pelejä, joissa pelaaja paljastaa arvotun lopputuloksen, mutta pelaajalla on mahdollisuus päättää kuinka lopputulokseen päädytään. Kuten tavallisissa paperiarvoissa, voitot ovat ennalta arvottuja ja raaputuspinnan alla olevaan ei voi vaikuttaa – raaputti arvan miten päin tahansa.

Lisäksi voitonjaon ja todennäköisyyksien tiedoista käy selväksi, että voitot eivät oikeasti vastaa todellista satunnaisuutta esimerkiksi yksinkertaisessa arvassa, jossa etsitään kolmea samaa kuviota tai voittosummaa. Eri yhdistelmiä ei vain ole riittävästi. Kyse onkin siis jännityksen ja viihteen luomisesta mahdollista voittoa kohden. Toki satunnaisuus pyritään luomaan sellaiseksi, että se olisi mahdollisimman todellinen.

Bingossa jännitys löytyy kuvion täyttymisestä ennen kuin numerot loppuvat, joten tätä elementtiä korostetaan satunnaisuuden lisäksi. Veikkauksen suunnittelijoilla on pitkä kokemus siitä, millaiset pelit ovat viihdyttäviä ja nettiarvoissa on hyvät mahdollisuudet kokeilla myös sellaista mitä ei ennen ole tehty. Tulevaisuus nettiarvoissa on erittäin mielenkiintoinen niin tekijöille kuin pelaajillekin. Tekijän kannalta kiinnostavaa on juurikin tuoda pelin kulkuun logiikkaa, joilla pelillistää perinteisesti suoraviivaisina ajateltuja arpoja. Keinoja tähän on muutama.

ipad-water1

Yksi keino on tuoda pelin etenemiseen elementtejä, joilla pelin edistyminen vaatii oivaltamista. Toinen on luoda pelin eteneminen sellaiseksi, että pelaaja päättää polut joita kuljetaan, mutta päämäärä johon päädytään on lopulta sama. Päämäärä tässä tapauksessa tarkoittaa abstraktisti millainen arvan voitto on, eikä välttämättä yhtä ja samaa tiettyä tilannetta. Mayan aarre -nettiarvassa keskityttiin enemmän teknisiin haasteisiin joilla etsittiin balanssi visuaalisuuden ja suorituskyvyn välillä.

HTML TEKNISENÄ ALUSTANA

Tällä hetkellä Canvas/WebGL-tekniikkaan on olemassa toteuttamista helpottavia kirjastoja ja testailujen jälkeen valittiin Phaser, joka pohjautuu tehokkaaseen PIXI.js kirjastoon. Yhdessä ne piilottavat monta selainriippuvaa ongelmaa yhdeksi rajapinnaksi ja Phaser-kirjasto tarjoaa lisäksi pelikehitykseen soveltuvan hyvän pohjan. Toki kaikkea ei kirjastotkaan tee, joten näiden ympärille luotiin koodipohja, joka tukee adaptiivista ja responsiivista elementtien sijoittelua pienellä vaivalla. Canvas-pohjainen pelihän ei käytä lainkaan HTML- ja CSS-yhdistelmää, jolla tuollaisen toteuttaminen olisi arkipäivää.

Tällä kertaa ongelmaan riitti yksinkertainen ratkaisu, jossa elementeille voitiin määritellä prosentuaaliset kohdistukset absoluuttisten koordinaattien sijaan. Lisäksi tarvittiin CSS:n tyyppinen @media querya vastaava toiminnallisuus. Koska kaikki tapahtuu ohjelmallisesti, voidaan näiden ehtojen päättely toteuttaa huomattavasti tarkemmin, jolloin elementeille voidaan myös määritellä relatiivisia skaalausparameterejä riippuen ruudun koosta ja muodosta. Näillä ratkaisuilla peli vaikuttaa aivan kuin se olisi suunniteltu käytettävän laitteen ruudun koolle, vaikkei sitä olisi välttämättä koskaan sillä testattu.

 

RESPONSIIVISTA NÄYTÖNTARKKUUTTA

mayanaarre-2_smallerNäytöntarkkuus haluttiin myös ottaa huomioon, koska korkean tarkkuuden näytöt ovat yleistymässä nopeasti ja uusista mobiililaitteista sellaiset löytyvät lähes poikkeuksetta. Näin saadaan pienellä puhelinruudulla näkyvät tekstit ja symbolit selkeiksi ja parannetaan käytettävyyttä. Lisäksi näitä tarkkoja näyttöjä on monissa kannettavissa tietokoneissa.

Tarkassa näytössä ei sinänsä ole mitään uutta mullistavaa, mutta ongelma on ensinnäkin piirtämiseen vaadittava prosessoriteho. Toisekseen ei ole järkevää ladata käyttäjän laitteelle tarkkoja kuvia, ellei laite edes kykene kaikkea tarkkuutta näyttämään. Tähän ongelmaa on vasta ruvettu kiinnittämään enemmän huomiota HTML-kehityksessä. Varsinkin mobiilissa laitteiden prosessori- ja tiedonsiirtonopeudet ovat erittäin kriittiset, joten tähän tarvittiin muutamia ratkaisuja.

Ratkaisussa peli pyrkii valitsemaan millainen näytön tarkkuus laitteella on mahdollinen. Mahdollinen tarkkuus ei olekaan enää vain näytön tarkkuus sellaisenaan, vaan siinä huomioidaan laitteen suorituskyky, jotta pelin ruudunpäivityksen nopeus pysyy pelattavana. Valitettavasti tämä ei ole kovin yksinkertaista, jos se halutaan mahdollisimman automaattiseksi. Melko hyvä ratkaisu on laitteen käyttöjärjestelmän version ja näytön todellisen tarkkuuden mukaan päättelemällä.

SUORITUSKYKY SYYNISSÄ

iphone6-start1 iphone6-jungle1

Android laitteilla suorituskykyyn vaikuttaa huomattavasti myös käytettävä selain, sillä uusimmalla Chrome-seilamella vanha laitekin saattaa olla huomattavasti nopeampi. Android 4.3 versioista lähtien oletusselain onkin Chrome, mutta kannattaa tarkistaa onko versio uusin.

Applen laitteilla ongelma on päinvaistainen. Selainympäristö on liiankin samanlainen. Laitteiden ominaisuuksista voidaan päätellä jotain, mutta kaikki retina-näytölliset iPadit näkyvät web-ohjelmille täysin samanlaisina. Laiteversioiden tehoero on kuitenkin huikea, eikä tätä voida ottaa helposti huomioon. Kalliin uuden laitteen ostaja ei siis saa täyttä hyötyä laitteestaan.

Ladattavien tiedostojen määrä on hyvä rajoittaa erityisesti tiedonsiirron, mutta kuvatiedostoissa myös WebGL:n GPU läheisyyden vuoksi. WebGL:ssä pienemmällä tekstuurikuvien määrällä saadaan parempi suorituskyky ja muistin määrä on myös rajattu. Perinteisen pelikehityksen puolella tähän on olemassa ratkaisu, jossa yksittäiset kuvat koostetaan yhteen kuvatiedostoon eräänlaisena palapelinä. Meidän tapauksessa käytettiin TexturePacker sovellusta automatisoimaan tämä työ. Tätä tekniikkaa voisikin myös soveltaa enemmän HTML-pohjaisilla sivustoilla.

YHTEEN JA RISTIIN

Äänitiedostojen koostamista varten on olemassa audiosprite-tekniikka. Tässä useat äänitiedostot yhdistetään yhdeksi isoksi äänitiedostoksi, josta toistetaan tarpeen mukaan vain tietty kohta. Tekniikka toimii erittäin hyvin Webaudio API:n kanssa ja on myös automatisoitavissa äänitiedostojen eri pakkausmuotojen luomisen yhteyteen. Pääosin Phaser-kirjasto ratkaisi hyvin Flaxi-nettiarvan kanssa olleita ääniongelmia.

Äänituotanto onnistui loistavasti. Palaset saatiin kohdalleen ja äänet miksattua muutaman kierroksen jälkeen. Kumppanimme pohti alkuun kokemuksensa perusteella saadaanko taustamusiikkeja toistumaan saumattomasti, mutta tähän löytyi ratkaisu yksinkertaisesti ristiinhäivytyksellä ja taidokkaasti tehty audiotyö on arvassa kuultavissa.

TWILIGHT ZONE

Mayan aarre -nettiarpa oli loistava audiovisuaalinen peliprojekti testaamaan sitä, missä raja menee uusimpien HTML teknologioiden osalta ja kuinka pitkälle rajaa voidaan venyttää. Tulevaisuudessa voitaneen siis nähdä vielä vaikuttavampia projekteja, joissa raaputusarvan ja pelin raja hämärtyy entisestään.

 

 

Veikkaus: http://www.veikkaus.fi/

Tempo Music: http://www.tempomusic.fi/

Phaser: http://phaser.io

 

 

Read more about our solutions Check out open positions

Blog Posts