Scratch tarina – työkaluja lasten koodausopetukseen

scratch alkunäyttö

Työkaluja lasten koodausopetukseen -blogiartikkelisaaga jatkuu ja tällä kertaa tarkastelun alla on Scratch. Se on ohjelmointikieli, jolla pystyy tekemään interaktiivisia tarinoita, pelejä ja animaatioita lohkojen avulla, itse koodi on piilotettu lohkojen sisälle. Scratchilla tehtyjä omia projekteja voi myös halutessaan jakaa muille käyttäjille. Tässä  artikkelissa en syvenny vielä peleihin vaan koodataan Scratch tarina.

Verrattuna code.orgiin Scratch tuntuu alussa haastavammalta, koska liikkeelle lähdettäessä ruudulla näkyy vain kissahahmo ja muutoin tyhjä sivu. Joudun tunnustamaan alani ammattilaisena, että oli hieman sormi suussa -fiilis pohtiessani, mitenkä tämä aloitetaan? Testatessani esikouluikäisen poikani kanssa ympäristöä ensimmäistä kertaa, saimme vain lisäiltyä taustakuvia useamman kappaleen sekä yhden hahmon ällistelemään keskelle ruutua. Ninjagohenkisen seikkailupelin luominen tai edes alkuun saaminen, ei onnistunutkaan hetkessä eikä parissa. Jouduin sanomaan pojalleni, että äidin täytyy opetella Scratchia ensin yksin ja sen jälkeen katsotaan sitä yhdessä.

Miten pääsee alkuun

Scratchia käytetään, joko selaimen kautta tai sen saa asennettua omalle koneelle. Käytän itse selaimessa toimivaa Scratchia, siinä on se hyöty, että kaikki tekemäni projektit ovat saatavillani netissä, vaikka oma kone ei olisikaan mukana. Käyttäjätunnus luodaan osoitteessa https://scratch.mit.edu/, josta valitaan Liity Scratchiin ja syötetään tarvittavat tiedot.

Pääsivun ylämenun Tutki linkistä, voi selailla julkisia projekteja ja nähdä, mitä kaikkea muut käyttäjät ovat Scratchilla tehneet. Suosittelen aloittamaan Vinkit osiosta, josta löytyy esimerkkipelejä ja niihin tehtyjä tutoriaaleja. Niiden avulla Scratchin toimintoihin pystyy tutustumaan helposti ja sen jälkeen tyhjältä pöydältä aloittaminen, ei tunnu enää niin haastavalta. Toinen vaihtoehto perusominaisuuksiin tutustumiseen on lukea Scratchin pdf-opas ja toistaa siinä olevat harjoitteet Scratch-ympäristössä.

Luo tarina

Kesti hetken päästä Scratchiin sisälle ja ymmärtää, mitä tarkoitetaan tarinoilla tai millaisia pelejä Scratch-ympäristössä voi tehdä. Halusin tehdä oman yksinkertaisen tarinan nimeltään Kissa menee nukkumaan. Siinä on vain yksi tausta, kissahahmo ja vähän liikettä sekä muutama vuorosana. Tästä on mielestäni hyvä aloittaa niin lasten kuin aikuisten kanssa. Ympäristön tullessa tutuksi, perustarinaa on helppo muokata sekä lisätä monimutkaisempaa toiminnallisuutta.

Scratch-tarina: Kissa menee nukkumaan

Tarinan koodaaminen alkaa itse tarinasta: ensin mietitään, mitä tarinassa tapahtuu, sitä voi halutessaan hahmotella vaikka paperille ja sen jälkeen jaetaan tarina osiin ja koodataan Scratch-lohkoilla tarinan osat toimiviksi.

Kissa on makuuhuoneessa ja sitä väsyttää, joten se sanoo “Minua väsyttää” ja “On aika mennä nukkumaan”. Tämän jälkeen kissa menee sänkyyn, sanoo “Hyvää yötä!” ja nukahtaa.

