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.

1. Valitse Pensseli-työkalu napsauttamalla sitä kerran hiiren vasemmalla painikkeella.
2. Valitse Piirrettävä pala napsauttamalla sitä kerran hiiren vasemmalla painikkeella.
3. 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.
4. 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.