Peli 3: Zombie

Zombie

2019-01-06T19:23:32+02:00

Pelin idea

Tehdään yksinkertainen räiskintäpeli, jossa velho yrittää löytää luolan ja zombiet jahtaavat velhoa. Peli päättyy voittoon, jos velho löytää luolan. Peli päättyy tappioon, jos zombiet saavat velhon kiinni.

Huomio: Pelissä tarvittavat kuvat on ohjeen lopussa.

Tässä harjoituksessa uusia opittavia asioita:

Kerrataan pelin rakentamisen vaiheet.
Opitaan ohjelmoimaan näppäimistöä.
Opitaan ohjelmoimaan hiirtä.
Opitaan tekemään komennoista ryhmä.
Opitaan tekemään klooneja hahmosta.

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: Toteuta oma avaruusräiskintäpeli tällä idealla. Avaruusalus on "Velho", Laser on "Tulipallo" ja Meteoriitit ovat "Zombieta", jotka tulevat kohti. Voit piirtää itse hahmot. Voit myös keksiä oman idean (esimerkiksi tankkipeli yms.).

1. Pelikentän luominen

2019-01-08T20:27:39+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: Pelin tausta

2019-01-06T16:50:46+02:00

Piirretään tausta ja pelihahmot Inkscape-ohjelmassa. Pelihahmoina meillä on Velho ja Zombie. Zombiesta tehdään kaksi kuvaa. Lisäksi piirretään kuvat kiviesteestä, tulipallosta, luolasta ja taustasta, joka kuvaa suota. 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. 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ää suota. Täytä koko pelikentän alue suolla.

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

3. Pelihahmot

2019-01-06T16:57:45+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 Velho, tulipallo, kivi, luola ja Zombie.

Kun lisäät Zombien, niin lisää kohtaan Animation frames, myös toinen kuva painamalla hiiren oikeaa painiketta ja valitsemalla valikosta Import frames | From files.

Kun valitset Animations-ikkunan aktiiviseksi (Animaation nimi on Default), niin silloin mene Asetukset -ikkunaan (Properties) ja laita asetus: Loop: Yes eli animaatio on ikuisessa silmukassa.

Kun olet lisännyt kaikki pelihahmot, niin nimeä kukin pelihahmo Properties-ikkunassa. Nimet voisivat olla esimerkiksi: Kivi, Luola, Tulipallo, Velho, Zombie.

Jätä tulipallo pelikentän ulkopuolelle, mutta nosta muut pelihahmot pelikentän sisäpuolelle. Lisätään seuraavaksi pelihamoille käyttäytymismallit.

4. Hahmojen käyttäytymisnallit – Behaviors

2019-01-06T17:04:57+02:00

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

Paina + painiketta Behaviors-ikkunassa ja valitse Velholle käyttäytymismalliksi: 8Direction, BoundToLayout ja ScrollTo. Muuta 8Direction asetuksia (Properties-ikkuna): Directions: 4 directions, Set angle: No. Eli rajataan liikkuminen neljään suuntaan ja estetään hahmon pyöriminen.

Tulipallolle lisää käyttäytmismallit: Bullet ja Destroy outside layout eli tulipallo poistetaan silloin kun se on pelialueen ulkopuolella. Zombielle, Kivelle ja luolalle lisää käyttäytymismallit: Solid.

Voit testata käyttäytymismalleja kun painat Run layout-painiketta (= F5).

Velhon pitäisi liikkua nuolinäppäimistä. Jos laitat Properties-ikkunassa kohdassa Behaviors | 8Direction | Default control asetuksen: No, niin silloin velho ei enää liiku nuolinäppäimillä. Haluamme käyttää muita kuin nuolinäppäimiä hahmon liikuttamiseen. Kuinka se onnistuisi? Katsomme seuraavaksi kuinka voimme ohjelmoinnin keinoin muuttaa näitä painikkeita.

Zombie kävelee paikoillaan (Animaatio ikuisessa silmukassa), kun velho törmää esteisiin, niin ei päästä eteenpäin (Solid).

5. Hahmon ohjelmoiminen – Event sheet

2019-01-08T19:36:02+02:00

Haluamme ohjelmoida näppäimistöä ja hiirtä. Ennen kuin se onnistuu, niin meidän pitää lisätä näppäimistö ja hiiri 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. Lisää samoin myös hiiri (Mouse).

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. Mene Event sheet väilehdelle.

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ä d-kirjainta ja kirjain: D ilmestyy ikkunaan. Kuittaa OK:lla. Paina lopuksi Done.
Olemme nyt luoneet ehdon (Kun d-kirjainta on painettu), seuraavaksi lisäämme toiminnon. Napsauta hiirellä Add action tekstiä.
Valitse Velho 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ä d-kirjainta, niin velho liikkuu oikealle.

