2D-Platformer

28.3.2019
Tässä harjoituksessa tehdään perinteinen 2D tasohyppelypeli.

Esimerkki valmiista työstä: http://dattari.fi/opettaja/Unity/2Dplatformer/

Uudet asiat:

• Standard Asseteista räjähdys ja pelaajaa seuraavan kameran skripti
• Sprite Editorin käyttö
• Animaatioiden muokkaaminen
• Checkpointin tekeminen

1. Sprite Editor

Aloita uusi 2D-projekti ja tee sille oma kansio. Hae Asset-storesta peliisi Unity Technologiesin tekemät Standard Assetit. Niille muodostuu Assets-kansioon oma alikansio Standard Assets.

Tuo Sceneen Robot Boy Standard Assetien kansiosta 2D | Prefabs. Tuo myös muutama erilainen platformi pelin rakentamista varten. Tee platformeista omat prefabit ja nimeä ne sopivasti.

Hae Standard Assetien 2D skripteistä 2D Camera Follow, ja aseta se pelin kameran komponentiksi. Raahaa Player Robot Boy siihen target-kenttään. Voit testata peliä: Kameran pitäisi nyt seurata pehmeästi kun juokset ja hypit Robotilla. Voit säätää kameran Inspectorista seuraamisen muuttujia, jos esimerkiksi kamera tuntuu reagoivan pelaajan liikkeisiin liian hitaasti.

Rakenna nyt sopivan kokoinen kenttä prefab-laatoista, jotta voit juoksennella ympäriinsä ja testata animaatioita.

Tallenna seuraavat kuvat omaan projektiisi, tee niille vaikkapa Graphs-alikansio Assets-kansioon:

(Kiitos grafiikasta Ibrahim Mouloud)

Tarkoitus on muuttaa RobotBoy:n animaatiot itse tehtyihin animaatioihin.

Kun klikkaat Project-näkymässä Professor Run Thinner Lines.png -spriten vieressä olevaa pientä kolmiota, näet että se koostuu yksittäisestä kuvasta, jossa animaation framet ovat vielä yhtenä "könttinä". Meidän täytyy erottaa kuvat siten että Unity ymmärtää ne eri frameiksi Sprite Editorin avulla.

Valitse kuva Projectissa ja mene Inspectoriin. Laita Sprite Modeksi Multiple. Tämän jälkeen käynnistä Sprite Editor ja hyväksy muutokset valitsemalla Apply.

Valitse Sprite Editorissa Slice-valikko. Älä muuta valintoja, vaan paina yksinkertaisesti "Slice".

Voit nyt tarkistaa että jokainen frame on eritelty. Tämä tapahtuu automaattisella slicella, mikäli kuvat on eritelty hyvin Sprite Sheetissä. Voit tarkistaa että kaikki kuvat on eritelty klikkaamalla niitä hiirellä ja tarkistamalla kuvien siniset valintalaatikot. Jokaisella framella pitäisi olla oma laatikko. Jos jostain kuvasta puuttuisi laatikko, voit yksinkertaisesti painaa hiiren napin pohjan ja luoda uuden laatikon.

Seuraavaksi paina "Apply" -nappia Sprite Editorin oikeassa yläkulmassa ja sulje Sprite Editor.

Nyt voit nähdä, että Spritesheet koostuu yhdeksästä eri framesta.

Nyt tee sama toiselle aiemmin Importoidulle kuvalle, jump and fall test.png.

2. Animaatio

Seuraavaksi alamme muuttamaan Robot Boyn "Idel", "Run", "Walk" ja "Jump" -animaatiot. Robot Boyn animaattori saattaa näyttää aluksi pelottavalta, mutta tulet huomaamaan että 2D-animaatioiden muokkaaminen ei ole kamalan monimutkaista.

Tarvitset animaatioiden määrittelyyn kaksi uutta paneelia: Animator ja Animation (Window | Animation). Ne kannattaa asetella siten, että näet molemmat yhtäaikaa. Alla oma asetteluni.

Valitse Robot Boy Hierarchystä. Nyt sinun pitäisi nähdä Animatorissa kaikkai siirtymät eri animaatioista toiseen. Animationista varmista että valittuna on Idle-animaatio (RobotBoyIdle) kuten itselläni alla.

Valitse kaikki kuvat animaation sisällä ja poista ne hiiren oikealla näppäimellä (Delete Key). Tämän jälkeen valitse ensimmäinen kuva hahmostamme Projectissa (seisova ukkeli) ja vedä se animaation ikkunaan.

Olemme nyt korvanneet Robot Boyn idle-animaation. Voit painaa Unityssä Play-nappia tarkistaaksesi, että kaikki näyttää hyvältä. Tulet huomaamaan, ett joitain ongelmia ilmenee, hahmo menee lattian läpi. Tämän vuoksi sinun pitää muuttaa Robot Boyn collider -komponentteja (Edit Collider) oikeisiin mittasuhteisiin meidän hahmollemme.

*näytetään myöhemmin*

