2d-pelin ympäristön tyylitelty animointi Shader Graph -työkalulla

Eetu Paavola

2d-pelin ympäristön tyylitelty

animointi Shader Graph -työkalulla

Metropolia Ammattikorkeakoulu Medianomi

Viestinnän tutkinto-ohjelma Opinnäytetyö

20.4.2021

Tiivistelmä

Tekijä(t): Eetu Paavola

Otsikko: 2d-pelin ympäristön tyylitelty animointi Shader Graph -työkalulla Sivumäärä: 39 sivua + 1 liite

Aika: 20.4.2021

Tutkinto: Medianomi

Tutkinto-ohjelma: Viestinnän tutkinto-ohjelma Suuntautumisvaihtoehto: Graafinen suunnittelu Ohjaaja(t): Lehtori Jaakko Ruuttunen

Tässä opinnäytetyössä käsitellään animoitujen 2d-varjostimien rakentamista Unityn Shader Graph -työkalulla. Työ alustetaan avaamalla aiheen kannalta keskeisiä käsit- teitä, jonka jälkeen työssä käsitellään Shader Graph -työkalua ja siihen liittyviä osia.

Opinnäytetyön toiminnallisessa osassa rakennetut varjostimet toimivat käytännön esimerkkeinä, kuinka teoria osassa läpikäytyjä käsitteitä ja Shader Graph -työkalun osia voidaan hyödyntää varjostinanimaatiossa. Työn lopputuloksena on viisi varjos- tinta, joilla animoitiin valonsäteitä, erilaista kasvillisuutta, hämähäkinseittejä, usvaa ja vettä. Varjostimiin haettiin inspiraatioita 2d-peleistä ja luonnonilmiöstä. Projektissa koostetut varjostimet onnistuivat hyvin, mutta usva- ja vesiputousvarjostimien hallinta oli välillä haastavaa kenttäeditorissa. Molempien suunnitteluun ja koostamiseen jäi vähemmän aikaa, mikä vaikutti niiden laatuun.

Työ ei sisällä peliympäristön tai kentän rakentamista tai ota kantaa sen suunnitteluun kokonaisuutena, vaan työssä käytetty ympäristö on rakennettu opinnäytetyöstä erilli- senä.

Työn aikana kävi ilmi, että Shader Graph -työkalu tekee varjostimien rakentamisesta melko helposti lähestyttävän, ja se soveltuu hyvin maalauksellisen 2d-peligrafiikan animointiin.

Työn liitteenä on linkki videoon, jolla esitellään toiminnallisen osan varjostinanimaati- oita sekä erillisissä elementeissä että ympäristökokonaisuuteen lisättynä.

Avainsanat: Unity, Shader Graph, varjostin, 2d-peli

Abstract

Author(s): Eetu Paavola

Title: Stylized Animation for 2D Game Environment Using Shader Graph

Number of Pages: 39 pages + 1 appendix

Date: 20 April 2021

Degree: Bachelor of Culture and Arts Degree Programme: Media

Specialisation option: Graphic Design

Instructor(s): Jaakko Ruuttunen, Senior Lecturer

The topic of this final project is shader animation with Unity’s Shader Graph in a 2D game environment. The report starts by introducing some central concepts from 2D game graphics and is followed by an overview of the Shader Graph tool. The project does not cover the construction of the Unity scenes and environments used in the examples.

The purpose was to learn about shaders and shader animation through an artist centric tool. As Shader Graph is a node-based tool, this report excludes shader programming.

The elements that were animated during the project are light rays, foliage, spider webs, mist and waterfalls. The shaders serve as practical examples on how different aspects of shader animation can be utilized. Inspiration was gathered from other 2D games, and in some cases from natural phenomena. Shaders constructed in the project succeeded well but mist and waterfall shaders needed more refining. There was less time for the planning and implementation of these two shaders, which affected their final quality.

The study concludes that Shader Graph is a relatively easy tool to use and is suitable for animating painterly 2D environment graphics. The appendix contains a link to a video that showcases the animations built in this project. The animations are shown with single 2D sprites as well as a part of a larger environment setting.

Keywords: Unity, Shader Graph, shader, 2D game

Sisällys

1 Johdanto 1

2 Sanasto 2

3 Unity – moottorin esittely ja käsitteistä lyhyesti 3

3.1 Sprite ja Unityn Sprite Renderer 4

3.2 Varjostin ja materiaali 5

3.3 Polygoniverkko ja UV 7

4 Shader Graph -työkalu 8

4.1 Matemaattisista laskutoimituksista ja vektoreista 11

4.2 Texture 2D, Sample Texture 2D ja Color 12

4.3 Proseduraaliset noodit 13

4.4 Tiling and Offset-, Position- ja Time-noodit 15

5 Varjostimien koosto omaan projektiin 16

5.1 Valonsäteet – yksinkertainen tekstuurianimaatio 17 5.2 Kasvillisuus – 2d-kuvan polygoniverkon manipulointi 22 5.3 Reunoista lukittu varjostin – variaatio kasvillisuusvarjostimesta 28 5.4 Usva – UV-kartan vääristäminen varjostimella 30

5.5 Vesiputous – 3d-geometrian hyödyntäminen 32

6 Pohdinta 37

Lähteet 40

Liitteet 44

Linkki varjostinanimaatioiden esittelyvideoon 44

1 Johdanto

Tämä opinnäytetyö käsittelee 2d-pelin ympäristön animointia käyttäen Unityn Shader Graph -työkalua. Alustan työn esittelemällä lyhyesti Unity-pelimoottorin ja käymällä läpi aiheen kannalta keskeisiä käsitteitä. Tämän jälkeen siirryn kä- sittelemään Shader Graph -työkalua ja siihen liittyviä animaation kannalta kes- keisiä osia ja käsitteitä. Työssä ei käsitellä kaikkia Shader Graphin elementtejä, joita on käyttämässäni versiossa laskuni mukaan yli kaksisataa.

Työ on suunnattu niille, jotka ovat kiinnostuneita lisäämään omaan projektiinsa varjostinanimaatiota, mutta joilla ei ole kokemusta varjostimista tai kiinnostusta ohjelmointiin. Vaikka aihe on hyvin tekninen, sitä on pyritty lähestymään visuaa- lisen suunnittelijan näkökulmasta, ja siitä on rajattu pois ohjelmointi. Ohjelmoin- nin osaaminen ei siis ole oleellista tämän opinnäytetyön tai aiheen kannalta.

Opinnäytetyöhöni kuuluu toiminnallinen osa, jossa koostan varjostimia Shader Graph -työkalulla ja lisään niillä animaatiota erilaisiin elementteihin. Työssä kes- kitytään luonnon elementtien ja kasvillisuuden animointiin, joita varten pyrin koostamaan varjostimia erilaisilla lähestymistavoilla. Toiminnallisessa osassa käytetty peliympäristö on rakennettu valmiiksi opinnäytetyöstä erikseen, eikä se siis sisällä ympäristön tai kentän rakentamista Unityllä. Lopuksi on tarkoitus nauhoittaa lyhyt video, jossa esitellään projektin aikana luotuja varjostinanimaa- tioita.

Käytän työssäni pääosin verkkolähteitä aiheen luonteen vuoksi. Lähteet koostu- vat muun muassa Unityn dokumentaatioista, varjostimiin liittyvästä kirjallisuu- desta, erilaisista verkkolähteistä ja aiheeseen liittyvistä videoista. Omien varjos- timien koostoon hain pohjaa Brackeys-kanavan tutoriaalista. Brackeys-kanavan omistaja on tehnyt videoita yhteistyössä Unityn kanssa, minkä vuoksi pidän tu- toriaalia luotettavana pohjana. Kuva-aineistona käytän muun muassa kuva-

kaappauksia 2d-peleistä, joiden varjostinanimaatioita tarkastelin projektin ai- kana. Lisäksi käytän tuottamaani materiaalia ja ottamiani kuvakaappauksia esi- merkiksi editorinäkymistä.

Työn tavoitteena on kartuttaa omaa osaamistani varjostimista ja Shader

Graphin käytöstä, joista minulla ei ole juurikaan kokemusta. Olen kuitenkin jon- kin verran rakentanut materiaaleja Blenderin editorissa, joka on Shader Graphin kaltainen työkalu. Aikaisempaa kokemusta minulta löytyy Unityn käytöstä noin neljä vuotta sekä harrastusluonteisten projektien kautta että työelämästä. Ai- heesta oppimaani haluan hyödyntää sekä omissa projekteissani että työtehtä- vissä.

Projektin aikana on käytetty Unityn versiota 19.4. LTS (Long Time Support) ja Shader Graphin versiota 7.3. Lähteenä käytetty dokumentaatio vastaa kyseisiä versioita. Projektin grafiikkaliukuhihnaksi valitsin URP:n (Universal Render Pipe- line), koska projektissani ei pyritä esimerkiksi realistiseen valaisuun.

2 Sanasto

2d Sprite, kaksiulotteinen osittain läpinäkyvä kuva

Grafiikkaliukuhihna (render pipeline), pelimoottorissa käytettävä koodi, joka vastaa ruutuun piirtämisestä

GPU (graphics processing unit), näytönohjain

Inspector, Unityn välilehti, jossa on elementtikohtainen listaus mahdollisista muokattavista ominaisuuksista

Komponentti (component), peliobjektiin liitettävä osa, jolla lisätään siihen omi- naisuuksia

Peliobjekti (GameObject), yksittäinen objekti Unityssä

Polygoniverkko (polygon mesh), joukko pisteitä, särmiä ja tahkoja, jotka muo- dostavat mallin tai muodon kolmiulotteisessa avaruudessa

Prefab, peliobjektista tallennettu tiedosto, josta voidaan luoda kopioita Unityssä Materiaali (material), tiedosto, jolla määritetään pinnan ominaisuuksia

Noodi (node), dataa sisältävä osa noodipohjaisessa työkalussa

Scene, tiedosto, joka sisältää peliobjekteja ja johon peli rakennetaan Unityssä Shader Graph, Unityn noodipohjainen työkalu varjostimien rakentamiseen Sprite Renderer, Unity-komponentti, jossa määritellään kuvan ominaisuuksia RGBA (red, green, blue, alpha), nelikanavainen värimalli

Tekstuuri, kaksiulotteinen kuva

Varjostin (shader), ohjelma, joka kertoo näytönohjaimelle, miten kuva piirretään ruudulle

Vektori (vector), luku tai joukko lukuja

Unity, lisenssipohjainen pelimoottori, 2d- ja 3d-pelien rakentamiseen URP (Universal Render Pipeline), Unityssä käytettävä grafiikkaliukuhihna UV, kaksiulotteinen koordinaatisto

