Peli 4: Ping Pong

Ping Pong

2019-01-06T21:46:09+02:00

Pelin idea

Tehdään PingPong-peli, jossa pelikentän koko on 800 x 600. Tällöin vasemmassa yläreunassa on origo eli piste (0,0) ja oikeassa alareunassa on piste (800,600). Pelikentän keskellä on keskipiste eli piste (400,300). Havaitaan, että X-koordinaatti kasvaa oikealle ja Y-koordinaatti alaspäin.

Pallo lähtee keskeltä ja pallon suunta arvotaan, jolloin alkukulma voi olla mitä tahansa väliltä: 0°…360°. Kun pallo osuu yläreunaan, niin arvotaan uusi kulma väliltä: 45°…135°. Kun pallo osuu alareunaan, niin arvotaan uusi kulma väliltä: 225°…315°. Jos pallo osuu oikeassa reunassa olevaan punaiseen palkkiin, niin silloin arvotaan uusi kulma väliltä: 135°…225°. Vastaavasti jos pallo osuuvasemmassa reunassa olevaan siniseen palkkiin, niin silloin arvotaan uusi kulma väliltä: -45°…45°. Pallo muuten menee koko ajan eteenpäin. Jotta peli vaikeutuisi koko ajan, on pallon nopeuden kasvettava, esimerkiksi silloin kun pallo osuu siniseen tai punaiseen palkkiin. Jos pallo osuu oikeaa tai vasempaan reunaan, tällöin peli alkaa alusta eli pallo palautetaan keskelle ja arvotaan uusi kulma. Lisätään peliin myös laskurit, jossa nähdään tehdyt maalit.

Huomio: Pelissä tarvittavat kuvat on ohjeen lopussa.

Tässä harjoituksessa uusia opittavia asioita:

Kerrataan pelin rakentamisen vaiheet.
Opitaan Construct-ohjelman käyttämästä kulma- ja koordinaatistosysteemistä.
Opitaan mittatarkkaa pelikentän suunnittelua.
Opitaan liikuttamaan kappalaita koordinaatistossa.
Käydään läpi arpomiskomento.

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 peli, jossa toinen pelaaja ampuu pilkulta jalkapallon ja toinen pelaaja torjuu sen.

1. Pelikentän luominen

2019-01-06T19:52: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. Peligrafiikka: Taustan suunnittelu

2019-01-07T21:10:19+02:00

Piirretään tausta ja pelihahmot Inkscape-ohjelmassa. Pelihahmoina meillä on vihreä ympyrä, sininen ja punainen suorakulmio. Lisäksi tarvitsemme erivärisiä neliöitä taustakuviksi. Ympyrän koko on noin 40 px (W = leveys, H = korkeus). Suorakulmion koko on W = 20 px ja H = 100 px. 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. Täytä koko pelikentän alue tällä tausta-kuvalla. Tämän jälkeen lisää ylös keltainen, alas keltainen, vasemmalle sininen ja oikealle punainen neliö taustakuvaksi. Käytä näissä kaikissa Titled Background- objektia. Voit tarkasti asettaa eriväriset taustakuvat oikeaan kokoon ja paikkaan Properties-ikkunassa, jossa on objektin paikka kohdassa Position ja objektin koko kohdassa Size. Jokainen palkki pitää myös nimetä niitä kuvaavilla sanoilla: yla, ala, oikea ja vasen.

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

3. Pelihahmot

2019-01-06T20:16:21+02:00

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.

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ää pelikenttään pallo, sininen suorakulmio ja punainen suorakulmio.

Kun olet lisännyt kaikki pelihahmot, niin nimeä kukin pelihahmo Properties-ikkunassa. Nimet voisivat olla esimerkiksi: Pallo, Sininen ja Punainen.

Seuraavaksi lisätään käyttäytymismallit.

4. Hahmojen käyttäytymisnallit – Behaviors

2019-01-06T20:20:33+02:00

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

Suorakulmion käyttäytymismallit ovat 8Direction ja BoundToLayout. Muutetaan Properties ikkunassa 8Direction käyttäytymismallin asetuksia. Laitetaan kohtaan Directions: Up & Down eli vain ylös ja alas liike on sallittu. Laitetaan kohtaan Set angle: No eli kulma ei muutu. Laitetaan kohtaan Default controls: No eli emme käytä oletus ohjausta, vaan ohjelmoimme uudet painikkeet. Lisää samat asetukset myös punaiselle suorakulmiolle.

