Peli 8: Hyppy-Ukko

Hyppy-Ukko

Pelin idea

Tehdään peli, jossa ukko hyppii tasoilla. Pelissä on ensin löydettävä avain ja vasta sen jälkeen mentävä avaimen kanssa ylemmällä tasolla olevan oven luokse, josta pääsee seuraavaan karttaan. Pelissä on tulimeri, jonka yli pääsee hissillä. Jos Ukko koskettaa tulta, niin peli alkaa alusta. Lisäksi ylhäältä putoaa tynnyreitä, johin ei saa myöskään koskea tai muuten peli alkaa alusta.

Pelissä animoimme kävelyn oikealle ja vasemmalle, sekä hyppäämisen ylöspäin.




Huomio: Pelissä tarvittavat kuvat on ohjeen lopussa.

Tässä harjoituksessa uusia opittavia asioita:
  • Kerrataan pelin rakentamisen vaiheet.
  • Esitellään Platform ja Jumpthru-käyttäytmismallit.
  • Opitaan tekemään edestakaisin kulkeva hissi.
  • Opitaan käynnistämään eri animaatio eri näppäimestä.
  • Opitaan tekemään useamman kartan peli, niin että pelimekaniikka on sama, joka kartassa.

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 omia karttoja tästä pelistä. Lisäksi voit kehitellä pelin ideaa eteenpäin.

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) 1600 ja Height (korkeus) 1600.  Olet määrännyt pelialueen koon pikseleinä. Haluamme tehdä vähän korkeamman pelikentän.


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



Teemme tässä siis neliön-muotoisen pelikentän. Pidetään kuitenkin pelinäkymä samana, kuin aikaisemmissa peleissä.

2. Peligrafiikka: Taustan suunnittelu

Piirretään tausta ja pelihahmot Inkscape- ohjelmassa. Taustakuvina meillä on pala maata ja pala taivasta. Huomaa, että pala taivasta on yhtä korkea kuin pelialueen korkeus eli 1600 px. Lisäksi meillä on taustakuvana pala tulta. Pelihahmoina meillä on ukko, joka on kuvattu eri asennoissa: Hyppäämässä ja kävelemässä oikealle ja vasemmalle. Lisäksi meillä on kuva tynnyristä (ympyrä), avaimesta ja ovesta. Lisäksi piirretään erilaisia palkkeja eli suorakulmioita. Näiden palkkien avulla rakennetaan erilaisia hyppytasoja. 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. 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ä.

Kun nyt napsautat hiirellä työpöydällä, niin tällöin automaattisesti aukeaa kuva-ikkuna. Aukaise tallennettu kuva taustasta, joka esittää taivasta. Täytä koko pelikentän alue taivaalla. Samalla tavalla aukaise kuva maasta ja tulesta. Laita maata vain yksi kerros pelikentän vasempaan alareunaan. Älä venytä maata koko vaakapituudelle, vaan vain vähän matkaa. Jatka venytystä tulella.

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

Pelin tausta, rakennelmat ja pelihahmot kannattaa piirtää eri tasoille. Valitse Layers-välilehti ja muuta asetuksissa (Properties) tason nimi, esimerkiksi: Tausta. Lisää toinen taso ja nimeä se nimellä: Rakennelmat.

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ätään seuraavaksi erilaisia palkkeja eli rakennetaan pelin hyppytasot. Lisää aluksi vain yksi palkki, jonka jälkeen kannattaa lisätä tähän palkkiin kohdasta Behavios käyttäytymismalleja: Lisää Jump-thru ja Physics käyttäytymismallit. Katso Physics-käyttäytymismallin asetuksia Properties-ikkunassa. Laita kohtaan: Immovable: Yes (eli on täysin liikkumaton), ja kohtaan: Prevent rotation: Yes (eli ei sallita pyörimistä).


Kun olet lisännyt palkkiin käyttäytymismallit ja säätänyt niiden asetuksia, niin sitten vasta tee niistä kopioita. Kopioita saat helposti palkeista, kun pidät CTRL painikkeen pohjassa ja samalla tartut hiirellä palkkiin ja raahaat palkin kopion uuteen paikkaan.  Tee myös vinossa olevia palkkeja ylös. Sprite-hahmoa voi pyörittää kahvasta. Laitamme sieltä myöhemmin tippumaan tynnyreitä. Palkkien paikkojen ei tarvitse olla lopulliset, vaan hienosäätö tehdään vasta sitten kun peliä testataan pelaamalla.





