Taidetta Koodissa

Taso 1: Logo

Sisällysluettelo

1.1. Suunnittele kuva Picassossa
1.2. Tallenna kuva koneellesi
1.3. Suunnittele 3D-malli kyltillesi
1.4. Liitä tekstuuri malliin
1.5. Animoi kyltti koodaamalla

Ensimmäisessä tasossa tehtävänäsi on toteuttaa ja animoida 3D malli nimikyltistä. Käytät nimikylttiä myöhemmin osana rakennusta (tasolla 2), joten nimikyltti voi olla oveen liimattava laatta, puinen pihakyltti tai vaikka lipputangossa heiluva lippu.

Mieti ensin tarkkaan millaisen nimikyltin haluat toteuttaa, sillä se helpottaa tulevia vaiheita oleellisesti. Opit tällä tasolla tekemään tekstuurin (kuvan 3D mallille), tallentamaan sen koneelle, toteuttamaan 3D mallin, liittämään tekstuurin ja animoimaan 3D mallin koodaamalla.

1.1. Suunnittele kuva Picassossa

Avaa Picasso ja suunnittele nimikyltti tai logo. Käytät tekemääsi kuvaa jatkossa tekstuurina 3D mallissa. Voit myös avata Picasson uuteen ikkunaan tästä.

Esimerkiksi, voit ladata koneeltasi kuvan ja lisätä sen päälle uuden tason johon kirjoitat tekstityökalulla oman nimesi. Taustakuvaan voit käyttää erilaisia efektejä ja filttereitä, jotta teksti näkyy paremmin kuvan päällä.

1.2. Tallenna kuva koneellesi

Kun olet tyytyväinen kuvaasi, valitse ylämenusta Tiedosto > Tallenna kiintolevylle. Valitse kuvallesi nimi ja tallenna se PNG muodossa kiintolevyllesi, esimerkiksi työpöydälle.

1.3. Suunnittele 3D malli kyltillesi

Seuraavaksi, avaa Galilei ja toteuta 3D malli kyltillesi. Voit myös avata Galilein uuteen ikkunaan tästä. Nimikyltti voi olla esimerkiksi oveen liimattava laatta, puinen pihakyltti tai vaikka lipputangossa heiluva lippu. Tärkeää on, että kyltin koko (leveyden ja korkeuden) suhde on mahdollisimman lähellä toteuttamasi kuvan kokoa, jolloin tekstuuri ei veny.

Lisää vasemman alakulman plus-napista (+) esimerkiksi kuutio-muoto ja venytä siitä haluamasi kyltin muoto. Voit liikuttaa, kääntää tai skaalata (vaihtaa kokoa) alaosan keskivalinnoista.

1.4. Liitä tekstuuri malliin

Valitse haluamasi objekti ja liitä siihen koneelle lataamasi kuva oikean laidan menusta, kohdasta Materiaali -> Kuva.

1.5. Animoi kyltti koodaamalla

Valitse kyltti klikkaamalla sitä, jotta sen ympärille tulee keltaiset kehysviivat. Valitse tämän jälkeen oikean laidan menun alalaidasta Skripti -> Haluamasi pohja. Näytä animaatio painamalla Suorita-painiketta (play) keskeltä ylhäältä. Voit muokata skriptiä ja kokeilla eri arvoja, miten se vaikuttaa 3D-malliin.

Taso 2: Metropoli

Sisällysluettelo

2.1. Kasaa rakennus perusmuodoilla
2.2. Liitä muodoille haluamasi tekstuurit
2.3. Lisää katulamput ja valaistus
2.4. Animoi objekteja koodaamalla
2.5. Tallenna malli koneelle

Tehtävänäsi on toteuttaa ja animoida 3D malli rakennuksesta. Rakennus voi olla pieni mökki, korkea kerrostalo tai moderni taideteos. Pääasia, että se mahtuu ruudukkoon, joka on 30x30 metriä eli 900m2 suuri.

