Peliohjelmointikurssin ensimmäinen askel: Whack-a-mole

Tänä syksynä aloitimme uuden mielenkiintoisen yhteistyöprojektin kuvataiteiden opettaja Jussi Kapasen kanssa: 8.lk peliohjelmointikurssi. Kurssin ideana on lähteä ideoimaan täysin uusi peli, luoda siihen tarina, pelilogiikka, grafiikat ja ohjelmoida se, kaikki tiimityönä niin kuin oikeassakin elämässä.

Ensimmäisellä kaksoistunnilla lähdimme liikkeelle niin, että muodostimme viisi devaustiimiä, jotka keksivät itselleen nimen. Jotta jokaiseen ryhmään tulisi tasaisesti koodareita, graafikoita jne. jokainen sai valita itselleen kaksi mieluisinta tehtävää, ja näin saimme jaettua porukan ryhmiin joihin jokaiseen tuli 2 koodaria, 1-2 graafikkoa ja 1 tarina/pelilogiikkasuunnittelija.

Luovan prosessin ainekset

Ennen kuin ryhmät päästettiin ideoimaan, Jussi esitteli hieman luovan prosessin taustoja, miten ideat löytyvät ja miten niiden ympärille rakennetaan kokonaisuus. Sitten keräsimme listan yksinkertaisia mutta koukuttavia pelejä, mietimme erilaisia pelikategorioita, jopa sitä miten seitsemän kuoleman syntiä liittyvät peleihin. Alustuksen jälkeen ryhmät saivat eteensä litoposterin ja tusseja ja he ryhtyivät ideoimaan omaa peliä. Ensimmäisellä kerralla ei tuntunut vielä syntyvän kovin paljoa  ideoita, mutta ryhmät oli saatu kasaan, ja jokaisella oli oma vastuualueensa.

Ensimmäisellä kerralla paperi jäi vielä aika tyhjäksi...

Koska ideointityötä tuntui hieman vaikeuttavan konkretian puute, päätimme tehdä ryhmien kanssa yhden helpon pikkupelin alusta loppuun niin, että koodarit pääsevät näkemään mitä koodaaminen on ja graafikot pääsevät käytännössä suunnittelemaan ja toteuttamaan peligrafiikkaa. Peliksi valikoitui Whack-a-mole, koska se on hyvin yksinkertainen peli, joka sallii vapausasteita grafiikan luomiseen, myyrän kun ei tarvitse olla myyrä...

Pelin koodaaminen lähti liikkeelle siitä, että suunnittelimme sen ensin yhdessä isolle valkoiselle paperille. Analysoimme mitkä asiat pelissä ovat vakioita ja mitkä muuttujia. Sitten esittelin miten käyttämämme pelimoottori toimii, ja kävimme läpi mitä funktioita (toiminnallisuuksia) pelissämme tarvitaan. Suunnittelimme myös pelin tietorakenteen paperille. Tätä "karttaa" tutkisimme sitten jokaisella koodauskerralla: mitä on jo tehty, mitä vielä puuttuu.

Tällä suunnitelmalla edettiin

Valitsin koodauskieleksi Racket-kielen, koska noin puolet kurssin koodareista oli jo koodannut Racket:illä 7. luokan matikan tunneilla ja koska se mahdollistaa grafiikoiden vaihtamisen helposti (koodi/pelilogiikka ja grafiikka ovat täysin erillään). Se mahdollistaa myös pelin muuntamisen helposti selaimella pelattavaksi versioksi (WeScheme). Harkitsin aluksi pelien tekemistä myös Scratch:illä mutta hylkäsin sen, koska siinä koodin kirjoittaminen vaatii sen, että grafiikka on jo valmiina. Lisäksi isomman pelin tekeminen Scratchillä ei houkutellut, koska kokemukseni viime vuodelta oli sellainen, että oppilaiden pelit menivät usein sellaiseen solmuun, ettei niitä pystynyt saamaan toimiviksi. Epäilen, että se johtuu osittain siitä, että siinä koodin logiikka hajoaa niin moneen pieneen osaan eri säikeisiin, jotka toimivat toisistaan riippumatta, että kokonaiskuvan saaminen koodin toiminnasta on lähes mahdotonta ja testaaminen/debuggaaminen hidasta ja hankalaa. Myös omien tietorakenteiden ja funktioiden puuttuminen vaikeuttaa monimutkaisemman  pelin tekemistä. Kolmas työkalu johon tutustuin oli MIT Appinventor mutta sen jätin pois, koska se olisi vaatinut Android puhelimia (tai emulaattoria), ja sen myötä aivan liikaa ylimääräistä säätöä, joka ei suoranaisesti liity ohjelmoinnilliseen ajatteluun tai pelin luovaan suunnitteluun.  

