Peli 5: Perhonen

Perhonen

2019-01-06T21:44:34+02:00

Pelin idea

Tehdään peli, jossa on rullaava taustakuva ylhäältä alas (liikkumisefektin luomiseksi). Pelissä on perhonen pelinäkymän alareunassa. Pehosella sallitaan vain vaakaliike. Pelissä arvotaan 5 sekunnin välien kukka ja monsteri (hämähäkki) pelin yläreunaan satunnaiseen paikkaan, josta ne sitten tippuvat alaspäin. Jos kukka tai monsteri törmäävät pelin alareunaan, niin ne poistetaan. Perhonen yrittää kerätä kukkia, mutta väistellä monstereita. Kun perhonen törmää kukkaan, niin silloin saadaan 10 pistettä ja kukka poistetaan pelikentältä. Kun perhonen törmää monsteriin, niin peli päättyy.

Huomio: Pelissä tarvittavat kuvat on ohjeen lopussa.

Tässä harjoituksessa uusia opittavia asioita:

Kerrataan pelin rakentamisen vaiheet.
Opitaan tekemään rullaava taustakuva.
Opitaan Construct-ohjelman käyttämä kulma- ja koordinaatistosysteemi.
Opitaan luomaan uusia objekteja ja laittamaan niitä satunnaiseen paikkaan.
Opitaan tekemään komentoja kahdella ehdolla.
Opitaan liikuttamaan kappalaita koordinaatistossa suoraviivaisesti.

Aikasuositus: 2 - 4 oppituntia (45 min). Tarvittaessa 2 oppituntia enemmän, jos syntyy innostusta kehittää omia pelejä.

1. Opetuskerta: Tee ohjeen mukainen peli.

2. Opetuskerta: Tee oma avaruuspeli tämän idean pohjalta. Siinä meteoriitit ovat "monstereita" jotka tippuvat ja joita tuhotaan ampumalla. Avaruusalus voisi kerätä esimerkiksi timantteja. Piirrä tarvittavat pelihahmot itse.

1. Pelikentän luominen

2019-01-06T10:23:02+02:00

Aloitetaan uusi peli eli ota komento: File | New

ja valitse New empty project

Kuittaa valinta napsauttamalla hiirellä Open – painiketta.

Napsauta hiirellä työpöytää ja etsi Properties-ikkunasta (asetukset) kohta Layout Size. Laita sinne arvot Width (leveys) 800 ja Height (korkeus) 600. Olet määrännyt pelialueen koon pikseleinä.

Kun nyt napsautat hiirellä kohtaa Project Properties View, niin voit lisäksi asettaa ikkunan koon, joka on pelinäkymän koko. Laita sinne arvot Width (leveys) 800 ja Height (korkeus) 600.

2. Grafiikan lisääminen: Tausta.

2019-01-06T10:34:38+02:00

Piirretään kaikki pelihahmot Inkscape-ohjelmassa. Katso, että pelihahmon koko on noin 100 px (W = leveys, H = korkeus). Tallenna pelihahmo komennolla: Tiedosto | Tallenna Bittikartta ( Export PNG Image). Valitse tiedostolle nimi ja tallennuspaikka painamalla Tallenna -painiketta (Export As) ja lopuksi tallenna valittu piirros Vie-painikkeella. Piirrä seuraavat pelihahmot: perhonen (kaksi erilaista kuvaa), hämähäkki ja kukka. Lisäksi tarvitaan GameOver-teksti ja taustakuva. Kun piirrät taustakuvan, niin se on oltava sama kuin pelinäkymän koko eli 800 px x 600 px. Tallenna kukin pelihahmo ja taustakuva erillisinä kuvina.

Mene takaisin Construct- ohjelmaaan. Kun painat hiiren oikeaa painiketta pelikentän päällä, niin avautuvasta valikosta valitse: Insert New object. Tai voit tuplanapsauttaa hiirellä pelikentän päällä.

Kun napsautat hiirellä työpöydällä, niin tällöin aukeaa kuvaikkuna, Lisää tänne taustakuva painamalla kansion näköistä kuvaketta. Sulje kuva-ikkuna. Laita kohdassa Properties kuvalle nimi kohdassa Name : Taivas ja laita kuva tarkasti oikealle paikalleen kohdassa Position eli kuvan keskipiste on X: 400 ja Y: 300. Kuvan pitäisi nyt täyttää koko pelikenttä. Tarkka-asettelu on tässä tärkeää, koska teemme rullaavan taustakuvan.