3 Unity – moottorin esittely ja käsitteistä lyhyesti

Unity on Unity Technologies -nimisen yrityksen kehittämä lisenssipohjainen peli- moottori, jonka ensimmäinen versio julkaistiin 2005. 2d- ja 3d-pelien kehityksen lisäksi moottoria käytetään myös esimerkiksi elokuva- ja rakennusteollisuu- dessa ja arkkitehtuurivisualisoinnissa. Muun muassa Disney on käyttänyt Unityä lyhytelokuvien luomiseen. (Wikipedia 2021a) Moottori on aktiivisessa kehityk- sessä, ja siitä julkaistaan useita versioita vuoden aikana.

Peli rakennetaan scene-tiedostoihin, johon tuodaan kaikki pelissä esiintyvät ele- mentit. Ympäristöelementtien rakentamisen ja pelihahmojen tuonnin lisäksi sce- neen rakennetaan myös pelin käyttöliittymä. (Unity Documentation n.d. a) Aina- kin 2d-pelien kohdalla scene-tiedostoa voi ajatella ikään kuin näyttämönä, jolle kasataan lavasteita (Kuvio 1).

Kuvio 1. Unityn editorinäkymä ja tyhjä scene-tiedosto. Editorinäkymän ikkunoita voi vapaasti muuttaa mieleisekseen. Kuvakaappaus ohjelmistosta.

Seuraavaksi käyn läpi käsitteitä, jotka ovat aikaisemman kokemukseni perus- teella oleellisia aiheen kannalta. Sen lisäksi, että käsitteet linkittyvät aiheeseen, ne ovat 2d-pelien rakentamisen peruspalikoita. Vaikka esittelen käsitteitä Unity keskeisesti, samoja konsepteja esiintyy myös muissa pelimoottoreissa ja 3d-oh- jelmistoissa.

3.1 Sprite ja Unityn Sprite Renderer

2d-pelien grafiikka koostuu usein sprite-kuvista, jotka ovat joko staattisia tai ani- moituja bittikarttakuvia. Kuvasta, joka muodostuu useamman sprite-kuvan koko- elmasta, käytetään nimeä sprite sheet. (GiantBomb n.d.) Spritejä voisi ehkä ver- rata läpikuultaviin animaatiokalvoihin, joiden avulla niihin piirretty hahmo tai ele- mentti voidaan siirtää taustan päälle siitä irrallisena. Spritet voidaan tuoda Uni- tyyn sprite sheet -kuva-arkkeina, mutta pelimoottori sisältää myös työkaluja ku- vien automaattiseen pakkaamiseen.

Sprite Renderer on Unityn komponentti, joka liitetään peliobjektiin (Ga-

meObject) (Kuvio 2). Siihen määritellään tiedot muun muassa piirrettävästä ku- vasta, sen väristä ja kuvassa käytetystä materiaalista. Unity lisää jokaiseen sce- neen vietyyn Sprite-kuvaan automaattisesti Sprite Renderer -komponentin.

(Unity Documentation n.d. b) Kuten kuviossa alla on nähtävissä, tähän valmiiksi

lisättyyn komponenttiin on määritelty ennalta myös materiaali, joka on pelimoot- torin Sprites-Default-materiaali, ellei sitä ole projektikohtaisesti valittu toiseksi.

URP:n kohdalla tämä valmiiksi määritelty materiaali on Sprite-Lit-Default. Mate- riaalia avaan lisää seuraavassa alaluvussa.

Kuvio 2. Sprite Renderer -komponentti ja sillä muokattavat ominaisuudet (Unity n.d.).

3.2 Varjostin ja materiaali

Jotta 2d Sprite saadaan ruudulla näkyviin, se tarvitsee materiaalin, jolla on viit- taus varjostimeen (Unity 2020a). Varjostimet (shaders) ovat pieniä ohjelmia, joita näytönohjaimet (GPU) lukevat ja suorittavat. Varjostimia voidaan ohjel- moida useilla niille erityisesti suunnitelluilla kielillä (shader languages), jotka muistuttavat läheisesti toisiaan. (Halladay 2019, 14.) Varjostimet on perinteisesti ohjelmoitu käsin, mutta nykyään niiden rakentamiseen löytyy visuaalisia työka- luja, jolloin ohjelmointia ei tarvita. Näistä esimerkkeinä maksullinen Amplify Shader Editor ja tässä opinnäytetyössä käytetty Unityn Shader Graph.

Varjostimien alkuperäinen tarkoitus on ollut määritellä sitä, miten 3d-mallit otta- vat vastaan ympäristön valaisua. Nykyään varjostimia voidaan käyttää myös monenlaisten efektien luomiseen, kuten kuvan jälkikäsittelyyn (post processing).

Reaaliaikaisessa grafiikassa varjostimien käytön yksi eduista on se, että koska varjostinohjelmien käsittely tapahtuu näytönohjaimissa, saadaan suorittimelta (CPU) vapautettua laskentatehoja muihin tehtäviin. (Denham n.d.) Muun mu- assa kuvan ruudulle piirtämisen, kuvan päälle erilaisten efektien lisäämisen ja

jälkikäsittelyefektien lisäksi varjostimilla voidaan animoida 2d- ja 3d-elementtejä (Shehata 2016).

Materiaalilla (material) määritetään tietokonegrafiikassa pinnan ominaisuuksia, kuten pohjaväriä, heijastuvuutta tai metallisuutta (Polycount n.d a). Jokaisella materiaalilla on viittaus yhteen varjostimeen, jolla materiaaliin voi määritellä eri- laisia ominaisuuksia, kuten tekstuurikarttoja (Unity Documentation n.d c). Teks- tuurit ovat bittikarttakuvia, jotka voidaan liittää materiaalin. Näistä yleisin käyttö- tapa on määrittää pinnalle pohjaväri (base color) (Polycount n.d b). Liitettävät tekstuurit määräytyvät sen mukaan, mitä varjostimessa on määritelty käytettä- väksi.

Unityn URP-grafiikkaliukuhihnalla on kaksiulotteisille kuville ainakin kaksi val- mista materiaalia, joista toinen reagoi 2d-valaistukseen ja toinen ei (Kuvio 3).

Tämä käyttäytyminen johtuu materiaaleihin liitetyistä varjostimista. Unityssä var- jostimen voi vaihtaa materiaalin Inspector-ikkunassa varjostinvalikosta.

Kuvio 3. Oksassa käytetty Unityn Default-materiaaleja 2D-kuville. Pinkki väri ker- too materiaalin puuttumisesta tai siitä, että varjostin ei ole yhteensopiva grafiik- kaliukuhihnan kanssa.

3.3 Polygoniverkko ja UV

Unity on 3d-moottori, jossa lähes kaikilla elementeillä on polygoniverkko (po- lygon mesh). Unityssä 3d-objektien lisäksi polygoniverkon sisältävät myös sprite-kuvat ja käyttöliittymägrafiikka. Polygoniverkkoja voi manipuloida varjosti- milla (Halladay 2019, 90). Niitä voi siten hyödyntää varjostinanimaatiossa.

3d-grafiikassa elementit rakentuvat polygoniverkoista, jotka koostuvat kolmesta tekijästä. Näistä piste eli verteksi (vertex) on yksittäinen piste kolmiulotteisessa avaruudessa. Kaksi pistettä muodostaa särmän (edge). Kolmen tai useamman verteksin ja särmän muodostama pinta on tahko (face). (Halladay 2019, 2–3.) Kuviossa 4 nähdään nämä osatekijät.

Kuvio 4. 3d-malli, jossa nähtävissä piste, särmä ja tahko. Kuvakaappaukset Blen- der-ohjelmistosta.

Kolmen verteksin ja särmän tuottamaa tahkoa kutsutaan kolmioksi (triangle), kun taas neljä verteksiä ja särmää muodostavat pinnan, jota kutsutaan po- lygoniksi (polygon) (Wikipedia 2021b). Monet pelimoottorit kuitenkin käsittelevät polygoniverkkoja, jotka koostuvat kolmioista (Halladay 2019, 2–3). Unity jakaa kaikki polygonit automaattisesti kolmioiksi, kun 3d-malli viedään moottoriin, jos mallin polygoniverkolle ei ole näin jo tehty. Sprite-kuville Unity luo automaatti- sesti polygoniverkon.

UV-kartta on kaksiulotteinen koordinaatisto, jolla on vaaka- ja pystysuuntainen akseli. Tätä koordinaatistoa käytetään usein mallin pintojen tekstuurialueiden määrittelyyn. (Halladay 2019, 40–41.) UV-kartta on osa polygoniverkkoa ja yksi

työkaluista, joita voidaan hyödyntää varjostimissa. Yleinen tapa on manipuloida tekstuurin UV-karttaa, jolloin voidaan liikuttaa tekstuuria tai vääristää kuvaa ja luoda vaikutelma esimerkiksi virtaavasta vedestä tai laavasta (Doran & Zucconi 2018, 69). Tämän kaltaisia efektejä löytyy useista moderneista 2d-pelistä (Kuvio 5).

Kuvio 5. Varjostimella muokattu UV-kartta luo illuusion laavavirrasta. Efektiä on vielä tehostettu partikkelijärjestelmällä, jolloin roiskeet antavat vaikutelman virran osumisesta maahan. Kuvakaappaukset Unruly Heroes -pelistä.

4 Shader Graph -työkalu

Kaikkia ympäristön elementtejä ei kannata animoida manuaalisesti, koska ani- maatio voi olla prosessina työläs ja peliympäristö voi havaintojeni mukaan koos- tua kymmenistä liikkuvista elementeistä. Lisäksi isot kuvasekvenssit voivat olla aikaisemman kokemukseni mukaan raskaita – varsinkin jos niitä on paljon – mikä taas voi vaikuttaa pelin latausaikoihin. Yksi tapa tuoda ympäristön ele- mentteihin liikettä on käyttää niissä erilaisia varjostimia.

Varjostimien ohjelmointi on kuitenkin monimutkaista, minkä helpottamiseksi Unity on julkaissut moottoriinsa Shader Graph -työkalun. Shader Graph on noo- dipohjainen visuaalinen työkalu, jonka avulla voi luoda erilaisia varjostimia ilman koodia tai ohjelmointia. Varjostimen tuottamia ominaisuuksia voi tarkastella re- aaliajassa, mikä nopeuttaa työskentelyä ja erilaisten efektien kokeilemista.

(Unity 2020b.)

