Wednesday, February 13, 2019

2D Platformer

Aloitus


Tarkoituksena on siis tehdä 2D-peli, jossa pelaaja ohjaa hirviötä, joka taistelee ritareita vastaan. Pelaaja voi liikkua vasemmalle sekä oikealle, pelaaja voi tehdä vahinkoa ritareihin ja toisinpäin.

Pelaajalla ja ritareilla on myös elämäpisteet, peli sisältää 2 spawnia, game over, start screen ja main -scenet.

Aloita uusi Unity projekti 2D-asetuksilla, pelissä tarvittavat kuvat löytyvät tästä.

Spritesheets


Pura lataamasi kuvapaketti (2DGameArt.zip) ja kopioi kuvat Unity -projektisi Assets -kansioon.








Valitse kaikki kuvat (shift+click tai ctrl+click). Oikealle puolen editoria ilmestyy Import settings. Vaihda Filter Mode Point -asetukselle ja paina Apply. Tämä varmistaa sen, että skaalatessa kuvat säilyttävät laatunsa (bilinearilla ilmestyy artifakteja).























Spritesheetit vaativat enemmän käsittelyä. Valitse nyt kuva jossa on kolme hirviötä vierekkäin. Import asetuksista muuta Sprite Mode Multiple -asetukselle ja paina Apply. Spritesheet pitää vielä pilkkoa osiin. Klikkaa Sprite Editor import asetuksista. Jotkin spritesheetit unity osaa leikata automaattisesti. Paina vasemmalta Slice ja kokeilee miten unity jakaa kuvan automaattisesti. Jos ei onnistu, vaihda tyypiksi Grid ja laita yhden kuvan leveys ja korkeus Pixel Size kenttään. Offset ja Padding arvoja tarvitaan jos spritesheet on tehty esimerkiksi ruudukkoon. Kun olet valmis paina oikealta ylhäältä Apply.
















Vedä tekemäsi spritesheet Scene ikkunaan. Unity teki assets ikkunaan Animation ja Animation Controller komponentit.

Animaatiot


Klikkaa Animation komponenttia. Oikealle ilmestyy sen asetukset. Varmista, että Loop Time on päällä. Se kertoo Unitylle, että kun animaatio loppuu sen voi aloittaa alusta.















Animation Controller:lla voidaan määrittää eri animaatioiden väliset transitiot. Kaksois klikkaamalla sitä näkyviin tulee controllerin sisältämät animaatiot. Niiden nopeuksia voidaan säätää pelin aikana skripteillä, mutta tähän peliin et tarvitse useampia animaatioita tai nopeuksien säätöä. Motion asetuksella valitset Animation State:n animaation. Speed:llä sen näyttö nopeuden. Multiplier toimii kertoimena nopeudelle, mutta se tarvitsee parametrin, joka asetetaan skriptissä. Muita asetuksia harvoin tarvitsee.










Controllerilla siis määritellään mistä animaatioista voi siirtyä mihinki animaatioon ja miten. Älä tee muutoksia controlleriin nyt.




Prefabs


Prefab on Unityn sielu. Ne ovat valmiiksi tehtyjä gameobjekteja, joita voi halutessaan "spawnata" peliin pelin aikana. Kun teet muutoksia gameobjektille tai prefabille mieti kumpaan se kannattaa tehdä. Jos muutokset halutaan kaikille instansseille se kannattaa tehdä prefabille. Vedä nyt knight niminen kuva assetsista scene näkymään.



































Prefabin voi tehdä mistä tahansa gameobjektista vetämällä se Scene näkymästä takaisin assets ikkunaan. Prefabit näkyvät hierarkia näkymässä sinisellä. Jos gameobjektista puuttuu prefabissa olevia komponentteja se muuttuu punaiseksi. Vedä knight gameobjekti assets ikkunaan.





Jos muokkaat gameobjektia scene näkymässä voi sen muutokset tallentaa myös prefabille valitsemalla se ja painamalla oikealta ylhäältä Apply. Revert nappi kumoaa muutokset ja palauttaa prefabin asetukset. Transform komponenttiin prefabin muutokset eivät vaikuta. Gameobjektin ja prefabin eroavaisuudet näkyvät tummennettuna tekstinä oikealla.



Sorting Layers