Seuraavaksi valitse RobotBoyn Run -animaatio pienestä valikosta joka on merkattu kuvaan. Sama kuin viimeksi, valitse kaikki kuvat animaatiosta ja poista ne.

Seuraavaksi valitse hahmomme kaikki juoksu-kuvat ja vedä ne Animation -ikkunaan.

Paina "Play" -nappia Animation -ikkunassa. Huomaat, että animaatio kulkee aivan liian nopeaa. Animaation nopeutta voi hidastaa monella tavalla, mutta suositelluin tapa on muuttaa Animation-ikkunassa Samples -vaihtoehtoa. Nykyinen Run -animaation Samples -arvo on 24, eli 24 framea sekunnissa. Muuta tätä kunnes juoksu näyttää sopivalta.

Seuraavaksi muutamme Walk-animaation, eli poista sen animaatiosta kaikki kuvat. Koska spritesheetissämme ei ole kävely-animaatiota erikseen, joudumme tekemään luovia ratkaisuja.

Raahaa samat kahdeksan juoksuanimaatiota walk-animaatioon kuin raahasit juoksu-animaatioonkin. Nyt aseta vain Samples-taso pienemmäksi kuin juoksussa. Näin hahmo lähtee hitaammin liikkeelle ja hidastaa jalkojensa liikettä ennen pysähtymistä. Etsimällä löydät sopivat arvot, tai niin hyvät kuin tällä spritesheetillä pystyy.

Hyppy-animaatio on vähän monimutkaisempi kokonaisuus.

Animator-ikkunassa näkyvät kaikki animaatio-tilat ja niiden väliset siirtymät. Valitsemalla tilan, näet Inspectorissa tilan asetukset ja muuttujat, samoin klikkaamalla tilojen välisiä siirtymiä. Nämä tulevat skripteistä ja niillä kontrolloidaan peliobjektin animaatioita. Esimerkiksi Jumping -> Idle -siirtymän ehto on, että Ground -muuttuja saa arvon True. Nämä asetukset on rakennettu pelihahmon skriptiin PlatformCharacter2D.

Kaksoisklikkaa Jumping-tilaa. Tämä avaa näkymän, jolla määrittää hahmon animaation vSpeed (vertical speed, ylös/alas -akselin suuntainen nopeus) -muuttujan arvon mukaan. Voit testata millä arvoilla mikäkin animaatio tulee esille.

Meillä on käytössä vain yksi kuva hypylle ja yksi putoamiselle. Valitse nämä framet yksitellen, poista robotin kuva ja lisää positiivisille arvoille ensimmäinen Jump and Fall Test -Spritesheetin kuvista (hyppy). Negatiivisille arvoille lisää jälkimmäinen kuva (putoaminen).

Nyt animaatio on melkein valmis. Ryömimisen animaatiosta pääset eroon esimerkiksi poistamalla animatorista siihen johtavat yhteydet Delete-näppäimellä:

Editorissa RobotBoy näkyy vielä robottina. Voit vaihtaa sen spriten valitsemalla sen Hierarchystä, ja raahaamalla seisovan professorin framen sen Sprite Renderer -komponentin kohtaan Sprite.

Pelihahmossa on se ongelma, että se näyttää juoksevan laattojen sisällä. Tämä johtuu alkuperäisen RobotBoyn pienemmistä Collidereista. Ne näet kun valitset pelihahmon Hierarchystä ja katsot sitä läheltä:

Muokkaa sekä Box Collideria että Circle Collideria sopivaksi. Siirrä niitä ja kasvata niitä, jotta ne ovat suurin piirtein kuten alla:

Nyt pelihahmo on muuten hyvä, mutta sen Ground Check -lapsiobjekti ei koske ikinä maahan, joten se ei voi hypätä, eivätkä animaatiot toimi. Valitse Hierarchyssä pelihahmon lapsiobjekti Ground Check, aseta sille Inspectorissa jonkinvärinen ikoni, ja siirrä se kenkien tasolle:

Nyt pelihahmon pitäisi juosta ja hyppiä iloisesti ja uskottavan oloisesti:

3. Aarteet ja pommi

Luo vaikkapa Paint-ohjelmalla sopiva aarteen kuva ja tallenna se .png-muodossa tämän projektin Graphs-kansioon. Tee myös pommi samalla tavalla. Tuo yksi kappale molempia Sceneen. Tässä pelissä on tarkoitus kerätä aarteita ja varoa pommeja. Itse tein vain eriväriset laatikot, tee itse hienommat.

Lisää molemmille komponentiksi BoxCollider2D ja ruksita niihin "Trigger" -ominaisuus. Muokkaa pommin collideria hieman itse pommia isommaksi, jotta se räjähtää helpommin.

Tuo Standard Asseteista räjähdysefekti (Standard Assets | Particle Systems | Prefabs | Explosion). Tee siitä prefabi ja poista alkuperäinen Sceneltä.

Tee pommille C#-skripti Bomb, ja lisää siihen seuraava koodi: https://pastebin.com/j7pfuU4J