Vastaavasti pallolle laitamme vain 8Direction - käyttäytymismallin. Muutamme siellä yhden asetuksen eli Default controls: No eli emme käytä oletus ohjauskomentoja, vaan ohjelmoimme itse pallolle liikkeen.

5. Pelihahmojen ohjelmoiminen – Event sheet

2019-01-08T19:32:07+02:00

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.

Näppäimistön ohjelmointi

Haluamme luoda toiminnon kun painetaan a-kirjain, niin sininen suorakulmio liikkuu ylös ja kun painetaan z-kirjain, niin sininen suorakulmio liikkuu alas. Vastaavasti kun painetaan nuoli ylös, niin punainen suorakulmio liikkuu ylös ja kun painetaan nuoli alas, niin punainen suorakulmio liikkuu alas. Mennään Event sheet – välihdelle.

Paina Add event, valitse Keyboard ja paina Next.
Valitse komento Keyboard: Key is down (Kun näppäin on pohjassa) ja paina Next.
Paina <click to choose>, jonka jälkeen paina näppäimistöltä a-kirjainta ja kirjain: A ilmestyy ikkunaan. Kuittaa OK:lla. Paina lopuksi Done.
Olemme nyt luoneet ehdon (Kun a-kirjainta on painettu), seuraavaksi lisäämme toiminnon. Napsauta hiirellä Add action tekstiä.
Valitse Sininen ja paina Next.
Valitse nyt ryhmästä 8Direction: Simulate control ja paina Next.
Laita Control asetuksen arvoksi: Right ja paina Done.

Olemme nyt luoneet seuraavan toiminnon

Eli kun painetaan näppäimistöltä a-kirjainta, niin sininen suorakulmio liikkuu ylös.

Samalla tavalla luo seuraavat lauseet:

Kun painetaan näppäimistöltä z-kirjain pohjaan, niin sininen suorakulmio liikkuu alas.
Kun painetaan näppäimistöltä nuoli ylös pohjaan, niin punainen suorakulmio liikkuu ylös.
Kun painetaan näppäimistöltä nuoli alas pohjaan, niin punainen suorakulmio liikkuu alas.

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

Testaa näppäimistön toimivuus painamalla Run layout.

Globaalit muuttujat

Peli tarvitsee seuraavia muuttujia.

Luodaan globaalit muuttujat Evet sheet - välilehdellä. Paina hiiren oikeaa painiketta ja valitse avautuvasta valikosta: Add global variable.

Anna Pelaaja1 muuttujalle alkuarvo (Initial value) 0, Pelaaja2 muuttujalle alkuarvo 0, nopeus muuttujalle alkuarvo 1, tila muuttujalle alkuarvo 0. Kun olet lisännyt kaikki muuttujat, niin sinun pitäisi nähdä seuraavaa.

Pelin tila

Kun peli on käynnissä (tila = 1), niin pallo silloin etenee eteenpäin. Kun peli on alussa (tila = 0), niin tee seuraavat toiminnot: Poista nykyinen pallo, arvo uusi kulma väliltä 0..360, aseta pallo ikkunan keskelle pisteeseen (400,300), tee pallosta klooni (uusi pallo), aseta pallon nopeus = 1 ja muuta pelin tila arvoon 1. Tämä toiminto tehdään seuraavasti:

Ampuminen hiiren avulla tapahtuu seuraavalla toiminnolla.

