Peli 7: Autokisa

Autokisa

2019-01-08T18:59:18+02:00

Pelin idea

Tehdään autokilpailupeli, jossa ajetaan kilpaa tietokonetta vastaan. Suunnitellaan ensin kilparata paloista. Voit tehdä oman näköisen kilparadan. Tehdään kilparataan myös lähtövalot. Kun lähtövalot muuttuvat vihreäksi, niin silloin kello käynnistyy ja kilpailu alkaa. Ajetaan 3 kierrosta, jonka jälkeen peli loppuu ja aika pyshähtyy.

Huomio: Pelissä tarvittavat kuvat on ohjeen lopussa.

Tässä harjoituksessa uusia opittavia asioita:

Kerrataan pelin rakentamisen vaiheet.
Opitaan tekemään mittatarkka taustakuva (= oma kilparata).
Opitaan kuinka Car ja Pathfinding käyttäytymismallit toimivat.
Opitaan tekemään portti, joka aukeaa tietystä ajasta.
Opitaan käynnistämään kello ja sammuttamaan se.

Aikasuositus: 4 - 6 oppituntia (45 min). Tarvittaessa 2 oppituntia enemmän, jos syntyy innostusta kehittää omia pelejä.

1. Opetuskerta: Oman kartan (autoradan) suunnittelua.

2. Opetuskerta: Tehdään ohjattu harjoitus loppuun.

3. Opetuskerta: Tee useamman erilaisen kartan peli. Voit kokeilla myös pelin parannusehdotuksia.

1. Pelikentän luominen

2019-01-08T16:19:13+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) 1600. 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

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

2. Peligrafiikka: Autoradan piirtäminen taustalle

2019-01-13T19:06:47+02:00

VAIHTOEHTO 1: PALAT PAIKOILLEEN KOORDINAATTIEN PERUSTEELLA

Piirretään tausta ja pelihahmot Inkscape- ohjelmassa. Taustakuvina meillä on pala ruohoa ja autorata. Emme piirrä kokonaista autorataa valmiiksi Inkscapessa, vaan ainoastaan piirrämme kuusi erilaista palaa autoradasta. Kaikki autoradan palat ovat kooltaan 200 px x 200 px. Autoradan palojen lisäksi me tarvitsemme kuusi reunapalaa (suoja-aita) ja yhden palan maalialueesta. Pelihahmoina meillä on kolme eriväristä autoa, joiden koko on noin 100 px x 50 px. Lisäksi meillä on kuvat lähtövaloista. Tallenna pelihahmot komennolla: Tiedosto | Tallenna Bittikartta ( Export PNG Image). Valitse ensin kohta: Valinta, jonka jälkeen anna tiedostolle nimi ja tallennuspaikka painamalla Tallenna -painiketta (Export As) ja lopuksi tallenna valittu piirros Vie-painikkeella. Tallenna kukin pelihahmo erillisinä kuvina. Esimerkiksi ympyrästä saat aikaiseksi neljä erillistä kaarrepalaa. Olen tarkkana kokojen kanssa. Kaikki radan palat on oltava samankokoisia (200 px x 200px).

Lisätään ensin pelikenttään ruoho. 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ää ruohoa. Täytä koko pelikentän alue ruoholla.

Seuraavaksi tuo kaikki radan osat (kuusi erilaista) pelikenttään Sprite-objekteina. Kun painat hiiren oikeaa painiketta pelikentän päällä, niin avautuvasta valikosta valitse: Insert New object.

Nostele ensin kaikki radan palojen kopiot (CTRL-painike pohjassa) omille paikoilleen ja vasta lopuksi laita palat tarkasti kohdalleen Properties- ikkunassa (Kohta Positions).

Origo on pelikentän vasemmassa yläreunassa. Ensimmäinen arvo on x:n arvo ja se kasvaa oikealle. Toinen arvo on y:n arvo ja se kasvaa alaspäin. Tee sellainen rata kuin itse haluat.

Tuo samalla tavalla reuna-palat Sprite-objektina. Ainut ero rata-paloihin on se, että reunapaloihin on lisättävä Solid- tyyppinen käyttäytymismalli (Behaviors). Tämä pitää auton radalla.

