Peli 6: Not so Angry Bunny

Not so Angry Bunny

2019-01-07T22:28:47+02:00

Pelin idea

Tehdään peli, jossa ammutaan tykillä kohti pupua. Tehdään peli siten, että tykin piippu seuraa hiiren osoitinta. Kun napsautetaan hiiren painiketta, niin yksi ammus lentää kerrallaan tykin piipusta. Mitä kauempana hiiren osoitin on tykistä napsautushetkellä, niin sitä suuremmalla vauhdilla ammus lentää.

Peli loppuu jos ammus osuu pupuun tai pupu koskettaa maanpintaa. Palkeilla yritetään suojata pupu ammuksilta ja koskettamasta maanpintaa.

Huomio: Pelissä tarvittavat kuvat on ohjeen lopussa.

Tässä harjoituksessa uusia opittavia asioita:

Kerrataan pelin rakentamisen vaiheet.
Esitellään Physics-käyttäytmismalli (gravitaatio, kiihtyvyys, hidastuvuus).
Opitaan tekemään kertalaukaistava tykki.
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ä omia hahmoja ja esteitä peliin.

1. Pelikentän luominen

2019-01-08T20:26:56+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) 1600 ja Height (korkeus) 1200. 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.

Pelikentän koko on nelinkertainen verrattuna pelinäkymän kokoon.

2. Peligrafiikka: Taustan suunnittelu

2019-01-07T21:09:50+02:00

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 1200 px. Pelihahmoina meillä on pupu ja tykki. Pupusta on kaksi kuvaa, koska teemme siitä animaation. Tykki koostuu kahdesta osasta: tykin piipusta ja tykin jalustasta. Tykki tarvitsee lisäksi ammuksen eli piirrämme kuvan siitä. Lisäksi piirretään erilaisia kuvia: suorakulmioita ja ympyrä, joiden avulla pelialue rakennetaan. Piirretään vielä kuva räjähdyksestä. 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. Laita maata vain yksi kerros pelikentän alareunaan. Venytä oikealle.

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

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

3. Pelihahmot

2019-01-07T21:20:25+02:00

Pelihahmoja varten lisäämme uuden tason. Paina + painiketta Layers-ikkunassa ja anna tasolle nimi Properties-ikkunassa. Esimerkiksi Pelihahmot. Tarvittaessa tässä voisi käyttää kolmatta tasoa eli 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.

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ää aluksi tykin piippu. Aseta kuvan keskipiste piipun ympyrän keskelle hiirellä napsauttamalla.

Kun lisäät pupun, niin pupulle lisätään kaksi kuvaa kohtaan Animation frames. Toisen kuvan saat lisättyä kun painat hiiren oikeaa painiketta Animation frames ikkunan päällä ja valitset avautuvasta valikosta komennon: Import frames | From files.

Toinen asia, mikä pitää tarkistaa, on törmäyskehikko. Siinä kehikon pohjan pitää olla tasainen. Korjaa se siirtelemällä hiirellä raahaamalla punaisia kahvoja. Katso molempien kuvien kehikko.

Lisää myös muut objektit kuvaan eli tykin jalusta, ammus, räjähdys, ja erilaisia palkkeja. Ammuksen ja räjähdyksen voit laittaa lähelle tykkiä, mutta pelikentän ulkopuolelle.

4. Hahmojen käyttäytymismallit – Behaviors

2019-01-07T21:31:02+02:00

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 (= Kinnteä) ja Pyhiscs (Fysiikan lakien alainen)-käyttäytymismallit. Muista muuttaa asetus: Immovable: Yes, niin maa pysyy paikoillaan. Samoin estetään pyöriminen, laittamalla asetus: Prevent rotation: Yes.

Laitetaan seuraavaksi tykkiin 8Directions-käyttäytymismalli, muutetaan astus: Default controls: No eli ohjelmoimme itse siihen liikuttelu toiminnon hiiren avulla.

Pupu saa Pyhsics käyttäytmismallin. Voit päättää itse haluatko, että pupu kaatuu (pyörii) vai ei. Jos laitat asetuksen. Prevent rotation: No, sallii pyörimisen. Prevent rotation: Yes, estää pyörimisen. Testaa ensin.

Kaikille palkeille pitää laittaa Solid ja Physics käyttäytymismallit. Solid tekee palkeista kiinteitä ja Physics tekee esineistä fysiikan lakien alaisia (gravitaatio, törmäykset). Palkit voivat kaatua eli ehdottomasti pitää olla asetukset: Prevent rotation: No ( = voi pyöriä) ja Immovable: No ( = voi liikkua).

Ammus saa myös Physics käyttäytymismallin. Lisäksi pelinäkymä laitetaan mukaan ammukseen eli ScrollTo-käyttäymismalli. Kun ammus lentää ulos pelialueelta, niin se poistetaan eli lisää myös DestroyOutsideLayout-käyttäytymismalli. Älä muuta asetuksia.

