Seitsemäs tunti: Tasohyppelypelin täydentäminen

Pareton-periaatteen mukaan ensimmäinen 80 % työstä saadaan tehdyksi 20 %:ssa ajasta. Viimeistelyyn, eli viimeiseen 20 %:in, kuluu 80 % työajasta. Tämä on suurinpiirtein totta myös tässä pelissä. Hahmon liikuttelun ja perustoimintojen tekemiseen ei mene paljoakaan aikaa, mutta visuaalinen hiominen on erittäin hidasta homma.

Tässä käyn läpi muutaman esimerkkinä tekemäni idean. Oppilailla oli vapaat kädet tehdä mitä halusivat  ja suurin osa tunnistani kuluikin visioiden suunnitteluapuna tai vikojen syiden etsimiseen. Hour of Code-sivustolta löysin hyvän periaatteen. Kohdatessaan koodiin liittyvän ongelman he kysyvät ensin kolmelta oppilastoveriltaan ja vasta sen jälkeen opettajalta. Tällä tavoin oppilaat joutuvat myös tulkkaamaan kavereidensa tekemiä koodeja, joka on yllättävän haastavaa isolle osalle. Ilmeisesti oman skriptin logiikka on itsestään selvä, koska sen on itse päätellyt ja tehnyt, mutta hivenen toisenlainen logiikka ei meinaa heti aueta ja nopea turhautuminen vie innon auttamiselta. Tämä tapa olisi pitänyt ottaa käyttöön heti aluksi.

Sitten esimerkkeihin.

Teen neljänteen kenttään kaksi liekkiä, joihin osuessaan kissa palaa ja siirtyy aloituskohtaan. Animoin liekit siten, että ne suurenevat ja pienenevät tasaisin väliajoin.

Kun esiintymislava vaihtuu neljänneksi, skripti lähettää "neljäs kenttä"-viestin. Viestin avulla piilotetaan edellisen postin lopussa liikkuneet palkit ja aloitetaan liekkien skriptit.

Teen uuden hahmon. Piirrän liekin, kopioin sen ja muutan sitä hivenen. Nämä kaksi ovat nyt pienen liekin animoitu versio. Kopioin liekin taas ja piirrän siitä reilusti suuremman version

Tarkoituksena on, että liekki roihuaa pienenä ja välillä leimahtaa isommaksi. Kissa voi hypätä liekin yli vain silloin, kun liekki on pieni.

 

Koska liekki on hahmo, sitä ohjataan sen omilla skripteillä. Haluan liekkien näkyvän vasta neljännessä kentässä, joten ne varmuuden vuoksi piilotetaan vihreää lippua painettaessa. Kun kenttä vaihtuu neljänneksi, esiintymislava lähettää viestin "neljäs kenttä". Tämä aloittaa liekkien animointiskriptin. Ensiksi liekki muutetaan näkyväksi. Isoa ja pientä liekkiä on kaksi erilaista. Pieni liekki vaihtaa asua viisi kertaa, jonka jälkeen iso liekki vaihtaa asua kaksi kertaa. Pieni liekki on siis näkyvissä kaksi ja puoli kertaa niin kauan kuin iso liekki.

Haluan kissan kupsahtavan vähän eri tavoin liekistä. Haluan sen muuttuvan mustaksi ja pomppaavan korkealle. Ensin teen kopion kissasta ja maalaan sen oranssit kohdat mustiksi.

Teen uuden skriptin liekkikuolemaa varten. Olen käyttänyt punaista väriä vain liekissä, joten käytän sitä aloittamaan tämän skriptin. Tuohon voisi laittaa myös "Koskettaako hahmoa X tai koskettaako hahmoa Y", jolloin X ja Y olisivat liekkihahmojen nimet.

Kun hahmo koskettaa punaista väriä se vaihtaa asua mustaksi kissaksi ja pomppaa ylöspäin. Lisäsin perään sekunnin odotuksen, jottei hahmo pysty ohjaamaan lennon aikana. Tämän jälkeen hahmo siirretään aloituskohtaan ja asuste vaihdetaan takaisin kissan asuksi.

Seuraavaksi tehdään laskuri kissan elämille. Alussa kissalla on viisi elämää, jotka vähenevät yhdellä jokaisen kuoleman jälkeen. Teen uuden hahmon, joka toimii laskurina. Piirrän sille kuusi asua, jotka ovat jäljellä olevien elämien määrä tukkimiehen kirjoituksella ja viimeisenä "Peli loppui"-teksti.

