Unity tasohyppely - hahmon liikkuminen

NAV15AP

1. Jakso lukuvuonna 2016-17

Tarvitsemme tähän tehtävään Unityn lisäksi playmakeria. Playmaker ikkunan saa näkyville, kun ylhäältä playmaker valikosta ottaa vaihtoehdon playmaker editor. Voit sen jälkeen sijoittaa ikkunan haluamallesi paikalle.

Aloitetaan lisäämällä tiedostoon kaksi spritea. Toinen on pelihahmo ja toinen alusta, jossa kävellään. Muista laittaa spriten asetuksiin tekstuuri tyypiksi Sprite (2D & UI). Valitse filter modeksi trilinear.  Filter mode määrittää kuvan laadun. Trilinear on paras laatu, mutta vie eniten tehoja. Varsinkin mobiilipelejä tehdessä tämä on hyvä ottaa huomioon ja silloin saattaa olla järkevintä käyttää bilinear modia. Tee tämä molemmille spriteille.

Sen jälkeen viedään spritet peliin. Raahaa molemmat hierarkia ikkunaan, jolloin ne ilmestyvät sekä scene että game ikkunoihin. Aseta hahmolle order in layer kohdassa isompi luku kuin lattialle. Näin hahmo on aina lattian edessä, jolloin jalat eivät näytä uppoavan lattiaan. Liikuta molemmat spritet siten, että ne ovat kameran alaosassa, mutta kuitenkin näkyvillä. Molempiin asetetaan myös 2D box colliderit ja hahmoon lisäksi rigidbody 2D. Lisää vielä molemille spriteille tag. Pelaajalle löytyy valmiina oleva player tag, mutta lattialle pitää luoda oma uusi tagi ja nimetä se haluamallaan tavalla.

Seuraavaksi valitaan hahmo hierarkia ikkunasta. Hahmolle pitää lisätä FSM (fine state machine), joka löytyy add component valikosta oikealta. Lisää uusi FSM ja nimeä se. Hahmon tulee liikkua oikealle ja vasemmalle. Events kohdasta lisää kaksi uutta tapahtumaa: left ja right. Klikkaa hiiren oikealla startin alapuolella olevaa statea ja lisää molemmat tapahtumat add transition kohdasta. Luo kaksi uutta statea. Uuden staten saa luotua klikkaamalla hiiren oikealla painikkeella ja valitsemalla add state. Vedä nuolet molemmista tapahtumista omiin stateihin.

Nyt luodaan hahmolle liikkuminen. Keskimmäisen staten ollessa valittuna, ota oikeasta alakulmasta action browser. Etsi sieltä get key down toiminto. Valitse sama toiminto kaksi kertaa, koska tulet käyttämään liikkumisessa kahta eri näppäintä. Lisää toiseen näppäimeksi A ja toiseen D. A-näppäin lähettää tapahtuman left ja D-näppäin lähettää tapahtuman right. Walking right stateen lisätään 3 toimintoa: get key up, translate ja set scale. Get key up kertoo milloin pelaaja lopettaa näppäimen painamisen ja hahmon pitää lopettaa liikkuminen. Translate liikuttaa hahmoa tietyn verran annettuun akselin suuntaan, kun näppäintä painetaan. Set scale skaalaan hahmon, joilloin se katsoo oikealle, kun painetaan D-näppäintä ja vasemmalle, kun painetaan A-näppäintä.

Seuraavaksi luodaan uusi FSM hyppimistä varten. Ensimmäiseen stateen laitetaan get key down toiminto ja valitaan näppäimeksi space. Tehdään uusi event jump ja vedetään siitä nuoli uuteen stateen. Seuraavaan stateen laitetaan toiminto add force 2D. Se lisää spirteen voimaan tietyllä akselilla. Valitaan y-akseli ja lisätään  forceksi n. 300. Sen jälkeen laitetaan transition event finished ja vedetään se takaisin start stateen. Nyt hahmo pystyy hyppäämään. Ongelmana tässä on, että hahmo hyppää aina, kun space-näppäintä painetaan. Tämä ei ole perus tasohyppelyssä toimiva ratkaisu, joten ongelma täytyy korjata.