Tehdään taustakuvasta kopio. Kopion saat nopeasti kun pidät CTRL- painikkeen pohjassa ja samalla tartut kuvaan hiirellä (eli painat hiiren vasemman painikkeen pohjaan kuvan päällä) ja nostat hiirellä raahaamalla kuvan alaspäin.

Nimetään taustataso, nimellä Tausta.

Pelihahmoja varten lisäämme uuden tason. Paina + painiketta Layers-ikkunassa ja anna tasolle nimi Properties-ikkunassa. Esimerkiksi Hahmot.

3. Pelihahmo

2019-01-06T10:40:56+02:00

Kun painat hiiren oikeaa painiketta pelikentän päällä, niin avautuvasta valikosta valitse: Insert New object. Tai voit tuplanapsauttaa hiirellä pelikentän päällä. Valitse Insert New object-ikkunasta Sprite (pelihahmo) ja napsauta hiirellä Insert-painiketta.

Samalla tavalla (Sprite-objektina) lisää peliin myös monsteri (= hämähäkki) ja kukka. Nosta Kukka ja Monsteri pelialueen yläpuolelle, mutta laita Perhonen pelinäkymän alareunaan esimerkiksi paikkaan: X: 400, Y: 500.

4. Hahmojen käyttäytymisnallit – Behaviors

2019-01-06T10:51:32+02:00

Jotta pelihahmot saadaan esimerkiksi liikkumaan, niin meidän on lisättävä pelihahmoihin käyttäytymismalleja (Behaviors). Valitse taustakuva hiirellä napsauttamalla ja Properties-ikkunassa napsauta tekstiä: Behaviors. Lisää taustakuvaan Bullet-käyttäytymismalli. Muuta asetuksissa taustakuvan nopeus arvoon: Speed: 50 ja laita kohtaan: Set angle: No.

Tarkista seuraavaksi, että sama käyttäytymismalli ja asetukset on myös asetettu toisessa taustakuvassa (kopiossa)!

Lisää perhoselle 8Direction käyttäytymismalli ja BoudToLayout käyttäytymismallit. BoundToLayout-käyttäytymismalli estää perhosta lentämästä yli pelikentän. Muuta 8Direction käyttäytymismallin asetuksia Properties-ikkunassa. Voit kasvattaa hieman oletus maksiminopeutta, esimerkiksi 300 on hyvä eli laita kohtaan Max speed: 300. Samoin salli vain vaaka-liike eli laita asetus: Directions: Left & right. Estä myös pyöritys eli Set angle: No.

Emme lisää kukalle ja monsterille käyttäytymismalleja, vaan laitamme ne liikkumaan ohjelmallisesti.

Jos testaat käyttäytymismalleja (= F5), niin huomaat, että perhonen liikkuu nyt oikein, mutta taustakuva liikkuu väärään suuntaan, lisäämme seuraavaksi koodia Event sheet-ikkunassa ja korjaamme tämän ongelman.

5. Hahmon ohjelmoiminen – Event sheet

2019-01-06T12:13:07+02:00

Haluamme tehdä ohjelman, jossa taustakuva liikkuu alaspäin. Eli meidän pitää asettaa ensin kulma, jotta ohjelma tietää mihin suuntaan pitää liikkua. Construct- ohjelmassa kulmat alkavat idässä ja kiertävät sieltä myötäpäivään ( = kellon suuntaisesti). Kun haluamme mennä alaspäin, niin menemme silloin 90°:een kulmassa. X-koordinaatti kasvaa oikealle ja Y-koordinaatti alaspäin pelikentän vasemmasta - ylänurkasta.

Kulman asettaminen taustakuvaan tehdään Bullet- käyttäytymismallin komennoilla seuraavasti.

Paina Add event.
Valitse System ja paina Next.
Valitse kohdasta Start & end toiminto: On start of layout ja paina Done.
Paina Add action.
Valitse Taivas ja paina Next.
Valitse kohdasta Bullet toiminto Set angle of motion ja paina Next.
Laita asetus: Angle: 90 ja paina Done.

Jolloin saamme taivaan liikkumaan ylhäältä alaspäin.

Seuraavaksi voisi miettiä kuinka pelinäkymän ulkopuolella ja alapuolella oleva Taivas-kuva saadaan nostettua ylös, jotta saataisiin rullaava efekti. Eli ehdossa pitäisi mainita, että ollaan pelinäkymän ulkopuolella ja kuvan Y-koordinaatin arvo on oltava positiivinen (negatiivisilla arvoilla ollaan yläpuolella), niin silloin siirretään kuva kahden Taivas-kuva korkeus mitan verran ylöspäin eli kulman suuntaan 270°. Komento tehdään seuraavasti.