Joka kerta, kun kissa osuu liekkiin tai putoaa alas, skripti lähettää viestin "Kuolema".

Jäljellä olevien elämien skripti alkaa "Kuolema"-signaalista. Kun "Kuolema" vastaanotetaan, laskuri vaihtaa seuraavan asusteen. Ohjelma pysäyttää kaiken, kun saavutetaan kuudes asu eli "Peli loppui".

Oppilaat lisäsivät kenttiinsä kolikoita ja rinnakkaisia bonuskenttiä. Pienet ES-tölkit kasvattivat kissaa tai kasvattivat sen nopeutta. Hauskin hahmo oli Scratch-kissa, joka oli puettu Super Marion vaatteisiin ja viiksiin. Aika oli rajoittavana tekijänä, sillä kenttiä tarvittaisiin reilusti yli kymmenen, jotta peli pysyisi mielenkiintoisena. Nyt nopeimmat saivat aikaiseksi vähän yli kymmenen kenttää, jotka pelaa läpi parissa minuutissa. Idea kävi kuitenkin kaikille selväksi ja tekeminen oli hauskaa. Ohjelmointiin tuli kerrankin paljon toistoa, kun samoja hahmoja pystyi käyttämään useissa eri kentissä ja vain niiden ohjaus ja sijoitus vaihtelivat kentän mukaan.

Jälkikäteen ajateltuna tämä olisi ollut tehokkaampi harjoitus esim. neljän hengen ryhmien ryhmätyöskentelynä. Kaikki olisivat ensin yhdessä suunnitelleet juonen, sitten massatuottaneet kenttiä ja vihollisia itsenäisesti. Tällöin valmiin tuotoksen pelattavuus olisi ollut huomattavasti parempi. No, ehkäpä ensi kerralla sitten.

Kuudes tunti: Tasohyppelypelin aloittaminen

Tasohyppelypelit, kuten Super Mario, ovat jonkun verran pois muodista, mutta jokainen oppilas kuitenkin tuntee genren. Teemme ensimmäisellä kaksoistunnilla perusteet liikkumiselle, putoamiselle ja kentän vaihtumiselle. Viikon päästä lisätään kenttiä, taustakuvia, kävelyanimaatioita ja muuta sen sellaista.

Härkää sarvista ja aloittamaan.

Aloitan kentästä. Koska kyseessä on tasohyppely, piirrän kissalle ... tasoja. :) Ideana on kävellä ja hyppiä kentän vasemmasta laidasta oikeaan, jolloin kissa pääsee seuraavaan kenttään.

Kissa on perusasetuksilla jättimäinen tällaiseen peliin, joten pienennän sitä reippaasti

 Nyt kissa on suurinpiirtein oikeassa mittakaavassa kenttään nähden.

Sitten ryhdytään rakentamaan kissan liikuttelua. Oikea-vasen -liikuttelu tehdään samalla tavalla kuin rallipelissäkin. 

Haluan kissan putoavan alaspäin, joten pystysuuntaisen liikkeen aikaansaamiseksi teen uuden muuttujan.

"y vel" tulee sanoista Y velocity, eli pystysuuntainen nopeus. Ohjelmaan rakennetaan "painovoima", joka muuttaa pystysuuntaista nopeutta koko ajan. Kissa siis kiihtyy alaspäin mennessään. Kissan nopeus siis. ;) Skriptiä luetaan jatkuvasti ja joka kerta alaspäin suuntautuva nopeus kasvaa 0,3 askelta (toisin sanoen ylöspäin suuntautuva nopeus pienenee 0,3:lla askeleella eli se kasvaa -0,3 askelta). Ohjelma muuttaa hahmon y-sijaintia muuttujan y vel verran.

Jos nuolta ylöspäin painetaan, ylöspäin suuntautuva nopeus muuttuu 5:ksi. Vaikka se muuttuu 5:ksi, se lähtee pienenemään heti ja hetken päästä kissa alkaa taas pudota. Nuoli ylös saa siis aikaan hypyn.

 Kissa putoaa nyt kaikkien palkkien läpi, joten hahmolle pitää kertoa jotenkin minkä päällä voi seistä. Eli kissan koskettaessa mustaa väriä (tasoissa) putoaminen pysäytetään.