3. Pelihahmot

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



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ää pelihahmot painamalla avaa-painiketta (kansio). Aluksi voit aukaista yhden kuvan ja nimetä sen Animations -ikkunassa nimellä: Perus.


Muista myös tarkistaa hahmon törmäys-polygoni.

Paina Animatios- ikkunassa hiiren oikeaa painiketta ja avautuvasta valikosta valitse komento: Add animation. Perusta kolme uutta animaatiota ja nimeä ne nimillä: Hyppy, Oikealle ja Vasemmalle.

Valitse animaatio Animations- ikkunassa ja lisää siihen oikeat kuvat Animation frames-ikkunassa. Kuvat saat lisättyä kun painat hiiren oikeaa painiketta ja avautuvassa ikkunassa ota komento: Import frames | From files…

Laita kuvat järjestykseen kuten alla olevassa kuvassa. Viimeisessä kuvassa hahmo ikään kuin seisoo paikallaan.



Lisää myös muut objektit kuvaan eli tynnyri, ovi, avain ja ruskea palkki (=hissi). Lisää ylimääräinen Sprite-hahmo ja piirrä siihen neliö. Nimeä se nimellä: KlooniPortti. ja nosta se tynnyrin yläpuolelle, mutta kuitenkin pelikentän ulkopuolelle.







4. Hahmojen käyttäytymismallit – Behaviors

Jotta pelihahmot saadaan liikkumaan halutulla tavalla, niin meidän on lisättävä pelihahmoihin käyttäytymismalleja (Behaviors). Valitse objekti hiirellä napsauttamalla ja Properties-ikkunassa napsauta tekstiä: Behaviors. Lisää käyttäytymismalli + painikkeen avulla.

Lisätään aluksi maahan Solid ja Pyhiscs-käyttäytymismallit. Muista muuttaa asetus: Immovable: Yes, niin maa pysyy paikoillaan. Samoin estetään pyöriminen, laittamalla asetus: Prevent rotation: Yes.



Kun maa on kiinteä (Solid), niin sen päällä voi kävellä. Kun lisätään käyttäytymismalli: Physics, niin törmäykset kappaleen ja maanpinnan välillä ovat luonnolliset ja kimmoisat.

Vastaavasti lisää ukkoon käyttäytymismallit: ScrollTo, BoudToLayout, Physics, Platform. Hypyt toimivat pelkän Platform-käyttäytymismallin avulla eli Physics ei ole aivan välttämätön. Laita Phyhics-käyttäytymismalliin asetus, joka estää pyörimisen (Prevent rotation: Yes).

Tasossa pitäisi jo olla käyttäytymismallit: Jump-thru ja Physics. Solid ei saa olla tai muuten hyppy alhaalta ei onnistu.

Lisää hissiin samat käyttäytymismallit ja lisäksi 8Direction käyttäytymismalli. Säädetään vielä asetuksia seuraavasti.




Laitetaan seuraavaksi tynnyriin Pyhsics-käyttäytymismalli. Älä muuta oletusasetuksia. Tynnyrin pitäisi pudota ja saada nopeutta. Kun tynnyri törmää kaltevaan tasoon, niin sen pitäisi alkaa pyöriä, koska sillä on vauhtia

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 Keyborad ja kuittaa valinta painamalla Insert-painiketta.


Ohjelmoidaan ensin pelihahmon ukko: hyppy, liikkuminen oikealle ja vasemmalle, niin että samalla käynnistyy haluttu animaatio.

  1. Paina Add event.
  2. Valitse Keyboard ja paina Next.
  3. Valitse kohdasta Keyboard komento: Key is down ja paina Next.
  4. Paina nyt nuolinäppäin ylös, jolloin ilmestyy teksti: Key: Up arrow. Paina lopuksi Done.
  5. Paina Add action.
  6. Valitse Ukko ja paina Next.
  7. Valitse kohdasta Animations toiminto: Set animation ja paina Next.
  8. Lisää kohtaan Animation se animaatio, joka käynnistetään eli täydennä kohdat: Animation: ”Hyppy”, From: beginning. Lopuksi kuittaa valinta painamalla Done.

Olet nyt luonut toiminnon, jossa pelihahmo hyppää ylöspäin ja samalla hyppy animoidaan. Lopputulos näyttää tältä.