Miten tarinan kuvaus voidaan jakaa osiin? Tässä yksi esimerkki:

Kissa on makuuhuoneessa tarvitaan makuuhuonetausta ja kissahahmo, joka on sängyn vieressä
Kissa sanoo “Minua väsyttää” kissahahmo on paikallaan makuuhuoneessa ja sanoo “Minua väsyttää”
Kissa sanoo “On aika mennä nukkumaan” kissahahmo on paikallaan makuuhuoneessa ja sanoo “On aika mennä nukkumaan”
Kissa menee sänkyyn kissahahmo siirtyy sänkyyn ja muuttaa asentoa (ensimmäinen kissahahmo katoaa ja uusi kissahahmo toisessa asennossa ilmestyy sänkyyn)
Kissa sanoo “Hyvää yötä!” kissahahmo on paikallaa sängyssä makuuhuoneessa ja sanoo “Hyvää yötä!
Kissa nukahtaa silmät auki oleva kissahahmo katoaa ja sänkyyn ilmestyy samaan kohtaan uusi kissahahmo, jolla on silmät kiinni

Luonnos tarinasta on valmis. Tässä on esimerkki siitä, miten ohjelmointiongelma voidaan jaotella osiin helpottamaan koodausvaihetta. Voi tuntua tyhmältä kirjoittaa näin yksinkertainen tarina vaiheisiin, mutta tarinan tai pelin ollessa monimutkaisempi, se helpottaa toteutusvaihetta. Tarinan osiin jakaminen ei tuo varmastikaan kaikkia ohjelmointiongelmia esiin, mutta auttaa ymmärtämään, mitä ollaan tekemässä ja miten sitä suurin piirtein kannattaa lähteä toteuttamaan.

Koodaa tarina

Tarinan idea on valmis ja voidaan jatkaa sen toteuttamiseen eli koodaamiseen. Edetään samassa järjestyksessä kuin tarinan osiin jakamisessa. Täsmennän tässä vaiheessa, että tarinan voi koodata erittäin monella tapaa ja yritän nyt näyttää yksinkertaisimman tavan.

Kissa on makuuhuoneessa → tarvitaan makuuhuonetausta ja kissahahmo, joka on sängyn vieressä
  • Valitaan taustaksi makuuhuone ja huomataan, että kissa on väärässä paikassa sängyn päällä
  • Siirretään kissa  oikeaan kohtaan hiirellä ja saadaan siitä suoraan kissan aloituspaikan xy-koordinaatit mene kohtaan x -156 y -73 scratch-mene kohtaan xy
  • Miten tarina käynnistyy? Klikkaamalla vihreätä lippua. Lisätään Tapahtuma -valikosta oikea aloituslohko. Scratch-vihrea-lippu-paina
  • Ensimmäinen vaihe on valmis; tarina käynnistyy painamalla vihreätä lippua, jolloin kissa on oikeassa paikassa eli sängyn vieressä.
Kissa sanoo “Minua väsyttää” →  kissahahmo on paikallaan makuuhuoneessa ja sanoo “Minua väsyttää”
  • Lisätään Ulkonäkö –valikosta sano –metodi, joka kestää tietyn aikaa, koska ei haluta, että teksti on koko tarinan ajan näkyvissä. Kirjoitetaan siihen teksti “Minua väsyttää” ja se saa olla näkyvissä kahden sekunnin ajan.

Scratch-sano1

Kissa sanoo “On aika mennä nukkumaan” →  kissahahmo on paikallaan makuuhuoneessa ja sanoo “On aika mennä nukkumaan
  • Lisätään uusi samanlainen sano -metodi ja kirjoitetaan siihen tekstiksi “On aika mennä nukkumaan”.

scratch-sano2