Koodarit työskentelivät niin, että jokainen teki omaa koodiansa, mutta tiimin sisällä vastuu oli molemmilla koodareilla yhteisesti. Eli, jos kävi niin, että toinen oli pois oppitunnilta, läsnä ollut koodari jatkoi koodia eteenpäin ja antoi sen seuraavalla kerralla koodauskaverillensa ja selitti mitä siihen oli lisätty. Ryhmät myös auttoivat toisiaan ja debuggasivat toistensa koodia. Tässä helpotti se, että koska teimme samaa peliä ryhmillä oli myös samoja ongelmia. Jokaisella kerralla alussa kertasimme suunnitelmamme kanssa mitä olimme tehneet viime viikolla, mitä pitäisi tehdä tällä tunnilla ja mitä jäi seuraavalle kerralle. 

Samalla kun teimme koodia, tutustuimme ohjelman rakennuspalikoihin: vakioihin, funktioihin ja muuttujiin, tietueisiin ja niiden kenttiin, ehtolauseeseen, hiiritapahtumiin (events) sekä testaamiseen check-expect:ien avulla. Myös boolean logiikkaa ja vertailuoperaattoreita jouduttiin käyttämään, kun koodasimme predikaattia, joka huomaa onko hiiren klikkaus osunut hahmoon vai ei. Koska meillä ei ollut tietoa tulevien "myyrien" koosta, teimme koodimme "hit-box":in sellaiseksi, että minkä tahansa kokoinen myyrän kuva toimii (säätyy kuvan koon mukaan).

Koodatessa opettelimme käyttämään myös Koodarin käsikirjaa, katsoimme sieltä mm. miten merkkijonoja käsitellään, että saimme pisteet näkymään ruudulle.  Koodaamiseen meni kolme kaksoistuntia, jonka ainaka graafikot ideoivat ja piirtelivät peligrafiikat. Neljännellä kaksoistunnilla kokoonnuimme koko ryhmä tietokoneluokkaan ja integroimme grafiikat peleihin. Monelle graafikolle ei ollut vielä selvinnyt, että kuvat piti eksportata GIMP2:sta .png muodossa, että niitä saattoi käyttää pelissä. Myös melkoinen määrä valkoista taustaa jouduttiin poistamaan pelihahmojen ympäriltä ja rajaamaan hahmojen kuvat tarkemmin, että koodiin ohjelmoitu "hit-box" toimisi oikein. Melkoisen sähellyksen jälkeen saimme kuitenkin kaikki pelit toimimaan.

Tämä harjoitus auttoi selvästi ryhmiä hahmottamaan, mitä pelin tekeminen vaatii, mitkä eri vaiheet ovat, mitä koodari tekee ja mitä graafikko tekee ja miten lopputulokseen vaaditaan jokaisen jäsenen panos.

Tämän jälkeen jatkoimme jälleen oman pelin suunnittelun kanssa koko devaustiimin voimin. Suunnittelun rinnalla porttasimme Racket - koodit WeScheme palveluun, jotta tehtyjä pelejä pääsisi pelaamaan selaimen kautta. Tässä ensimmäiset pelit!

Pelit toimivat myös iPadin kosketusnäytöllä.

Pelaa Blacker Blue - tiimin peliä 

Blacker Blue -tiimi

Pelaa Mars - tiimin peliä

Mars - tiimi

 Pelaa Arcad3 - tiimin peliä

Arcaid3 - tiimi

 Pelaa Swag Lords - tiimin peliä

Swag Lords - tiimi

Tämä on erittäin mielenkiintoinen kokeilu, jännä nähdä mitä tästä vielä syntyy! Tulen tekemään myös tutoriaalivideon pelin koodaamisesta, kunhan ehdin sinne asti...