5. Hahmon ohjelmoiminen – Event sheet

2019-01-08T19:25:24+02:00

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

Haluamme luoda seuraavaksi toiminnon, jossa tykki voi ampua ammuksen hiiren napsautuksen avulla. Lisätään aluksi toiminto, että tykki kääntyy kohti hiirtä. Mene Event sheet väilehdelle.

Paina Add event, valitse System ja paina Next.
Valitse komento General: Every tick (Jokaisella hiiren napsautuksella) ja paina Done.
Paina Add action, valitse Tykki ja paina Next.
Valitse nyt toiminto Angle: Set angle toward position ja paina Next.
Laita kohtaan X: Mouse.X ja kohtaan Y: Mouse.Y. Paina lopuksi Done.

Olemme nyt lisänneet toiminnon. Kun liikutetaan pelikentässä hiirtä, niin Tykki kääntyy kohti tätä hiiren osoitinta. Komento näyttää tältä.

Huomio: Jos testaat toimintoa (= F5), niin nosta väliaikaisesti ammus tykin viereen pelikentän sisälle.

Laitetaan seuraavaksi tykki ampumaan.

Ampuminen hiiren avulla tapahtuu seuraavalla toiminnolla.

Paina Add event.
Valitse Mouse ja paina Next.
Valitse toiminto: On any click ja paina Done.
Paina Add action.
Valitse Tykki ja paina Next
Valitse kohdasta Misc toiminto: Spawn another object ja paina Next
Napsauta hiirellä kohtaa <click to choose> ja valitse Ammus ja paina OK. Lopuksi kuittaa valinta painamalla Done.
Paina uudestaan Add action.
Valitse Ammus ja paina Next.
Valitse kohdasta Physics: Forces toiminto: Apply force at angle ja paina Next.
Kirjoita kohtaan Force: distance(Tykki.X,Tykki.Y,Mouse.X,Mouse.Y) . Tämä tarkoittaa, että tykin voima määrätään tykin koordinaattipisteen (Tykki.X,Tykki.Y) ja hiiren koordinaattipisteen (Mouse.X,Mouse.Y) välisestä etäisyydestä. Mitä kauempana hiirien osoitin on hiiren klikkaus hetkellä tykistä, sitä suurempi on voima. Laita kohtaan Angle: Tykki.Angle eli ammuksen suunta on sama kuin tykin piipun suunta sillä hetkellä kuin klikataan. Paina lopuksi Done.

Olemme nyt luoneet ampumisehdon, joka näyttää tältä.

Huomio: Jos testaat toimintoa (= F5), niin nosta väliaikaisesti ammus tykin viereen pelikentän sisälle.

Tykillä voi nyt ampua sarjatulta. Haluamme kuitenkin tykin, jolla amutaan yksi laukaus kerrallaan. Ennen kuin uusi laukaus voidaan ampua, niin ammuksen pitäisi ensin räjähtää. Yksi laukaus onnistuu, kun otamme käyttöön muuttujan(Olkoon sen nimi esimerkiksi: Tulitus), jossa on kaksi arvoa: 0 = Ampuminen sallitaan, 1 = Ampuminen ei ole mahdollista.

Perustetaan ensin Globaali muuttuja: Tulitus ja annetaan sille alkuarvo 0 eli alussa ampuminen sallitaan.

Globaali-muuttuja perustetaan siten, että painat Event sheet-välilehdellä hiiren oikean painikkeen pohjaan ja valitset avautuvasta valikosta komennon: Add global variable. Laita kohtaan name: Tulitus ja kohtaan Intial Value: 0. Kuittaa valinnat lopuksi painamalla OK-painiketta.

Lisäämme toisen ehdon aikaisemmin luomamme komentoon. Paina hiiren oikeaa painiketta kohdan:
2 Mouse On any click, ehdon päällä ja valitse avautuvasta valikosta: Add another condition.

Valitse System ja paina Next.
Valitse kohdasta Global & local variable toiminto: Compare variable ja paina Next.
Laita asetukset: Variable : Tulitus, Comparison: = Equal to, Value: 0 ja paina Done.
Valitse Add action uudestaan.
Valitse System ja paina Next.
Valitse kohdasta Global & local variable toiminto: Set value ja paina Next.
Laita asetukset: Variable: Tulitus, Value: 1 ja paina Done.

Nyt ampuminen onnistuu vain kerran eli olemme nyt muuttaneet komennon muotoon.

