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 elementteimui-hin.
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ömahdollisuukerilai-sia, 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ä.