Peli 2: Meteoriittien ampumista

Meteoriitien ampumista

Pelin idea

Tehdään peli, jossa avaruusalus lentää avaruudessa ja ampuu vastaan tulevia meteoriitteja. Jos ammus osuu meteoriittiin, niin meteoriitti poistuu pelistä. Jos meteoriitti osuu avaruusalukseen, niin avaruusalus poistuu pelistä. Peli loppuu voitokkaasti, jos kaikki meteoriitit on saatu poistettua pelistä. Peli päättyy tappioon, jos meteoriitti osuu avaruusalukseen. 




Huomio: Pelissä tarvittavat kuvat on ohjeen lopussa.

Tässä harjoituksessa uusia opittavia asioita:

  • Kerrataan pelin rakentamisen vaiheet.
  • Opitaan ohjelmoimaan näppäimistöä.
  • Opitaan tekemään animaatio.

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 animaatio omista kuvista ja käytä sitä omassa meteoriittien ampumispelissä. Voit myös kokeilla liikuttaa avaruusalusta eri tavalla näppäimistöllä (Esimerkiksi 8Direction-käyttäytymismalli tai vaikka Car-käyttäytymismalli). Voit lisäksi kehittää omasta kartasta sokkelon. Tällöin pelikkenttä on paljon suurempi kuin pelinäkymä. Sokkelon sisällä lennellään ja yritetään ampua vastaan tulevat meteoriitit, jolloin meteoriittejä voi olla paljon enemmän. Peli loppuu kun olet ampunut kaikki meteoriitit tai löydät piilotetun esineen. Jos pelikenttä on suurempi kuin pelinäkymä, niin silloin avaruusalukseen tarvitaan ScrollTo-käyttäytymismalli.

1. Pelikentän luominen

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: Pelin taustan suunnittelu.

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 nyt napsautat hiirellä työpöydällä, niin tällöin automaattisesti aukeaa kuva-ikkuna. Kuva-ikkunassa voit piirtää uuden kuvan tai ladata tallennetun kuvan. Piirretään taustakuva itse.

  1. Valitse aluksi maalipönttö ja valitse musta väri. Täytä koko alue tällä värillä.
  2. Valitse pensseli, muuta pensselin kokoa (5 tai 10) ja valkeaa väriä ja napsauta satunnaisiin paikkoihin ympyröitä.
  3. Kun kuva on valmis niin tallenna se napsauttamalla levykettä.
  4. Lopuksi sulje ikkuna.
  5. Venytä kehys koko pelikentän kokoiseksi.

Pelin tausta ja pelihahmot kannattaa piirtää eri tasoille. Valitse Layers-välilehti ja muuta asetuksissa (Properties) tason nimi, esimerkiksi: Tausta.




3. Pelihahmot

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

Piirretään pelihahmot Inkscape-ohjelmassa. Katso, että hahmon 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: avaruusalus, laser-säde, meteoriitti, räjähdys (kolme kuvaa). Tallenna kukin pelihahmo erillisinä kuvina.


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.


Kun nyt napsautat hiirellä työpöydällä, niin tällöin automaattisesti aukeaa kuva-ikkuna. Lataamme tallennetun pelihahmon painamalla avonaisen kansion näköistä kuvaketta. Valitse tallennettu kuvatiedosto hiirellä napsauttamalla ja paina Avaa-painiketta.


Lisää samalla tavalla sekä laserin kuva, että meteorin kuva. Nosta avaruusalus peli-ikkunan keskelle, mutta jätä meteori ja laserin kuva pelialueen ulkopuolelle. Huomio: Räjähdys-kuvista tehdään animaatio, joka on selostettu myöhemmin tässä ohjeessa.








4. Hahmojen käyttäytymismallit – Behaviors

Jotta pelihahmot saadaan esimerkiksi liikkumaan, niin meidän on lisättävä pelihahmoihin käyttäytymismalleja (Behaviors). Valitse avaruusalus hiirellä napsauttamalla ja Properties-ikkunassa napsauta tekstiä: Behaviors.

Paina + painiketta Behaviors-ikkunassa ja valitse käyttäytymismalliksi CustomMovement. Paina Add –painiketta. Lisää myös Wrap käyttäytymismalli.