Kissa menee sänkyyn →kissahahmo siirtyy sänkyyn ja muuttaa asentoa ( ensimmäinen kissahahmo katoaa ja uusi kissahahmo toisessa asennossa ilmestyy sänkyyn)
  • Tarvitaan uusi kissahahmo, joka on makuuasennossa, lisätään hahmokirjastosta sellainen.
  • Scratch tarinaLisätty kissahahmo on väärässä paikassa ja xy -koordinaateilla se saadaan oikeaan kohtaan. Lisäksi tarvitaan “Kun klikataan lippua” -tapahtumankäsittelijä tässä luodulle uudelle kissahahmolle, jotta sen toiminnot alkavat myös samaan aikaan kuin ensimmäisenä luodun kissan.scratch-toisen-kissan-koodi
  • Huom! Alkaessasi koodaamaan toimintoja, muista valita oikea hahmo vasemmasta alareunasta. Jokaisella hahmolla on oma koodi-ikkuna, jossa on kyseiseen hahmoon liittyvät koodilohkot. Hahmon kuva on näkyvissä myös koodi-ikkunan oikeassa yläreunassa (ks. yllä ja alla olevat kuvat).scratch-kissa1-nayta-piilota
  • Seuraava ongelma on se, että molemmat kissahahmot ovat näkyvissä koko ajan. Koodilohkoihin lisätään toiminto, joka piilottaa ensiksi sängyllä olevan kissan siksi aikaa, kun lattialla oleva kissahahmo puhuu, sen jälkeen lattialla oleva kissahahmo piilotetaan ja sängyllä makaava kissa tulee näkyviin. Piilota ja näytä metodit löytyvät Ulkonäkö -skripteistä.scratch-kissa2-nayta-piilota
  • Vielä yksi lisäys, mistä sängyllä oleva kissa tietää, milloin se tulee näkyviin? Tämä pitää määritellä koodissa jotenkin, mikäli koodilohkot menevät näin: kun klikataan lippua, piilota, mene kohtaan xy, näytä →kissa tulee näkyviin sängylle välittömästi, kun ohjelma käynnistetään. Kissan näkymistä voidaan viivyttää odota metodilla ja ajaksi laitoin neljä sekuntia, sillä sen verran ensimmäisellä kissa kestää sanoa vuorosanat. Tilanteeseen löytyy järkevämpikin ratkaisu, mutta kerron siitä seuraavassa luvussa lisää.
Kissa sanoo “Hyvää yötä!” →kissahahmo on paikallaan sängyssä makuuhuoneessa ja sanoo “Hyvää yötä!
  • Lisätään uusi sano -metodi ja kirjoitetaan siihen tekstiksi “Hyvää yötä!”scratch-kissa-hyvaayötä
Kissa nukahtaa →silmät auki oleva kissahahmo katoaa ja sänkyyn ilmestyy samaan kohtaan uusi kissahahmo, jolla on silmät kiinni
  • Makaavalla/lentävällä kissahahmolla ei ole valmiina silmät kiinni olevaa asustetta, joten tehdään se itse. Mene Asusteet -välilehdelle, valitse cat1 flying-a ja hiiren oikealla näppäimellä kopioi kyseinen kissahahmo. Sen jälkeen muokkaa juuri luotua  cat1 flying-a2 asustetta muokkaustyökaluilla: “kumita” silmäpisteet pois valkoisella kynällä ja piirrä tilalle kiinni olevat silmät.
  • Palataan Skriptit -välilehdelle ja nyt ei tarvitsekaan luoda uutta kissahahmoa, vaan riittää, että käyttää vaihda asusteeksi cat1 flying-a2 metodia.scratch-vaihda-asuste

Ensimmäinen versio koodatusta tarinasta on valmis, hienoa! Tarinan edetessä löytyi uusia ongelmia, joita ei ollut ilmennyt tarinaa luotaessa. Se on normaalitilanne ohjelmistoprojektissa ja myös toivottavaa, sillä mitä enemmän ongelmatilanteita ratkotaan ohjelmiston tekovaiheessa, sitä vähemmän niitä päätyy asiakkaalle.

Paranna koodia