Shader Graphissa työskentely tapahtuu yhdistelemällä noodeja (node) toisiinsa.

Noodeilla on joko input- tai output-portit, molemmat näistä tai niitä voi olla use- ampi. (Unity Documentation n.d. d) Esimerkiksi Color-noodilla on vain yksi out- put-portti, joka yhdistetään toisen noodin input-porttiin. Noodeissa vasemman- puoleiset input-portit ottavat siis vastaan oikeanpuoleisten output-porttien anta- mia arvoja.

Jokaisella portilla on tietty datatyyppi, joka määrittää, mitä arvoja ne voivat vas- taanottaa tai välittää eteenpäin. Erilaisia datatyyppejä ovat esimerkiksi eri vekto- riarvot, matriisit, tekstuurit ja liukuväri. Portin datatyyppi selviää niiden väreistä.

(Unity Documentation n.d. e)

Mielestäni noodeja voi pitää ikään kuin Lego-palikoina, joita yhdistelemällä saa- daan aikaiseksi kokonaisuuksia, joita voidaan sitten yhdistellä toisiinsa isom- miksi kokonaisuuksiksi ja niin edelleen. Kuviossa 6 on Shader Graph -työkalun editorinäkymä ja esimerkki sillä tehdystä varjostimesta.

Kuvio 6. Esimerkki yksinkertaisesta varjostimesta. Main Preview -ikkunassa muu- toksia voi seurata reaaliajassa.

Viimeistä noodia, johon rakennettu noodiryhmä tai noodiryhmät yhdistetään, kutsutaan Master-noodiksi. Tämä noodi on pakollinen, ja niitä voi olla vain yksi jokaista varjostinta kohti. (Unity Documentation n.d. f) Master-noodin input-portit vaihtelevat valitun Shader Graph -tiedoston ja siinä käytettävän Master-noodin mukaan. Unityssä on tällä hetkellä kaksi varjostinmuotoa 2d-grafiikalle (Kuvio

7). Näistä toinen, Sprite Lit Graph, reagoi kentän 2d-valaistukseen. Sprite Unlit Graph taas ei nimensä mukaisesti huomioi kenttään rakennettua valaisua.

Kuvio 7. Shader Graphissa käytössä olevia Master-noodeja. Vasemmalla 2d-gra- fiikalle tarkoitetut Master-noodit ja oikealla 3d-grafiikan yhteydessä käytettäviä noodeja. Kuvakaappaus editorista.

Shader Graphin Blackboard-ikkunassa määritellään ne ominaisuudet, joita halu- taan muokata materiaalin Inspector-ikkunassa. Näille ominaisuuksille voi aset- taa valmiita oletusarvoja, ja ne voidaan nimetä haluamalla tavalla. (Unity Docu- mentation n.d. g) Tällaisia muokattavia ominaisuuksia ovat muun muassa teks- tuurikartat, normaalikartat, värit ja eri vektoriarvot. Kuviossa 8 on esimerkki Blackboardissa määritellyistä ominaisuuksista.

Kuvio 8. Varjostimen muokattavia ominaisuuksia Blackboardissa. Noodeista voi- daan tehdä muokattavia ominaisuuksia tai niitä voidaan lisätä suoraan Black- boardista, jolloin ominaisuus raahataan ikkunasta editoriin. Kuvakaappaus omasta projektista.

Blackboard-ikkunasta varjostimille voidaan myös määrittää polku, josta se on valittavissa Inspector-ikkunan varjostinvalikosta. Jos polkua ei ole muutettu, Unity lisää varjostimen Shader Graph -nimen alle. (Unity Documentation n.d. g) Tämä mahdollistaa varjostimien järjestelyn, mikä helpottaa työskentelyä, kun erilaisia varjostimia kertyy enemmän. Varjostimien järjestely voi tulla ajankoh- taiseksi varsinkin isommissa projekteissa tai jos saman projektin kanssa työs- kentelee useampi henkilö. Vaikka oma projektini ei ollut erityisen laaja, testaus- mielessä tehtyjen ja valmiiden varjostimien listaus omien polkujen alle helpotti omaa työskentelyä.

Seuraavissa alaluvuissa käsittelen noodeja, jotka ovat lyhyen kokemukseni pohjalta keskeisiä varjostinanimaation kannalta. Näitä ovat vektorit ja mate- maattiset laskutoimitukset, tekstuureihin ja väreihin liittyvät noodit, kuvan asette- luun liittyvät noodit ja animaation kannalta tärkein eli aika.

4.1 Matemaattisista laskutoimituksista ja vektoreista

Varjostimien koodi on hyvin matemaattista, joten luonnollisesti Shader

Graphissa on noodeja, joilla tehdään erilaisia laskutoimituksia. Tällaisia noodeja on kymmeniä, mutta niistä ehkä käytetyimmät ovat kerto-, summa-, jako- ja mii- nustoiminnot (multiply, add, divide ja subtract), joista jokaisella on A- ja B-arvot, sekä yksi output-portti, josta laskettu tulos annetaan eteenpäin (Kuvio 9).

Kuvio 9. Peruslaskutoimituksia suorittavia matemaattisia noodeja.

Laskutoimituksia ei käytetä pelkästään numeroiden kanssa vaan myös värien muokkaamiseen. Esimerkiksi mustavalkoisen kuvan voi kertoa Multiply-noodilla värin kanssa, jolloin saadaan aikaiseksi annetulla värillä värjätty kuva. Lopputu- los on samanlainen kuin Photoshop-ohjelmistossa multiply-sekoitustilan kanssa.

Kertomalla kuva mustalla värillä saadaan tulokseksi musta kuva, kun taas val- koisella värillä kerrottu kuva ei muutu ollenkaan (Adobe 2020).

Matematiikassa vektori on suure, jolla on pituus ja suunta. Sillä voidaan mitata esimerkiksi matkaa pisteestä A pisteeseen B tai pisteestä B pisteeseen A. Tie- tokone käsittelee vektoreita joukkona arvoja, joilla voidaan kuvata esimerkiksi liikettä, sijaintia tai väriä. (GDQuest 2017.)

Kuten aiemmin luvussa 4 viittasin, Shader Graph käyttää datatyyppejä, joita ovat myös erilaiset vektoriarvot. Tutustuin Shader Graphin vektorinoodeihin ja niiden mahdollisiin käyttötarkoituksiin. Vector1 (0) on näistä arvoista yksinkertai- sin, ja se sisältää vain yhden luvun. Vector2 (0,0) sisältää kaksi lukua, ja sitä voi käyttää esimerkiksi aikaisemmin mainitun kaksiulotteisen UV-koordinaatiston kanssa. Vector3 (0,0,0) kuvaa esimerkiksi kolmiulotteisen avaruuden x-, y- ja z- koordinaatteja, ja Vector4 (0,0,0,0) soveltuu vaikka RGBA-väriarvojen käsitte- lyyn, jolloin kolme ensimmäistä arvoa kuvaa väriä (RGB) ja neljäs arvo kuvaa läpinäkyvyyttä (alpha).

4.2 Texture 2D, Sample Texture 2D ja Color

Texture 2D- ja Sample Texture 2D -noodien avulla varjostimiin voidaan luoda referenssejä tekstuureista. Texture 2D -noodi yhdistetään Sample Texture 2D - noodiin, joka antaa tekstuurin värit eteenpäin joko nelilukuisena vektorina tai niin, että RBGA-värikanavat on eritelty erikseen. Sample Texture 2D -noodin avulla päästään myös käsiksi tekstuurin UV-koordinaatteihin. (Unity 2020c.) Varsinaista käytettävää tekstuuria ei kuitenkaan aina kannata lisätä Shader Graph -editorin kautta, vaan tekstuurille lisätään Unityn käyttämän varjostinkie- len referenssi Blackboard-ikkunassa. Jos referenssiksi lisätään ”_MainTex”, var- jostimen tekstuuri käyttää Sprite Renderer -komponentissa olevaa sprite-kuvaa.

Tällä vältetään se, että jokaiselle kuvalle määriteltäisiin oma materiaali. Refe- renssiä ei kuitenkaan välttämättä tarvita tilanteissa, joissa tietää tekstuurina käytettävän vain tiettyä kuvaa.

Nimensä mukaisesti Color-noodi sisältää väriarvon. Noodi on yksinkertainen ja sillä on vain yksi output-portti, mutta sillä on kuitenkin useita käyttötapoja. Vä- rien lisäämisen ja overlay-efektien lisäksi noodia voi käyttää valittujen värien poistamiseen tekstuurista. (Unity 2020d.) Color-noodin yksi eduista on, että siitä voi tehdä materiaalissa muokattavan. Jos projektiin on rakennettu varjostin, joka lisätään materiaalilla vain tiettyihin elementteihin, voidaan kaikkien näiden ele- menttien väriä muokata materiaalista käsin yksittäisten Sprite Renderer -kom- ponenttien sijaan.

4.3 Proseduraaliset noodit

Shader Graphissa on tällä hetkellä muutamia proseduraalista tekstuuridataa tuottavia noodeja. Proseduraalinen tekstuuri on matemaattisilla algoritmeillä las- kettu 2- tai 3-uloitteinen kuva (PCMag n.d). Esimerkiksi trigonometriassa käyte- tyllä sinikaaviolla voidaan luoda tasaisesti aaltoilevan mustavalkotekstuurin muuntamalla -1 arvon mustaksi ja +1 arvon valkoiseksi (Kuvio 10) (McCombs n.d.).

Kuvio 10. Sini-aaltoilua ja siihen perustuva tekstuuri (McCombs n.d.).

Tilanteisiin, joissa kuitenkin tarvitaan sattumanvaraisuutta, sopii paremmin pro- seduraalinen kohina, kuten esimerkiksi Ken Perlinin vuonna 1983 kehittämä Perlin Noise -algoritmi (Kuvio 11).

Kuvio 11. Bittikarttakuva Perlin Noise -algoritmin tuottamasta proseduraalisesta kohinasta.

Perlin Noisessa matemaattinen algoritmi laskee sattumanvaraisen vaihtelun -1 ja +1 välillä. Algoritmin laskema mustavalkoinen kohina toimii hyvin pohjana luonnossa esiintyvien elementtien tekstuurien luontiin. (Perlin 1999.) Shader Graphin Gradient Noise -noodi luo Perlin Noisen kaltaista kohinaa. Tämän li- säksi käytössä on Voronoi-noodi, joka tuottaa mustavalkoista solumaista verk- koa, ja Simple Noise -noodi, joka palauttaa kohinaa. Nämä kolme kohinatyyppiä nähtävissä kuviossa 12.