Nosta samalla tavalla reuna-palat paikoilleen eli tee kopioita paloista pitämällä CTRL- painike pohjassa samalla tartut paloja hiirellä nostaen kopioita uuteen paikkaan. Käytännössä reunapalojen pitäisi peittää ratapalojen musta väri, niin se on asetettu silloin oikein paikoilleen.

Pysty- ja vaaka reunapalat voit halutessasi laittaa tarkasti paikoilleen Properties- ikkunassa kohta Position. Laita kaarevat palat vasta sitten paikoilleen silmämääräisesti.

Vinkki: Voit suurentaa ja pienentää karttapohjaa nopeasti pyörittämällä rullaa hiiressä, kun samalla pidät CTRL- painikkeen pohjassa.

Kuten huomaat, jo kuudella erilaisella rata- ja reunapalalla voi tehdä millaisen radan tahansa. Lopputulos voisi näyttää esimerkiksi tällaiselta.

Vielä yksi kuva puuttuu pelipohjasta, nimittäin maalialue. Lisää se TiledBackground- objektina, niin voit venyttää se haluamaasi paikkaan radalla.

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

VAIHTOEHTO 2: TILEMAP

Construct- ohjelmassa on myös toiminto Tilemap eli ohjelmalla voidaan piirtää rata kartan paloilla. Ensin meidän täytyy luoda sellainen kuva, jossa on kaikki kartan palat, sekä nurmikko, yhdessä kuvatiedostossa. Ajatellaan, että meillä on kuusi radan palaa, joiden koko on 200 px x 200 px. Lisäksi meillä on yksi samankokoinen pala ruohoa eli yhteensä seitsemän palaa. Tällöin seitsemän palaa mahtuu asiakirjaan, jonka koko on 800 px x 400 px. Inkscapessa voit määrätä asiakirjan koon komennolla: Tiedosto | Asiakirjan ominaisuudet ja siellä Sivu-välilehti. Laita kohtaan oletusyksikkö asetus: px, jolloin voit laittaa asiakirjan kooksi: Leveys 800 px, Korkeus 400 px. Lisäksi laita Asiakirjan ominaisuuksissa Ruudukot-väliledeltä asetus: Välistys X: 200 px, Välistys Y: 200 px. Nyt on helppo piirtää vierekkäin 7-erilaista palaa kuten alla olevassa kuvassa. Tallenna palan osat yhtenä tiedostona komennolla: Tiedosto | Tallenna Bittikartta ( Export PNG Image). Valitse ensin Sivu, sitten tiedostolle nimi ja tallennuspaikka painamalla Tallenna -painiketta (Export As) ja lopuksi tallenna valittu piirros Vie-painikkeella. Tallenna pelikartan kaikki palat, jotka ovat vierekkäin siis yhtenä kuva-tiedostona.

Palaa takaisin Construct-ohjelmaan. Lisätään Tilemap. 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 nyt Tilemap ja napsauta hiirellä Insert-painiketta.

Normaali kuva-ikkuna aukeaa ja avaa sinne yksi kuva-tiedosto, joka sisältää kaikki tarvittavat radan palat.

Seuraavaksi asetetaan palojen (=Tile) koko. Piirtämisen kannalta olisi helpompi laittaa palojen kooksi 200 x 200, mutta silloin ongelmaksi muodostuu palojen törmäyspolygonit (palataan tähän myöhemmin uudestaan). Eli laitamme palojen kooksi: Tile width: 100, Tile height: 100, niin menee kerralla oikein.

Seuraavaksi otetaan käyttöön: Tilemap- työkalut ruksimalla View-välilehdeltä kohta: Tilemap Bar.

Nyt sinulla pitäisi aueta Tilemap- ikkuna. Kun piirrät karttaa, niin toimi seuraavasti.

Valitse Pensseli-työkalu napsauttamalla sitä kerran hiiren vasemmalla painikkeella.
Valitse Piirrettävä pala napsauttamalla sitä kerran hiiren vasemmalla painikkeella.
Piirrä työpöydälle joko napsauttamalla hiirellä tai voit myös pitää hiiren vasenta painiketta koko ajan pohjassa, jolloin saat piirrettyä monta palaa peräkkäin. Tässä tapauksessa napsautus on parempi.
Jos piirsit väärän palan, niin silloin valitse pyyhekumi ja napsauta hiirellä väärää palaa työpöydällä.