Mieti ensin tarkkaan millaisen rakennuksen haluat toteuttaa ja aloita sen jälkeen rakennuksen perustuksista. Tee ensin betonipohja, jonka päälle rakennat muut osat.

2.1. Kasaa rakennus perusmuodoilla

Avaa Galilei ja valitse vasemman alakulman plus-menusta (+) kuutio painikkeen takaa haluamasi muoto. Muoto ilmestyy 3D-malliin automaattisesti keskelle, josta voit siirtää, kääntää ja skaalata sitä haluamaksesi alhaalla olevien muuntotyökalujen avulla. Voit myös avata Galilein uuteen ikkunaan tästä.

2.2. Liitä muodoille haluamasi tekstuurit

Kun olet tyytyväinen rakennukseesi, liitä haluamillesi objekteille tekstuurit (kuvat) valitsemalla ensin objektin, ja sen jälkeen oikean laidan menusta Materiaali -> Kuva. Huomaathan että kuvan latauksen jälkeen sinun tulee vielä aktivoida tekstuuri valintaruudusta (checkbox).

2.3. Lisää katulamput ja valaistus

Rakenna perusmuodoista rakennuksesi ympärille katulamput ja lisää valot niihin vasemman alakulman plus-menusta (+) kohdasta Valot (aurinko-ikoni). Testaa erilaisia valaistuksia ja opi, miten ne vaikuttavat rakennukseesi.

2.4. Animoi objekteja koodaamalla

Valitse haluamasi objekti klikkaamalla sitä, jotta sen ympärille tulee keltaiset kehysviivat. Valitse tämän jälkeen oikean laidan menun alalaidasta Skripti -> Haluamasi pohja. Näytä animaatio painamalla Suorita-painiketta (play) keskeltä ylhäältä. Voit muokata skriptiä ja kokeilla eri arvoja, miten se vaikuttaa 3D-malliin.

2.5. Tallenna malli koneelle

Tallenna valmis 3D-malli koneellesi yläpalkin kohdasta Tiedosto -> Vie Näkymä. Malli tallentuu scene.json nimellä Lataukset-kansioon, josta voit avata sen myöhemmin yläpalkin toiminnolla Tiedostot -> Tuo.

Taso 3: Remixaa peli

Sisällysluettelo

3.1. Valitse haluamasi peli-esimerkki
3.2. Muokkaa pelin muuttujia ja arvoja
3.3. Luo peliin jotain uutta
3.4. Sävellä peliin taustamusiikki
3.5. Julkaise kehittämäsi peli verkkoon

Tällä tasolla remixaat itsellesi pelin. Käytät pohjana valmista esimerkkiä, mutta voit tehdä pelille mitä ikinä haluat. Edes taivas ei ole rajana mitä voit tehdä.

3.1. Valitse haluamasi peli-esimerkki

Avaa Hopper ja käy läpi kaikki yläpalkin peli-esimerkit. Valitse niistä sinulle mielenkiintoisin pelipohja ja mieti miten haluaisit parantaa sitä.

3.2. Muokkaa pelin muuttujia ja arvoja

Aloita testailemalla. Vaihda eri muuttujien arvoja ja katso miten peli muuttuu. Uudet muutokset päivittyvät peliin automaattisesti. Voit myös peruuttaa muutokset undo ja redo toimintojen avulla, jotka löydät oikeasta yläkulmasta.

3.3. Luo peliin jotain uutta

Seuraavaksi, mieti mitä pelistä puuttuu. Tutki miten koodi toimii ja yritä monistaa puu, animoida objekti tai vaikka muuttaa pistelaskua. Tee pelistä omasi.

3.4. Sävellä peliin taustamusiikki

Avaa Vivaldi ja tee peliisi musiikit. Voit lisätä soittimia vasemman alakulman plus-menusta (+). Soittimen ääniä pääset muokkaamaan editoi-napista (kynä-ikoni). Soita kappale alapalkin play-painikkeesta.

3.5. Tallenna kehittämäsi peli koneelle

Tallenna tekemäsi remix koneelle valitsemalla Tiedosto -> Vie.