Paina Add event.
Valitse Taivas ja paina Next.
Valitse kohdasta Size & Position ehto: Is on-screen ja paina Done.
Nyt loimme ehdon, että Taivas on pelinäkymässä. Kuinka se saadaan päinvastoin eli ei ole pelinäkymässä? Paina hiiren oikeaa painiketta luomasi ehdon päällä ja ota ilmestyvästä valikosta komento: Invert, niin ehto saadaan käännettyä päinvastoin.

Ehdon eteen ilmestyi punainen ruksi. Tämä tarkoittaa, että ehto on nyt päinvastainen eli Taivas ei ole ruudussa eli pelinäkymässä.
Tarvitsemme tähän komentoon myös lisäehdon: Kuvan pitää olla pelinäkymän alapuolella, ei yläpuolella. Kuva on pelinäkymän alapuolella positiivisilla arvoilla ja pelinäkymän yläpuolella negatiivisilla arvoilla. Paina nyt hiiren oikeaa painiketta uudestaan ja valitse komento: Add another condition.
Valitse Taivas ja paina Next.
Valitse kohdasta Size & Position komento: Compare Y ja paina Next.
Laita asetukset: Comparsion: > Greater than , Y co-ordinate: 0 ja paina Done.
Paina Add action.
Valitse Taivas ja paina Next.
Valitse kohdasta Size & Position komento: Move at angle ja paina Next.
Laita asetukset: Angle: 270, Distance: 1200 ja paina Done. Kohtaan Distance voisi myös kirjoittaa: 2*Taivas.Height eli kahden kuvan korkeuden. Tätä kirjoitustapaa voisi suositella, joten tehdään näin.

Nyt taivaan pitäisi rullata hienosti.

MUUTTUJAT

Muuttujat ovat ohjelman keino tallentaa tietoa ohjelman suorituksen aikana. Mietitään seuraavaksi mitä muuttujia peli tarvitsisi. Haluamme, että peli nopeutuu koko ajan. Pelin nopeus voitaisiin tallentaa muuttujaan: Nopeus.

Lisäksi haluamme, että peli laskee pisteitä, joten tarvitsemme toisen muuttujan. Olkoon sen nimi: Pisteet. Lisäksi otamme käyttöön kolmannen muuttujan: Peli. Peli-muuttujassa on tieto onko peli käynnissä vai ei. Kun Peli-muuttuja saa arvo 0, niin peli on käynnissä. Kun Peli-muuttuja saa arvon 1, niin peli on loppunut.

Muuttujat lisätään painamalla hiiren oikeaa painiketta Event sheet välilehden päällä ja ottamalla komento avautuvasta valikosta: Add global variable. Kohtaan: Name kirjoita muuttujan nimi, esimerkiksi: Nopeus ja kohtaan: Initial value, kirjoita muuttujan saama arvo alussa. Anna esimerkiksi Nopeus-muuttujalle alkuarvo 1. Paina Lopuksi OK.

Samalla tavalla perusta muuttuja: Pisteet ja anna sille alkuarvo 0, sekä perusta muuttuja: Peli ja anna sille alkuarvo 0. Nyt sinulla pitäisi olla kolme muuttujaa, jotka näyttävät tältä.

PELIN IDEA

Tehdään ehto, että joka 5 sekunti arvotaan uusi monsteri ja uusi kukka satunnaiseen paikkaan. Samalla voidaan pelin nopeutta kasvattaa joka 5:s sekunti 0,1 s:lla. Monsteri ja kukka arvotaan pelinäkymän yläpuoliselle alueelle, josta ne liukuvat alaspäin. Liukuminen tapahtuu kunnes ne saavuttavat pelikentän alareunan (Y > 600).

Arpomisalueessa X:n arvot kasvavat 0:sta 800:aan ja Y:n arvot pienenevät 0:sta -600:aan.

Jos monsteri on saavuttanut alareunan, niin monsteri poistetaan ja pelaaja saa yhden pisteen. Piste on ansaittu, koska on onnistuttu väistämään monsteria.

Jos kukka saavuttaa alareunan, niin pelaaja menettää yhden pisteen. Pelin idea on kerätä kukkia, joten jos kukka menee alareunaan, niin kukkien keräämisessä on epäonnistuttu.

Jos perhonen törmää kukkaan, niin silloin kukka poistetaan pelikentältä ja saadaan 10 pistettä.