Lisätään  hyppy FSM:ään uusi state: check landing. Staten tarkoituksena on seurata, milloin hahmo koskettaa maata ja eliminoida hyppääminen ilmassa.  Check landingiin tapahtuma on landing, josta vedetään nuoli start stateen ja toiminto ray cast 2D. From positioniin laitetaan -1, koska halutaan, että ray cast suuntautuu alas. Distance kohtaan laitetaan luku, jolla ray cast tunnistaa milloin osutaan lattiaan.  Resultin hit event kohtaan laitetaan on landing, jolloin state lähettää tiedon seuraavaan stateen ja antaa pelaajan hypätä uudelleen. Filteriin laitetaan layer maskiin 1 ja vaihdetaan hahmon layeriksi ignore raycast. Nyt hypyn pitäisi toimia kunnolla ja hahmolla on liikkumiseen tarvittavat perustoiminnot.

TEHTÄVÄ 1: Tuo oma hahmo ja liikkumisen alustaksi tarkoitettu sprite Unityyn. Tee hahmolle liikkuminen (sivuille ja hyppy). Varmista ettei hahmo voi hypätä ilmassa.

TEHTÄVÄ 2: Luo hahmolle toisenlainen liikkuminen siten, että hahmo liikkuu tasaisella vauhdilla oikealle ilman, että pelajaan pitää painaa näppäintä.

Unity basics

NAV16AP

1. Jakso lukuvuonna 2016-17

Tämän kirjoituksen tarkoituksena on avata hieman unity editorin sisältöä helposti ja nopeasti.

Avaa Unity työpöydän pikakuvakkeesta. Rekisteröidy Unityn käyttäjäksi kohdasta sign in. Jollei sinulla jo ole tunnuksia, niin luo ne. Tästä näkymästä voit joko avata vanhan projektin tai luoda uuden. Nyt valitsemme kohdan new luodaksemme uuden projektin.

Projekti tulee nimetä. Valitse projektin nimeksi joko pelin nimi tai muuten projektia kuvaava nimi, jollei pelin nimeä ole vielä päätetty. Kannattaa nimetä projekti niin, että se on helppo myöhemmin löytää, koska jatkossa projekteja tulee olemaan useita ja on tärkeä tunnistaa, minkä projektin haluaa avata. Seuraavaksi valitaan projektin sijainti. Klikkaamalla kolmea pistettä saat itse päättää, minne projekti jatkossa tallennetaan.

Pitää valita tekeekö 2D vai 3D projektin. Tämän pystyy myöhemmin muuttamaan, mutta kannattaa kuitenkin aluksi valita omaa projektiaan vastaava tyyppi. Käytännössä 3D kannattaa valita aina, jos pelissä on 3D assetteja. 2D valitaan, jos käytetään 2D grafiikkaa. Unityssä on oletuksena 3D, mutta tällä kertaa valitsemme 2D vaihtoehdon. Unityn ohjeista voi lukea 2D:n ja 3D:n eroista, jos projektityypin valinta mietityttää: https://docs.unity3d.com/Manual/2Dor3D.html

Asset packages kohdassa voi valita, mitä valmiita assetteja tuo projektiin. Assetit vaihtelevat hahmon kontrolleista aina erilaisiin efekteihin. Täytyy kuitenkin muistaa, että kaikki nämä vievät tilaa ja tekevät projektin koosta suuremman, joten kannattaa valita vain tarpeelliset. Nämä saa myös myöhemmin lisättyä Unityn editorissa, joten jos olet epävarma, niin älä valitse täältä mitään.

Seuraavaksi valitaan create project, jolloin pääsemme avaamaan Unityn editorin.

Unity saattaa ensisilmäyksellä vaikuttaa hieman sekavalta, mutta ei kannata lannistua. Siitä saa helposti muokattua itselleen sopivan ja kaikki tarpeellinen löytyy kohtuullisen helposti. Alla olevassa kuvassa on selitetty, mitä editorissa olevat asiat ovat ja mihin niitä käytetään.