Refaktorointi on käsite, jolla tarkoitetaan koodin rakenteen muuttamista paremmaksi. Näin ollen koodin toiminnallisuus säilyy, mutta rakenteen muokkaamisella ohjelmistoa saadaan esimerkiksi tehokkaammaksi tai monimutkaista ohjelmanpätkää muutettua ymmärrettävämmäksi. On aika refaktoroida Kissa menee nukkumaan tarinan koodia!

Koodausvaiheessa ilmeni sängyllä olevaan kissahahmon ongelma: kissan pitää odottaa neljä sekuntia, ennen kuin se ilmestyy sängylle, jotta molemmat kissahahmot eivät ole samaan aikaan näkyvillä ja vuorosanat sanotaan oikeaan aikaan. Mikäli tarinaa jatketaan ja ensimmäinen kissahahmo tekisikin vielä jotain muuta ennen sängylle menoa, ei odota 4 sekuntiametodi enää toimisikaan. Sekuntimäärää pitäisi muuttaa jokaisen kerran jälkeen, kun ensimmäisen kissahahmon tekemisiä muokataan.

Miten ongelma ratkaistaan? Tapahtumankäsittelijöiden eli viestien avulla.

Ensimmäinen kissahahmo lähettää viestin viimeisen vuorosanansa jälkeen ja tämä onnistuu valitsemalla Tapahtumat välilehdeltä lähetä viesti -metodin. Viestin voi nimetä haluamallaan tavalla. Sängyllä makaava kissahahmo koodattiin alun perin käynnistymään vihreän lipun klikkaamisesta, mutta nyt halutaankin kissan tulevan näkyviin vasta, kun lähetetty viesti vastaanotetaan. Sängyssä olevan kissahahmon koodilohkoja joudutaan hieman muokkaamaan ja sen  koodissa tarvitaan edelleen vihreän lipun klikkaamista, jotta kissahahmo pysyy piilossa viestin vastaanottamiseen asti. Viimeisenä täytyy muistaa vielä vaihtaa sängyllä olevan kissan asuste takaisin silmät auki olevaan, jotta tarinan uudelleenkäynnistämisen jälkeen sängyllä makoilee oikea-asusteinen kissahahmo.

Tarina on valmis ja refaktoroitu! Nyt ensimmäisen kissan koodiin voidaan lisätä mitä vain, ennen ruskeata lähetä sänkyyn lohkoa: eikä sängyssä olevan kissan koodia tarvitse muuttaa ollenkaan. Vertaa tilannetta siihen, jos sängyssä olevan kissan koodissa olisi vielä odotametodi. Se johtaisi siihen, että molempien kissojen koodia joutuisi muuttamaan tai testaamaan, jos ensimmäisen kissahahmon koodi muuttuu. Refaktoroinnin jälkeen tarina eli koodin toiminnallisuus säilyi samana, mutta rakenne muuttui paremmaksi ja käytännöllisemmäksi.

Loppu löpinät

Aloittaessani kirjoittamaan tätä blogiartikkelia tuntui siltä, etten saa aiheeseen omaa näkökulmaa millään. Käyttökokemuksien jakamisen painopiste siirtyikin yllättäen lapsistani omiin kokemuksiini. Scratchiin tutustuminen ja sen linkittäminen käytännön ohjelmontiin vei aikaa. Kuten alussa mainitsin – äidin täytyy tutustua Scratchiin ensin yksi ja sitten voidaan tehdä yhdessä – pitää paikkansa ja sen näköinen artikkeli tästä syntyikin. Toivon kokemuksistani ja kooditarinan auki purkamisesta olevan hyötyä niin äideille, isille kuin muillekin koodimaailmaan perehtyville, siitä oli hyötyä myös minulle! Seuraavaksi tehdään tarina yhdessä lasteni kanssa ja päästään hitusen lähemmäksi ninjagohenkistä seikkailupeliä.

One thought on “Scratch tarina – työkaluja lasten koodausopetukseen

Leave a Reply

Your email address will not be published. Required fields are marked *