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ä.

Kolmas tunti, autopelin aloittaminen

Tämä on ensimmäinen kaksoistunti Scratchin käyttöä. Tarkoituksena on harjoitella jos-lauseen käyttöä, tuntoaisti-kategorian käyttöä jos-lauseessa ja muuttujien tekemistä. Tämän saa tehtyä helposti esimerkiksi autopelin avulla.
Aluksi piirrettiin auto ja esiintymislava piirrettiin radaksi. Pelistä tulee todenmukaisemman näköinen, jos auto kuvataan ylhäältä päin, mutta minä piirsin sen jääräpäisesti sivulta päin.

Upea taidonnäyte, grafiikan sputnik...

Skripti rakentuu aloituspalikasta, ikuisesti-silmukasta ja neljästä jos-lauseesta. Ilman ikuisesti-silmukkaa ohjelma tarkistaa painetut nappulat vain kerran, eikä auto lähde liikkeelle laisinkaan.

Jos-lauseeseen voi liittää Tuntoaisti-kategoriasta "Onko painike **** painettu?"-palikan, jossa painettavaa nappia voi vaihtaa. Tässä tapauksessa haluan autoa ohjattavan nuolinäppäimillä, joten teen jokaiselle nuolinäppäimelle oman Jos-lauseensa. Kun nuoli ylös-näppäin painetaan, auton rintamasuunta vaihtuu ylöspäin ja auto liikkuu 10 askelta. Samanlaiset jos-lauseet rakennetaan jokaiselle nappulalle.

 Nyt autoa voi ohjata ympäri areenaa. Tiellä tai vihreällä nurmikolla ei ole eroa, vaan auto kulkee joka paikassa samalla tavalla. Tämä saadaan korjattua jos-lauseella. Tarkoituksena on, että auto nurmelle osuessaan ilmestyy pienellä viiveellä lähtöpaikalle. Alla oleva pätkä siirtää auton lähtöruutuun ja tarkistaa ikuisesti osuuko auto vihreälle. Vihreälle osuessaan auto katoaa näkyvistä, siirretään aloituskohtaan ja palautetaan näkyviin yhden sekunnin kuluttua. Kirjoitan tämän selkeyden vuoksi omaksi skriptikseen.

Jotta pelissä olisi jotain jännitystä, tehdään ohjelmaan mukaan kierroslaskuri. Kierroslaskuri on helppo tehdä muuttujien avulla. Muuttujat-kategoriasta luodaan uusi muuttuja "Kierrokset", joka laitetaan koskemaan vain nykyistä hahmoa (syy selviää myöhemmin).

Muuttujan "Kierrokset" palikat.

 Teen kierroslaskurille oman skriptinsä. Kun vihreää lippua klikataan, muuttuja "Kierrokset" asetaan nollaksi. Tämän jälkeen ketju tarkistaa ikuisesti koskeeko auto valkoista väriä. Maaliviiva on valkoinen, joten auton ylittäessä sen, muuttuja "Kierrokset" kasvaa yhdellä. Koska auto koskee maaliviivaan yli ajettaessakin jonkin aikaa, kierrosluku kasvaa useamman numeron jokaisella ylityksellä. Tämä voidaan estää laittamalla laskuriin viive, joka tässä tapauksessa on 5 sekuntia. Nyt kierrosluku voi kasvaa yhdellä lyhimmillään viiden sekunnin välein.

Jotta peliin saadaan kilpailuhenkeä, peliin voidaan laittaa mukaan ajastin. Tähän esimerkkiin laitan ajaksi 20 sekuntia. Tarkoituksena on, että aika juoksee alaspäin ja ajan loputtua auto pysähtyy. Uuden pelin voi aloittaa vihreästä lipusta. Luon esiintymislavalle oman muuttujan "Aika" ja teen skriptin, jossa vihreää lippua painettaessa muuttuja "Aika" asetetaan arvoon 20. 20 kertaa toistettava silmukka vähentää joka kerta "Aika"-muuttujasta yhden ja odottaa yhden sekunnin, jolloin silmukan suorittaminen kestää oikeasti yhden sekunnin. Kun aika päätyy nollaan, kaikki skriptit pysähtyvät ja autot jäävät paikoilleen.

Koska kyseessä on intensiivinen ja nopeatempoinen rallipeli (hehheh), ajastin voidaan laittaa laskemaan myös kymmenesosasekunteja. Tästä ei ole mitään vastaavaa hyötyä, ainoastaan pieni visuaalinen plussa ajastimen kymmenesosasekuntien näkymisestä.

Muuttujat voi vetää näkyviin haluamalleen kohdalle ruutua. Minä päädyin radan keskikohtaan, jossa ei tapahdu mitään muuta.

Jännittävä rallipeli on tuplasti jännittävämpi kahdella autolla ajettuna, joten monistin alkuperäisen auton ja muokkasin sen värin siniseksi. Ensimmäisen auton skriptin voi kopioida suoraan toiselle, kunhan muistaa muuttaa ohjaukseen käytettävät nappulat. Minä valitsin peleissä yleisesti käytössä olevat W, A, S ja D-nappulat, jotka muodostavat samanlaisen kuvion näppäimistöllä kuin nuolinäppäimetkin.