Unityn yläpalkissa File kohdassa voi luoda ja tallentaa tasoja sekä aloittaa kokonaan uuden tai avata jo olemassa olevan projektin. Sieltä löytyy myös build settings, josta pääsee muokkaamaan pelin rakennetta, kuten tasojen järjestystä ja mille alustalle peli on tarkoitus tehdä (esim. PC, Android, iOS jne.).

Asseteista voi luoda uusia assetteja kuten fysiikka materiaaleja ja skriptejä. Sieltä voi myös tuoda erilaisia Unityn omia assetteja. Joten jos ei aikasemmin projektia luodessa valinnut mitään, niin ne löytyvät tästä valikosta.

Game object valikossa on mahdollista luoda uusia objekteja kuten kameroita, valoja, spritejä ja erilaisia yksinkertaisia 3D-objekteja. Mahdollisuutena on luoda myös tyhjiä objekteja, joita voi käyttää tilanteissa, joissa haluaa käynnistää tietyn tapahtuman, kun pelaaja saapuu näkymättömän kohteen alueelle.

Window valikosta saa laitettua editoriin uusia ikkunoita tai vaihdettua editorin ikkunoiden sijoittelua.

Jos haluaa syventävää tietoa Unity editorin toiminnasta ja kaikista valikoista, niin suosittelen tutustumaan Unityn sivuilta löytyvään kattavaan ohjekirjaan: http://docs.unity3d.com/Manual/index.html

TEHTÄVÄ:

Luo aiemmin tekemästäsi pokepallosta sprite Unityyn. Raahaa tiedosto projekti ikkunaan asset kansioon. Aseta inspectorissa pokepallon tekstuuri tyypiksi sprite (2D & UI) ja filter modiksi trilinear. Raahaa pokepallo-sprite hierarkia ikkunaan. Aseta pallolle inspectorista circle collider 2D ja rigidbody 2D. Rigidbody luo spritelle fysiikan ja collider antaa pallon törmätä pelissä muihin objekteihin, joilla on myöskin collider. Testaa peliä. Jos pallo tippuu kameran näkymättömiin olet tehnyt asiat oikein.

Seuraavaksi luo Photoshopissa musta suorakulmio. Valitse tiedoston kooksi n. 600 px (leveys) ja 20 px (korkeus). Väritä koko alue haluamallasi värillä ja tallenna. Tuo tiedosto Unityyn samalla tavalla kuin pallokin ja aseta se myös hierarkia ikkunaan. Laita luomallesi platformille box collider 2D ja sijoita se pallon alapuolelle. Jos olet tehnyt kaiken oikein, niin pallo jää platformin päälle.

Photoshopin alkeet - Pokepallo

NAV16AP

1. Jakso lukuvuonna 2016-17

Tehtävänä piirtää Pokepallo Photoshopissa.

Aloita avaamalla uusi Photoshop-tiedosto. Määritä sen kooksi 500px X 500px. Luo uusi taso (layer) oikeasta alakulmasta ja poista background-taso.

Uudelle tasolle tehdään Ellipsi työkalulla valkoinen ympyrä. Tasaisen ympyrän saa luotua, kun ensin painaa shiftin pohjaan ja sen jälkeen hiirellä vetää ympyrän. Ympyrän speksejä voi myös myöhemmin muokata. Koita tehdä ymypyrästä mahdollisimman iso, mutta kuitenkin sen kokoinen, että se mahtuu rajojen sisään. Shape details kohdasta poistetaan kokonaan reunat ja jätetään vain valkoinen keskiö.

Tämän jälkeen luodaan uusi taso. Uudesta tasosta saa tehtyä clipping maskin, jos painaa hiiren oikealla tason päällä ja valitsee kyseisen ominaisuuden. Tällöin uudelle tasolle piirrettäessä väri ei mene jo tehdyn ympyrän ulkopuolelle.

Valitse vasemmalta brush tool. Määritä sen kooksi n. 700 px ja valitse pyöreä sivellin ilman reunapehmennyksiä. Luo taas ympyrä, mutta tällä kertaa punainen ja vain pallon yläosaan. Luo sen jälkeen uusi taso punaisen ja valkoisen tason väliin. Tälle tasolle tehdään samalla idealla musta ympyrä, josta jää näkyviin vain kaistale.