Unityssä on erittäin helppokäyttöinen layer järjestelmä. Sitä käytetään taustan, peli layerin ja edustan kuvien järjestämiseen. Rajoituksia layerien määrälle ei tietääkseni ole.
Tee tyhjä GameObject. Hierarchy -näkymässä paina hiiren oikeaa nappia ja valitse "Create empty". Nimeä se "Background":ksi. Vedä scene ikkunaan kuvat ground, sky-background,sky-foreground ja sky-middle-ground. Hierarchy -näkymässä vedä lisäämäsi kuvat Backround gameobjektiin sen "lapsiksi". Ne pitää vielä järjestää.




Valitse jokin tausta gameobjekti ja klikkaa Sorting Layer | Add Sorting Layer...
Oikealle ilmestyy Tags and Layers -näkymä. Valitse Sorting Layers ja paina +. Anna layerille nimeksi Background ja vedä se ylimmäksi hiirellä. Tähän layeriin tulee kaikki taustalle halutut kuvat.













Laita kaikille Background objektin kuville Sorting Layer "Background". Ground  kuva tulee päälimmäiseksi joten laita sille korkein Order in Layer. Järjestä muutkin taustakuvat.





Suurenna kuvia valitsemalla ne ja vedä reunoista leveämmiksi. Tähtitaivaan saat suuremmaksi vetämällä kulmasta Shift pohjassa, tämä pitää huolen, että kuvasuhde säilyy samana.

Fysiikat


Unityllä on oma tapansa hoitaa fysiikkaan liittyvät jutut kuten Painovoima, törmäykset, kitka ja materiaalit. Gameobjektilla pitää olla Rigidbody2D komponentti, jotta unity ottaisi sen huomioon painovoimassa ja Collider komponentteja törmäyksissä sekä PhysicMaterial komponenteja kitkassa ja kimmoisuudessa. Tee monster Gameobjektista Prefab ja  lisää sille Rigidbody2D komponentti valitsemalla Add Component | Physics 2D | Rigidbody2D.





Play nappia painamalla näet, että pelaaja vain putoaa kadoten ruudusta. Valitse nyt Ground gameobjekti ja lisää sille Box Collider 2D  komponentti (Add component | Physics 2D | Box Collider 2D). Tämä kertoo fysiikka moottorille objektin rajat, joilla laskea törmäyksiä.






Näitä rajoja voi säätää Edit Collider nappia painamalla ja vetämällä siihen ilmestyvistä ankkureista. Material kertoo fysiikka moottorille colliderin kitkan ja kimmoisuuden. Sitä varten pitää tehdä erillinen Physics2D Material asset. Is trigger kertoo moottorille estääkö tämä collider läpi menemisen vai toimiiko se kytkimenä jollekkin eventille.
Toistaiseksi säädetään vain rajoja.





Laske colliderin ylärajaa alemmas.




Pelaajalta puuttuu vielä collider komponentit, joten se tippuu läpi maasta. Lisää pelaajalle Circle Collider 2D ja Box Collider 2D komponentit ja sijoita ne seuraavasti:













Tallenna muutokset myös Prefab:lle
Tämä on yleinen tapa kiertää ongelmat esimerkiksi portaiden nousussa tai kaltevissa tasoissa liikkumisessa. Lisätään vielä hieman kimmoisuutta Circle Collider 2D komponentille.
Tee uusi Physics2D Material klikkaamalla asset ikkunasta oikealla hiiren napilla ja valitse Create | Physics2D Material ja nimeä se.






Valitse luotu materiaali ja oikealle ilmestyy sen Kitka ja Kimmoisuus. Valitse pelaaja Prefab ja aseta sen Circle Collider 2D komponentille Material kohtaan luotu materiaali. Nosta pelaaja Scene näkymässä korkealle ja kokeile eri kimmoisuus arvoja.













Pelaaja voi vielä kaatua. Tämä korjataan Rigidbody2D komponentista valitsemalla Constraints | Freeze Rotation Z.



















Tee samat toimenpiteet myös knight Prefab:lle.







Tallenna Scene valitsemalla File | Save Scene as... Laita nimeksi MainScene

Liikkuminen


Unityssä liikutetaan gameobjekteja skripteillä. Fysiikkoihin sidottuja gameobjekteja liikutetaan muuttamalla RigidBody2D komponentin Velocity arvoja(x,y,z), AddForce(Vector2) tai AddTorque(float) funktioilla. Gameobjekteja, joilla ei ole RigidBody2D komponenttia liikutetaan muuttamalla suoraan sen Transform komponentin x, y ja z arvoja.