Seuraavaksi katsotaan kohtaa, josta näkee Tileset-palojen törmäys-polygonit. Jokaiselle palalle pitää säätää törmäys-polygonit oikein. Törmäys-polygonin pitää olla radan reunan kohdalla.

Esimerkiksi laita palan törmäys-polygoni seuraavalla tavalla siiretelemällä hiirellä kahvoja.

Huomio: Nyt jos olisimme laittaneet palan liian suureksi, niin joutuisimme määrittämään yhdelle palalle kaksi törmäys-polygonia. Käytännössä tämä ei onnistu vaan siksi palojen on oltava tarpeeksi pieniä.

Lopputuloksen pitäisi näyttää samalta kuin vaihtoehto 1:ssä. Valmis autorata kannattaa laittaa omalle tasolle.

Lisää vielä maalialue tavallisena Sprite-objektina.

Vielä yksi kuva puuttuu pelipohjasta, nimittäin maalialue. Lisää se TiledBackground- objektina, niin voit venyttää se haluamaasi paikkaan radalla.

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

3. Pelihahmot

2019-01-08T17:03:18+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. Lisää kaksi autoa tänne Sprite-objektina.

Lisää myös kaikki viisi kuvaa lähtövaloista Sprite-objekteina. Kohdassa Position voit asettaa lähtövalot tarkasti paikoilleen. Lisää lähtövalot autojen etupuolelle. Ensimmäinen lähtövalo on näkyvä eli kohdassa Initial visibility on oltava Visible.

Kun lisäät toisen lähtövalon, niin laita se tarkasti samaan paikkaan kohdassa Position. Tämä toinen valo on alussa piilossa eli laita kohdassa Initial visibility asetus Invisible näkymätön. Lisää samalla tavalla kolmas, neljäs ja viides valo.

4. Hahmojen käyttäytymismallit – Behaviors

2019-01-13T19:09:00+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.

Valitaan keltainen auto omaksi autoksi. Lisää siihen Car-, ScrollTo- ja BoundToLayout-käyttäytymismallit. Heti kun olet lisännyt nämä käyttäytymismallit, niin voit testata ajamista radalla ( = F5). Kun painat nuolen eteenpäin, niin auto kiihtyy. Kun painat nuolen taaksepäin auto peruuttaa (tai hidastaa vauhtia). Kun haluat kääntyä, niin paina nuoli joko oikealle tai vasemmalle. Kääntyminen tapahtuu vain liikkeestä. Tämä on Car-käyttäytymismallin toiminto.

Yksi tärkeä asetus Pathfinding-käyttäytymismallissa on Obstacles. Kun siinä asetus: Solids, niin auto osaa automaattisesti väistää kaikkia kiinteitä kohteita. Jos pelissä on muita kuin Solids-tyyppisiä esteitä, niin ne on erikseen silloin kerrottava koodia rakennettaessa (Add obstacle) ja silloin yleensä käytetään asetusta Custom. Kun reuna-esteissä tai Tilemap:ssa on kiinteä (Solid) käyttäytymismalli, niin auto ei aja esteiden läpi nyt. Laitetaan ainakin aluksi asetus Solids. Katsotaan myöhemmin sitä Custom-asetusta tarkemmin.

Muista siis laittaa kaikkiin reuna esteisiin (vaihtoehto 1) tai Tilemap:iin (vaihtoehto 2) Solid-käyttäytymismalli. Jos lisäksi olet asettanut törmäys-polygonit oikein, niin auto pysyy radalla.

5. Hahmon ohjelmoiminen – Event sheet

2019-01-08T21:44:26+02:00

Teemme siis autopelin, jossa ajetaan kolme kierrosta, jonka jälkeen peli päättyy. Pelissä voisi näkyä jäljellä olevat kierrokset ja aika. Peli tarvitsee muuttujia, joihin tämä tieto voidaan tallentaa. Lisäksi haluamme lähtövalot eli tarvitsemme portin, joka aukeaa vasta kun peli käynnistyy. Tämä estää varaslähdön. Aloitetaan siitä.