Kissan ylöspäin suuntautuvassa liikkeessä on kyse ennemminkin lentämisestä kuin hypystä, sillä kissa suuntaa kulkunsa ylöspäin riippumatta siitä, onko sillä jotain mistä ponnistaa vauhtia. Lisätään hyppykomentoon ja-lause, johon laitetaan hypyn onnistumisen ehdoksi mustan värin koskettaminen ja nuolinäppäimen painaminen.

Kissan pitäisi ilmestyä takaisin aloituskohtaan, kun se on pudonnut rotkoon. Muuten kenttää ei voida kokeilla uudelleen. Tämä tehdään jos-lauseella, joka aktivoituu hahmon pudotessa tietyn korkeuden alapuolelle. Kun y-sijainti on haluttua pienempi, lause nollaa nopeuden ja siirtää hahmon aloituskohtaan.

Tämänhetkisellä koodilla kissa kulkee tasojen läpi. Tämä ei ole toivottavaa ja se pitää saada estettyä jotenkin. Tämän voisi tehdä muuttujallakin, mutta tässä esimerkissä käytetään negaatiota eli ei-lausetta. 

Tasojen alareunat maalattiin ruskeaksi ja liikuttelun ehtoihin laitetaan ja-lauseen sisään nuolinäppäimen painaminen ja ei-ruskean koskettaminen. Tämä tarkoittaa siis sitä, ettei hahmoa saa liikutettua sivusuunnassa mikäli se koskettaa ruskeaa väriä.

Nyt kaikki alkaa olla hienosti. Kentän oikeasta reunasta pitäisi päästä seuraavaan kenttään, joten tehdään sinne samantyyppinen rajaus kuin y-suunnallekin. Jos hahmo menee tiettyä x-koordinaattia pidemmälle, se siirretään aloituskohtaan. Samalla skripti lähettää "Seuraava kenttä"-viestin.

Esiintymislavan täytyy olla ensimmäinen kenttä, kun peli aloitetaan. Kun sitten vastaanotetaan "Seuraava kenttä"-viesti, vaihdetaan tausta seuraavaksi.

Taustakuvissa pitäisi aloituskohdan olla aina samalla korkeudella. Tällöin ei tarvitse säätää putoamiskuolemalle ja seuraavan kentän aloitukselle mitään taustakohtaisia palautuskoordinaatteja. Tämä onnistuu helpoimmin kopioimalla tausta ja pyyhkimällä kaikki muu aloitustasoa lukuunottamatta pois.

Kopioinnin jälkeinen muokkaus

 Ja sitä seuraava muokkaus. Tähän teen liikkuvia tasoja, joiden päälle pitää pystyä hyppäämään.

Tässä harmaat tasot liikkuvat ylös- ja alaspäin eri tahdeissa.

"Odota kunnes"- palikka toimii jos-lauseen tavoin, mutta pysäyttää koodin siihen asti, että ehto täytetään. Laitan esiintymislavan ilmoittamaan viestillä, kun se vaihtaa esiintymislavaksi kolmosen. Tällä viestillä  saan aloitettua kenttiin kuuluvat animaatiot ja voin ohjata samoja hahmoja eri tavoin eri kentissä.

Harmaat tasot ovat kaksi erillistä hahmoa, joille teen omat skriptit. Kun peli aloitetaan, ne piilotetaan. En halua, että ne tulevat näkyviin ennen kolmatta kenttää, joten ne näytetään vasta kun "Kolmas kenttä"-viesti vastaanotetaan. Haluan hahmojen menevän vain ylös ja alas, joten laitan niille sellaiset skriptit. Toinen aloittaa menemällä ylöspäin, toinen alaspäin.

Tätä samaa jatketaan seuraavalla kerralla, lisään tunnin myöhemmin.

Neljäs tunti, autopelin animointi ja parantelu

Tällä tunnilla on tarkoitus animoida auton liike ja "ulosajo", tehdä parhaan kierrosajan näyttävä "tulostaulu", sekä viimeistellä pelin ulkonäkö ja pelattavuus.

Paras kierrosaika

Tehdään uusi muuttuja "paras kierrosaika". Kirjoitin sen pienellä, koska kun hahmon nimi on "Punaisen", tulee tulostauluun "Punaisen paras kierrosaika". Tämä muuttuja on vain tälle hahmolle, joten samaa skriptiä voidaan käyttää myös "Sinisen"-hahmolle.