Jos perhonen törmää monsteriin, niin peli loppuu siihen.

Tehdään seuraavaksi komento: Joka 5:s sekunti, kun peli on käynnissä (Peli = 0), niin arvo Kukka ja Monsteri satunnaiseen paikkaan.Lisäksi kasvata pelin nopeutta 0,5 s:lla. Tämä tehdään seuraavalla tavalla:

Paina ensin Add event.
Valitse System ja paina Next.
Valitse kohdasta Time ehto: Every X seconds ja paina Next
Laita kohtaan Intervals (seconds): 5 ja paina Done.
Paina hiiren oikeaa painiketta luomasi ehdon päällä ja avautuvasta valikosta valitse Add another condition.
Valitse System ja paina Next.
Valitse kohdasta Global & local varables komento: Compare variable ja paina Next.
Laita seuraavat asetukset: Variable: Peli, Comparison: = Equal to, Value: 0 ja paina Done.
Paina Add action.
Valitse System ja paina Next.
Valitse kohdasta General toiminto: Create object ja paina Next.
Napsauta kohtaa <click to choose> ja valitse Kukka ja paina OK. Laita kohtaan X: random(0,800) ja kohtaan Y: random(-600,0). Kuittaa valinnat painamalla Done.
Paina Add action.
Valitse System ja paina Next.
Valitse kohdasta General toiminto: Create object ja paina Next.
Napsauta kohtaa <click to choose> ja valitse Mosteri ja paina OK. Laita kohtaan X: random(0,800) ja kohtaan Y: random(-600,0). Kuittaa valinnat painamalla Done.
Paina Add action.
Valitse System ja paina Next.
Valitse kohdasta General & local variables toiminto: Add to ja paina Next.
Laita asetukset: Variable: Nopeus, Value: 0.1 ja paina Done.

Luomasi komento näyttää nyt tältä.

Laitetaan seuraavaksi monsterit liikkumaan, se tehdään seuraavasti.

Paina Add event.
Valitse System ja paina Next.
Valitse kohdasta General ehto: Every tick ja paina Done.
Paina hiiren oikeaa painiketta luomasi ehdon päällä ja avautuvasta valikosta valitse Add another condition.
Valitse System ja paina Next.
Valitse kohdasta Global & local varables komento: Compare variable ja paina Next.
Laita seuraavat asetukset: Variable: Peli, Comparison: = Equal to, Value: 0 ja paina Done.
Paina Add action.
Valitse Kukka ja paina Next.
Valitse kohdasta Size & Position toiminto: Move at angle ja paina Next.
Laita asetukset: Angle: 90 (=alaspäin), Distance: Nopeus (Käytämme tässä muuttujaa, jossa on tieto liikkumisnopeudesta). Kuittaa valinnat painammalla Done.
Paina Add action.
Valitse Mosteri ja paina Next.
Valitse kohdasta Size & Position toiminto: Move at angle ja paina Next.
Laita asetukset: Angle: 90, Distance: Nopeus ja kuittaa valinnat painammalla Done.

Komento on nyt valmis ja se näyttää tältä.

Tähän komentoon voisi lisätä myös pelin pisteiden tulostuksen. Sitä varten tarvitsemme teksti-objektin. Mene takaksin Layout-välilehdelle ja tuplanapsauta työpöydälla ja lisää Text-objekti.

Mennään takaisin Event sheet- välilehdelle ja komentoon 4 ja lisätään sinne pisteiden tulostus.

16. Paina Add action.
17. Valitse text-objekti: Saldo ja paina Next.
18. Valitse kohdasta Text toiminto: Set text ja paina Next.
19. Lisää kohtaan Text: ”Pisteet: ”&Pisteet ja paina Done.

Tässä teksti kirjoitetaan lainausmerkkien sisäpuolelle ja muuttujat ilman lainausmerkkiä. Muuttujan tilalle tulostuu muuttujan arvo. Muuttujan ja tekstin väliin tulee erotinmerkki: &.

Lisätään seuraavaksi ehdo, mitä tehdään kun kukka ja monsteri saavuttavat alareunan ( Y > 600). Tällöin molemmat poistetaan. Monsterista saa pisteen ja Kukasta menettää pisteen. Tehdään ehto ensin Monsterille.

Paina Add event.
Valitse Monsteri ja paina Next.
Valitse kohdasta Size & Position komento: Compare Y ja paina Next.
Tee seuraavat lisäykset: Comparison: > Greater than, Y co-ordinate: 600 ja paina Done.
Paina Add action.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables toiminto: Add to ja paina Next.
Laita asetukset: Varable: Pisteet, Value: 1 ja paina Done.
Paina Add action.
Valitse Monsteri ja paina Next.
Valitse kohdasta Misc toiminto: Destroy ja paina Done.