Aluksi meidän pitää piirtää portti. Se voi olla samalla lähtöviiva. Mene takaisin Layout- välilehdelle ja Tausta-tasolle. Lisää Sprite-objekti, laita sen kooksi Width: 10, Height: 180 (jos sinulla on kuvan mukainen tilanne) ja väritä se valkoiseksi. Nosta valkea suorakulmio ruutulippuun kiinni. Tämä valkea viiva on sekä lähtöviiva, että portti.

Valkeasta viivasta saadaan helposti portti, joka on kiinni, kun siihen lisätään Solid- käyttäytymismalli, joten lisää se (Kohta Behaviors). Nimeä myös objekti nimellä: Lähtöviiva.

Mene takaisin Event-sheet välilehdelle. Tehdään lähtöanimaatio.

Paina Add Event
Valitse System ja paina Next.
Valitse kohdasta Start & End ehto: On start of layout ja paina Done.
Paina Add Action
Valitse System ja paina Next.
Valitse kohdasta Time toiminto: Wait ja paina Next.
Anna arvo: Seconds: 2.0 ja paina Done.
Valitse Valo2 ja paina Next.
Valitse kohdasta Appearance toiminto: Set visible ja paina Next.
Laita asetus: Visibility: Visible ja paina Done.
Paina Add Action uudestaan.
Valitse Valo1 ja paina Next.
Valitse kohdasta Misc toiminto: Destroy ja paina Done.
Paina Add Action uudestaan.
Valitse System ja paina Next.
Valitse kohdasta Time toiminto: Wait ja paina Next.
Anna arvo: Seconds: 2.0 ja paina Done.
Valitse Valo3 ja paina Next.
Valitse kohdasta Appearance toiminto: Set visible ja paina Next.
Laita asetus: Visibility: Visible ja paina Done.
Paina Add Action uudestaan.
Valitse Valo2 ja paina Next.
Valitse kohdasta Misc toiminto: Destroy ja paina Done.
Paina Add Action uudestaan.
Valitse System ja paina Next.
Valitse kohdasta Time toiminto: Wait ja paina Next.
Anna arvo: Seconds: 1.0 ja paina Done.
Valitse Valo4 ja paina Next.
Valitse kohdasta Appearance toiminto: Set visible ja paina Next.
Laita asetus: Visibility: Visible ja paina Done.
Paina Add Action uudestaan.
Valitse Valo3 ja paina Next.
Valitse kohdasta Misc toiminto: Destroy ja paina Done.
Paina Add Action uudestaan.
Valitse System ja paina Next.
Valitse kohdasta Time toiminto: Wait ja paina Next.
Anna arvo: Seconds: 2.0 ja paina Done.
Valitse Valo5 ja paina Next.
Valitse kohdasta Appearance toiminto: Set visible ja paina Next.
Laita asetus: Visibility: Visible ja paina Done.
Paina Add Action uudestaan.
Valitse Valo4 ja paina Next.
Valitse kohdasta Misc toiminto: Destroy ja paina Done.
Paina Add Action uudestaan.
Valitse Lähtöviiva (se portti) ja paina Next.
Valitse kohdasta Solid toiminto: Set enabled ja paina Next.
Laita asetus: State: Disabled ja paina Done.
Paina Add Action uudestaan.
Valitse System ja paina Next.
Valitse kohdasta Time toiminto: Wait ja paina Next.
Anna arvo: Seconds: 2.0 ja paina Done.
Paina Add Action uudestaan.
Valitse Valo5 ja paina Next.
Valitse kohdasta Misc toiminto: Destroy ja paina Done.

Lopputulos näyttää tältä eli kun valo on vihreä, niin Lähtöviiva aukeaa eli ei ole enää kiinteä (Solid).

Lisätään peliin seuraavaksi näkyviin peli-aika sekunteina. Sitä varten tarvitsemme teksti-kentän.

Lisätään uusi objekti Layers-ikkunassa painamalla pelikentän päällä hiiren oikeaa painiketta ja avautuvasta valikosta otetaan komento: Insert new object. Valitaan teksti-objekti ja painetaan Insert-painiketta. Nosta teksti pelikentän vasempaan ylänurkkaan. Isonna fonttikokoa, Properties- ikkunan kohdassa Font.

Lopuksi lisää Anchor-käyttäytymismalli, niin teksti pysyy paikoillaan pelinäkymä-ikkunassa.