Kuvio 12. Algoritmeillä luotuja proseduraalisia kohinatekstuureita Shader Graphin noodeissa.

4.4 Tiling and Offset-, Position- ja Time-noodit

Tiling and Offset -noodilla manipuloidaan tekstuurin tai UV-kartan arvoja. Sekä Tiling- että Offset-porteilla on kaksi arvoa, joista toinen on horisontaalinen eli x- arvo, ja toinen on vertikaalinen eli y-arvo. Offset-arvoilla siirretään tekstuurin UV-koordinaatteja. Yhdistämällä Offset-porttiin Time-noodin voidaan animoida tekstuuria vaaka- tai pystysuunnassa. Tiling-porttiin voi taas määritellä miten tekstuuri tai UV-kartta toistuu horisontaalisesti tai vertikaalisesti (Kuvio 13).

(Unity 2019e.) Tiling-noodilla voidaan siis muokata esimerkiksi proseduraalisten kohinatekstuurien kokoa.

Kuvio 13. Offset-porttiin on määritelty x ja y arvoisi 2, jolloin tekstuuri toistuu kaksi kertaa molemmissa suunnissa (Unity 2019).

Position-noodilla saadaan kunkin verteksin sijainti. Tämä voidaan lukea paikalli- sena koordinaattina (object space) tai sijaintina scenessä (world space). (Unity 2019f.)

Time-noodi pitää sisällään erilaisia aika-arvoja, joilla voidaan luoda varjosti- meen liikettä. Noodia voidaan käyttää muun muassa tekstuurin tai värien ani- mointiin. Noodin Time-portti palauttaa ajan sekunneissa pelin käynnistyksestä, ja Sine- ja Cosine-portit antavat ajasta aaltoilevan version sini- tai kosini- kaa-

van pohjalta. (Unity 2020g.) Luonnollisesti Time-noodi lienee animaation kan- nalta keskeisin noodi. Tämä kävi ilmi aika nopeasti tehdessäni erilaisia testejä Shader Graphilla.

5 Varjostimien koosto omaan projektiin

Toiminnallista osaa varten suunnittelin 2d-peliympäristön ja rakensin siitä pieniä alueita Unityllä (Kuvio 14). Suunnittelun aikana mietin jo valmiiksi elementtejä, joihin animaatiota voisi lisätä. Valitsin projektiini viidakkomaisen ympäristön, koska koin että siinä on paljon erilaisia mahdollisuuksia animaatioille, kuten kas- villisuutta ja muita luonnon elementtejä.

Kuvio 14. Ruutukaappaus osasta ympäristöä, johon liikettä on tarkoitus rakentaa.

Suurin osa elementeistä oli tässä vaiheessa jo paikallaan.

Koska olin muuttanut useimmat kuvat prefab-objekteiksi, niihin tarvitsi vain vaih- taa uudet materiaalit, joihin lisäsin koostamani varjostimet. Unity sisältää pre- fab-järjestelmän, jolla elementeistä voidaan tallentaa versioita myöhempää käyttöä varten. Näitä prefab-objekteja voidaan käyttää missä tahansa scenessä kopioina eli instansseina (instance), ja kaikki alkuperäiseen prefab-objektiin teh- dyt muutokset tulevat voimaan kaikkiin sen instansseihin (Unity Documentation n.d h). Näin sain nopeasti lisättyä liikkeen kaikkiin haluamiini elementteihin, eikä materiaalia tarvinnut lisätä jokaiseen kuvaan erikseen.

Koostin projektini aikana viisi erilaista varjostinta, joista yksi oli pienin muok- kauksin tehty variaatio toisesta varjostimesta. Käytin varjostinanimaatioiden in- spiraationa tarkastelemieni 2d-pelien varjostimia sekä luonnossa esiintyviä ilmi- öitä, joiden pohjalta yritin koostaa samankaltaisia efektejä. Lopuksi nauhoitin koostamistani varjostinanimaatioista videon, jossa niitä voidaan tarkastella sekä erillisissä sprite-kuvissa että osana isompaa ympäristökokonaisuutta. Videota tai sen nauhoitusta Unitystä en kuitenkaan työssä käsittele tarkemmin.

5.1 Valonsäteet – yksinkertainen tekstuurianimaatio

Tekstuurin avulla animoitu valonsädevarjostin oli loppujen lopuksi yksinkertaisin projektin aikana koostetuista varjostimista. Koska Shader Graphissa näkee tu- lokset reaaliajassa, ja työkalu näin kannustaa testaamaan erilaisia yhdistelmiä, muotoutuivat noodiryhmät puhtaasti kokeilemalla erilaisia yhdistelmiä. Nämä säteet olivat siis animoituja kuvia eivätkä fyysisiä valoja, eli ne eivät vaikuta mui- hin ympäristön elementteihin.

Valonsäteet syntyvät, kun valonlähteestä tuleva valo osuu ja siivilöityy esteiden kuten pilvien ja kasvillisuuden läpi. Säteiden havaitsemiseksi tarvitaan myös il- massa esiintyviä pienhiukkasia – kuten sumua, savua tai pölyä – joihin valo osuu. (Wikipedia 2020c) Lähestyin valonsäteitä projektissani viitteellisesti, eikä niissä ole havaittavissa mainittuja hiukkasia, joita voidaan kuitenkin lisätä efek- tin yhteyteen erillisellä partikkelijärjestelmällä. Myös valonsäteitä siivilöivät es- teet ovat ympäristössä joko oletettuja ja rajattu ruudun ulkopuolelle. Joissakin tilanteissa asettelin kasvillisuuden yksinkertaisesti säteiden päälle.

Omien havaintojeni mukaan valonsäde-efekti löytyy useasta pelistä (Kuvio 15).

Sen lisäksi, että animoiduilla valonsäteillä saadaan liikettä ympäristöön, niitä voidaan käyttää myös pelaajan katseen ohjaamiseen kentän sommitelmassa.

Yksi esimerkki tällaisesta tilanteesta esiintyy Monster Boy -sarjan pelissä, jossa valonsäteet osuvat maasta poimittavaan esineeseen. Kuten esitetyissä pe- leissä, valonsäteiden tuli liikkua horisontaalisesti ja niiden tuli olla myös oman

projektini kohdalla olla kauttaaltaan pehmeitä. Halusin varjostimeen myös erilai- sia säätömahdollisuuksia, jolloin sitä voitaisiin mahdollisesti käyttää myös mui- den samankaltaisten efektien luomiseen.

Kuvio 15. Valonsäteiden ulkonäkö vaihtelee pelin visuaalisen kokonaisuuden mu- kaan. Kuvakaappaukset peleistä vasemmalta ylhäältä luettuna: Unruly Heroes, Rayman Legends, Ori and the Will of the Wisps ja Monster Boy and the Cursed Kingdom.

Varjostimen toteutusta miettiessäni päädyin kokeilemaan sen rakentamista kah- desta kuvasta. Toinen näistä oli valkoinen sprite-kuva (2D sprite) ja toinen val- koinen saumaton liukuväritekstuuri, joista molemmissa oli läpinäkyviä osia (Ku- vio 16). Käytän valkoista sprite-kuvaa, koska sen väri voidaan muuttaa mootto- rissa miksi tahansa toiseksi väriksi, joko Sprite Renderer -komponentin tai ma- teriaalin kautta. Tällä tavalla en rajoita säteiden väriä yhteen tiettyyn väriin. Ym- päristössä tämän sprite-kuvan korkeutta muutin melko vapaasti, koska en kat- sonut sen vaikuttavan kuvan tarkkuuteen tai laatuun merkittävästi. Liukuväri- tekstuuria liikutetaan sprite-kuvan päällä, joka toimii ikään kuin maskina valon- säteille. Käytettävän liukuväritekstuurin tulee olla saumaton ja sen toistuvuus (wrap mode) pitää asettaa repeat-tilaan Inspectorissa, jotta sen animaatio tois- tuu loputtomasti.

Kuvio 16. Spriten osittaisella läpinäkyvyydellä saadaan enemmän vaihtelua ani- maatioon liukuväritekstuurin liikkuessa sen pinnalla. Pehmennetyt reunat sekä sprite-kuvan että liukuväritekstuurissa tekevät valonsäteistä kauttaaltaan peh- meitä.

Aloitin varjostimen kooston uudella Sprite Unlit Graph -tiedostolla, koska ky- seessä oli valoa imitoiva efekti, enkä halunnut ympäristön valaisun vaikuttavan siihen. Ensimmäiseksi tein sprite-kuvalle referenssin Blackboardissa, ja tein siitä värjättävän Multiply-noodin kautta (Kuvio 17). Kuvan lisäksi tein myös vä- ristä muokattavan ominaisuuden Blackboardissa, jolloin voin muuttaa valonsä- teiden väriä ja läpinäkyvyyttä, tai muuttaa pohjana käytettyä kuvaa materiaa- lissa. Näin voin samalla varjostimella tehdä useita erilaisia versioita valonsä- teistä luomalla niille omat materiaalit ja muokkaamalla niille yksilölliset säädöt.

Kuvio 17. Väri kerrotaan sprite-kuvan päälle Multiply-noodilla. Periaate on sa- manlainen kuin esimerkiksi Photoshopin multiply-sekoitustila. Tekstuurin refe- renssi nimetään ”_MainTex” -muotoon, jolloin tekstuuri tulee Sprite Renderer - komponentista.

Varjostimen liike syntyy liikuttamalla liukuväritekstuuria, jonka noodissa käytin Ray Gradient -nimeä. Tätä tekstuuria liikutetaan vaakasuuntaisesti Time-noodin avulla. Lisäsin muokattavan säädön liikkeen nopeudelle yhdistämällä Time- ja Vector1-noodit toisiinsa, ja nimesin vektorin Blackboardissa työskentelyn sel- kiyttämiseksi Ray Speediksi. Yhdistämiseen käytin Multiply-noodia, joka kertoo Time-noodin vakio nopeuden vektoriin lisätyllä arvolla. Kuten luvussa 4.1 mai- nitsin, vektorilla on suunta, minkä vuoksi lisäämällä arvoksi joko positiivinen tai negatiivinen luku voidaan muuttaa nopeuden lisäksi valonsäteiden suuntaa.

Multiply-noodin laskema arvo ohjataan Tiling And Offset -noodin Offset-porttiin, mikä saa tekstuurin liikkumaan.