Aloitan skriptin vihreällä lipulla. Asetetaan muuttuja riittävän korkeaksi, jotta se on helppo alittaa. Seuraavaksi nollataan ajastin ja aloitetaan ikuisesti ehtoa tarkistava silmukka. Silmukan sisään laitan jos-lauseen, johon laitetaan tuntoaisti-kategoriasta valkoisen värin tunnistava ehto. Nyt jos-lauseen sisältö luetaan vain, kun hahmo koskettaa valkoista väriä.

 Lisään jos-lauseen sisään jos-muuten-lauseen. Tämä suorittaa jos-osuuden silloin kun jos-lauseen ehto täyttyy, muulloin suoritetaan "muuten"-lause.

 Tutustuimme "Toiminnot"-kategoriaan. Sen sisältä löytyvät yleisimmät laskutoimitukset, kahden muuttujan vertailu ja loogiset lauseet.

 Koska haluan verrata kierrosaikoja keskenään, otan käyttöön "pienempi kuin"-lauseen. Lause vedetään jos-lauseen ehdoksi.

 Tuntoaisti-kategoriasta löytyy ajastin, joka voidaan vetää lauseen vasemmalle puolelle.

 Oikealle puolelle vedän muuttujat-kategoriasta "paras kierrosaika"muuttujan. Muuttujalle annettiin arvoksi 30 tämän skriptin alussa, joten nyt hahmon ylittäessä maaliviivan jos-lause vertaa ajastimen lukemaa alussa annettuun arvoon 30.

 Jos ajastimen lukema on pienempi, "paras kierrosaika"-muuttuja asetetaan ajastimen arvoon. Seuraavalla kierroksella ajastimen lukemaa verrataan tähän edelliseen aikaan.

 Jos ajastimen arvo ei olekaan pienempi, skripti suorittaa muuten-lauseen. Nyt hahmo sanoo "Ei suju!", mikäli ei onnistu alittamaan edellistä parasta aikaa.

 Lisätään vielä ensimmäisen jos-lauseen loppuun ajastimen nollaus, jotta ohjelma ryhtyy kellottamaan uutta kierrosta aina kun maaliviiva on ohitettu. Jos tähän ei lisätä viivettä parhaaksi kierrosajaksi tulee 0 sekuntia, sillä ohjelma ehtii tarkistaa jos-lauseen monta kertaa auton ylittäessä maaliviivan. Lisäämällä sekunnin viive ajastimen nollauksen jälkeen, auto ylittää viivan ja uusi "paras kierrosaika" on oikeasti paras kierrosaika.

 Olisi hölmöä, jos ohjelma väittäisi aluksi parhaaksi kierrosajaksi 30 sekuntia. Ongelma poistuu lisäämällä "Piilota muuttuja"-palikka alkuun ja "Näytä muuttuja" maaliviivan ylittämisen jälkeen. Nyt parasta kierrosaikaa ei näytetä ennen kuin sellainen on ajettu.

 Tulostaulun voi laittaa haluamalleen kohdalle ruutua.

 Jotta paras aika saadaan näkyviin myös siniselle hahmolle, se voidaan vetää punaiselta hahmolta siniselle.

"paras kierrosaika"-muuttuja täytyy käydä klikkaamassa aktiiviseksi Muuttujat-kategoriasta.

Animoinnit

Animoidaan ensin auto. Tehdään alkuperäisestä autosta pari-kolme erilaista versiota, jossa liikettä voi yrittää saada näkyväksi liikuttamalla koria renkaiden suhteen ja laittamalla pieniä pakokaasutuprahduksia auton takaosaan. Muokkaan ensimmäistä autohahmoa hieman.

 Pieni pakokaasutuprahdus.

 Tämän jälkeen kopioin ensimmäisen auton ja teen siihen lisää muokkauksia. Toistan työn ja teen kolmannenkin asusteen. Renkaat liikkuvat hieman ja pakoputkesta tulee mustia pisteitä.

 Aloitan uuden skriptin, joka ohjaa vain liikkettä. Kun vihreää lippua klikataan, asuste vaihtuu ensimmäiseen asusteeseen ja skripti odottaa 0,1 sekuntia.

 Kopioin palikat ja vaihdan kopioituihin palikoihin asuste1-kohdan asuste2:ksi ja asuste3:ksi

 Animoidaan myös törmäykset. Aiemmin on tehty alla oleva skripti, joka kadottaa hahmon näkyvistä, kun se osuu vihreälle pohjalle. Jos autolle halutaan tehdä törmäysanimaatio, se täytyy laittaa ehdolliseksi muun animoinnin mukaan. Muuten ohjelma yrittää pyörittää kahta animaatiota päällekkäin. Siirretään alla olevasta skriptistä jos-lause liikeanimaation mukaan.

 Nyt liikeanimaatiossa on mukana ehdollinen "Jos hahmo osuu vihreään"-kohta.

 Siirretään alussa ollut ollut "Mene kohtaan"-palikka liikkumiseen tarkoitetun skriptin alkuun.