Katsotaan vielä teksti-objektin asetuksia tarkemmin Properties-ikkunassa.

Mene Event sheet-välilehdelle.

Paina Add event.
Valitse System ja paina Next.
Valitse kohdasta General ehto: Every tick ja paina Done.
Paina hiiren oikeaa painiketta Every tick-ehdon päällä ja avautuvasta valikosta ota komento: Add another condition.
Valitse System ja paina Next.
Valitse kohdasta Time: Compare time ja paina Next.
Tee valinnat: Comparison: > Greater than, Time (seconds): 6 ja paina Done.
Paina Add action
Valitse Text-objekti (Aika) ja paina Next.
Valitse kohdasta Appearance: Set Visible ja paina Next.
Laita asetus: Visibility: Visible ja paina Done.
Paina Add action uudestaan.
Valitse Text-objekti (Aika) ja paina Next.
Valitse kohdasta Text: Set text ja paina Next.
Kirjoita kohtaan Text: ”Aika: ”&round(time-6)&” s” ja paina Done. Komento: time näyttää aikaa siitä hetkestä, kun ohjelma käynnistetään. Vihreä valo kuitenkin palaa vasta 6 sekunnin jälkeen, joten joudumme tekemään pienen vähennyslaskun. Komento time palauttaa desimaaliluvun, joten pyöristämme sen kokonaisluvuksi.

Nyt meillä on toiminto, joka alkaa näyttää aikaa kun vihreä valo syttyy. Lopputuloksen pitäisi näyttää tältä.

Laitetaan seuraavaksi vastustajan auto liikkumaan ennalta määrättyä polkua pitkin. Polku koostuu pisteitä, jotka meidän merkittävä karttaan. Mene Layout-välilehdelle ja tuplanapsauta hiirellä pelikentässä, jolloin aukeaa Insert New Object-ikkuna. Valitse Sprite tyyppinen objekti ja paina Insert.

Napsauta kerran työpöydällä hiirellä ja tuttu Kuva-ikkuna aukeaa. Muuta kuvan koko arvoon: Width (pixels): 100, Height (pixels): 100. Väritä neliö haluamallasi värillä. Sulje ikkuna.

Properties-ikkunassa anna neliölle nimi: Piste1. Ja muuta näkyvyysarvo kohdassa Initial visibility arvoon: Invisible (= näkymätön).

Nosta ensimmäinen neliö (Piste1) maalialueen päälle. Nyt tehdään neliöstä kopioita, mutta eri tavalla kuin aikaisemmin eli paina hiiren oikea painike neliön päällä ja avautuvasta valikosta ota komento: Clone object type. Tämä tekee uuden objektin ja nimeää sen automaattisesti nimellä Piste2. Nosta uusi neliö (Piste2) seuraavaan mutkaan.

Tee seuraavasta pisteestä kopio samalla tavalla ja nosta se seuraavaan mutkaan jne. Nosta aina mieluummin ulkokaarteeseen kuin sisäkaarteeseen. Pisteitä pitäisi olla niin paljon, että pisteestä toiseen on suora näköyhteys, niin silloin varmistetaan se, että auto ei lähde ajamaan väärään suuntaan. Näet Projects- ikkunassa juoksevalla numerolla, että syntyy uusia objekteja. Nosta kukin uusi piste kuvan mukaiseen järjestykseen.

Mennään takaisin Event sheet välilehdelle ja lisätään seuraavat komennot.

Vastustaja eli AutoVioletti etsii reitin ensimmäiselle pisteelle (Piste1) heti kun portti aukeaa. Komentoa ei saa laittaa liian aikaisin (ennen portin aukeamista) tai auto etsii väärän reitin.

Seuraavaksi komennetaan vastustajan auto liikkeelle. Tehdään seuraavalla tavalla.

paina Add evet.
Valitse AutoVioletti ja paina Next.
Valitse kohdasta Pathfinding ehto: On path found ja paina Done.
Paina Add action.
Valitse AutoVioletti ja paina Next.
Valitse kohdasta Pathfinding: Movements komento: Move along path ja paina Done.

Olet nyt luonut komennon, jossa auto liikkuu, jos polku on löydetty.

Nyt vastustaja liikkuu vain ensimmäiseen neliöön (Piste1).