Tiling And Offset -noodin Tiling-porttiin liitin vielä kaksi vektoriarvoa sisältävän noodin, jossa käytin nimeä Ray Tiling. Tämän kautta voin muokata käytettävän tekstuurin tiheyttä sekä vaaka- ja pystysuunnassa. Koska liukuväritekstuuri on viety Blackboardille, voi sen vaihtaa materiaalissa toiseen tarvittaessa, jolloin saadaan aikaan eri tahdissa liikkuvia ja toisistaan eroavia valonsäteitä. Projek- tissani käytin kahta toisistaan hieman eroavaa sprite-kuvaa ja liukuväriä, joita yhdistelin valonsäteiden kanssa. Kuviossa 18 nähdään liukuväritekstuurin ym- pärille rakennetut noodit.

Kuvio 18. Varjostimen liike muodostuu seuraavanlaisista noodeista.

Kun molemmat osat olivat valmiit, yhdistin ne lopuksi toisiinsa Multiply-noodilla, joka kertoo ne yhteen. Multiply-noodin liitin lopuksi Master-noodin värin Output- arvoon. Kuviossa 19 on ruutukaappaus valmiista varjostimesta.

Kuvio 19. Varjostin kokonaisuudessaan. Osat on jaettu nimettyihin ryhmiin koko- naiskuvan selkeyttämiseksi.

Koska varjostimessa määriteltyjä ominaisuuksia voi muokata materiaalista pelin ollessa editorissa käynnissä, voin testata valonsäteiden animaatiota reaa-

liajassa ja valita mikä näyttää parhaalta tulokselta. Materiaaliin tehdyt muutok- set jäävät voimaan pelin sulkemisen jälkeen, toisin kuin esimerkiksi kenttään tehdyt muutokset. Säätömahdollisuudet tekevät varjostimesta monipuolisen, ja tätä varjostinta voi käyttää pienillä muutoksilla muissa vastaavissa efekteissä.

Omassa efektissäni käytin pehmeitä valonsäteitä, mutta vaihtamalla kuvat saa- daan aikaseksi tarvittaessa myös teräviä säteitä.

Valonsäde-efektin pystyisi animoimaan Unityssä myös aikajanalle keyframe- animaationa. Pidän varjostinta kuitenkin parempana vaihtoehtona juuri sen vuoksi, että sillä saadaan tehtyä nopeasti useita erilaisia versioita.

Varjostin ei ollut loppujen lopuksi ollut niin monimutkainen kuin kuvittelin, ja se oli yksinkertaisin tämän työn aikana työstetyistä varjostinanimaatioista. Kun olin päättänyt rakentaa animaation kahdesta osasta, syntyi varjostin editorissa ko- keilemalla. Varjostimen työstöstä opin, että kannattaa koittaa pilkkoa varjostin pienempiin osiin – miettiä millaisista osista sen tuottama animaatio saattaisi koostua – samalla kun miettii miten sen saisi rakennettua. Valonsäteisiin työs- tetty varjostin soveltuu mielestäni hyvin ensimmäiseksi varjostimeksi niille, joille

työkalu ei ole entuudestaan tuttu. Sen tuottaman kaltaisia valoefektejä voi nähdä monissa 2d-peleissä.

5.2 Kasvillisuus – 2d-kuvan polygoniverkon manipulointi

Projektini ympäristö koostuu suureksi osaksi erilaisesta kasvillisuudesta, joten työstin siihen varjostimen, jolla kasvillisuutta voisi animoida ikään kuin se hei- luisi tuulessa. Tämän kaltainen varjostin löytyy esimerkiksi Ori and the Will of the Wisps -pelistä, jota tarkastelin projektin aikana (Kuvio 20). Orissa varjostin on kuitenkin viety paljon pidemmälle, kuin mitä oman projektini puitteissa pys- tyin tekemään. Oma varjostimeni ei esimerkiksi ole dynaaminen, eli kasvillisuus ei esimerkiksi reagoi pelaajan liikkeisiin. Dynaamisuuden aikaansaaminen vaatii oman käsitykseni mukaan ohjelmointia ja Collider-komponentteja, joilla pelihah- mon ja ympäristön elementtien välinen viestintä saadaan toimimaan. Eli ele- mentit tunnistavat, kun hahmo liikkuu niiden ohitse tai osuu niihin. Orista otetun inspiraation lisäksi tarkastelin tuulta ilmiönä.

Kuvio 20. Oikealla saman pensaan siluetti ja liikerata kolmen satunnaisen kuva- kaappauksen otannasta. Muokatut kuvakaappaukset Ori and the Will of the Wisps -pelistä.

Tuuli syntyy, kun lämpötila- ja ilmanpaine-erot pyrkivät tasoittumaan. Luon- nossa tuulen käyttäytymisessä on sattumanvaraisuutta ja sen luonteeseen vai- kuttavat esimerkiksi maasto ja muut esteet. Koska ilma on kaasu, sen liike on yleensä turbulenttista. Turbulenssi syntyy ilman pystysuuntaisesta liikkeestä ja

voimakkaista ilmanpainemuutoksista. (Ilmatieteenlaitos n.d.) Pyrin saamaan varjostimella aikaiseksi tällaista luonnollisen näköistä, vaihtelevaa liikettä.

Käytin varjostimen pohjana Brackeys-kanavan tutoriaalia, koska olin aikaisem- min testannut sitä toisessa projektissa. Kyseisen tutoriaalin varjostin on raken- nettu 3d-peliä varten, joten karsin siitä ominaisuuksia, joille ei ollut omassa pro- jektissani käyttöä, ja lisäsin siihen myös uusia ominaisuuksia. Tätä varjostinta varten käytin Sprite Lit Graph -tiedostoa, koska halusin varjostimen kanssa käy- tetyn kasvillisuuden ja muiden elementtien reagoivan kentän valaistukseen.

Sprite-kuva tuodaan varjostimeen 2D Texture -noodilla, kuten valonsäteiden kanssa.

Varjostimen tuottama liike tapahtuu liikuttamalla kuvan polygoniverkkoa satun- naisen kohinan avulla, joka otetaan Gradient Noise -noodista (Kuvio 21). Kohi- nan kokoa ohjataan yhden vektoriarvon noodilla, joka yhdistetään Gradient Noi- sen Scale-porttiin. (Brackeys 2019.) Satunnaisen kohinatekstuurin vaaleita ja tummia kohtia voidaan tässä ajatella tuulta luovina lämpötilan vaihteluina.

Kuvio 21. Satunnaisen kohinan tummat kohdat liikuttavat polygoniverkkoa va- semmalle ja vaaleat oikealle. Kuvakaappaus Brackeys-kanavan tutoriaalivide- osta. (Brackeys 2019).

Tutoriaalissa käytetään yhtä proseduraalista kohinaa liikkeen pohjana. Omaa varjostinta muokkasin kuitenkin niin, että se käyttää kahta Gradient Noise -noo- dia, joita vuorottelen Lerp-noodin (linear interpolation) ja Time-noodin siniaaltoi- lun avulla. Siniaaltoilua rajoitan Inverse Lerp -noodin avulla niin, että sen arvot

pysyvät nollan ja yhden välillä. Liikuttamalla näitä proseduraalisia tekstuureita eri nopeuksilla, saan kasvillisuuden animaatioon turbulenssinomaista liikettä.

Kuviossa 22 on noodiryhmät, jotka toimivat liikkeen pohjana.

Kuvio 22. Kohinatekstuuria liikuttavat noodiryhmät ovat toistensa kopioita, mutta ne liikkuvat eri nopeuksilla, jotka ovat säädettävissä materiaalikohtaisesti.

Jotta liike ei kulkisi vain yhteen suuntaan, kohinaan lisätään myös negatiivinen suunta vähentämällä kohinaa Subtract-noodilla 0,5 yksikköä. Tämän jälkeen liike tapahtuu arvojen -0,5 ja 0,5 välillä. Liikkeen määrää kokonaisuudessaan kasvatetaan kertomalla se Multiply-noodilla. Seuraavaksi liike lisätään po- lygoniverkon koordinaatteihin, jotka saadaan Position-noodilla. Liike rajoitetaan x-akselille erottamalla koordinaatit Split-noodilla. Liike lisätään Split-noodin pu- naiseen kanavaan, ja lopuksi kanavat yhdistetään Combine-noodilla takaisin kolmen luvun vektoriksi. (Brackeys 2019.)

Jotta kasvillisuus ei liukuisi maanpinnalla, on se lukittu pystysuuntaisen liukuvä- rin avulla, joka luodaan UV-kartan pohjalta. Tämä tapahtui yhdistämällä UV- noodi Split-noodiin, jolla saadaan eroteltua UV-kartan y-akseli, joka saadaan Split-noodin vihreästä kanavasta. Lopulta vääristetty polygoniverkko interpoloi- daan takaisin alkuperäiseen muotoon tämän liukuvärin pohjalta, mikä tehdään Lerp-noodilla. (Brackeys 2019.) Toisin sanoen vääristymää vähennetään liuku-

värin tummissa kohdissa. Kuviossa 23 nähdään tämä noodiryhmä. Lopuksi po- lygoniverkon koordinaatit muunnetaan paikalliseen koordinaatistoon Transform- noodilla ja liitetään Master-noodin Vertex Position -porttiin.

Kuvio 23. Split-noodilla on neljä yhden vektoriarvon porttia, jotka ovat kuvan mu- kaisesti R, G, B ja A tai x, y, z ja w. Tutoriaalissa näiden portien antamaa liuku- väriä tarkasteltiin ensin Preview-noodilla, jonka voi jättää noodiryhmästä pois.

Koska kuva lukitaan sen alareunasta, pitää kiinnittää huomiota siihen, miten varjostimen kanssa käytetyt kuvat piirretään ja rajataan. Totesin myös, että sprite sheet -kuva-arkit eivät soveltuneet varjostimen kanssa käytettäviksi.

Tämä johtunee siitä, että UV-kartta kattaa sprite sheet -arkin kokonaisuudes- saan. Tähän ongelmaan en projektin aikana löytänyt ratkaisua. Kuviossa 24 on kuvakaappaus valmiista varjostimesta Shader Graphissa.

Kuvio 24. Kasvillisuutta liikuttava varjostin kokonaisuudessaan. Noodiryhmä liite- tään tutoriaalista poiketen Sprite Lit Master -noodin Vertex Position -porttiin, mutta muuten sen rakenne on sama kuin tutoriaalissa.

Tässä vaiheessa varjostin toimii, mutta joidenkin kuvien kohdalla se taivuttelee tekstuuria rumasti. Aikaisemman kokemukseni pohjalta tiedän, että tämä johtuu polygoniverkosta, jonka Unity tekee jokaiselle kuvalle automaattisesti. Unityn luoma polygoniverkko ei sovellu hyvin kuvan taivuttamiseen, ja tilanteen korjaa- miseksi verkkoa täytyy korjata hieman. Tällainen ongelmatilanne ja tilanne sen korjaamisen jälkeen on esitetty kuviossa 25.