Samalla tavalla lisää Laseriin Bullet- ja DestroyOutsideLayout-käyttäytymismallit valmiiksi. Säädämme joitain asetuksia myöhemmin. Laser on poistettava pelikentän ulkopuolella. Jos ylimääräisiä Lasereita ei poista pelistä, niin peli hidastuu.

Meteoriitissä on Solid-, Bullet-, Wrap- ja Rotate-käyttäytymismallit. Palataan tähän vielä myöhemmin. Jotta avaruusalus saadaan liikkeelle, niin meidän on tehtävä se nyt ohjelmallisesti.

5. Hahmon ohjelmoiminen – Event sheet

Haluamme ohjelmoida näppäimistöä. Ennen kuin se onnistuu, niin meidän pitää lisätä näppäimistö peliin objektina. Paina pelialueen päällä hiiren oikeaa painiketta ja valitse komento: Insert new object. Etsi objekti-ikkunasta Keyboard ja kuittaa valinta painamalla Insert-painiketta.


Muista nimetä kukin objekti sitä kuvaavalla nimellä.


Näppäimistön ohjelmointi

Haluamme luoda toiminnon kun painetaan nuoli vasemmalle, niin alus pyörii vastapäivään ja kun painetaan nuoli oikealle, niin alus pyörii myötäpäivään.
  1. Mene Event sheet väilehdelle. Paina Add event, valitse Keyboard ja paina Next. 
  2. Valitse komento Keyboard: Key is down (Kun näppäin on pohjassa) ja paina Next
  3. Paina <click to choose>, jonka jälkeen paina näppäimistöltä nuoli vasemalle ja Left arrow teksti ilmestyy ikkunaan. Kuittaa OK:lla. Paina lopuksi Done
  4. Olemme nyt luoneet ehdon (Kun nuoli vasemalle on painettu), seuraavaksi lisäämme toiminnon. Napsauta hiirellä Add action tekstiä.
  5. Valitse Avaruusalus ja paina Next.
  6. Valitse nyt Rotate counter-clokwise (myötäpäivään) ja paina Next.
  7. Laita seuraavaksi kulman suuruus, kuinka paljon käännytään yhdellä painalluksella. Laita siihen arvo: 2 ja paina Done.

Olemme nyt luoneet seuraavan toiminnon

Samalla tavalla luo toinen lause: Kun painetaan näppäimistöltä nuoli oikealle pohjaan, niin käännä alusta 2 astetta vastapäivään.
  1. Paina Add event, valitse Keyboard ja paina Next. 
  2. Valitse komento Keyboard: Key is down (Kun näppäin on pohjassa) ja paina Next
  3. Paina <click to choose>, jonka jälkeen paina näppäimistöltä nuoli okiealle ja Right arrow teksti ilmestyy ikkunaan. Kuittaa OK:lla. Paina lopuksi Done
  4. Olemme nyt luoneet ehdon (Kun nuoli oikealle on painettu), seuraavaksi lisäämme toiminnon. Napsauta hiirellä  Add action tekstiä.
  5. Valitse Avaruusalus ja paina Next.
  6. Valitse nyt Rotate clokwise (vastapäivään) ja paina Next.
  7. Laita seuraavaksi kulman suuruus, kuinka paljon käännytään yhdellä painalluksella. Laita siihen arvo: 2 ja paina Done.
Jolloin toinen komento on mutoa.


Haluamme luoda seuraavaksi toiminnon, jossa alus lähtee liikkumaan kulman osoittamaan suuntaan, kun painamme nuolen eteenpäin.

  1. MeneEvent sheet väilehdelle. Paina Add event, valitse Keyboard ja paina Next. 
  2. Valitse komento Keyboard: Key is down (Kun näppäin on pohjassa) ja paina Next
  3. Paina <click to choose>, jonka jälkeen paina näppäimistöltä nuoli ylös ja Up arrow teksti ilmestyy ikkunaan. Kuittaa OK:lla. Paina lopuksi Done.
  4. Olemme nyt luoneet ehdon (Kun nuoli ylös on painettu), seuraavaksi lisäämme toiminnon. Napsauta hiirellä Add action tekstiä.
  5. Valitse avaruusalus ja paina Next. 
  6. Valitse nyt toiminto: Accelerate toward angle, joka löytyy ryhmästä: CustomMovement: Velocity. Paina Next.
  7. Laita kohtaan Acceleration (kiihtyvyys) arvoksi 100 ja kohtaan Angle (kulma) kirjoita teksti: Avaruusalus.Angle eli kulma määräytyy avaruusaluksen mukaan. Paina lopuksi Done.