Samalla tavalla luo seuraavat lauseet:

Kun painetaan näppäimistöltä a-kirjain pohjaan, niin Velho liikkuu vasemmalle.
Kun painetaan näppäimistöltä w-kirjain pohjaan, niin Velho liikkuu ylös.
Kun painetaan näppäimistöltä s-kirjain pohjaan, niin Velho liikkuu alas. Lopputuloksen pitäisi näyttää nyt tältä.

RYHMÄN MUODOSTAMINEN

Samankaltaiset komennot kannattaa ryhmitellä omiin ryhmiin. Paina hiiren oikeaa painiketta Event Sheet-välilehdellä ja valitse avautuvasta valikosta Add group. Anna ryhmälle nimi (Kohta Name) ja kuittaa OK:lla.

Ryhmä näkyy nyt omana palkkina.

Seuraavaksi raahaa hiirellä aikaisemmin luodut komennot tähän ryhmään. Tartu hiirellä Keyboard-tekstin edessä olevasta alueesta, jolloin koko komento värjäytyy keltaiseksi. Raahaa eli pidä hiiren vasen painike pohjassa koko ajan samalla kun liikutat hiirtä , nyt tämä
näppäinkomento ryhmän päälle, kunnes ilmestyy viiva, jossa alussa "väkänen". Nyt kun vapautat hiiren vasemman painikeen, niin komento siirtyy tähän ryhmään.

Tee samoin muille komennoille. Lopputulos näyttää tältä.

Komennot voi piilottaa näkyvistä napsauttamalla: miinus-painiketta.

Hiiren ohjelmointi

Haluamme luoda seuraavaksi toiminnon, jossa Velho voi ampua tulipalloja hiiren avulla. Lisätään aluksi toiminto, että Velho kääntyy kohti hiirtä.

Mene Event sheet väilehdelle. Paina Add event, valitse System ja paina Next.
Valitse komento General: Every tick ja paina Done.
Paina Add action, valitse Velho 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 Velho kääntyy kohti tätä hiiren osoitinta. Komento näyttää tältä.

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 Velho ja paina Next
Valitse kohdasta Misc toiminto: Spawn another object ja paina Next
Napsauta hiirellä kohtaa <click to choose> ja valitse Tulipallo ja paina OK. Lopuksi kuittaa valinta painamalla Done.

Voit testata toimintoa painamalla F5 (Run layout).

ZOMBIT

Lisätään seuraavaksi toiminto, jossa Zombie tulee kohti Velhoa.

Paina Add event.
Valitse Sytem ja paina Next.
Valitse toiminto Every tick ryhmästä General ja paina Done
Paina Add action.
Valitse Zombie ja paina Next
Valitse kohdasta Angle toiminto: Rotate toward position ja paina Next
Laita kohtaan Degrees arvo: 1, kohtaan X arvo: Velho.X ja kohtaan Y arvo: Velho.Y. Lopuksi kuittaa valinta painamalla Done.

Zombie kääntyy kohti velhoa, mutta menee samalla ylösalaisin. Komento näyttää nyt tältä.

Korjataan ongelma, flipped-komennolla. Lisäksi laitetaan Zombie liikkumaan. Tehdään tähän komentoon vielä seuraavat lisäykset:

Paina Add action.
Valitse Zombie ja paina Next.
Valitse kohdasta Appearance toiminto: Set flipped ja paina Next
Laita asetus kohtaan state: Flipped ja paina Done.
Paina Add action uudestaan.
Valitse Zombie ja paina Next.
Valitse kohdasta Size & Position toiminto: Move forward ja paina Next
Laita asetus kohtaan Distance: 1 ja paina Done.

Lopputulos näyttää nyt tältä:

Komennon voisi suomentaa siten, että aina kun tietokoneen kello tikittää, niin käännä Zombie kohti velhoa, peilaa pystysuunnassa ja liiku eteenpäin yksi pikseli.

Tehdään seuraavaksi ehto: Jos tulipallo törmää Zombiehen, niin tuhoa Zombie ja tulipallo. Tämä tehdään seuraavalla tavalla:

Paina ensin Add event.
Napsauta Tulipalloa ja paina Next.
Valitse komento: Collisions: On collision with another object ja paina Next.
Napsauta hiirellä kohtaa: <click to choose>
Valitse Zombie ja paina OK painiketta.
Kuittaa valinnat painamalla Done painiketta ja olet luonut ehdon.
Napsauta hiirellä kohtaa: Add action.
Valitse Zombie ja paina Next.
Valitse Misc: Destroy ja paina Done.
Napsauta hiirellä uudestaan kohtaa: Add action.
Valitse Tulipallo ja paina Next.
Valitse Misc: Destroy ja paina Done.

Olet nyt luonut toiminnon ja lopputulos näyttää tältä.

Tehdään seuraavaksi ehto: Jos Zombie törmää Velhoon, niin tuhoa Velho. Tämä tehdään seuraavalla tavalla:

Paina ensin Add event.
Napsauta Zombieta paina Next.
Valitse komento: Collisions: On collision with another object ja paina Next.
Napsauta hiirellä kohtaa: <click to choose>
Valitse Velho ja paina OK painiketta
Kuittaa valinnat painamalla Done painiketta ja olet luonut ehdon.
Napsauta hiirellä kohtaa: Add action.
Valitse Velho ja paina Next.
Valitse Misc: Destroy ja paina Done.

6. Kloonit - Zombieporttti

2019-01-06T18:13:41+02:00

Luodaan uusi pelihahmo: zombieportti. 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.

Zombieportti on neliö. Nosta zombieportti lähelle luolaa, mutta pelialueen ulkopuolelle. Muista nimetä zombieportti Properties-ikkunassa. Zombieportti ei tarvitse käyttäytymismalleja (Behaviors).

Mene seuraavksi Event sheet-välilhdelle. Tehdään seuraavaksi ehto: Joka viides sekunti Zombieportista tulee uusi Zombi (Zombin klooni). Tämä tehdään seuraavalla tavalla:

Paina ensin Add event.
Napsauta System ja paina Next.
Valitse komento: Time: Every x seconds ja paina Next.
Anna arvoksi: Interval (Seconds): 5 ja paina Done.
Napsauta hiirellä kohtaa: Add action.
Valitse Zombieportti ja paina Next.
Valitse Misc: Spawn another object ja paina Next.
Napsauta hiirellä kohtaa: <click to choose>
Valitse Zombie ja kuittaa OK:lla. Paina lopuksi Done.

Olet nyt luonut halutun toiminnon ja lopputulos näyttää tältä.

Seuraavaksi tehdään pelikenttä valmiiksi. Monista kiviä, zombietä ja zombieportteja kuten haluat. Paina CTRL näppäin pohjaan ja tartu hiirellä monistettavaan kohtaan. Nosta kopio uuteen paikkaan. Kartalla olevat zombiekopiot ovat kertakäyttöisiä, mutta kartan reunalla olevat zombieportit tekevät uusia zombietä koko ajan (5 sekunnin välein). Tällöin pelihahmosta tehdään klooneja.

7. Lopetusehto

2019-01-08T19:37:46+02:00

Enää puuttuu lopetusehto eli kuinka peli lopetetaan. Tehdään seuraavat ehdot: Jos velho koskettaa luolaa, niin peli päättyy voitokkaasti. Jos velho kuolee, niin peli päättyy tappiollisesti. Tehdään aluksi Inscapessa kaksi eri kuvaa (Width: 800, Height: 600). Toinen kuva esittää voittoa ja toinen tappiota. Tallenna kuvat PNG-muodossa. Tiedosto | Tallenna bittikartta (Export to PNG image).

Lisää kaksi uutta Layout:ia eli pelipohjaa. Nimeä toinen pelipohja nimellä Voitto ja toinen Tappio. Paina hiiren oikeaa painiketta Projects-ikkunan Layouts-otsakkeen päällä ja valitse avauvasta valikosta komento: Add layout. Valitse toiminto: Add event sheet.

Properties-ikkunassa nimeä uusi pelipohja (joko Voitto tai Tappio). Muuta uuden pelipohjan koko: Width: 800 ja Height: 600. Pelipohjan koko on sama kuin pelinäkymän koko.

Lopuksi lisää kumpaiseenkin pelipohjaan Sprite tyyppinen kuva ja venytä kuva tarvittaessa koko pelikentän kokoiseksi. Voitto-pelikenttään tulee tietysti voittoa kuvaava kuva ja Tappio-pelikenttään tulee tappiota kuvaava kuva. Kuvahan lisättiin kaksoisnapsauttamalla pelipohjaa. Katso ensin, että olet oikealla välilehdellä.

Lisätään seuraavaksi pelin lopetusehdot Event sheet välilehdellä.

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