Luomasi komento näyttää nyt tältä:

Tehdään samanlainen komento myös Kukalle.

Paina Add event.
Valitse Kukka ja paina Next.
Valitse kohdasta Size & Position komento: Compare Y ja paina Next.
Tee seuraavat lisäykset: Comparison: > Greater than, Y co-ordinate: 600 ja paina Done.
Paina Add action.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables toiminto: Add to ja paina Next.
Laita asetukset: Varable: Pisteet, Value: -1 ja paina Done.
Paina Add action.
Valitse Kukka ja paina Next.
Valitse kohdasta Misc toiminto: Destroy ja paina Done.

Kukalle sama komento näyttää tältä.

Kukka myös poistetaan, kun se on pelikentän alareunassa, mutta pisteistä otetaan yksi pois, ei lisätä.

Meiltä puuttuu enää törmäyskomennot. Mitä Perhoselle tapahtuu, kun se törmää Kukkaan tai Monsteriin. Aloitetaan kukasta. Kun Perhonen törmää Kukkaan, niin silloin pisteitä tulee 10 lisää ja Kukka poistetaan pelikentältä.

Paina Add event.
Valitse Perhonen ja paina Next.
Valitse kohdasta Collisions komento: On collision with antoher object ja paina Next.
Napsauta hiirellä kohdassa: <click to choose>, valitse Kukka ja paina OK. Lipuksi hyväksy valinnat painamalla Done.
Paina Add action.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables toiminto: Add to ja paina Next.
Laita asetukset: Variable: Pisteet, Value: 10 ja paina Done.
Paina Add action.
Valitse Kukka ja paina Next.
Valitse kohdasta Misc toiminto: Destroy ja paina Done.

Olet nyt luonut seuraavan komennon:

6. Pelin lopetusehto

2019-01-06T11:56:25+02:00

Kun perhonen törmää Monsteriin, niin silloin pitäisi asettaa Peli-muuttujan tila arvoon 1 ja tulostaa teksti: Game Over, joten lisätään ensin GameOver-teksti kuvatiedostosta. Mene takaisin Layout-välilehdelle ja lisää kaksoisnapsauttamalla Sprite-objekti ja laataa sinne Kuva-ikkunassa GameOver-kuva.

Palataan takaisin Event Sheet- välilehdelle ja luodaan pelin lopetuskomento.

Paina Add event.
Valitse Perhonen ja paina Next.
Valitse kohdasta Collisions komento: On collision with antoher object ja paina Next.
Napsauta hiirellä kohdassa: <click to choose>, valitse Monsteri ja paina OK. Lipuksi hyväksy valinnat painamalla Done.
Paina Add action.
Valitse GameOver ja paina Next.
Valitse kohdasta Appearance toiminto: Set visible ja paina Next.
Laita asetus: Visibility: Visble ja paina Done.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables toiminto: Set value ja paina Next.
Laita asetukset: Variable: Peli, Value: 1 ja paina Done.
Paina Add action.
Valitse Kukka ja paina Next.
Valitse kohdasta Misc toiminto: Destroy ja paina Done.

Olet nyt luonut seuraavan komennon:

Jolloin peli päättyy. Peli on nyt valmis. Pelin kaikki komennot yhteenvetona näyttävät tältä.

Pelin parannusehdotuksia

Testaa peliä. Jos peli tuntuu liian helpolta, niin voit lisätä lisää arpomiskomentoja, kun tietty pistemäärä saavutetaan. Kommenot ovat esimerkisi muotoa (Vinkki: voit kopioida CTRL+C, CTRL+V näppäinyhdistelmällä aluksi 3-rivin komennon pohjaksi, jota sitten muokkaat).

Peliä voisi kehittää myös siten eteenpäin, että tietystä pisteestä alkaa uusi kartta, jossa on uusia pelihamoja jne. Lopussa teksti: Victory.
Tietystä pistemäärästä hahmo voisi saada lisää elämiä, jolloin tarvittaisiin uusi globaali-muuttuja. Tämä mahdollistaisi pelin jatkumisen vaikka törmää monsteriin.

Pelissä tarvittavat kuvat

2019-01-06T11:57:13+02:00

: Victory
: Perhonen 2
: Perhonen 1
: Monsteri
: Kukka
: Taustakuva