Sitten luodaan uusi taso vanhojen yläpuolelle, johon samalla tekniikalla tehdään ympyrä, jossa on mustat reunat ja valkoinen keskiö. Taas uudelle tasolle tehdään pienempi ympyrä, jossa on harmaat reunat ja läpinäkyvä keskiö.

Sitten pallo onkin viimeistelyä vaille valmis. Punaiselta ja mustalta tasolta saa poistettua ylimääräiset, kun valitsee vasemmalta valikosta quick selection toolin ja maalaa sillä valkoisen tason, niin että ympyrä on valittuna (näkyy katkoviivalla). Tämän jälkeen hiiren oikealla saa näkyviin valikon, josta otetaan vaihtoehto select inverse. Sitten vain kumitetaan sekä punaiselta, että mustalta tasolta ylimääräiset pois.

Palloon saa helposti valoja ja varjostuksia käyttämällä sivellintä. Valitse vaalea väri ja tee pallolle hieman kiiltoa. Helpoiten se onnistuu käyttämällä pehmeäreunaista sivellintä. Sivellin valikosta löytyvällä mixer brush toolilla voi häivyttää vaaleata, jolloin efekti näyttää pehmeämmältä. Luo tällä (tai jollain muulla) tekniikalla palloon valoja ja varjoja. Muista, että jos jokin menee pieleen, niin nopea tapa mennä taaksepäin on ctrl+alt+z. Jos taas poistit liikaa niin ne saa takaisin painamalla crtl+shift+z.

Sitten on aika yhdistää tasot. Helpoiten se käy yhdistelmällä ctrl+shift+alt+e, jolloin Photoshop luo automaattisesti yhdistetyn kopion kaikista tasoista. Yksittäisen tason voi kopioida ctrl+j, jolloin se kopioi valittuna olevan tason. Siirrä yhdistetty taso ylimmäksi ja piilota muut tasot. Tasot saa piilotettua/näkyviin painamalla tason vasemmalla puolella näkyvää silmän kuvaa.

Viimeisenä tallenna tiedosto. Tähän voit käyttää pikakomentoa ctrl+s. Tallenna ensin .psd formaatissa. Tee uusi tallennus painalla shift+ctrl+s (save as) ja tallenna tällä kertaa muotoon .PNG. Tallennukset tehdään luokan kansioon pokepallo-kansion alle omalla nimellä.

BOX-MODELING

NAV16AP

1. Jakso lukuvuonna 2016-17

3ds Max

Tutustutaan ohjelman käyttöliittymään ja mallintamisen käsitteisiin. Esimerkkitiedostot löytyvät Yhteiset/Animaatiotekniikka -kansiosta.

1. Box-modeling

Suunnittele oma, selkeä hahmo. Tee 3ds Maxissa kapeahko, korkea laatikko (Create > Box), jossa on 3 Length segmenttiä ja 2 Width ja Height segmenttiä. Klikkaa hiiren oikeaa nappia ja valitse Convert to > Convert to Editable Poly. Siirrä laatikkosi Front -näkymässä niin, että sen vasen reuna on y-akselilla. Lisää laatikollesi Symmetry -modifier (Modify > Modifier List > Symmetry). Klikkaa Symmetry -modifierin nimen vasemmalla puolella olevaa pientä plusmerkkiiä ja valitse klikkaamalla Mirror. Siirrä peilatun laatikon oikea reuna Front -näkymässä y-akselin päälle. Valitse alkuperäinen laatikkosi klikkaamalla sitä. Valitse Perspective -työskentelyikkunan näyttötilaksi Edged Faces. Tee hahmosi "ristiinnaulitun" asentoon kädet suoraan sivuille. Valitse valintamuodoksi polygon (Modify > Selection > Polygon). Valitse klikkaamalla polygoneja ja työntele laatikosta kädet, jalat ja pää Extrude-työkalun avulla (löytyy klikkaamalla hiiren oikeaa nappia, kun hahmosi on valittuna). Lisää tarvittaessa Edge Looppeja Swift Loop-työkalulla (Graphite Modeling Toolsin Edit-valikossa), niin saat lisää polygoneja. Muotoile hahmoasi Scale- ja Move-työkaluilla. Lisää lopuksi TurboSmooth-modifier Modifier listasta.