Olemme nyt lisänneet toiminnon. Kun on painettu nuoli ylös, niin avaruusalus kiihtyy arvolla 100 siihen suuntaan kuin on avaruusaluksen kulma.


Vastaavalla tavalla voit luoda ehdon: Kun on painettu nuoli alas, niin avaruusalus kiihtyy arvolla -100 siihen suuntaan kuin on avaruusaluksen kulma. Koska kiihtyvyys on negatiivinen, niin avaruusalus joko hidastuu tai liikkuu taaksepäin.

  1. MeneEvent sheet väilehdelle. Paina Add event, valitse Keyboard ja paina Next. 
  2. Valitse komento Keyboard: Key is down (Kun näppäin on pohjassa) ja paina Next
  3. Paina <click to choose>, jonka jälkeen paina näppäimistöltä nuoli alas ja Down arrow teksti ilmestyy ikkunaan. Kuittaa OK:lla. Paina lopuksi Done.
  4. Olemme nyt luoneet ehdon (Kun nuoli ylös on painettu), seuraavaksi lisäämme toiminnon. Napsauta hiirellä  Add action tekstiä.
  5. Valitse avaruusalus ja paina Next. 
  6. Valitse nyt toiminto: Accelerate toward angle, joka löytyy ryhmästä: CustomMovement: Velocity. Paina Next.
  7. Laita kohtaan Acceleration (kiihtyvyys) arvoksi -100 ja kohtaan Angle (kulma) kirjoita teksti: Avaruusalus.Angle eli kulma määräytyy avaruusaluksen mukaan. Paina lopuksi Done.


LASERI

Haluamme luoda seuraavaksi toiminnon, jossa avaruusalus ampuu laserilla eteenpäin kun painetaan välilyönti painiketta.  


  1. Mene Event sheet väilehdelle. Paina Add event, valitse Keyboard ja paina Next. 
  2. Valitse komento Keyboard: On key pressed (Kun näppäintä on painettu) ja paina Next
  3. Paina <click to choose>, jonka jälkeen paina näppäimistöltä Välilyönti-painiketta (spacebar) ja VÄli teksti ilmestyy ikkunaan. Kuittaa OK:lla. Paina lopuksi Done.

  4. Olemme nyt luoneet ehdon (Kun Välilyönti-painiketta on painettu), seuraavaksi lisäämme toiminnon. Napsauta hiirellä Add action tekstiä.
  5. Valitse avaruusalus ja paina Next.

  6. Valitse kohdasta: Misc, toiminto: Spawn another object (Luo klooni eli kopio toisesta objektista) ja paina Next.
  7. Napsauta kohtaa <click to choose>, jonka jälkeen napsauta Laserin kuvaa ja kuittaa OK:lla. Lopuksi paina Done.
  8. Olemme luoneet seuraavanlaisen toiminnon. Kun painetaan välilyönti-painiketta näppäimistöltä, niin silloin tee laserista kopio avaruusaluksen koordinaatteihin.

Jotta laser liikkuisi, niin siinä pitää olla Bullet- käyttäytymismalli. Jos et ole sitä vielä lisännyt, niin lisää nyt. Lisäksi Laserissa on oltava DestroyOutsideLayout-käyttäytymismalli. Laseri pitää tuhota pelikentän ulkopuolella tai peli hidastuu. Testaa Laserin toimivuus (= F5).

METEORIITTI

Meteoriitissa on oltava seuraavat käyttäytymismallit (Behaviors): Solid (Kiinteä), Bullet (Luoti), Wrap (Tulee vastakkaisesta reunasta takaisin, kun ylittää reunan) ja Rotate (Pyörii). Muuta Bullet-käyttäytymismallissa seuraavat asetukset. 



Tehdään seuraavaksi kopioita meteoriitista. Kopioita saat nopeasti kun painat CTRL-painikkeen pohjaan ja tartut hiirellä meteoriitiin ja raahaat sen uuteen paikkaan. Nosta meteoriitin kopiot ympäri pelikenttää kuten kuvassa. Muuta jokaisen meteoriitin kulma (ja koko) hieman erilaiseksi. Kulman suuruuden voit arvoidan vieressä olevan apukuvion avulla.