Kopioin taas auton ja teen neljä erilaista räjähdys/palamiskuvaa

 Nyt kun asusteet ovat valmiit, lisään ne "Jos koskettaa vihreää"-ehtolauseen sisään. Asu vaihtuu 0,2 sekunnin välein, kunnes auto katoaa näkyvistä 0,2 sekunnin ajaksi ja ilmestyy lähtöpisteeseen. Asuste pitää vaihtaa takaisin asuste1:ksi ennen siirtoa, muuten asu vaihtuu vasta kun hahmo on näkyvissä. Suurempi asuste lähtöpaikalla ylittää helposti lähtöviivan, jolloin parhaat ajat ja kierrosluvut menevät miten sattuu.

  Nyt ohjelmassa on virhe. Kun auto törmää seinään, sen pitäisi palaa paikallaan ja siirtyä sitten alkupisteeseen. Tällaisenaan ohjelma antaa ohjata palavaa autoa vielä eteenpäin. Lisätään liike-skriptiin ehtolause, joka pysäyttää auton sekunniksi sen osuessa vihreälle alustalle.

 Koska olen laiska, en halua animoida sinistä autoa erikseen. Poistan vanhan sinisen auton kopioin punaisen auton skripteineen päivineen, nimeän kopion "Sinisen"-nimiseksi ja vaihdan ohjaamiseen tarvittavat nappulat.

 Jokainen asuste pitää maalata uudelleen erikseen, mutta tästä ei ole juurikaan vaivaa.

 Yksi oppilaista ehdotti lähtölaskennan rakentamista. Tämä tehdään omana hahmonaan, jolle tehdään neljä erilaista asustetta.

 Asuste vaihtuu 0,2 sekunnin (vaihdettiin myöhemmin 0,5 sekuntiin) välein sen jälkeen, kun vihreää lippua on painettu. Nyt tulee kuitenkin ongelma, kun ajastimet ja kellot lähtevä myös käyntiin vihreästä lipusta. Asia korjataan Ohjaus-kategoriasta löytyvällä "Lähetä"-palikalla. Tämä lähettää signaalin, jolla voi aloittaa muita skriptejä. Tämä ei suinkaan ole pakollinen tässä, mutta harjoituksen vuoksi käytämme tätä. Eli: Lähetyshahmo laskee 3, 2, 1, AJA! ja skripti lähettää Aja-signaalin.

 Vaihdoin kaikkiin muihin skripteihin aloituspalikaksi "Kun vastaanotan 'Aja'"

 Aloitushahmon asusteet vaihtuivat vähän liian nopeasti 0,2 sekunnin odotusajalla, joten se nostettiin 0,5 sekuntiin. Nyt vihreää lippua painamalla ohjelma näyttää hahmon, vaihtaa asustetta 0,5 sekunnin välein, lähettää Aja-signaalin viimeisen asusteen vaihduttua, näyttää tuota asustetta 0,5 sekuntia ja menee piiloon.

 Tähän tuli taas ideoita oppilailta, joten nyt yritetään saada Aja!-teksti katoamaan tyylikkäästi pyörähtäen kaukaisuuteen. Ensin hahmo laitetaan normaalikokoiseksi ja osoittamaan oikeaan suuntaan. Aja!-teksti näkyy yhden sekunnin, kääntyy sen jälkeen 5 astetta myötäpäivään ja pienenee 5 askelta. Kääntöä ja pienennystä toistetaan 20 kertaa, jonka jälkeen hahmo häviää. Mikäli alkuun ei laiteta näytä-komentoa, eikä kokoa ja suuntaa oikeiksi, seuraava peli alkaa pienemmällä ja kääntyneellä hahmolla.

 Tietokoneluokassamme ei ole kaiuttimia koneissa, joten äänipuolen jätän kokonaan tyhjäksi. Jotkut oppilaat tekivät päristelyefektit mikrofonin kanssa. Itsetehdyt efektit olivat erittäin hauskan kuuloisia.

Esimerkkirallia voi käydä ihastelemassa täällä.