Luodaan seuraavaksi ehto, että kun ammus on tuhottu, niin annetaan Tulitus-muuttujalle takaisin arvo 0 eli tällöin ampuminen on mahdollista. Samaan lausekkeeseen kannattaa lisäksi laittaa toiminto, että kamera näkymä palutetaan takaisin tykkiin. Jos muistat, niin laitoimme ammukselle käyttäytymismallin: ScrollTo. Mutta jos ammusta ei ole, niin kameranäkymän on olatava silloin tykissä ja se houtuu nyt samalla.

Paina Add Event.
Valitse Ammus ja paina Next.
Valitse toimonto: On destroyed rymästä Misc ja paina Done.
Paina Add action.
Valitse System ja paina Next.
Valitse kohdasta Global & local variable toiminto: Set value ja paina Next.
Laita asetukset: Variable: Tulitus, Value: 0 ja paina Done.
Valitse Add action uudestaan.
Valitse System ja paina Next.
Valitse kohdasta Scrolling toiminto: Scroll to object ja paina Next.
Napsauta hiirellä kohtaa: <click to choose>.
Valitse Tykki ja paina OK painiketta. Kuittaa valinnat lopuksi painamalla Done.

Olemme luoneet toiminnon, joka palauttaa ampumisen kun ammus on tuhottu.

Ennen kuin tätä komentoa pääsee testaamaan, niin meidän on tuhottava ammus. Luodaan ehto, kun ammus ei enään liiku eli kun ammuksen nopeus on pienempi kuin 0.1, niin tuhoa ammus. Ammuksen tuhoutuminen voitaisiin vielä jakaa seuraaviin tapahtuma sarjoihin: Odota 1.5 sekunttia, luo räjähdys-objektista klooni ammuksen päälle, odota 0.2 sekuntia, tuhoa ammus, tuhoa räjähdys. Tämä toiminto tehdään seuraavasti.

Paina Add event.
Valitse Ammus ja paina Next.
Kohdasta Physics valitse toiminto: Compare Velocity ja paina Next.
Laita asetukset: Which: Overall velocity, Comparison: ≤ Less or equal, Value: 0.1 ja paina Done.
Paina Add action.
Valitse System ja paina Next.
Kohdasta Time valitse toiminto: Wait ja paina Next.
Laita asetus: Seconds: 1.5 ja paina Done (Huomio: Älä käytä pilkkua).
Paina Add action.
Valitse Ammus ja paina Next.
Valitse kohdasta Misc toiminto: Spawn another object ja paina Next.
Napsauta hiirellä kohtaa: <click to choose>
Valitse Räjädys ja paina OK painiketta. Kuittaa valinnat lopuksi painamalla Done.
Paina Add action.
Valitse System ja paina Next.
Kohdasta Time valitse toiminto: Wait ja paina Next.
Laita asetus: Seconds: 0.2 ja paina Done .
Paina Add action.
Valitse Ammus ja paina Next.
Valitse kohdasta Misc toiminto: Destroy ja paina Done.
Paina Add action.
Valitse Räjähdys ja paina Next.
Valitse kohdasta Misc toiminto: Destroy ja paina Done.

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

Nyt ampuminen onnistuu halutulla tavalla. Lisäksi ammuksen räjähtäminen nähdään, siksi tarvitaan pieni viive ennekuin räjähdys-kuva poistetaan.

Tarvitsemme vielä komennon, kun Pupu törmää Ammukseen tai Maahan, niin tuhoa pupu. Kokeillaan tässä yhteydessä uutta objektia, nimeltään Particles, joka luo myös räjähdysefektin eli hajottaa pupun atomeiksi.

Mene pelinäkymään (Layout) ja paina hiiren oikeaa painiketta pelikentän päällä ja valitse komento: Insert new object. Valitse Particles ja paina Insert-painiketta.

Napsauta hiirellä pelikentässä, niin tällöin aukeaa tuttu Kuva-ikkuna. Lataa tähän toinen pupun kuvista ja sulje ikkuna. Tämän partikkeli-pupun voit nostaa pelikentän sivulle.

Nimeä myös tämä objekti, esimerkiksi PupuRäjähtää. Muuta asetuksissa: Type: One-shot. Voit vielä hieman muokata partikkeli-kuvion asentoa.

Mennään nyt takaisin Event Sheet-välilehdelle. Lisätään komento kun pupu törmää ammukseen, niin tuhotaan pupu ja näytetään PupuRäjähtää-objekti.

Paina ensin Add event.
Napsauta Pupua ja paina Next.
Valitse komento: Collisions: On collision with another object ja paina Next.
Napsauta hiirellä kohtaa: <click to choose>
Valitse Ammus ja paina OK painiketta. Kuittaa valinta painamalla Done.
Napsauta hiirellä kohtaa: Add action.
Valitse Pupu ja paina Next.
Valitse Misc: Destroy ja paina Done.
Napsauta uudestaan hiirellä kohtaa: Add action.
Valitse Pupu ja paina Next.
Valitse kohdasta Misc toiminto: Spawn another object ja paina Next.
Napsauta hiirellä kohtaa: <click to choose>
Valitse PupuRäjähtää ja paina OK painiketta. Kuittaa valinnat lopuksi painamalla Done.