Koska muuttuja "Kierrokset" on kullekin hahmolle oma, voidaan samaa muuttujaa käyttää laskemaan kummankin auton kierrokset. Huomaathan, että autojen ikkunat ovat harmaat ja maaliviiva on valkoinen. Jos autojen ikkunat olisivat valkoiset, ne laskisivat kierroksia aina koskettaessaan toisiaan.

Pelin tätä versiota voi käydä kokeilemassa täällä.

Seuraavalla tunnilla jatketaan samaa aihetta ja tehdään pientä animointia auton liikkumiseen ja törmäämiseen. Nopeimmilla oppilailla oli jo nyt omia ulosajolaskureita ja pieniä animointeja rysähdyksissä, osaavat siis soveltaa opittuja tietoja. :) Tähän mennessä oppilaiden kännyköitä tai fb-sivuja ei ole tunnilla näkynyt. Tunnilla riittää puhetta ja oppilaat kommentoivat toistensa töitä ja tapaa toteuttaa esimerkiksi liikettä.

Toinen tunti, akvaario

Toisella tunnilla oppilaat tiesivät mihin ovat ryhtymässä. Annoin tehtäväksi akvaarion, eli tarkoituksena on muokata esiintymislava akvaarioksi ja laittaa siihen uiskentelemaan kalahahmoja. Harjoitus on hyvin pitkälti sama kuin ensimmäiselläkin tunnilla, mutta nyt oppilaat pääsevät muokkaamaan hahmoja ja tekemään useampaa liikettä hahmoille.

Scratchissa on vedenalainen maisema, mutta taustaan voi käyttää myös mitä tahansa kuvahaussa löydettyä akvaarion kuvaa tai tietokoneen kameralla otettua kuvaa. Tässä esimerkissä käytän Scratchin omaa kuvaa.

Taustan muokkaukseen pääsee klikkaamalla "Esiintymislava"

Taustan voi piirtää itse, tuoda tiedostosta tai ottaa kameralla

Käytän tässä esimerkissä Scratchin omaa "Underwater"-kuvaa

 Kissa ei kuulu akvaarioon vaan sinne pitäisi saada erilaisia vedeneläviä. Hahmon voi piirtää itse, ladata valmiita kuvia Scatchin kirjastosta tai jonkin hakupalvelun kuvahausta. Tässä esimerkissä lataan ensin Scratchin oman mustekalan.

Keskimmäisestä nappulasta saa valittua uuden hahmon valmiiden hahmojen kirjastosta

Lataan mustekalan ja lisään sille Asusteet-kohdasta toisen asusteen.

Pienennän hahmoa, jotta se mahtuu paremmin akvaarioon.

Itse skripti on hyvin samanlainen kuin ensimmäisen tunnin kissaesimerkki. Mustekala liikkuu 10 askelta, vaihtaa asustetta, odottaa 0,2 sekuntia ja toistaa saman uudelleen. Reunan lähellä se vaihtaa suuntaa. 

Liikkumista voi jalostaa suunnanvaihdoksilla. Nyt vihreää lippua klikattaessa mustekala kääntyy 5 astetta myötäpäivään, liikkuu 10 askelta, vaihtaa asustetta, odottaa, kääntyy 5 astetta vastapäivään, liikkuu 10 askelta, vaihtaa asustetta, odottaa ja vaihtaa suuntaa koskettaessaan reunaa.

 Akvaarioon tehdään lisää olentoja, itsepiirrettyjä ja ladattuja. Piirsin malliksi todella huonon, koska visuaalisuudella ei ole juurikaan merkitystä tämän kanssa.

Piirsin kalan

Uuden kalahahmon asuteissa kopioin ensimmäisen kalan ja klikkasin "Muokkaa"-nappulaa.

Nyt kalahahmon toisella asusteella pyrstö ja evä ovat hivenen eri asennoissa.

Skriptejä voi kopioida klikkaamalla hiiiren oikeaa nappia tai painamalla leimasin-nappia esiintymislavan päältä.

Siirsin skriptin kalahahmolle ja nyt se liikkuu samalla tavalla mustekalan kanssa. Aloituskohtaa ja aloitussuuntaa vaihtamalla akvaarion saa vähän elävämmän näköiseksi.

Lisäsin akvaarioon vielä ravun, joka liikkuu vain oikea-vasen suunnassa. Otin siis "Käänny"-komennot siitä pois.

Oppilaat lisäsivät akvaarioon aukeavia aarrearkkuja, sukeltajia, ja itsetekemiään kaloja. En rajoittanut tekemistä millään tavalla, joten asiattomuuksiakin ilmestyi jonkin verran. Koska asiattomuudet liikkuivat skripteillä ja olivat omalla tavallaan oivaltavia, en puuttunut niihinkään. Leikkikööt, jos oppivat samalla.

Esimerkkiakvaariotani voi käydä katsomassa täällä.