Unityssä voi käyttää Javascriptiä tai C#:a skriptaukseen. Määrittelemällä muuttujan public etuliitteellä, tulee se näkyviin editoriin ja sille voi määritellä arvoja koskematta koodiin sekä siihen voi viitata muista scripteistä ja gameobjekteista. Muutamia asioita pitää ottaa huomioon skriptejä suunnitellessa. Pelaajan liikkumisessa otetaan huomioon:

  • Pelaaja voi liikkua pelissä vasemmalle tai oikealle
  • Pelaajalla on RigidBody2D komponentti eli se on fysiikkoihin sidottu
  • Pelaajan kiihtyvyyttä ja maksiminopeutta voi muuttaa editorista

Luo uusi C# Script assets ikkunasta Right click | Create | C# Script , anna sille nimeksi PlayerMovement.
Määrittele kiihtyvyys ja maksiminopeus public:ksi. Maksiminopeuteen rajoittamisessa pitää tietää nykyinen nopeus x. Start funktiossa haetaan viittaus pelaajan RigidBody2D komponenttiin.











Update funktiossa pitää
  • tarkistaa napinpainallukset
  • tarkistaa nykyinen nopeus verrattuna maximinopeuteen 
  • päivittää uusi nopeus 











Tallenna skripti ja lisää se pelaajalle. Säädä kiihtyvyys ja maksiminopeus haluamaksesi. Voit myös lisätä kitkaa maalle (Physics2D Material).

Viholliset pystyvät liikkumaan vain vasemmalle tai oikealle riippuen spawnista. Tehdään siis molempiin suuntiin scripti ja kummallekkin knightille oma prefab. Nimeä scriptit MoveLeft ja MoveRight. Voit kopioida pelaajan scriptin, mutta poista direction Update funktiosta ja aseta sen arvoksi 1 MoveRight ja -1 MoveLeft -skriptille. Sinulla pitäisi olla nyt 2 knight prefabia. KnightLeft ja KnightRight, toisella MoveLeft ja toisella MoveRight scripti.
Pelaajan ja vihollisen Spritet eivät osaa vielä kääntyä.

Tehdään yleinen kääntö scripti, jonka voi pudottaa mille tahansa gameobjektille, jolla on RigidBody2D komponentti. Nimeä se TurnSprite.
  • Tarkistetaan nopeus x suunnassa
  • Muutetaan transformin localScale arvoa.
Näin saadaan eriytettyä grafiikka , fysiikat ja pelimekaniikka toisistaan, eikä tarvitse sotkea kääntämistä joka paikkaan.
Asetetaan localScale.x arvon suunta vaikuttamatta sen suuruuteen. Ternary operaattori toimii näin: Ehto ? suoritetaan jos ehto == true : suoritetaan jos ehto == false;












Laita tämä skripti kummallekin knight prefab:lle. Voit halutessasi laittaa tämän skriptin myös pelaajalle, mutta se muuttaa hieman pelimekaniikkaa(ei vaadi ylimääräistä koodaamista).

Pelaajalle pitää tehdä oma kääntö skripti inputin mukaan. Tee uusi skripti, nimeä se TurnWithInput. Kopioi TurnSprite koodi tähän ja vaihda if ja else if thisRigidbody.velocity.x:n tilalle Input.GetAxis("Horizontal"). Tallenna se ja laita pelaajalle. Tallenna myös scene ja projekti.

Health ja Attack


Pelaaja aiheuttaa vahinkoa vihollisiin törmäämällä ja toisinpäin. Otetaan huomioon
  • Pelaajalla sekä vihollisilla max health ja current health säädettävissä editorista
  • Törmäyksessä vähennetään törmätyn health arvoa jos etupuolella (damage säätö)
  • Kun health on 0 kuolee
  • Kuolemassa omat efektit
Tee 2 scriptiä, nimeä ne BasicHealth ja BasicAttack. BasicHealth:iin määritellään public int arvot maxHealth, health ja public GameObject deathInstance sekä public Vector2 offset deathinstance:lle.  

Deathinstance pitää sisällään spawnattavan ragdollin tai efektin, kun gameobject tuhoutuu. Jokainen skripti huolehtii omista muuttujien arvoistaan, eikä saisi muuttaa skriptissä suoraan toisen classin arvoa (bad design) health arvon voi laittaa myös private:ksi tai protected:ksi jos haluaa derivoida health class pohjasta erilaisia health classeja. Tee public function TakeDamage, joka hoitaa health arvon käsittelyn.















Tarvitaan vielä "ragdoll" versio pelaajasta ja efekti vihollisen kuolemasta.
Vedä player-corpse kuva scene näkymään ja lisää sille RigidBody2D ja BoxCollider2D komponentit ja lisää sille jokin Physics2D Material omilla arvoilla. Tee siitä prefab. Sen pitäisi näyttää nyt tältä:




