BONES (Luut)

Forward Kinematics = FK

Luita ohjataan kääntämällä niitä Rotate –työkalulla. Luita ei siis liikuteta.

Poikkeuksena ”master”-luu, jolla liikutetaan koko objektia.

Inverse Kinematics = IK

Luita ohjataan kontrolliobjektien avulla.

2. Luiden laittaminen ja aktivointi

            Valitse Bones –työkalu (Create > Systems > Bones). Lisää luita klikkaamalla vasemmalla napilla “master”-luun alkupiste ja loppupiste. Tämän jälkeen luuketju jatkuu automaattisesti, joten tarvitsee klikkailla vain uusien luiden loppupiste. Lopeta luiden laitto klikkaamalla oikeaa nappia. Jos haluat jatkaa luuketjua toisesta kohdasta valitse luu josta haluat jatkaa klikkaamalla sitä vasemmalla napilla. Uusi luu liitetään aina edellisen luun terävään päähän. Kun olet laittanut kaikki luut valitse objekti ja laita sille Skin modifier (Modify > Modifier List > Skin). Valitse luut (Bones > Add > Valitse listasta kaikki luut, EI objektia > Select).

Kenttäsuunnittelu

NAV14AP

Suunnitellaan ja toteutetaan kuvitteeliseen peliin pelattava kenttä.

Miettikää alussa mihin genreen ja tyyliin kenttää olette suunnittelemassa.FPS, strategia, tasohyppely, keskiaika/fantasia, sci-fi, western jne. Tämä määrittelee jo alussa teidän raamit kenttäsuunnitelussa.

1. 
Suunnitelkaa paperille/koneella ensimmäinen layout kenttäänne, jossa ei ole muuta kuin mahdolliset kulkureitit, alusta loppuun. Tehkää mahdollisimman monipuolisesti ja vaihtelevasti reitit, jota kautta pelaaja voi edetä. Onko pelaajalla mahdollisuus valita reittinsä?

 2.
Suunnitelkaa layouttiin pelaajalle esteet, joita voi kohdata. Varioikaa mahdollisimman paljon. Viholliset,kiivettävät kohdat, kuollettavat kuopat, ansat, ajastetut hypyt...

3.
Onko kentässä interaktiota? Ovien avausta, nappien painamista, seinien tuhoamista.

4.
Visuaalinen ilme on tärkeä osa kentän mielekkyyden kannalta. Konseptoikaa visuaalinen ilme ainakin parista kohtaa kenttää, jotka ovat avain asemassa kentässä ja tuovat tason hengen parhaiten ilmi.

5.
Tehkää pelimoottorissa raaka whiteboxaus (primitiivimuodot, laatikko/pallo/kolmio) kentästä. Voitte käyttää myös esim unityssä löytyvä omaa block assetteja, josta löytyy kaikki peruspalikat, seinistä rappusiin.

6.
Antakaa pelimoottorissa kentälle visuaalinen ilme. Tehkää kenttä loppuun noudattaen konseptia, jonka teitte kohdassa 4. Voitte myös haluttaessa käyttää esim. unityn assetstorea hyväksenne. https://www.assetstore.unity3d.com/en/#!/search/page=1/sortby=price/query=category:21
josta löytyy hyviä ilmaisia valmisassetteja teidän käyttöön.

7.
Tallentakaa kaikki materiaali, luokan kansioon "Kenttäsuunnittelu"

Loppuun, asiaa aiheesta.
http://www.gamasutra.com/view/feature/131736/beginning_level_design_part_1.php
http://www.worldofleveldesign.com/categories/cat_level_design_tutorials_tips.php
http://blog.digitaltutors.com/keeping-players-engaged-tips-great-game-level-design

