perjantai 13. toukokuuta 2016

Kulissien takana: Peligrafiikat ja käyttöliittymä

Pelin ilmeen ideointi

Tiimimme ensimmäinen konkreettinen peli-ideointisessio oli maaliskuun alussa. Ideoiden syntyessä mielessäni alkoi pian muototumaan kuva siitä, millaiselta pelimme näyttäisi ja minkälaisista näkymistä se koostuisi.

Jo ensimmäisissä luonnoksissa näkyy samaa ideaa kuin mitä lopulliseen peliinkin päätyi. Peli koostuu kahdesta päänäkymästä. Ensimmäinen on suuri karttanäkymä, joka kattaa koko pelimaailman (kuvan sininen kartta). Tässä kartassa on mahdollista nähdä, missä päin työkaverit liikkuvat ja missä itse sillä hetkellä sijaitsee.

Toinen näkymä eli pelin sisempi karttanäkymä vaihtelee riippuen siitä, missäpäin pelimaailmaa pelaaja kullakin hetkellä on (oranssi kartta ja verkko). Kartalla eri solmut olisivat kytköksissä toisiinsa polkujen välitysellä. Solmuja on kahdenlaisia: tyhjiä liikkumissolmuja sekä tapahtumasolmuja, jonka tapahtumat voivat vaihdella aarteen tai esineen löytämisestä minipeleihin.


Pelimme ilme lähti liikkeelle yksinkertaisista luonnoksista.

Kuten pelin demoversiosta huomaa, meille kehittyi jo melko aikaisessa vaiheessa selkeä käsitys siitä, mitä peli tulisi kattotasolla sisältämään, ja siten myös visuaalisen ilmeen ja grafiikoiden suunnittelu lähti luontevasti käyntiin.

Peligrafiikoiden tekeminen

Ensimmäinen hackathon

Lopullisten grafiikoiden toteutus aloitettiin ensimmäisen hackathon-viikonloppumme aikana. Tällöin Mikko 3D-mallinsi maailmamme suurta karttaa. Alkuperäisten suunnitelmiemme mukaan maailma säilyi jättimäisenä saarena. Saari jakautuu eri tyyppisiin alueisiin, jotka antavat luonnollista vaihtelua myös yksityiskohtaisemmille pikkukartoille, joissa tehtäviä suoritetaan.


Ensimmäinen versio pelimaailmastamme.

Toinen hackathon

Grafiikoiden työstäminen jatkui toisessa hackathonissa niin maailman kuin hahmojen osalta. Näihin aikoihin myös logomme guava sai lopullisen muotonsa. Muut grafiikat on toteutettu kaksiuloitteisesti joko vektori- tai pikseligrafiikkana. Ensimmäisenä vuorossa oli ensimmäisen pelihahmon tekeminen ja hahmon liikeratojen suunnittelu. Hain hahmojen muotoa useiden eri luonnoksien kautta, ja lopulta päädyin yksinkertaiseen ja nukkemaiseen muotoon. Hahmolla on kuitenkin selkeästi erottuvat raajat ja hiukset, mikä luo mahdollisuuksia kehittää hahmoista myöhemmin helpommin personoituja (esim. erilaiset ja eriväriset hiukset ja vaatteet).


Käyttäjämme Pekan hahmo ja hänen eri asentonsa mallinnettuna. Toteutettu vektorigrafiikkana.

Pelaajan valmistumisen jälkeen seuraava askel oli ensimmäinen yksityiskohtaisempi karttanäkymämme. Päädyin valitsemaan ensimmäisen kartan alueeksi vihreän ja vehreän alueen maailmankartalta. Suunnittelin näkymästä metsäisen, ja pelihahmomme pääsee kulkemaan siellä olevien polkujen kautta erilaisiin kiinnostaviin solmukohtiin. Jo alussa ryhmämme keskuudessa ilmeni kiinnostusta kuusikulmioihin, ja tämän vuoksi päädyin tekemään solmuistamme kuusikulmion muotosia.


Ensimmäinen pelinäkymämme.