Kuvio 25. Ylärivissä alkuperäinen Unityn automaattisesti luoma polygoniverkko, ja sen tuottamat ongelmakohdat animaatiossa. Alla ruohoelementin muokattu tar- kempi versio polygoniverkosta.

Jotta polygoniverkkoa päästään korjaamaan täytyy projektiin asentaa Unityn jul- kaisema ilmainen 2D Animation -lisäosa. Kyseinen lisäosa löytyy Unityn

Package Managerista, jonne pääsee Window-välilehdeltä. Asennuksen jälkeen uudet työkalut löytyvät Sprite Editorista, johon pääsee Inspector-ikkunasta.

Sprite Editoriin lisätyllä Skinning Editor -työkalulla voi muokata polygoniverkkoa käsin, tai uuden polygoniverkon voi luoda automaattisesti (Kuvio 26). Työkalun automaattisesti tuottama uusi polygoniverkko tuntui riittävän omassa projektis- sani kaikkien kuvien kohdalla. Jokaisen kuvan polygoniverkko täytyy korjata erikseen. Kun polygoniverkko on korjattu, varjostin toimii kuvassa nätimmin, eikä kuvan pitäisi enää repeillä.

Kuvio 26. Näkymä Skinning Editor -työkalusta. Automaattinen uuden geometrian luonti tuntui riittävän hyvin kuvassa oikealla näkyvillä asetuksilla.

Osan elementeistä, kuten roikkuvat köynnökset, päädyin viemään Unityyn ylösalaisin ja käänsin ne taas kentässä oikeinpäin. Näin sain liikkeen niissä lu- kittua oikeasta kohdasta. Muutamissa tapauksissa taas rakensin elementtejä useammasta osasta. Olin esimerkiksi piirtänyt pensaita, joihin minun olisi pitä- nyt saada lukittua liike niiden keskeltä eikä alareunasta. Nämä pensaat leikka- sin kahteen osaan, joista alaosan käänsin ylösalaisin (Kuvio 27). Moottorissa yhdistin erotetut pensaan palaset saman peliobjektin alle. Sen lisäksi, että saan liikkeen pensaissa lukittua oikeasta kohdasta, saan niistä myös useampia erilai- sia versioita palasia yhdistelemällä.

Kuvio 27. Pensaiden pilkkominen kahteen osaan osoittautui toimivaksi ratkai- suksi, eikä pensaille tarvinnut koostaa uutta varjostinta.

Kasvillisuuden animointi varjostimella onnistui, ja se toimi testaamieni kuvien kanssa hyvin. Tuulen ja turbulenssin lyhyt tarkastelu antoi inspiraatiota liikkeen suunnitteluun. Ilman tätä en usko, että olisin tajunnut toteuttaa liikkeen luon- netta samalla tavalla. Tämänkaltaista animaatiota on melko työläs lähteä teke- mään käsin jokaiselle kasvielementille, minkä vuoksi varjostinanimaatio on mie- lestäni järkevä lähestymistapa.

5.3 Reunoista lukittu varjostin – variaatio kasvillisuusvarjostimesta

Kasvillisuutta varten valmistunut varjostin soveltuu elementeille, joita heilutetaan niiden juuresta. Ympäristössäni on hämähäkinseittejä, joista osan animointi pe- riaatteessa toimisi tällä varjostimella. Ongelmia tulee kuitenkin heti kun seittien kiinnikekohdat ovat näkyvissä. Lähdin muokkaamaan kasvillisuusvarjostimesta variaatiota elementeille, jotka ovat kiinnitetty kuvan reunoista, eli liike on ele- menteissä pelkästään niiden keskellä (Kuvio 28).

Kuvio 28. Vihreällä merkitty kohdat, joista kuva pitäisi saada varjostimessa lukit- tua. Kun kuva saadaan lukittua näin, niin esimerkiksi verkon muoto voi vaihdella vapaasti.

Kasvillisuusvarjostimessa kuva kiinnitettiin sen alareunasta pystysuuntaisen liu- kuvärin avulla, joka luotiin UV-kartan y-akselista. Lähdin variaation kohdalla en- sin kokeilemaan kiinnityksen luomista tekstuurin avulla ja työstin mustavalkoi- sen pyöreän liukuvärin Photoshopissa. Tekstuurin kautta tehty kiinnitys ei kui-

tenkaan toiminut, joten turvauduin Unityn dokumentaatioon. Valmiin varjostinva- riaation kohdalla kiinnitys tapahtuu pyöreän liukuvärin avulla, mutta se otetaan tekstuurin sijaan Sphere Mask -noodista. Sphere Mask -noodi luo pyöreän liu- kuvärin perustuen sen Center-portin arvoihin, jonka lisäksi Radius- ja Hardness- porteilla voidaan säätää liukuvärin läpimittaa ja terävyyttä (Unity Documentation n.d i). Uusi noodiryhmä lisätään aikaisemmin kuviossa 23 esitetyn liukuvärikiin- nityksen tilalle (Kuvio 29). Muuten logiikka on sama kuin kasvillisuusvarjosti- messa.

Kuvio 29. Sphere Mask -noodin portit ottavat vastaan myös Vector-noodeja, jol- loin arvoista voidaan tehdä materiaalissa muokattavia ominaisuuksia. Itse päätin tässä kohtaa jättää nämä arvot niin sanotusti lukituksi Shader Graph -editorin si- sään, kun olin löytänyt varjostinanimaatiolle sopivat arvot.

Varjostinta voi käyttää kaikkien sellaisten elementtien kanssa, jotka täytyy

saada kiinnitettyä kahdesta tai useammasta kohdasta, ja jotka eivät ole kuvassa samalla vaaka- tai pystysuuntaisessa sivulla. Varjostimella on kuitenkin rajoituk- sensa, joka koskee myös kasvillisuusvarjostinta. Se ei toimi elementtien

kanssa, joihin on liitetty animaatiota, vaan vaatii että seitin kanssa käytetyt koh- teet pysyvät paikallaan. Kiinnitetyt kohdat eivät siis seuraa muiden elementtien

liikerataa. Lyhyellä katsauksella tämän ongelman ratkaisu vaatii laajempaa jat- kotutkimusta ja perehtymistä uusiin työkaluihin, jotka ovat tämän työn rajauksen ulkopuolella.

5.4 Usva – UV-kartan vääristäminen varjostimella

Tarkastelemissani peleissä erilaiset usvaefektit erosivat aika paljon toisistaan.

Osassa usvaa esittävä kuva oli joko paikallaan tai animoitu liikkumaan horison- taalisesti, kun taas osassa usvalle oli varjostimien avulla tehty suurieleisiä liik- keitä. Shader Graphilla aikaan saamani usvaefekti muistuttaa Ori-peleissä esiin- tyvää usvaa, jonka liike on toteutettu varjostinanimaatiolla.

Usvavarjostimella luotu efekti tehdään manipuloimalla kuvan UV-karttaa pro- seduraalisen kohinan avulla. Suuri osa siinä käytetyistä noodiryhmistä on sa- manlaisia kuin aikaisemmissa koostamissani varjostimissa. Usvan tekstuuri tuo- daan varjostimeen samalla tavalla kuin aikaisemmissa elementeissä, ja kuten valonsäteissä aiemmin, jätin kuvat vaaleiksi, jotta voin lisätä niihin värejä peli- moottorissa (Kuvio 30).

Kuvio 30. Ympäristössä käytettyjä usvia ja pilvi. Usva-kuvien ei mielestäni tarvitse olla erityisen tarkkoja, koska kuvan UV-karttaa ja polygoniverkkoa vääristellään pelimoottorissa. Tärkeämpää on ehkä kiinnittää huomiota kuvien siluettiin ja tehdä muutamia erilaisia muotoja, joita voidaan sitten kierrättää ympäristössä te- hokkaasti.

Seuraavaksi rakensin kuvan UV-kartalle vääristymän Simple Noise -noodin avulla. Valitsin tähän käyttötarkoitukseen Simple Noise -kohinan Gradient Noi- sen sijaan, koska siinä on enemmän harmaan sävyjä ja antaa tämän vuoksi

pehmeämmän vääristymän. Kuviossa 31 nähdään kohinan ympärille rakennetut noodit.

Kuvio 31. Usvien UV-karttoja vääristellään kohinan avulla.

Kuten kuvasta voidaan nähdä, ohjaan vääristymän määrää varjostimessa jaka- malla proseduraalisen tekstuurin Divide-noodilla. Jakolasku perustuu yhden vektorin arvoon, joka on liitetty toiseen jakonoodin porteista. Koska käytän noo- dia, joka tuottaa jakolaskun, mitä suurempi luku sitä hienovaraisempi vääris- tymä on. Tässä voidaan käyttää myös Multiply-noodia, jolloin vektoriarvoon määritelty pieni luku tuottaa saman hienovaraisen vääristymän.

Liike tuodaan usvaan kuten aikaisemmin kasvillisuusvarjostimessa, mutta halu- sin enemmän säätövaraa vääristymän tiheyteen. Tämän vuoksi liitin Vector2- noodin Tiling And Offset -noodin Tiling-porttiin, jolloin pystyn määrittelemään proseduraaliselle kohinalle erikseen sekä vertikaaliset että horisontaaliset arvot (Kuvio 32).

Kuvio 32. Saman kuvan UV-karttaa on vääristelty proseduraalisen kohinan avulla. Muuttamalla proseduraalisen kohinan toistuvuutta pysty- tai vaakasuun- nassa saadaan aikaan erilaisia lopputuloksia. Kuvassa vasemmalla nähtävän kaltainen vääristymä saattaisi soveltua revontulien luontiin.

Tämä olisi periaatteessa riittänyt usvan luomiseen, mutta kokeilin vielä tuoda kasvillisuusvarjostimessa käytetyn polygoniverkon manipuloinnin osaksi varjos- tinta. Tämä antaa suurieleisemmän liikkeen usvalle ja se näyttää mielestäni pa- remmalta muiden ympäristön animaatioiden kanssa. Tässä tapauksessa po- lygoniverkot pitää muistaa korjata myös usvakuvien kohdalla, ettei niihin tule kummallisia taitoksia.

Käytin usvavarjostinta myös pilvien animointiin, joille tein oman materiaalin ja yksilölliset säädöt. Niissä jätin polygoniverkon manipuloinnin pois, koska pilvet ovat kaukana horisontissa, ja niiden animaatio pitää mielestäni siksi olla hieno- varaisempi.