Paina Add event.
Valitse AutoVioletti ja paina Next.
Valitse kohdasta Collisions ehto: On collision with another object ja paina Next.
Napsauta hiirellä kohtaa <click to choose> ja valitse Piste1 ja paina OK. Lopuksi kuittaa valinta painamalla Done.
paina Add action.
Valitse AutoVioletti ja paina Next.
Valitse kohdasta Pathfinding: Find path ja paina Next.
Laita seuraavat asetukset:

ja paina Done.

Olet nyt luonut komennon, kun violetti auto törmää pisteeseen 1, niin violetti auto etsii uuden polun pisteeseen 2.

Näin pitäisi jatkaa kaikki pisteet läpi (Piste1->Piste2, Piste2->Piste3,… Piste18->Piste19, Piste19->Piste1). Koska samankaltaisia komentoja on paljon, niin helpointa on kopioida yllä olevaa komentoa. Napsauta hiirellä komennon alussa olevaa nuolta. Nyt komento on valittu.

Paina nyt näppäimistöltä: CTRL + C ja CTRL + V. Tämä on sama asia kuin ottaisi komennot: kopioi (Copy) ja Liitä (Paste) peräkkäin. Tuplanapsauta nyt hiirellä kohtaa, jossa lukee: On collision with Piste1. Muuta tähän Piste2 valitsemalla objekti uudestaan. Samalla tavalla tuplanapsauta hiirellä kohtaa: Find path to (Piste2.X,Piste2.Y) ja kirjoita siihen uuden pisteen arvot eli X: Piste.3X ja Y: Piste3.Y

Muutettu komento näyttää nyt tältä.

Tee samalla tavalla eteenpäin, jolloin lopuksi sinulla pitäisi olla seuraavanlaiset komennot.

Nyt olemme saaneet vastustajan kulkemaan radan ympäri loputtomasti.

Nyt jos nyt testaat peliä ( = F5), niin kannattaa kiinnittää huomiota autojen käyttäytymismalleihin ja siellä kohtiin Max speed (maksimi nopeus), Acceleration (= kiihtyvyys) ja Deceleration ( = hidastuvuus). Näissä voi olla isojakin eroja, joten eroja kannattaa tasoittaa, jotta kilpailusta tulisi tasaväkisempi. Sopivat arvot löytyvät testaamalla peliä. Aluksi voit laittaa näihin samat arvot.

Jos haluat, että peli on alussa helppo, mutta vaikeutuu pelin edetessä koko ajan, niin voit muuttaa näiden ominaisuuksien (max speed, acceleration) arvoja ohjelmoimalla.

Nyt meidän pitää enää ohjelmoida peli loppumaan. Halusimme, että peli loppuu kolmen kierroksen jälkeen eli tarvitsemme globaalin muuttujan, johon se tieto tallennetaan. Mene Event Sheet-välilehdelle ja paina hiiren oikea painike pohjaan. Valitse avautuvasta valikosta: Add global variable. Laita kohtaan: Name: Kierrokset ja kohtaan Intial value: 4, joka on kierrosten alkuarvo.

Perusta saman tien toinen globaali-muuttuja: Aika ja anna sille alkuarvo 0. Tätä tarvitaan kun teemme pelin lopetusehdon (palataan tähän myöhemmin), jolloin sinulla pitäisi olla kaksi globaalia muuttujaa: Aika ja Kierrokset.

Luodaan toinen Teksti-objekti Layout-väilehdellä. Nimeä se kuvaavalla nimellä, esimerkiksi: Kierroksia. Lisää myös tähän Anchor- käyttäytymismalli (Behaviors). Voit kasvattaa fonttikokoa, niin halutessasi. Aseta teksti-objekti haluamaasi paikkaan pelinäkymän sisällä.

Mennään takaisin Event sheet välilehdelle. Lisätään komento:

Paina Add event.
Valitse System ja paina Next.
Valitse kohdasta General ehto: Every tick ja paina Done.
Paina Add action.
Valitse teksti-objekti (Kierroksia) ja paina Next.
Valitse kohdasta Text toiminto: Set text ja paina Next.
Laita kohtaan Text: ”Kierroksia jäljellä: ”&Kierrokset ja paina Done.

Olemme nyt luoneet komennon, joka tulostaa jäljellä olevat kierrokset.