Samalla tavalla luo komennot, joka käynnistää animaation: ”Oikealle”, kun painetaan nuoli oikealle ja käynnistää animaation: ”Vasemmalle”, kun painetaan nuoli vasemmalle. Komentojen pitäisi näyttää nyt tältä.


Laitetaan seuraavaksi Hissi1:n (ruskea palkki) liikkumaan tulimeren yli. Tällöin Hissi1:n x-koordinaatti vaihtelee 450:stä 1350:een.

Sovitaan, että Hissi1:llä on muuttuja nimeltään: suunta1. Kun suunta1-muuttuja saa arvon 0, niin Hissi1:n menee oikealle. Kun suunta1-muuttuja saa arvon 1, niin Hissi1:n menee vasemmalle. Perustetaan globaali-muuttuja painamalla työpöydällä hiiren oikeaa painiketta ja avautuvasta valikosta otetaan komento: Add global variable. Laita seuraavat arvot: Name: suunta1, Type: Number, Initial value: 0 ja paina OK.

Tehdään ensin komento: Kun suunta1 on yhtä suuri kuin 0, niin liikuta Hissi1:stä oikealle eli kulman 0° suuntaan.

  1. Paina Add event.
  2. Valitse System ja paina Next.
  3. Valitse kohdasta Global & local variables komento: Compare variable ja paina Next.
  4. Laita asetukset: Variable: suunta1, Comparison: = Equal to, Value: 0 ja paina Done.
  5. Paina Add action.
  6. Valitse Hissi1 ja paina Next.
  7. Valitse kohdasta Size & Position komento: Move at angle ja paina Next.
  8. Laita asetukset: Angle: 0, Distance: 1 ja paina Done. Jos kulma on 0, niin mennään oikealle. Jos kulma on 180, niin mennään vasemmalle. Jos kasvatat Distance- kohdan arvoa, niin hissi liikkuu nopeammin.

Hissi1 liikkuu siis oikealle (kulma on 0), kun muuttujan suunta1 arvo on yhtä suuri kuin 0. Komento on tällöin muotoa.


Samalla tavalla tee komento: Kun suunta1 on yhtä suuri kuin 1, niin liiku vasemmalle eli suuntaan 180°. Komento on tällöin muotoa.


Luodaan seuraavaksi ehto: Kun hissin vaakasuuntainen koordinaattipiste ( = X) on alle 450, niin muuta suunta1 arvoon 0 eli oikealle. Komento tehdään seuraavasti.

  1. Paina Add event.
  2. Valitse Hissi1 ja paina Next.
  3. Valitse kohdasta Size & position komento: Compare X ja paina Next.
  4. Laita asetukset: Comparison: < Less than, X co-ordinate: 450 ja paina Done.
  5. Paina Add action.
  6. Valitse System ja paina Next.
  7. Valitse kohdasta Global & local variables komento: Set value ja paina Next.
  8. Laita asetukset: Variable: suunta1, Value: 0 ja paina Done.

Lopputulos näyttää tältä. Eli kun Hissi1:n arvo X:n arvo on alle 450, niin vaihda suunta1:n arvoksi 0 eli oikealle.


Vastaavalla tavalla tee komento: Kun Hissi1:n X:n arvo on yli 1350, niin vaihda suunta1:n arvoksi 1 eli vasemmalle.

Nyt hissin pitäisi toimia oikein eli mennä edes takaisin arvojen 450 ja 1350 välillä. Tarvitsemme lisäksi kaksi vaakasuuntaista hissiä lisää. Järkevintä on tehdä Hissi1:stä klooni eli paina hiiren oikeaa painiketta Hissi1:n päällä ja avautuvasta valikosta valitse komento: Clone object type.


Kloonaa Hissi1:stä kaksi kopiota ja nosta hissit Hissi2 ja Hissi3 paikoilleen.


Hissi2:sta varten tarvitsemme lisäksi uuden globaalin muuttujan suunta2 ja Hissi3:sta varten tarvitsemme uuden globaalin muuttujan suunta3. Anna myös näille alkuarvot 0. Eli yhteensä sinulla pitäisi olla nyt kolme globaalia muuttujaa.



Voit tehdä kopioita (CTRL+C, CTRL+V) komennoista 4,5,6 ja 7 ja muokata ne sopiviksi Hissi2:lle ja Hissi3:lle. Muokkauksen jälkeen Hissi2:n komennot ovat seuraavanlasia. 



Ja Hissi3:n komennot ovat seuraavanlaisia.