Kun katsot peliä ajotilassa (= F5), niin jokaisen meteoriitin pitäisi tulla näkyviin eri paikasta eri kulman arvolla. Jos meteoriitit törmäävät toisiinsa, niin tapahtuu täysin kimmoinen törmäys.


Tehdään seuraavaksi ehto: Jos meteoriitti törmää Avaruusalukseen, niin tuhoa Avaruusalus. Tämä tehdään seuraavalla tavalla:
  1. Paina ensin Add event.
  2. Napsauta Meteoriittia ja paina Next.
  3. Valitse komento: Collisions: On collision with another object ja paina Next.
  4. Napsauta hiirellä kohtaa: <click to choose>
  5. Valitse Avaruusalus ja paina OK painiketta. Paina lopuksi Done painiketta ja olet luonut ehdon.
  6. Napsauta hiirellä kohtaa: Add action.
  7. Valitse Avaruusalus ja paina Next.
  8. Valitse Misc: Destroy ja paina Done.
Olet nyt luonut toiminnon ja lopputulos näyttää tältä.


Samalla tavalla luo ehto: Jos Laser osuu Meteoriittiin, niin tuhoa Meteoriitti ja Laser.

  1. Paina ensin Add event.
  2. Napsauta Laseria ja paina Next.
  3. Valitse komento: Collisions: On collision with another object ja paina Next.
  4. Napsauta hiirellä kohtaa: <click to choose>
  5. Valitse Meteoriitti ja paina OK painiketta. Paina lopuksi Done painiketta ja olet luonut ehdon.
  6. Napsauta hiirellä kohtaa: Add action.
  7. Valitse Meteoriitti ja paina Next.
  8. Valitse Misc: Destroy ja paina Done.
  9. Napsauta hiirellä kohtaa: Add action uudestaan.
  10. Valitse Laser ja paina Next.
  11. Valitse Misc: Destroy ja paina Done.


Lopputuloksen pitäisi näyttää tältä.

6. Animaatiot

Lisätään seuraavaksi kuvat räjähdyksestä eli luodaan näistä kolmesta kuvasta animaatio. Mene takaisin Layout-välilehdelle.

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.

Etsi Kuva-ikunan alareunasta Animation frames-ikkuna. Paina hiiren oikea painike pohjaan ja valitse komento: Import frames | From files.


Kun olet oikeassa kansiossa, niin paina CTRL-painike pohjaan ja napsauta järjestyksessä niitä kuvatiedostoja, joista animaatio koostuu. Paina lopuksi Avaa –painiketta.

Olet nyt lisännyt animaation ruudut. Alkuun jäi tyhjä ruutu. Voit poistaa sen kun painat tyhjän ruudun päällä hiiren oikeaa painiketta ja valitset avautuvasta valikosta Delete.


Animations-ikkunassa voit nimetä uudestaan lisäämäsi animaation.


Katso vielä Propeties-ikkunaa. Kohdassa Repeat to voit kertoa kuinka monta kertaa animaatio toistetaan, laita siihen arvo 1. Sulje lopuksi Kuva-editori. Siirrä Räjähdys-kuva pelialueen ulkopuolelle.


Olet siis lisännyt uuden Sprite-tyyppisen kuvaobjektin. Voit myös sen nimetä uudestaan.


Mennään vielä katsomaan komentoja Event Sheet:ssä. Etsi sieltä komento, jossa Meteoriitti törmää avaruusalukseen. Lisää sinne toiminto, joka näyttää animaation eli kopion (spawn = klooni) Räjähdys-objektista seuraavasti:

  1. Add action
  2. Valitse Avaruusalus ja paina Next
  3. Valitse Misc: Spawn to another object ja paina Next.
  4. Napsauta hiirellä kohtaa <click to choose>
  5. Valitse Räjähdys ja kuittaa OK:lla.
  6. Paina lopuksi Done.
  7. Siirrä hiirellä raahaamalla toiminto ensimmäiseksi.

Lopputulos näyttää tältä (Huomio: Komentojen järjestystä voi vaihtaa hiirellä raahaamalla).

Eli kun Meteoriitti törmää Avaruusalukseen, niin luodaan kopio Räjähdys-objektista Avaruusaluksen tilalle ja tuhotaan Avaruusalus.