Sitten tietysti tarvitaan ehto, kun AutoKeltainen ajaa Maalialueen yli, niin Kierrokset-laskurin arvo vähenee yhdellä. Se tehdään seuraavasti.

Paina Add event.
Valitse AutoKletainen ja paina Next.
Valitse kohdasta Collisions ehto: On collision with another object ja paina Next.
Napsauta hiirellä kohtaa <click to choose> ja valitse Maali ja paina OK. Lopuksi kuittaa valinta painamalla Done.
paina Add action.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables toiminto: Add to ja paina Next.
Laita seuraavat asetukset: Variable : Kierrokset, Value: -1 ja paina Done.

Ehto on valmis.

Pelin lopetusehto

Luodaan peliin vielä lopetusehto. Kun kierroksia on 0, niin peli loppuu ja kello pysähtyy. Nyt tarvitsemme sitä toista muuttujaa: Aika. Kun peli loppuu, niin tallennamme ajan Aika-muuttujalle ja tulostamme sen. Jotta se onnistuu, niin tarvitsemme taas uuden Teksti-objektin. Luo uusi teksti-objekti ja laita se samaan paikkaan, samalla fonttikoolla kuin aikaisemmin luomamme Teksti-objekti: Aika. Nimeä myös tämä uusi teksti-objekti ja lisää siihen Anchor-käyttäytymismalli (Behaviors).

Lopetusehto tehdään Event-sheet välilehdellä seuraavasti.

Paina Add event.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables ehto: Compare variable ja paina Next.
Laita seuraavat asetukset: Variable: Kierrokset, Comparison: = Equal to, Value = 0 ja paina Done.
Paina hiiren oikeaa painiketta juuri luomasi ehdon päällä ja valitse avautuvasta valikosta komento: Add another condition.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables ehto: Compare variable ja paina Next.
Laita seuraavat asetukset: Variable: Aika, Comparison: = Equal to, Value = 0 ja paina Done. Tämä toinen ehto tarvitaan siksi, että tämä komento suoritetaan vain kerran.
Paina Add action.
Valitse AutoKeltainen ja paina Next.
Valitse kohdasta Car toiminto: Set enabled ja paina Next.
Laita asetus: State: Disabled ja paina Done.
Paina Add action uudestaan.
Valitse AutoVioletti ja paina Next.
Valitse kohdasta Pathfinding toiminto: Set enabled ja paina Next.
Laita asetus: Set: Disabled ja paina Done.
Paina Add action uudestaan.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables ehto: Set value ja paina Next.
Laita seuraavat asetukset: Variable: Aika, Value: round(time-6) ja paina Done.
Paina Add action uudestaan.
Valitse Text-objekti Aika ja paina Next.
Valitse kohdasta Appearance toiminto: Set visible ja paina Next.
Laita asetus: Visibility: Invisible ja paina Done.
Paina Add action uudestaan.
Valitse Text-objekti LoppuAika ja paina Next.
Valitse kohdasta Appearance toiminto: Set visible ja paina Next.
Laita asetus: Visibility: Visible ja paina Done.
Paina Add action uudestaan.
Valitse Text-objekti LoppuAika ja paina Next.
Valitse kohdasta Text toiminto: Set text ja paina Next.
Laita asetus: Text: ”Aika: ”&Aika&” s” ja paina Done.

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

Mene vielä aikaisemmin luomaamme komentoon, joka tulosti ajan. Sinne on lisättävä yksi ehto lisää eli Aika = 0.

Toimi nyt seuraavasti.

Paina hiiren oikeaa painiketta ehdon Every tick päällä ja valitse avautuvasta valikosta komento: Add another condition.
Valitse System ja paina Next.
Valitse kohdasta Global & local variables ehto: Compare variable ja paina Next.
Laita seuraavat asetukset: Variable: Aika, Comparison: = Equal to, Value = 0 ja paina Done. Tämä toinen ehto tarvitaan siksi, että tätä komentoa ei enää suoriteta silloin kun peli loppuu.

Peli toimii nyt niin kuin haluamme. Tosin vieläkin on jäljellä joitain parannusehdotuksia.

6. Pelin parannusehdotuksia

2019-01-13T19:31:32+02:00