Ja muistakaa rakastaa toisianne!

KOLMAS NÄYTTÖ

NAV14AP ja osa NAV15AP


Lainaus opetussuunnitelmasta:

"Näytössä opiskelija suunnittelee ja toteuttaa yksin tai työryhmän osana animaation tai pelin.

Työryhmä jakaa keskenään animaatio- tai pelituotannon tehtävät ja aikatauluttaa itsensä.

Opiskelijat voivat vapaasti valita käyttämänsä ohjelmat.

Näytön aikana syntyvät konseptit, kuvakäsikirjoitus ja suunnitteludokumentti ovat osa näyttötehtävää ja arvioidaan."

Näyttö voi olla myös pienempi kokonaisuus, esimerkiksi jonkin animaatiotekniikan esittely, tai hahmomallintamisen tutkiminen tai kenttäsuunnittelua.

Tässä tapauksessa työhön liitetään kirjallinen osuus, jossa pohditaan valittua aihetta ja sen tekemisen prosessia.

Työskentelyn käynnistäminen:

1. Tee lyhyt tiivistelmä näyttösi aiheesta ja käytettävästä tekniikasta ja toimita se opettajille.

2. Perusta blogi, jossa esimerkiksi viikottain kerrot työsi edistymisestä.

3. Tee aikataulu, jossa erittelet työskentelysi vaiheet kalenterikuukausittain (konseptit, pelin suunnitteludokumentti, kuvakäsikirjoitus, mallintaminen, animointi jne. riippuen näytön aiheesta).

Näytön arviointi on maaliskuussa 2017.

Tätä ohjetta päivitetään näytön edetessä.

PERINTEISET ANIMAATIOTEKNIIKAT (STOP MOTION)

NAV15AP

Tällä kurssilla tutustutaan perinteisiin animaatiotekniikoihin sekä katsomalla esimerkkejä animaatiotekniikoista, että tekemällä parin kanssa 2-3 minuutin animaatio, jossa on myös äänet, ja alku- ja lopputekstit.

Työskentely etenee seuraavasti:

Käytettävän tekniikan valinta

Esineanimaatio (Object Animation)

-esineet liikkuvat
- legoanimaatio (Brickfilm)
- pienoismallianimaatio (Model Animation) (Go Motion - lisänä motion blur - Star Wars)

Pala-animaatio (Cutout Animation)

- paperista, pahvista yms. leikatut palat liikkuvat

- Hinku ja Vinku - Heikki Partanen

Vaha-/Savianimaatio (Clay Animation)

- muovailuvahasta tai paistettavasta massasta tehdyt hahmot liikkuvat

- hahmojen sisällä yleensä metallista tai metallilangasta tehty runko

- Wallace and Gromit - Nick Park
- Hoznosti dialogu - Jan Svankmajer

Nukkeanimaatio (Puppet Animation)

- itsetehdyt nuket liikkuvat

- nukeilla voi olla metallilangasta tehty runko

- nukeilla voi olla itsetehdyt vaatteet

- nukeilla voi olla värjätyllä lateksilla päällystetyt kädet ja jalat

- nukeilla voi olla askartelupallosta tai paistettavasta massasta tehty pää (ja kädet ja jalat)

- Pikku kakkosen itäsaksalainen Nukkumatti
- The Nightmare Before Christmas - Tim Burton

Piksillaatio (Pixillation)
- ihmiset liikkuvat
- lähisukulainen videokuvauksen Time Lapse

Idea

Käsikirjoitus

Hahmojen ja lavasteiden suunnittelu

Äänisuunnittelu

Kuvausaikataulu

Kameran, jalustan ja valojen varaaminen

Kuvakäsikirjoitus

Hahmojen ja lavasteiden tekeminen

Kuvauspaikan rakentaminen

Kuvaus

Stop Motion

- kuvaus tehdään parityönä

- toinen animoi ja toinen ottaa kuvat, välillä vaihdetaan tehtäviä

- kuvaus tehdään joko pc:llä ja videokameralla, tai älypuhelimella tai tabletilla

- syväterävyys - Miklos Gaal

Editointi