5.5 Vesiputous – 3d-geometrian hyödyntäminen

Tähän mennessä varjostin on lisätty materiaalilla suoraan kaksiulotteisiin kuviin, joihin on automaattisesti luotu polygoniverkko. Joissain tapauksissa näiden pin- tojen muoto ei kuitenkaan sovellu halutun lopputuloksen aikaansaamiseksi. Tä- hän ongelmaan törmäsin, kun halusin luoda kosken tai puron, jossa vesi liikkuisi

kaarimaisessa muodossa. Tällöin Unityyn voidaan tuoda räätälöityjä 3d-malleja ja polygoniverkkoja kuhunkin käyttötarkoitukseen.

Tarkastelin tällaisia kaarevia ja muita vesielementtejä eri peleissä (Kuvio 33).

Niiden yhteyteen oli usein myös liitetty vesisumua erillisellä varjostimella ja par- tikkelijärjestelmiä tukemaan vaikutelmaa vedestä. Käytin kuviossa nähtäviä ve- sielementtejä inspiraationa omassa animaatiossani ja grafiikassani.

Kuvio 33. Inspiraationa käyttämiäni vesielementtejä. Kuvakaappaukset peleistä vasemmalta ylhäältä luettuna: Unruly Heroes, Rayman Legends, Ori and the Blind Forest ja Monster Boy and the Cursed Kingdom.

Luvussa 3.3 oli maininta yleisestä tavasta manipuloida UV-karttaa virtaavien elementtien, kuten veden tai laavan, luomiseen. Niin kuin valonsäteiden teks- tuurien kanssa, tällaisten elementtien tekstuurin tulee olla toistuvia halutussa suunnassa, jottei illuusio loputtomasta liikkeestä katoa.

Valmistin Blender-ohjelmistolla kaarevan 3d-mallin, jonka UV-kartan jätin suo- raksi (Kuvio 34). UV-kartan tulee olla suora, koska sitä liikutetaan varjostimessa pystysuunnassa. 3d-mallin pinnalla tämä liike muuttuu kaarevaksi. Malli voi olla minkä muotoinen tahansa, kun vain sen UV-kartta on suora.

Kuvio 34. Blenderillä rakennettu 3d-malli ja UV-kartta, jota käytin vesielementin pohjana.

Shader Graphissa UV-kartan animointi tapahtuu samalla periaatteella kuin va- lonsäteiden ja usvan animaatio. Lukitsin UV-kartan liikkeen kuitenkin tässä ta- pauksessa pystysuuntaiselle y-akselille kaksilukuisella vektorilla, jonka x-portin arvoksi jätin 0, ja y-porttiin liitin kerrotun ajan (Kuvio 35). Tämän vuoksi riittää, että vesiputouksen tekstuuri on suunniteltu toistumaan pystysuunnassa.

Kuvio 35. Pienillä lisäyksillä voidaan vaikuttaa animaation suuntaan.

UV-kartan liikuttamisen lisäksi vääristin varjostimessani UV-karttaa satunnaisen kohinan avulla, koska halusin kokeilla miltä efekti näyttäsi tämän kanssa. Satun- naisen kohinan liike on rajattu pystysuuntaiseksi kaksilukuisella vektorilla, kuten

aiemmin UV-kartan animaatiossa. Lisäsin tässä kohtaa Tiling-porttiin vielä toi- sen kaksilukuisen vektorin, jolla voin muokata kohinan toistuvuutta. Rajoitin vääristymän määrää Split- ja Lerp-noodien avulla. Gradient Noisen antaman ar- von lisäsin Split-noodiin, jonka punaisen kanavan eli x-arvon liitin Lerp-noodiin (Kuvio 36). Lerp-noodin A- ja B-portteihin laitoin arvot -0,1 ja 0,1, jolloin liike suhteutetaan kyseisten arvojen välille. Tämän ja aikaisemmin valmistuneen noodiryhmän yhdistin toisiinsa Add-noodilla, jonka liitin lopuksi Sample Texture 2D -noodin UV-porttiin.

Kuvio 36. Kohinan luomaa vääristymän määrää rajoitetaan Split- ja Lerp-noodien avulla.

Toisin kuin usvavarjostimen kanssa, vesiputouksen kohdalla varjostimen tuotta- maa lopputulosta suoraan käytettävän tekstuurin pohjalta oli mielestäni vaikea ennakoida. Tästä johtuen tein useita testejä erilaisten tekstuurien kanssa ennen kuin löysin tyylin kanssa toimivan yhdistelmän. Kuviossa 37 on otanta testeistä, joita tein vesiputouksessa käytettävän tekstuurin kanssa.

Kuvio 37. Ylärivissä tekstuuri, johon kukin efekti osittain perustuu. Tekstuurin li- säksi myös muita varjostimella luotuja ominaisuuksia on muokattu materiaalissa, eivätkä ne ole jokaisen esimerkin kohdalla samat.

Kuten kuviossa voidaan nähdä, pienilläkin muutoksilla sekä tekstuurissa että materiaalin ominaisuuksissa saadaan aikaan hyvin erilaisia lopputuloksia. Var- jostimella voidaan luoda myös laavavirtoja tai muita virtaavia efektejä käyttä- mällä erilaisia tekstuureita. Testasin varjostinta virtaavan laavan kanssa, jota en kuitenkaan upottanut osaksi valmistamaani ympäristöä (Kuvio 38). Hidastin tes- tissäni myös animaatiota, jolloin sain paremman vaikutelman laavan liikkeestä.

Kuvio 38. Varjostin sovellettuna laavatekstuurin ja mutkittelevan 3d-mallin kanssa.

6 Pohdinta

Opinnäytetyössä käytiin läpi Shader Graphia ja siihen liittyviä konsepteja. Ai- heen rajaus oli mielestä melko hyvä, mutta olisi voinut olla tehokkaampi, ja joi- tain asioita olisi voinut käsitellä tarkemmin.

Ehkä toiminnallisessa osassa työstetyn pelin alustan olisi voinut määrittää ja miettiä aihetta ja varjostimia alusta huomioiden. Esimerkiksi mitä tulee ottaa huomioon, jos varjostimia koostetaan pelille, joka on suunnattu mobiilialustalle tai joka on selainpohjainen.

Toiminnallisessa osassa käytin vain yhdenlaista ympäristöä, ja jatkotyönä voisi miettiä myös toisenlaisten ympäristöjen animointia Shader Graph -työkalulla.

Urbaanin ympäristön animaatio voi erota merkittävästi verrattuna työssä käytet- tyyn metsäympäristöön. Nyt kokeilemani varjostinanimaatio ei välttämättä toimi kaikkien graafisten tyylien kanssa. Tällainen tilanne voisi olla esimerkiksi silloin kun tyyliin on määritelty, että elementeillä on ääriviiva. Varjostinanimaation koh- dalla tulee mielestäni myös muistaa, että kyse on tavallaan automatisoidusta animaatiosta, minkä vuoksi sen hallitseminen ei ole yhtä tarkkaa, kuin esimer- kiksi silloin, kun animaatio ja liikerata piirretään kuva kuvalta.

Mainitsin työssäni muutaman kerran partikkelijärjestelmät, joita on käytetty te- hostamaan haluttua efektiä varjostinanimaation yhteydessä. Partikkelijärjestel- mät rajautuivat työstäni pois, ja Shader Graphin käyttöä partikkelien varjosti- mien kanssa voisi siis miettiä.

Mainitsin luvussa 5.2 ympäristöelementtien dynaamisuuden, joka olisi toinen mielenkiintoinen aihealue jatkotutkimukselle. Se rajautui opinnäytetyöni ulko- puolelle, koska kyseisen ominaisuuden aikaansaaminen vaatii oman käsitykseni mukaan jonkin verran ohjelmointia.

Mielestäni varjostimet onnistuivat melko hyvin, ja olen niihin kaikkiin aika tyyty- väinen. Olen tyytyväinen erityisesti animaatioon, jonka sain rakennettua kasvilli- suudelle. Varjostin pohjautui tutoriaaliin, mutta sain siitä muokattua projektiini

soveltuvan varjostimen. 3d-projektiin tarkoitetun varjostimen kääntäminen 2d- projektille onnistui tässä tapauksessa. Hämähäkinseittien liikkeen lukitseminen kaikista reunoista onnistui, eikä minun tarvinnut piilottaa ongelmallisia kohtia muiden kuvien alle. Jatkokehityksenä voisi kuitenkin miettiä miten animaatio ra- kennetaan niin, että elementti huomioi liikeradan elementissä, johon se on kiin- nitetty. Myös valonsäteille tarkoitettu varjostin onnistui mielestäni hyvin, ja sen yhteyteen voisi vielä rakentaa erillisen partikkelijärjestelmän, joilla kuvataan il- massa leijuvia hiukkasia. Usva- ja vesiputousvarjostimissa on mielestäni vielä kehitettävää, sillä niiden hallinta kenttäeditorissa oli välillä haastavaa. Molem- pien suunnitteluun ja koostamiseen jäi projektissa käytettäväksi vähemmän ai- kaa, mikä vaikutti niiden laatuun. Vesiputousta voisi kehittää niin, että 3d-mallin ylä- ja alareuna on häivytetty. Shader Graphissa on se hyvä puoli, että varjosti- meen voidaan jälkikäteen tehdä muutoksia, jotka tulevat heti tallennuksen jäl- keen voimaan kaikkiin niihin materiaaleihin ja kuvaelementteihin, joissa kyseistä muokattua varjostinta käytetään.

Aikaisemmasta kokemusta muiden noodipohjaisten työkalujen, kuten Sub- stance Designerin ja Blenderin materiaalieditorin, kanssa työskentelystä koin olevan ainakin jonkin verran hyötyä, mutta ei välttämätöntä. Tuntuu kuitenkin, että opin Shader Graphin kautta asioita myös yllä mainitsemistani työkaluista.

Opinnäytetyössä tarkastellut konseptit, kuten varjostin, proseduraaliset kohinat, vektorit ovat käytössä myös muissa ohjelmistoissa.

Projektini pohjalta voin todeta että, Shader Graph on melko helposti lähestyt- tävä työkalu, joka ei tosiaan vaadi käyttäjältään ohjelmointitaitoja. En osaa sa- noa, olisiko kyseisistä taidoista millaista hyötyä, sillä minulla ei ole kokemusta vielä varjostimien ohjelmoinnista. Shader Graph oli minulle muutamaa testiä lu- kuun ottamatta vieras, ja opin työn aikana paljon asioita, joita voin hyödyntää tu- levaisuudessa. Shader Graph on mainio työkalu, jos pelin ympäristöön haluaa lisätä animaatiota, mutta ei välttämättä ole kiinnostusta lähteä selvittämään var- jostimien ohjelmointia.