Autot törmäävät toisiinsa

Jos haluat, että autot voivat törmätä toisiinsa, niin lisää silloin myös Solid- käyttäytymismalli violetille autolle. Jos teet näin, sinun on muutettava asetuksista kohta Obstacles muotoon: Custom.

Jotta Custom asetus toimisi oikein kaikissa tilanteissa (Auto törmää kiinteisiin esteisiin), niin sinun on kerrottava violetille autolle heti alussa, mitkä ovat esteitä tässä pelissä. Solid-asetus ei nyt toimi. Tämä tapahtuu Add obstacle toiminnon avulla. Lisää nämä toiminnot heti pelin käynnistämiskomentoon.

Kierroslaskuri paremmaksi

Nyt on mahdollista ajaa edes takaisin lähtöruudun yli ja kierrokset menevät hetkessä nolliin. Jos haluat estää tämän huijauksen, niin perusta ensin globaali-muuttuja Tarkistus ja anna sille alkuarvo 0.

Sen jälkeen lisää uusi Sprite-objekti (nimeä se nimellä TarkistusPortti) eli piirrä suorakaide vastakkaiselle puolen karttaa, niin että se menee kulkuaukon yli. Muuta asetuksista kohta: Initial visibility: Invisible. Eli suorakaide ei näy silloin pelaajille.

Lisää nyt aikaisemmin luotuun ehtoon uusi lisäehto eli Tarkistus = 0, jonka jälkeen muuta toiminnoissa Tarkistus-muuttujan arvo 1:ksi Set value- toiminnolla. Nyt laskuri toimii vain kerran ja edes takaisin ajaminen lähtöruudun päällä ei auta.

Tietysti kun auto on vastakkaisella puolen karttaa TarkistusPortin kohdalla, niin Tarkistus-muuttujan arvo pitää palauttaa takaisin 0:aan, jotta laskuria voi taas käyttää eli tee seuraava komento lisää.

Halkeama tiessä

Tausta-tasolle tien päälle voi tietysti lisätä uusia Sprite-objekteja, esimerkiksi halkeamia. Kun auto törmää halkeamaan, niin auton nopeus putoaa hetkellisesti nollaan. Kiihtyvyys säilyy ennallaan, joten siitä on kuitenkin helppo päästä yli.

Komento, joka pudottaa nopeuden nollaan näyttää tältä.

Muiden näppäinten käyttö

Haluatko ohjata autoa muilla näppäimillä kuin nuolinäppäimillä. Tässä esimerkki kuinka auton ohjaus voidaan toteuttaa muilla näppäimillä. Jotta tämä onnistuu, niin pelikenttään on lisättävä Keyboard- objekti ja autossa on oltava käytössä Car- käyttäytymismalli.

Huomio: Tämä periaateessa mahdollistaisi kaksinpelin, jolloin pelinäkymä pitäisi jakaa. Pelinäkymän jakamiseen kuitenkin tarvitaan maksullinen lisäosa ja se ei onnistu ilmaisversiolla.

Lopputekstit, joka kertoo voittajan

Jos haluat lopputekstit näkyviin (Victory, Game Over), niin tuo ne peliin Sprite-objektina, laita niihin Anchor -käyttäytymismalli ja laita asetus: Initial visibility: Invisible. Voittoteksti on helppo lisätä edelliseen koodiin.

Mutta jos violetti auto voittaa pelin, niin silloin se on Game Over. Lisää violettiin autoon objektikohtainen muuttuja (Instance varable), nimeltään KierroksetVioletti. Anna myös sille alkuarvo 4.

Sitten luot oman koodin pelin lopetuksesta myös violetille autolle, joka on muotoa.

Pelissä tarvittavat kuvat

2019-01-08T18:37:22+02:00

: Tileset-kuva autoradasta
: Halkeama
: Keltainen auto
: Violetti auto
: Sininen auto
: Rata pysty
: Rata vaaka
: Rata oikea ala
: Rata oikea ylä
: Rata vasen ylä
: Rata vasen ala
: Este pysty
: Este vaaka
: Este oikea ala
: Este oikea ylä
: Este vasen ala
: Este vasen ylä
: valo5
: valo4
: valo3
: valo2
: valo1
: Maali
: Ruoho
: Game Over
: Victory