Toiseen hackathoniin mahtui vielä pelimme ensimmäisen vihollisen tekeminen. Kävimme värikästä keskutelua mahdollisista vihollisista. Tajusimme kuitenkin jossain vaiheessa, että guava-hedelmän arkkiviholliseksi sopii parhaiten mikäpä muukaan kuin hedelmälepakko.


Guava-hedelmän ja siten kaikkien pelaajien arkkiviholliseksi sopi pelottava hedelmälepakko.

Lisäksi viikonlopun aikana pelimaailman kartta sai lopullisen muotonsa. Lopulliseen karttaan lisättiin "toon shade" eli kolmiuloitteinen malli muutettiin ulkoasultaan hieman lähemmäksi kaksiuloitteista tyyliä, jotta grafiikat sointuivat mukavasti yhteen.


Pelimme lopullisesta maailmankartasta tuli tyyliltään kaksiuloitteisempi, vaikka toteutus olikin kolmiuloitteinen.

Grafiikoiden jatkaminen

Myöhemmin peliin tarvittiin myös toinen pelaaja yhteistyöominaisuuksien demoamiseksi. Pekan kaveriksi tehtiin Matti, joka erottui Pekasta hiusten ja vaatteiden värin avulla.


GuavaManian toinen pelaaja, Matti.

Suunnittelimme GuavaManiaan myös minipelejä, joista ensimmäisestä valmistui myös demoversio. Minipelissä pelaaja pakenee pelin hirviötä, hedelmälepakkoa, ja yrittää samalla napata itselleen voimaguavan. Guavasta pelaaja saa voimaa voittaa hedelmälepakko. Tällä taistelutantereelle piti myös toteuttaa pelikenttä. Pelikenttä on karu hedelmälepakon asuinpaikka, jota reunustavat kalliot.


Minipelin pelikenttä. Kenttää reunustavien vuorien joukosta löytyy vuori,
jossa hurjan hedelmälepakon luola sijaitsee (kts. oikea ylänurkka).

Käyttöliittymän suunnittelu

GuavaManiassa oli pitkään kehitysvaiheessa käytössä väliaikainen käyttöliittymä, joka oli väritykseltään synkkä. Siinä löytyi kaikki oleellinen materiaali, mutta se ei vielä näyttänyt GuavaManialta.



Ensimmäinen versio käyttöliittymästä.

Lopullisen käyttöliittymän ensimmäiset luonnokset tein perinteisesti tusseja ja paperia käyttäen. Yksinkertainen käyttöliittymä oli meidän kohdallamme järkevin ratkaisu, koska se jättäisi enemmän tilaa itse pelille ja siihen tutustumiselle.


Pelin lopullisen käyttöliittymän luonnokset (yllä perusnäkymä, alla navigointi auki).

Lopullisesta käyttöliittymästä tulikin yksinkertainen ja kevyt. Navigointi ei vie yhtään tilaa näytöllä normaalisti, mutta sen saa auki näytön oikeassa ylänurkassa olevaa M-painiketta klikkaamalla. Myös väriskaala muuttui lähemmäksi Gamifying Guavasille muodostunutta ilmettä. Valkoinen tausta auttaa käyttäjää keskittämään huomion itse pelinäkymään, ja pinkki tehosteväri kiinnittää katseen sopivasti käyttöliittymän oleellisiin kohtiin eli navigoinnin painikkeeseen ja pelin nimeen.



Lopullinen käyttöliittymä, joka noudattaa Gamifying Guavasin ilmettä.

Kaikki tiimimme jäsenet ovat aktiivisia mobiililaitteiden käyttäjiä. Lisäksi mobiililaitteiden käyttö on tavallista ohjelmistoalan työntekijöiden keskuudessa. Tämän vuoksi meille oli tärkeää, että GuavaMania toimii myös mobiililaitteilla, ja sekä käyttöliittymä että koko peli on suunniteltu toimivaksi myös mobiililaitteilla ja kosketusnäytöillä.


GuavaManiaa voi käyttää myös mobiililaitteilla.

Helinä Hakala,
Gamifying Guavas

Ei kommentteja :

Lähetä kommentti