OnTriggerEnter2D() käynnistyy kun joku törmää peliobjektiin. Se poistaa ensin törmäävän peliobjektin (pelaaja), sitten synnyttää räjähdyksen, sen jälkeen tuhoaa itsensä.

Tallenna skripti, ja raahaa pommin explosionPrefab -kenttään aiemmin prefabiksi luotu räjähdysefekti.

Nyt pommiin törmättäessä pelihahmo sekä aarre katoavat suuressa räjähdyksessä:

Nyt sinun pitäisi osata tehdä aarteelle skripti (pommi-skriptin pohjalta), joka yksinkertaisesti poistaa aarteen. Lisää aarteelle Treasure -tagi Inspectorin yläreunassa. Lisää myös pelaajalle Player-tagi.

Lisäile nyt kenttään muutama pommi sekä aarre.

Pelihahmo on nyt sen verran iso, että kamera näyttää ärsyttävän pienen osan pelistä. Muuta sen vuoksi Main Cameran Camera-komponentin Size-ominaisuutta hieman isommaksi.

Kun kentässä on mielestäsi sopivasti pelattavaa, tallenna se, ja luo uusi Scene.

4. Tynnyri-kenttä

Luo suurinpiirtein seuraavan näköinen kenttä:

Tässä on ideana luoda haasteeksi molemmilta puolilta vyöryvät tynnyrit, jotka vaikeuttavat molemmissa päissä olevien aarteiden hakemista.

Piirrä sen jälkeen pyöreä tynnyrimäinen 2D-sprite (png), ja tuo se projektin Graphs-kansioon. Tee siitä hieman pelihahmoa pienempi. Tee siitä prefabi tuomalla se scenelle ja raahaamalla se Prefabs-kansioon. Anna sille nimeksi vaikkapa Barrel. Tee siihen CircleCollider2D sekä RigidBody2D -komponentit. Rigidbodyssä säädä sille GravityFactoricsi kolme (kuten pelihahmolla) ja massaksi ainakin 30, jotta se tönisi pelaajaa kunnolla. Luo siihen vielä komponentiksi PhysicsMaterial2D ja anna sille bounciness-arvo (kimmoisuus) 0.5, jolloin se pomppii jonkin verran.

Luo uusi peliobjekti nimeltä SpawnController ja tee siihen skripti nimeltä SpawnController. Lisää SpawnController-skriptiin seuraava koodi: https://pastebin.com/VHLr7pev

Tutustu koodiin, se on selitetty kommenteissa.

Luo kaksi uutta tyhjää peliobjektia: SpawnLeft ja SpawnRight. Tee myös uusi skripti Spawn, ja lisää se noille komponentiksi. Lisää skriptiin seuraava koodi: https://pastebin.com/tiKMtgm4

Raahaa nyt SpawnLeft vasemmalle ylös siten, että siitä ilmestyvät tynnyrit lähtevät valumaan oikealle. Vie SpawnRight toiselle puolelle. Säädä molempien Inspectorissa EnemyPool arvoon 1, paina Enter, ja raahaa ilmestyvään peliobjektikenttään aiemmin luomasi Barrel -prefabi.

Valitse SpawnController, anna sen SpawnPoints | Size -arvoksi 2, ja raahaa SpawnLeft ja SpawnRight näihin kenttiin.

Nyt SpawnController luo kahden sekunnin välein tynnyrin jompaan kumpaan spawniin. Huomaa, että tämä on erittäin monikäyttöinen spawn-menetelmä. Voit luoda tällä useita eri spawneja, jotka spawnaavat eri hirviöitä tai muuta.

Tuunaa tynnyrikentästä sopivan vaikea. Nyt sinulla pitäisi olla kaksi pelattavaa kenttää.

5. Kentän vaihtuminen ja putoaminen

Luo uusi tyhjä peliobjekti, ja anna sille nimeksi Level. Tee myös Level -niminen skripti ja laita siihen tämä koodi: https://pastebin.com/TcAeB5xR

Muuta Bomb-skriptin Destroy(collision.gameObject) -rivi seuraavaan muotoon:

GameObject.Find("Level").GetComponent<Level>().Death();

Nyt räjähdys kutsuu Level-skriptin Death-funktiota.

Tee Level-objektista prefab ja aseta se jokaiseen kenttään. Säädä jokaisessa kentässä sopiva LevelBottomY, johon putoamalla pelihahmo lähtee alkupisteestä.

Tee vielä kolmas kenttä, ja aseta siihenkin Level-objekti ja LevelBottomY. Tee tästä tasosta "lineaarinen", jolloin pelaajalla on selkeä reitti mihin edetä. Aseta johonkin kohtaan checkpoint, jonka jälkeen putoaminen palauttaakin pelaajan siihen eikä alkuperäiseen aloituspisteeseen. Tässä sinun pitäisi hyödyntää tyhjää peliobjektia, trigger-collideria sekä skriptiä, joka kutsuu Level-skriptin Checkpoint -funktiota. Kokeile osaatko.