Sinulla voi olla hieman erilainen karttapohja ja tarkat kääntöpaikat (X:n arvot) selviävät kokeilemalla ja pelaamalla.

Tehdään seuraavaksi komento, jossa joka 10:s sekunti putoaa uusi tynnyri. Komento on seuraavanlainen.

  1. Paina Add event.
  2. Valitse System ja paina Next.
  3. Valitse kohdasta Time komento: Every X seconds ja paina Next.
  4. Laita asetus: Interval (seconds): 10 ja paina Done.
  5. Paina Add action.
  6. Valitse KlooniPortti ja paina Next.
  7. Valitse kohdasta Misc komento: Spawn another object ja paina Next.
  8. Napsauta hiirellä kohtaa: Object: <click to choose> ja valitse Tynnyri ja paina OK.
  9. Laita siis asetukset: Object: Tynnyri, Layer: 0, Image point: 0 ja paina Done.

Eli joka 10:s sekunti tehdään KlooniPortissa uusi klooni tynnyristä, jolloin komento näyttää nyt tältä.


Kun tynnyri putoaa alla olevaan tulimereen, niin tynnyri on poistettava pelistä. Komento tähän on seuraava.

  1. Paina Add event.
  2. Valitse Tynnyri ja paina Next.
  3. Valitse kohdasta Collisions komento: Collisions with another object ja paina Next.
  4. Napsauta hiirellä kohtaa <click to choose> ja valitse Tuli ja paina OK. Lopuksi kuittaa valinnat painamalla Done.
  5. Paina Add action.
  6. Valitse Tynnyri ja paina Next.
  7. Valitse kohdasta Misc komento: Destroy ja paina Done.

Komento näyttää nyt tältä.

 

6. Pelin lopetusehto

On aika miettiä pelin lopetusehtoa. Peli menee seuraavaan karttaan, jos pelaaja on noutanut avaimen ja sen jälkeen koskettaa ovea. Tarvitsemme uuden muuttujan, johon tallennetaan tieto, onko avainta noudettu vai ei. Sovitaan, että jos avain-muuttuja saa arvon 0, niin avainta ei ole noudettu. Ja jos avain-muuttuja saa arvon 1, niin avain on noudettu. Perustetaan globaali muuttuja: avain, painamalla hiiren oikeaa painiketta ja valitaan avautuvasta valikosta komento: Add global variable. Laitetaan muuttujalle seuraavat arvot: Name: avain, Type: Number, Initial value: 0. Kuittaa lopuksi OK:lla.

Luodaan seuraavaksi ehto. Kun ukko törmää avaimeen, niin poista avain ja aseta avain-muuttujalle arvo 1 eli avain on kerätty. Tehdään seuraavasti.

  1. Paina Add event.
  2. Valitse Ukko ja paina Next.
  3. Valitse kohdasta Collisions komento: Collisions with another object ja paina Next.
  4. Napsauta hiirellä kohtaa <click to choose> ja valitse Avain ja paina OK. Lopuksi kuittaa valinnat painamalla Done.
  5. Paina Add action.
  6. Valitse Avain ja paina Next.
  7. Valitse kohdasta Misc komento: Destroy ja paina Done.
  8. Paina Add action
  9. Valitse System ja paina Next.
  10. Valitse kohdasta Global & local variables komento: Set value ja paina Next.
  11. Laita asetukset: Variable: avain, Value: 1 ja paina Done.

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


Luodaan seuraavaksi ehto, että kun Ukko törmää oveen, silloin kun avain muuttujalla on arvo 1, niin mene seuraavaan kenttään ja nollaa alkuarvot. Komento tehdään seuraavasti.

  1. Paina Add event.
  2. Valitse Ukko ja paina Next.
  3. Valitse kohdasta Collisions komento: Collisions with another object ja paina Next.
  4. Napsauta hiirellä kohtaa <click to choose> ja valitse Ovi ja paina OK. Lopuksi kuittaa valinnat painamalla Done.
  5. Paina hiiren oikeaa painiketta juuri luomasi ehdon päällä ja valitse avautuvasta valikosta komento: Add another condition.
  6. Valitse System ja paina Next.
  7. Valitse kohdasta Global & local variables komento: Compare variable ja paina Next.
  8. Laita asetukset: Variable: avain, Comparsion: = Equal to, Value: 1 ja paina Done.
  9. Paina Add action.
  10. Valitse System ja paina Next.
  11. Valitse kohdasta General komento: Go to next/previous layout ja paina Next.
  12. Laita asetus: Which: next ja paina Done.
  13. Paina Add action
  14. Valitse System ja paina Next.
  15. Valitse kohdasta Global & local variables komento: Reset global variables ja paina Done.