Koska Unity on jatkuvasti kehityksessä, ja Shader Graph on suhteellisen uusi työkalu, niin suurella todennäköisyydellä siihen tulee jatkossa päivityksiä. Siinä on jo nyt kymmeniä erilaisia noodeja ja tämä opinnäytetyö oli vain pintaraapaisu työkalusta ja siitä, mitä sillä voidaan tehdä.

Lähteet

Adobe 2020. Blending modes in Adobe Photoshop.

<https://helpx.adobe.com/photoshop/using/blending-modes.html> (luettu 4.4.2021)

Brackeys 2019. GRASS SWAY in Unity - SHADER GRAPH. <https://www.you- tube.com/watch?v=L_Bzcw9tqTc> (katsottu 24.2.2021)

Denham, Thomas n.d. What are 3D & Game Shaders? <https://conceptartem- pire.com/shaders/> (luettu 20.3.2021)

Doran, John P. & Zucconi, Alan 2018. Unity 2018 Shaders and Effects Cook- book Third Edition. E-kirja. UK: Packt Publishing. (luettu 23.2.2021)

GDQuest 2017. Introduction to Vectors for Game Creators. <https://www.you- tube.com/watch?v=ZoMmiQes_lE> (katsottu 28.3.2021)

GiantBomb n.d. Sprite (Concept). <https://www.giantbomb.com/sprite/3015- 491/> (luettu 16.3.2021)

Halladay, Kyle 2019. Practical Shader Development Vertex and Fragment Sha- ders for Game Developers. E-kirja. California: Apress. (luettu 17.2.2021) Ilmatieteenlaitos n.d. Tuuli ja myrskyt – Ilmatieteenlaitos. <https://www.ilmatie- teenlaitos.fi/kysymyksia-tuuli-ja-myrskyt> (luettu 17.3.2021)

McCombs, Shea n.d. Intro to Procedural Textures. <http://www.upvec- tor.com/?section=Tutorials&subsection=Intro%20to%20Procedural%20Tex- tures> (luettu 10.11.2020)

Perlin, Ken 1999 Making Noise. <https://web.ar-

chive.org/web/20071008162042/http://www.noisemachine.com/talk1/in- dex.html> (luettu 10.11.2020).

PCMag Encyclopedia n.d. Procedural texture. <https://www.pcmag.com/ency- clopedia/term/procedural-texture> (luettu 10.11.2020)

Polycount wiki n.d a. Material. <http://wiki.polycount.com/wiki/Material> (luettu 28.2.2021)

Polycount wiki n.d b. Texture types. <http://wiki.polycount.com/wiki/Texture_ty- pes> (luettu 28.2.2021)

Shehata, Omar 2016. Unraveling the Magic of Graphic Shaders. <https://omar- shehata.medium.com/unraveling-the-magic-of-graphic-shaders-

9d3885ba31a5> (luettu 27.3.2021)

Unity Documentation n.d a. Scenes. <https://docs.unity3d.com/2019.4/Docu- mentation/Manual/CreatingScenes.html> (luettu 16.3.2021)

Unity Documentation n.d b. Sprite Renderer.

<https://docs.unity3d.com/2019.4/Documentation/Manual/class-SpriteRende- rer.html> (luettu 23.2.2021)

Unity Documentation n.d c. Unity – Manual: Meshes, Materials, Shaders and Textures. <https://docs.unity3d.com/2019.4/Documentation/Manual/Sha- ders.html> (luettu 28.2.2021)

Unity Documentation n.d d. My first Shader Graph.

<https://docs.unity3d.com/Packages/com.unity.shadergraph@7.3/manual/First- Shader-Graph.html> (luettu 16.3.2021)

Unity Documentation n.d e. Data Types. <https://docs.unity3d.com/Packa- ges/com.unity.shadergraph@7.3/manual/Data-Types.html> (luettu 10.3.2021) Unity Documentation n.d f. Master Node. <https://docs.unity3d.com/Packa- ges/com.unity.shadergraph@7.3/manual/Master-Node.html> (luettu 8.2.2021) Unity Documentation n.d g. Blackboard. <https://docs.unity3d.com/Packa- ges/com.unity.shadergraph@7.3/manual/Blackboard.html> (luettu 23.3.2021) Unity Documentation n.d h. Manual: Prefabs.

<https://docs.unity3d.com/2019.4/Documentation/Manual/Prefabs.html> (luettu 27.3.2021)

Unity Documentation n.d i. Sphere Mask Node.

<https://docs.unity3d.com/Packages/com.unity.shadergraph@7.3/ma- nual/Sphere-Mask-Node.html> (luettu 12.3.2021)

Unity 2020a. Creating 2D Materials in Unity with URP! | 2D Shader Basics.

<https://www.youtube.com/watch?v=9ZY9tnxlOEs> (katsottu 5.2.2021) Unity 2020b. Introduction to ShaderGraph. <https://learn.unity.com/tutorial/in- troduction-to-shader-graph#5f500900edbc2a0022843fb2> (luettu 8.2.2021) Unity 2020c. Shader Graph: Texture 2D – Unity Learn.

<https://learn.unity.com/tutorial/shadergraph-texture-2d> (luettu 16.3.2021) Unity 2020d. Shader Graph: Color – 2019.3 – Unity Learn.

<https://learn.unity.com/tutorial/shadergraph-color-2019-3> (luettu 16.3.2021) Unity 2019e. Shader Graph: Tiling and Offset. <https://learn.unity.com/tuto- rial/shader-graph-tiling-and-offset-2019-3> (luettu 24.2.2021)

Unity 2019f. Shader Graph: Vertex Position – 2019.3.

<https://learn.unity.com/tutorial/shader-graph-vertex-position-2019- 3#5e304b5dedbc2a36e27c5187> (luettu 16.3.2021)

Unity 2020g. Shader Graph: Time Node – Unity Learn.

<https://learn.unity.com/tutorial/shadergraph-time-node> (luettu 16.03.2021)

Wikipedia 2021a. Unity (game engine). <https://en.wikipedia.org/w/in- dex.php?title=Unity_(game_engine)&oldid=1016121219> (luettu 2.2.2021) Wikipedia 2021b. Polygon mesh. <https://en.wikipedia.org/w/in-

dex.php?title=Polygon_mesh&oldid=1001649664> (luettu 17.2.2021) Wikipedia 2020c. Light beam. <https://en.wikipedia.org/w/in-

dex.php?title=Light_beam&oldid=993415708> (luettu 20.3.2021) Kuvaluettelo

Kuvio 1. Kuvakaappaus Unity-ohjelmistosta

Kuvio 2. Unity Documentation, n.d. Sprite Renderer.

<https://docs.unity3d.com/2019.4/Documentation/uploads/Main/2D_SpriteRen- derer_1.png> (luettu 23.2.2021)

Kuvio 3. Kuvakaappaus ohjelmistosta, oma materiaali Kuvio 4. Oma materiaali

Kuvio 5. Kuvakaappaus Unruly Heroes -pelistä (Magic Design Studios). Kaap- paus otettu suoraan pelistä

Kuvio 6. Kuvakaappaus Shader Graph -editorista, oma materiaali Kuvio 7. Kuvakaappaus Shader Graph -editorista

Kuvio 8. Kuvakaappaus Shader Graph -editorista, oma materiaali Kuvio 9. Kuvakaappaus Shader Graph -editorista

Kuvio 10. McCombs, Shea n.d. Intro to Procedural Textures.

<http://www.upvector.com/pages/Tutorials/Intro%20to%20Procedural%20Tex- tures/image05/graph03.png> (luettu 10.11.2020)

Kuvio 11. Kuva tallennettu Substance Designer ohjelmistosta Kuvio 12. Kuvakaappaus Shader Graph editorista

Kuvio 13. Unity, 2019. Shader Graph: Tiling and Offset. <https://connect-prd- cdn.unity.com/20200902/learn/images/5953a6e1-84c2-40d5-ae3d-

8b13a0ac932d_image6.png.2000x0x1.webp> (luettu 24.2.2021) Kuvio 14. Kuvakaapaus omasta projektista

Kuvio 15. Kuvakaappaukset peleistä Unruly Heroes (Magic Design Studios), Rayman Legends (Ubisoft Entertainment), Ori and the Will of the Wisps (Moon Studios, Microsoft), Monster Boy and the Cursed Kingdom (Game Atelier, FDG Entertainment). Kaappaukset otettu suoraan peleistä.

Kuvio 16. Oma materiaali

Kuvio 17. Kuvakaapaus omasta projektista Kuvio 18. Kuvakaapaus omasta projektista Kuvio 19. Kuvakaapaus omasta projektista

Kuvio 20. Kuvakaappaus Ori and the Will of the Wisps -pelistä (Moon Studios, Microsoft). Kaappaus otettu suoraan pelistä.

Kuvio 21. Brackeys, 2019.GRASS SWAY in Unity - SHADER GRAPH.

<https://www.youtube.com/watch?v=L_Bzcw9tqTc> (katsottu 24.2.2021) Kuvio 22. Kuvakaapaus omasta projektista

Kuvio 23. Kuvakaapaus omasta projektista Kuvio 24. Kuvakaapaus omasta projektista Kuvio 25. Oma materiaali

Kuvio 26. Oma materiaali Kuvio 27. Oma materiaali Kuvio 28. Oma materiaali

Kuvio 29. Kuvakaapaus omasta projektista Kuvio 30. Oma materiaali

Kuvio 31. Kuvakaapaus omasta projektista Kuvio 32. Kuvakaapaus omasta projektista

Kuvio 33. Kuvakaappaukset peleistä Unruly Heroes (Magic Design Studios), Rayman Legends (Ubisoft Entertainment), Ori and the Blind Forest (Moon Stu- dios, Microsoft), Monster Boy and the Cursed Kingdom (Game Atelier, FDG En- tertainment). Kaappaukset otettu suoraan peleistä.

Kuvio 34. Kuvakaapaus omasta projektista Kuvio 35. Kuvakaapaus omasta projektista Kuvio 36. Kuvakaapaus omasta projektista Kuvio 37. Kuvakaapaus omasta projektista Kuvio 38. Kuvakaapaus omasta projektista

Liitteet

Linkki varjostinanimaatioiden esittelyvideoon https://vimeo.com/537238864