Paina Add event.
Valitse Velho ja paina Next.
Valitse kohdasta Collisions toiminto: On collisions with another object ja paina Next.
Napsauta kohdassa <click to choose>, valitse Luola ja paina OK. Lopuksi kuittaa valinnat Done-painikkeella.
Paina Add action
Valitse System ja paina Next
Valitse kohdasta General toiminto: Go to layout ja paina Next.
Valitse valikosta Layout: Voitto ja paina Done.

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

Paina Add action.
Valitse System ja paina Next
Valitse kohdasta General toiminto: Go to layout ja paina Next.
Valitse valikosta Layout: Tappio ja paina Done.

Osumat näkyviin

Luodaan luoda globaali-muuttuja Event sheet - välilehdellä, joka kertoo kuinka monta zombieta olet surmannut.

Kasvata muuttujan: Osumat arvoa aina yhdellä kun Zombie tuhotaan. Mene komentoon 9:n.

Lisää toiminto eli Add action.
Valitse System ja paina Next.
Valitse kohdasta Global & local varables komento: Add to ja paina Next.
Laita asetukset: Varable: Osumat, Add to: 1 ja lopuksi paina Done.

Lisätään seuraavaksi Text- objekti pelikenttään kaksoisnapsauttamalla.

Valitse Text ja paina Insert.

Lisätään Text-objektiin seuraava käyttäytymismalli (Behaviors): Ankkuri. Tämä käyttäytymismalli pitää tekstin pelinäkymäikkunassa paikoillaan vaikka karttapohja muuttuisi.

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: ”Osumat: ”&Osumat.

ja paina Done.

Lopputulos näyttää tältä.

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

Voit vielä säätää tekstin fonttikokoa isommaksi Properties -ikkunassa. Venytä tarvittaessa tekstilaatikkoa suuuremmaksi. Huomaa, että teksti-kentän pitää olla pelinäkymä-ikkunassa eli katoviivan sisäpuolella. Ankkuri pitää sen paikoillaan

Periaatteessa pelissä on yksi puute. Solid-käyttäytymismalli ei toimi Zombiella. Syy on siinä, että luomamme komento: Mene suoraa kohti Velhoa ohittaa Solid-käyttäytymismallin. Voit vielä lisätä ehdon, että kuinka tehdään siinä tapauksessa, kun zombie osuu kiveen. Silloin esimerkiksi arvotaan uusi kulma väliltä 0 … 360.

Paina Add event.
Valitse Zombie ja paina Next.
Valitse kohdasta Collisions komento: On collisions with another object ja paina Next.
Napsauta hiirellä tekstiä: <click to choose> . Valitse Kivi ja paina OK. Kuittaa lopuksi valinnat painamalla Done.
Paina Add action.
Valitse Zombie ja paina Next.
Valitse kohdasta Angle komento: Set angle ja paina Next.
Laita asetus: Angle: random(0,360) ja paina Done. Eli arvotaan uusi kulma väliltä 0...360.

Lopputulos näyttää tältä.

Tämä on hyvä esimerkki siitä, kuinka yksityiskohtia voi vielä hioa, vaikka peli muuten toimisikin halutulla tavalla. Voit kohitellä ideaa eteenpäin.

Pelin kehitysideoita

Voit kehittää peliä eteenpäin esimerkiksi siten, että luolasta mennään uuteen karttaan. Voit tehdä uuteen karttaan esimerkiksi kerättäviä esineitä (ammuslaatikko), josta Velho saa lisää ammuksia. Tällöin perusta uusi globaali-muuttuja ammukset, jolloin alussa ammuksia on esimerkiksi 20. Aina kun ammuslaatikko löytyy, niin saadaan 20 uutta ammusta lisää eli muuttujan arvo kasvaa tällöin 20:llä. Aina kun Velho ampuu, niin ammukset-muuttuja pienenee yhdellä. Lisäksi tarvitaan lisäehto ampumiseen, että ammukset muuttujan arvo on oltava suurempi kuin nolla, ennen kuin voi ampua. Tämä toiminto tuo lisää haastetta peliin. Myös kerättäviä avaimia voi lisätä. Avain-muuttujan arvo pitää olla esimerkiksi suurempi kuin 5 ennen kuin luolasta pääsee eteenpäin seuraavaan karttaan, jne.

Pelissä tarvittavat kuvat

2019-01-06T19:09:22+02:00

: Velho
: Kivi
: Taustakuva
: Zombie2
: Zombie1
: Tulipallo
: Luola
: Tappio
: Voitto