Vastaavalla tavalla lisää ehtoon kun Laser osuu Meteoriittiin, ehto että luodaan kopio Räjähdys-objektista Meteoriitin tilalle ja tuhotaan Laser ja Meteoriitti. Lopputuloksen pitäisi näyttää tältä.


Meidän täytyy vielä lisätä toiminto, joka poistaa animaation näkyvistä kun se on näytetty.

  1. Paina aluksi Add event, valitse Räjähdys ja paina Next.

  2. Valitse kohdasta Animations: On fihished ja paina Next.

  3. Kirjoita lainausmerkkien sisälle sen animaation nimi, joka lopetetaan eli ”Pum”. Paina lopuksi Done.

  4. Lisätään tähän ehtoon vielä toiminto. Eli paina Add action tekstiä. Valitse Räjähdys-objekti ja paina Next.

  5. Valitse kohdasta Misc: Destroy ja paina Done-painiketta.


Eli olemme luoneet komennon, että kun Räjähdys-objektin animaatio Pum lopetetaan, niin Räjähdys-objekti poistetaan näkyvistä.

7. Pelin lopetusehto

Kuinka peli loppuu? Peli voi loppua kahdella tavalla. Jos alus tuhotaan, niin peli loppuu häviöllä. Jos kaikki meteoriitit tuhotaan, niin peli loppuu voitokkaasti.

Luodaan aluksi ns. globaali muuttuja, johon tallennetaan meteoriittien lukumäärä. Paina hiiren oikeaa painiketta Event Sheet välilehdellä ja valitse avautuvasta valikosta komento: Add global variable. Anna muuttujalle nimi (Name): Kivet ja anna muuttujalle alkuarvo (Initial value): 6 (Koska minulla on kuusi meteoriittiä, niin alkuarvo on 6). Kuittaa OK painikkeella.



Lisäämme aikaisemmin luomamme ehtoon, jossa Laser törmää Meteoriittiin - toiminnon, joka pienentää laskurin Kivet arvoa aina yhdellä, kun Meteoriitti poistetaan. Valitse Add action painike napsauttamalla sitä hiirellä.


  1. Valitse System ja paina Next painiketta.
  2. Valitse komento: Add to ja paina Next painiketta.
  3. Haluamme, että muuttujan Kivet arvo pienenee aina yhdellä eli laitamme arvoksi: Value: -1. Paina lopuksi Done.


Ehto lisäyksen jälkeen näyttää nyt seuraavalta.


Tehdään kaksi tekstiä Inkscapella. ”Game Over” ja ”Victory”.

Tallenna yksittäinen teksti komennolla: Tiedosto | Tallenna Bittikartta ( Export PNG Image). Anna kuvalle nimi ja tallennuspaikka (Export As). Paina lopuksi Vie.

Mene takaisin Layout-välilehdelle.

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. Lisää molemmat tekstit Sprite-hahmoiksi pelin päälle.




Lisää molemmat tekstit pelikentän päälle, nimeä ne kohdassa Name (Esimerkiksi: GameOver) ja muuta tekstin näkyvyysasetus Initial visibility: Invisible.

Enää puuttuu pelin lopetusehto, joka näyttää lopetustekstit. Lisää punaisella laatikoidut kohdat eli lisää komento, joka tuo tekstit näkyviin. Kun peli päättyy joko voitollisesti (kohta 9) tai tappioon (kohta 6).

Esimerkiksi voittoteksti (kohta 9) lisätään seuraavasti

  1. Paina Add event
  2. Valitse System ja paina Next.
  3. Valitse kohdasta Global & local variables toiminto: Compare variable ja paina Next.
  4. Laita asetukset: Variable: Kivet, Comparison : = Equal to, Value: 0 ja paina Done
  5. Paina Add action
  6. Valitse Victory-tekstiobjekti ja paina Next
  7. Valitse kohdasta Appearance toiminto: Set visible ja paina Next
  8. Valitse Visibility arvoksi: Visble ja paina Done.

 

Vastaavasti tappio (kohta 6) lisätään seuraavasti

  1. Paina Add action
  2. Valitse GameOver-tekstiobjekti ja paina Next
  3. Valitse kohdasta Appearance toiminto: Set visible ja paina Next
  4. Valitse Visibility arvoksi: Visible ja paina Done.