Paina Add event.
Valitse System ja paina Next.
Valitse toiminto: Compare variable, joka löytyy ryhmästä Global & local variable ja paina Next.
Laita asetukset: Variable: tila, Comparsion: = Equal to, Value: 0 ja paina Done.
Paina Add action.
Valitse Pallo ja paina Next.
Valitse kohdasta Misc toiminto: Destroy ja paina Done.
Paina Add action uudestaan.
Valitse Pallo ja paina Next.
Valitse kohdasta Angle toiminto: Set angle.
Laita kohtaan Angle: random(0,360) ja paina Done.
Paina Add action uudestaan.
Valitse Pallo ja paina Next.
Valitse kohdasta Size & Position toiminto: Set position ja paina Next.
Laita kohtaan X: 400 ja kohtaan Y: 300 ja paina Done.
Paina Add action uudestaan.
Valitse Pallo ja paina Next.
Valitse kohdasta Misc toiminto: Spawn another object ja paina Next.
Napsauta hiirellä kohtaa <click to choose> ja valitse Pallo ja paina OK. Lopuksi kuittaa valinta painamalla Done.
Paina Add action uudestaan.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables toiminto: Set value ja paina Next.
Laita seuraavat asetukset: Variable: nopeus, Value: 1. (Jos pallo liikkuu alussa liian hitaasti, niin laita silloin arvoksi 2 tai 3). Kuittaa valinnat painamalla Done.
Paina Add action uudestaan.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables toiminto: Set value ja paina Next.
Laita seuraavat asetukset: Variable: tila, Value: 1. Kuittaa valinnat painamalla Done.

Olemme nyt luoneet seuraavan komennon.

Tämä komento suoritetaan vain kun peli alkaa alusta. Tehdään seuraavaksi ehto, kun peli on käynnissä
(tila = 1), niin liikuta palloa eteenpäin.

Paina Add event.
Valitse System ja paina Next.
Valitse toiminto: Compare variable, joka löytyy ryhmästä Global & local variable ja paina Next.
Laita asetukset: Variable: tila, Comparsion: = Equal to, Value: 1 ja paina Done.
Paina Add action.
Valitse Pallo ja paina Next.
Valitse kohdasta Size & Position toiminto: Move forward ja paina Next.
Laita kohtaan Distance teksti: nopeus eli pallon nopeus määräytyy muuttujan nopeus arvon, mukaan. Koska alussa nopeus muuttujan arvo on 1, niin pallo liikkuu alussa nopeudella 1. Kuittaa valinta painamalla Done.

Olemme nyt luoneet seuraavan komennon.

Eli kun peli on käynnissä, niin pallo liikkuu eteenpäin. Pallon pitäisi nyt liikkua. Seuraavaksi teemme ehdot kuinka pallon törmäykset käsitellään. Pallo voi törmätä yläreunaan, alareunaan, siniseen suorakulmioon, ja punaiseen suorakulmioon. Kaikissa näissä tapauksissa arvotaan uusi kulma. Lisäksi jos pallo törmää suorakulmioon, niin kasvatetaan nopeus-muuttujan arvoa 0.5:llä. Pallo voi myös törmätä vasempaan tai oikeaan reunaan, silloin anna pelaajalle piste ja muuta pelin tila arvoon 0 eli peli alkaa tällöin alusta.

Tehdään ensin ehto, että jos pallo törmää siniseen suorakulmioon, niin arvo uusi kulma väliltä -45°…45°.

Paina Add event.
Valitse Pallo ja paina Next.
Valitse toiminto: On collision with another object, joka löytyy ryhmästä Collisions ja paina Next.
Napsauta kohtaa <click to choose> ja valitse sininen (suorakulmio). Kuittaa valinta painamalla Done.
Paina Add action.
Valitse Pallo ja paina Next.
Valitse kohdasta Angle toiminto: Set angle ja paina Next.
Kirjoita kohtaan Angle: random(-45,45) ja paina Done.
Paina Add action uudestaan.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables toiminto: Add to ja paina Next.
Laita asetukset: Varible: nopeus, Value: 0.5 ja paina Done.

Olemme nyt luoneet seuraavan toiminnon.

Tee samalla tavalla myös toiminto kun pallo törmää punaisen suorakulmion kanssa. Ainut ero on se, että kulma arvotaan väliltä 135,…,225 eli arpomiskomento on tällöin: random(125,225). Lopputuloksen pitäisi näyttää tältä.

Myös törmäykset ylös eli pallon ja yläpalkin kanssa menee muuten samalla tavalla, paitsi että kulma on tällöin välillä 45…135. Nopeuden lisäystä ei silloin välttämättä tarvitse laittaa (edellä kohdat: 9. - 12. jäävät pois). Lopputulos on seuraavanlainen.

Lisätään vielä törmäys ehto alas eli pallon ja alapalkin kanssa. Uusi arvottu kulma on tällöin välillä 225…315. Lopputulos on nyt seuraavanlainen.