Lisää yllä oleva skripti vihollisille ja pelaajalle prefab:iin ja aseta pelaajan Death Instance:ksi luotu ragdoll.
BasicAttack scripti on hieman monimutkaisempi (löytyy myös tästä zipistä).




StartCoroutine(IEnumerator()); // Käytetään jos pitää tehdä jotain tietyin väliajoin kuten tässä tapauksessa estetään hyökkäyksen spämmiminen
targetTags pitää sisällään tagien nimet joihin voi hyökätä. Tee pelaajalle Player niminen tag ja vihollisille Enemy niminen tag: Laita yllä oleva scripti molemmille prefabeille ja määrittele targetTagit Basic Attack -skriptiin Inspectorissa (vihollisille Player ja Pelaajalle Enemy).























Viholliset eivät voi vahingoittaa toisiaan, joten pitää estää niiden törmääminen toisiinsa. Lisää viholliselle Layer Enemies ja pelaajalle Player. Näitä layereitä käytetään törmäyksien laskemisessa. Voidaan määritellä mitkä layerit voivat törmätä toisiinsa.





































Mene Edit | Project Settings | Physics 2D. Näkyviin pitäisi tulla projektin fysiikkamoottorin asetukset. Laita nämä asetukset:



































Nyt viholliset eivät voi törmätä toisiinsa. Tee nyt kuolin efekti vihollisille vetämällä blood-puddle niminen kuva sceneen ja tee sille scripti FadeSprite. FadeSprite skriptiä voi käyttää minkä tahansa spriten tai muun efektin häivyttämiseen, joten se on helposti uudelleen käytettävä.





Tee blood-puddle objektista nyt prefab ja vedä se vihollisten death instanceksi. Lisää myös uusi Sorting Layer Background ja Default layerin väliin ja aseta se blood-puddlen sorting layer:ksi .Kokeile luotuihin prefabeihin ja objekteihin erilaisia arvoja editorista ja säädä niitä kunnes olet tyytyväinen lopputulokseen. Tallenna Scene ja Project.

Spawnit


  • Pelissä 2 spawnia, vasemmalla yksi ja oikealla yksi
  • Spawneista tulee editorista säädettävällä viiveellä jommasta kummasta aina yksi knight kerrallaan
  • Controller useammalle spawnille, jolle määritellään viive ja spawnit joista spawnataan
  • Spawnille editorista määritettävä enemy prefab tai vaikka useampi (voidaan siis spawnata eri vihollisia samasta spawnista)
Tee tyhjä GameObject  ja nimeä se SpawnController:ksi. Tee sille C# scripti SpawnController. Sille määritellään:
  • Viive, jota voi säätää editorista
  • Lista spawneista, jotka voi määritellä editorista 



Controller on valmis. Sille laitetaan viive ja spawnit editorista, tee 2 uutta GameObject:ia: SpawnLeft ja SpawnRight.
Tee myös Spawn niminen script. Sille määritellään:
  • Muista koodeista kutsuttava generateEnemy funktio
  • Array(melkein sama kuin lista) prefabeista, joita se voi spawnata
  • On/off switch




Vedä Spawn scripti kummallekkin Spawnille sijoita ne oikeille paikoille vasemmalle ja oikealle puolen kenttää. Vedä aikaisemmin tehdyt KnightLeft ja KnightRight prefabit niiden Enemy Pool:iin. Vedä Spawn:it SpawnController skriptin SpawnPoint:iin. Niiden pitäisi näyttää tältä:







Säädä spawnit, health ja attack, sekä liikkumisnopeudet haluamallasi tavalla. Peli muuttuu paljon pienillä säädöillä. Tallenna Project ja Scene.


Kamera


Kameran voi laittaa seuraamaan pelaajaa tiputtamalla se "lapseksi" pelaaja prefabiin, mutta se on huono ratkaisu. Kameraa kannattaa ohjata scripteillä.
  • Tee C# Script, ja nimeä se SmoothCameraFollow
  • Tee pelaaja Prefab:n lapseksi tyhjä gameobject nimeltä cameraAnchor
Skriptiin seuraavat asiat:




Vedä luotu skripti Main Camera gameobjektille ja määrittele targetiksi vasta luotu tyhjä GameObject cameraAnchor. Siirrä cameraAnchor hieman pelaajasta oikealle ja hieman ylemmäs. Sen pitäisi näyttää nyt tältä:




Testaa eri Camera Delay arvoja ja eri ankkurin sijainteja. Tallenna projekti ja Scene.