Nyt meillä toiminto pupun räjäyttämiseksi, joka näyttää tältä.

Tähän kannattaa tosin samalla lisätä lopetusehto. Se voisi olla, että odota 2 sekuntia (jotta nähdään pupun räjäytys) ja siirry seuraavaan pelikenttään eli jatketaan edelistä komentoa.

Paina Add action uudestaan.
Valitse System ja paina Next.
Kohdasta Time valitse toiminto: Wait ja paina Next.
Laita asetus: Seconds: 2 ja paina Done .
Paina Add action uudestaan.
Valitse System ja paina Next.
Valitse kohdasta General toiminto: Go to next/previous layout ja paina Next.
Laita asetus: Which: next ja paina Done.

Äskeinen komento hieman täydennettynä näyttää nyt tältä.

Tee samanlainen komento kun pupu törmää maahan. Voit valita edellisen komennon ja tehdä siitä kopion Copy-Paste toiminnolla (CTRL + C, CTRL+V). Jonka jälkeen muutat vain muutaman kohdan.

Tarvittavat komennot on nyt lisätty, mennään seuraavaksi takaisin pelinäkymän puolelle.

6. Pelikentän suunnittelu

2019-01-07T22:16:01+02:00

Seuraavaksi suunnittele pelikenttä valmiiksi. Rakenna esteitä pupun ja tykin väliin. Kopiota saat objekteista kun pidät CTRL-näppäimen pohjassa ja tartut kopioitavaan objektiin hiirellä ja raahaat sen uuteen paikkaan.

Muista laittaa pupu, jonkin palkin päälle. Koska jos pupu koskettaa maata, niin peli päättyy.

Testaa pelikenttää (= F5) ja tee muutoksia, jos et ole tyytyväinen.

Pelikentän monistaminen

Kun ensimmäinen pelikenttä on valmis, niin sitä voi helposti monistaa. Mene Projects-ikkunaan.

Paina pelikentän nimen (Layout 1) päällä hiiren oikeaa painiketta ja ota komento: Duplicate, niin monta kertaa kuin haluat. Otetaan esimerkiksi kaksi kertaa.

Voit nimetä pelikentät haluamallasi tavalla.

Sinun tarvitsee vain nostaa pupu ja palikat eri paikkoihin eri pelikentissä eli luoda uudet pelikentät.

Lopuksi sinun täytyy luoda vielä yksi pelikenttä lisää, nimittäin lopetusruutu. Perusta uusi pelikenttä painamalla Projects-ikkunassa Layouts-tekstin päällä hiiren oikeaa painiketta ja valitse valikosta komento: Add layout. Jonka jälkeen napsauta tekstiä: Add event sheet. Nimeä viimeinen pelikenttä nimellä: Loppu.

Lopetusruutuun voit lisätä painonapin (OK Button), josta peli voidaan käynnistää uudestaan.

Mene Event sheet 2 – välilehdelle, ja tee sinne komento:

Paina Add event.
Valitse Button ja paina Next.
Valitse On clicked ja paina Done.
Paina Add action.
Valitse System ja paina Next.
Valitse kohdasta General toiminto: Go to Layout ja paina Next.
Valitse Layout: Peli 1 (ensimmäinen pelikenttä) ja kuittaa OK:lla.

Lopputulos näyttää tältä.

Huomio: Jos pelissä olisi muita globaaleja-muuttujia, niin silloin kannattaa lisätä tähän myös toiminto: Reset global variables tähän siirtymisehtoon.

Peli on nyt valmis. Peliä voisi kehittää eteenpäin esimerkiksi siten, että lisäät peliin pistelaskurin, jolloin peliin voi tuoda esimerkiksi muita kohteita, joita voi ampua ja joista saa pisteitä tai vaikka lisää ammuksia. Lisäksi voit rajoittaa ammus-laskurin avulla ammusten määrää. Jos ammukset loppuu, niin se on silloin Game Over. Tällöin peli kannattaa testata pelaamalla, että se on mahdollista pelata läpi. Piste-laskuri ja ammus-laskuri ovat siis globaaleja-muuttujia.

Pelissä tarvittavat kuvat

2019-01-07T22:16:16+02:00

: Pupu2
: Pupu1
: Tykin piippu
: Tykin jalusta
: Taivas
: Maanpinta
: Ympyränmuotoinen palkki
: Vaakasuuntainen palkki
: Pystysuuntainen palkki
: Neliönmuotoinen palkki
: Ammus
: Räjähdys
: You Win