Vielä puuttuu pari törmäys ehtoa eli pallon törmäys vasemmalla ja oikealla olevien palkkien kanssa. Aloitetaan vasemmassa reunassa olevasta palkista. Tehdään seuraavasti.

Paina Add event.
Valitse Pallo ja paina Next.
Valitse toiminto: On collision with another object, joka löytyy ryhmästä Collisions ja paina Next.
Napsauta kohtaa <click to choose> ja valitse Kuittaa valinta painamalla Done.
Paina Add action.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables toiminto: Set value ja paina Next.
Laita seuraavat asetukset: Variable: tila, Value: 0 ja paina Done.
Paina Add action uudestaan.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables toiminto: Add to ja paina Next.
Laita asetukset: Varible: pelaaja2, Value: 1 ja paina Done

Lopputulos on seuraavanlainen.

Eli kun pallo osuus vasempaan palkkiin, niin aseta pelin tila arvoon 0 (= peli alkaa alusta) ja lisää pelaajalle 2 yksi piste.

Vastaavalla tavalla tee ehto, kun pallo osuu oikeaan palkkiin, niin aseta pelin tila arvoon 0 ja anna pelaajalle 1 yksi piste. Lopputuloksen pitäisi näyttää nyt tältä.

Pelin pitäisi jo toimia nyt oikein. Lisätään vielä tulostus, joka kertoo pisteet. Lisätään seuraavaksi kaksi Text- objektia pelikenttään kaksoisnapsauttamalla.

Valitse Text ja paina Insert.

Lopputuloksen pitäisi näyttää tältä. Voit kasvattaa fontin kokoa asetuksissa: Properties | Font.

Mene seuraavaksi Event Sheet - välilehdelle ja lisää sinne seuraava koodi.

Paina Add Event.
Valitse System ja paina Next.
Valitse Every tick ja paina Done.
Paina Add action.
Valitse Text ja paina Next.
Valitse kohdasta Text kohta: Set text ja paina Next.
Kirjoita kohtaan Text: ”Pelaaja 1,pisteet: ”&Pelaaja1 ja paina Done.

Lopputulos näyttää tältä.

Samalla tavalla tee toiseen tekstikenttään samanlainen toiminto. Tulostuskomento on tällöin muotoa.

Lopputulos on nyt muotoa.

Kun ajat ohjelman, niin lopputuloksen pitäisi näyttää tältä (jos teksti ei näy kokonaan, niin suurenna teksti-laatikkoa tarvittaessa).

Kuten huomasit, niin voit kirjoittaa haluamasi tekstin lainausmerkkien sisään. Muuttujat kirjoitetaan ilman lainausmerkkejä. Tekstin ja muuttujan välissä käytetään &- merkkiä erottimena.

Peli on nyt valmis. Voit vielä lisätä peliin lopetusehdot, jossa verrataan muuttujan arvoja (Compare variable). Kun ehto on tosi, niin silloin mennään uuteen pelikenttään (Go to Layout). Ensin sinun pitää perustaa kaksi uutta pelikenttää Projects-ikkunassa (hiiren oikea painike ja komento : Add layout: voitto1 ja voitto2. (Kertaa se Zombie-pelistä). Esimerkiksi ehto voisi olla seuraavanlainen: Jos pelaaja1-muuttujan arvo on suurempi kuin 9, niin mene voitto1-pelikenttään. Vastaavasti, Jos pelaaja2-muuttujan arvo on suurempi kuin 9, niin mene voitto2-pelikenttään.

Komento tehdään seuraavasti.

Paina Add event.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables komento: Compare variable ja paina Next.
Laita asetukset: Varible: Pelaaja 1, Comparison: > Greater than, Value 9 ja paina Done.
Paina Add action.
Valitse System ja paina Next.
Valitse kohdasta General toiminto: Go to layout ja paina Next.
Laita asetukset: Layout: Voitto 1.

Tee tappio ruutu samamalla tavalla. Lopputuloksen pitäisi näyttää silloin tältä.

Pelissä tarvittavat kuvat

2019-01-06T21:49:41+02:00

: Punainen voitti
: Sininen voitti
: Punainen palkki
: Sininen pallki
: Pallo
: Sininen neliö
: Punainen neliö
: Keltainen neliö
: Tausta neliö