Health Bar


Graafiseen käyttöliittymään liittyvät jutut kannattaa yleensä tehdä omaan gameobjektiin.
  • Tee uusi GameObject nimeltä GUI
  • Tee uusi C# Script nimeltä HealthBar
Skriptii tulee (löytyy myös tästä):




Vedä editorissa tämä skripti vasta luodulle GUI GameObject:lle. Määrittele sille background, foreground ja border tekstuurit(Life-back, life-middle ja life-top). Aseta Location x ja y arvoiksi 10. Raahaa vielä pelaajahahmo Hierarchystä GUI-objektin Target-kenttään. Sen pitäisi näyttää tältä:




Voit toki asettaa sen mihin haluat. Tallenna projekti ja scene.

Start Menu ja Game Over


Unityssä hallitaan "leveleitä" sceneillä. Myös valikot ja death screenit hoituvat scene:n vaihdoilla.
Varmista että aikaisempi scene on tallennettu ja luo uusi scene ja nimeä se StartMenu:ksi.
Lisää sceneen kuvat: splash-background, splash-monster, splash-start-text splash-title ja splash-title-mask. Aseta kameran taustaväriksi musta ja koko 2.5. Aseta kuvien sijainnit ja layer järjestykset näin:




Kaiken pitäisi näyttää nyt tältä:




Tee uusi C# Script ja nimeä se BlinkSprite:ksi. Lisää seuraava koodi:




Lisää tämä scripti splash-start-text GameObject:lle. Tulevaisuudessa tätä skriptiä voi uudelleen käyttää lisäämällä se koodissa objektille jota halutaan vilkuttaa ja asettamalla delay arvo. Esimerkiksi:

gameObject.AddComponent ("BlinkSprite");
gameObject.getComponent<BlinkSprite>().delay = 0.1;

Vielä pitää hoitaa scenen vaihdot. Tallenna scene ensin. Scenet pitää lisätä projektin buildiin ennen kuin niitä voidaan vaihtaa suoritusajalla. Mene File | Build Settings.... Nämä ovat projektin "kasaamis" asetukset. Paina Add current lisätäksesi uuden scenen projektiin. Tee myös GameOver niminen scene ja lisää kaikki kolme sceneä projektiin. Build settings pitäisi näyttää nyt tältä:














Tee mihin tahansa sceneen uusi GameObject ja nimeä se ClickToContinue. Tee sille skripti samalla nimellä.
Skriptiin tulee:



































Tee ClickToContinue gameobjektista Prefab. Nyt sinulla on uudelleen käytettävä scenen vaihto kikkare jota käytetään koodista näin:

GameObject clickToContinue = Instantiate(ClickToContinue, New Vector3(0,0,0),Quaternion.identity) as GameObject;

ClickToContinue.GetComponent<ClickToContinue>().scene = "haluttuscene"; 

Lisää tämä prefab StartMenu ja GameOver sceneihin gameobjektina ja määritä sen scene arvoksi StartMenu:ssa  MainScene:ksi ja GameOver:ssa StartMenu:ksi.
Lisää pelkkä ClickToContinue scripti pelaajan kuolin prefabiin ja määrittele sceneksi GameOver:






Lisää GameOver sceneen kuvat game-over ja splash-start-text. Aseta game-over gameobjektin sijainniksi x: 0 y: 0 ja lisää splash-start-text objektille BlinkSprite skripti ja aseta se päällimmäiseksi layerissä. Aseta kameraan taustaväriksi musta ja koko 2.5. Tallenna scene ja projekti. Peli on valamis. Tee siitä  build File | Build Settings | Build ja palauta se .exe -muodossa.

Hyppääminen


Hyppääminen voidaan liikkumisen tavoin toteuttaa muuttamalla rigidbody:n velocity arvoa. Addforce ei tässä tapauksessa ole hyvä ratkaisu ja aiheuttaa epäsäännönmukaista toimintaa.
  • Tarkistetaan koskettaako pelaaja maata
  • Tarkistetaan onko hyppy nappia painettu
Tee uusi C# script ja nimeä se "Jump":ksi.





Lisää vielä isGrounded funktio:



Jos hyppääminen ei onnistu se johtuu siitä, että todennäköisesti raycast lähtee juuri colliderin reunalta ja osuu ensimmäisenä pelaajan collideriin. Tämä korjataan lisäämällä raycastiin thisCollider.radius kohdan perään -0.01f. Tämä varmistaa, että raycast lähtee juuri pelaajan alapuolelta.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)