Lopputulos näyttää nyt tältä.



Lisätään vielä peliin haastetta, jos ukko törmää tuleen, niin peli alkaa alusta. Komento tehdään seuraavasti.

  1. Paina Add event.
  2. Valitse Ukko ja paina Next.
  3. Valitse kohdasta Collisions komento: Collisions with another object ja paina Next.
  4. Napsauta hiirellä kohtaa <click to choose> ja valitse Tuli ja paina OK. Lopuksi kuittaa valinnat painamalla Done.
  5. Paina Add action.
  6. Valitse System ja paina Next.
  7. Valitse kohdasta General komento: Restart layout ja paina Done.

Jolloin valmis komento näyttää tältä.


Samalla tavalla, jos ukko törmää tynnyriin, niin peli alkaa alusta. Komento tehdään seuraavasti.

  1. Paina Add event.
  2. Valitse Ukko ja paina Next.
  3. Valitse kohdasta Collisions komento: Collisions with another object ja paina Next.
  4. Napsauta hiirellä kohtaa <click to choose> ja valitse Tynnyri ja paina OK. Lopuksi kuittaa valinnat painamalla Done.
  5. Paina Add action.
  6. Valitse System ja paina Next.
  7. Valitse kohdasta General komento: Restart layout ja paina Done.

Jolloin valmis komento näyttää tältä.


Yhteenvetona pelin kaikki komennot näyttävät nyt tältä.

Nyt ensimmäinen kenttä on valmis ja voit testata sitä ( = F5). Kun luot peliin lisää kenttiä, niin nykyistä kenttää kannattaa monistaa. Valitse Projects- ikkunassa nykyinen kenttä eli Layout1 ja paina sen päällä hiiren oikeaa painiketta. Avautuvasta valikosta ota komento: Duplicate. Tarvittaessa ota useampi kopio. Nyt voit suunnitella uusia karttoja niin monta kuin haluat. Komentoja ei tarvitse tehdä uudestaan, koska kaikki kentät käyttävät samaa Event sheet 1-välilehteä. Kentät kannattaa nimetä esimerkiksi: Peli1, Peli2, Peli3 jne.



Viimeiseksi kentäksi voit perustaa uuden kentän komennolla: Add layout (Paina hiiren oikeaa painiketta kohdan Layouts- tekstin päällä). Tänne voit laittaa pelin lopetustekstit. Nimeä kenttä esimerkiksi nimellä: Loppu. Tällä uudella kentällä on oma komento-välilehti (Event sheet 2), joka on tyhjä.


PELIN PARANNUSEHDOTUKSIA

Peliin voi lisätä lisää erilaisia kerättäviä esineitä (kolikoita, timantteja, helmiä), jotka voi pisteyttää eri tavalla. Osa voi olla näkyvillä, osa piilotettu. Voit laittaa peliin pistelaskurin (= muuttuja), joka kertoo pelin pisteet tai rahamäärän.

Peliin voi lisätä myös vihollisia ja erilaisia aseita ja ammuksia. Aseet ja ammukset voivat olla myös kerättäviä esineitä. Tai niitä voi ostaa kerättyä rahaa vastaan. Kerättäville esineille tarvitaan oma muuttujansa, niin kuin avaimellekin, joka kertoo onko esine kerätty vai ei. Esimerkiksi pyssyllä voi ampua kun ase-muuttuja = 1 ja ammus-muuttuja > 0 (ammus-muuttujassa voi olla ammusten lukumäärä). Sitten voit piirtää hahmon uudestaan pyssyn kanssa. Myös animaatio voi vaihtua kun ase-muuttuja = 1.

Voit myös kehitellä peliin erilaisia ansoja, joita tulisi välttää. Ansaan joutessaan pelaaja menettää kerätyt rahat, ammukset tai peli alkaa alusta.



Peda.net käyttää vain välttämättömiä evästeitä istunnon ylläpitämiseen ja anonyymiin tekniseen tilastointiin. Peda.net ei koskaan käytä evästeitä markkinointiin tai kerää yksilöityjä tilastoja. Lisää tietoa evästeistä