
Shockwave-aanval van de eindbaas.

Een diagram van de shockwave die over de planeet heen buigt.

De diameter van de shockwave schijf. In het midden
van de grafiek is de aftstand tot de kern van de planeet 0.
van de grafiek is de aftstand tot de kern van de planeet 0.

De method die de diameter van de schijf berekent in de Shockwave class.

Shader graph van de shockwave shader.

De MoveTowarsdCenter method die de schijf naar (en voorbij)
het midden van de planeet beweegt.
het midden van de planeet beweegt.

Code die de shockwave activeert.

Spawnpatronen die de shockwave spawner gebruikt.

De SnapToPlanet code die verantwoordelijk is voor de juiste oriëntatie.
Shockwave-aanval van de eindbaas in World Eater
30-12-2024 - Lennon Stolk
Deze development blog gaat over het proces van het ontwerpen en implementeren van een unieke shockwave-aanval die zich om een planeet heen buigt.
De shockwave wordt geactiveerd wanneer de baas met zijn hoofd op de planeet slaat. Het is aan de speler om deze aanval te ontwijken, wat mogelijk is door op het juiste moment over de shockwave heen te springen.
Zonder een aanval die over de grond beweegt, zoals de shockwave, zou de speler weinig reden hebben om de jetpack te gebruiken om de lucht in te gaan. Deze aanval voegt daarom een extra laag toe aan de gameplay, waarbij de speler niet alleen horizontaal, maar ook verticaal moet bewegen. Dit introduceert een derde dimensie in de besturing en maakt de ervaring dynamischer.
Daarnaast is het essentieel dat de shockwave visueel duidelijk en aantrekkelijk is, terwijl het tegelijkertijd niet te overweldigend of frustrerend aanvoelt. De visuele impact en herkenbaarheid worden bereikt door het gebruik van een shader en particles, die de aanval zowel opvallend als esthetisch maken.
Ik beschrijf deze onderdelen in de volgende hoofdstukken:
Elke shockwave is een afzonderlijke GameObject. Dit betekent dat je meerdere shockwaves op de planeet kan hebben die onafhankelijk van elkaar bewegen,
Hiernaast zie je de grafiek van hoe dat eruit zou zien. Zoals je misschien al zou verwachten is de grafiek in de vorm van een halfe cirkel.
Maar als je alleen dit als diameter gebruikt loop je al snel tegen een probleem aan. Je kan de schijf niet zien omdat hij precies even groot is als de planeet. Om deze reden wil je een klein beetje toevoegen aan de diameter. Ook dit moet afhankelijk zijn van de afstand tot de kern, omdat je anders aan het begin en eind een groter stuk krijgt dat uit de planeet steekt.
Ten slotte wordt er ook nog een golvend effect toegevoegd aan de diameter door middel van een sinusfunctie. Deze golf is af te stellen via de inspector, net zoals de dikte en snelheid van de shockwave.
De screenshake werkt via een systeem die ik ook gemaakt heb. Dit systeem werkt door middel van Cinemachine Impulses en kan geactiveerd worden door de TriggerShake() method aan te roepen met een ScreenShakeSize enum als argument. De bron van de impulse is een GameObject die op het hoofd van de baas is bevestigt.
De particles en het geluid zijn niet door mij gemaakt. Chris heeft een mooi particlesysteem toegevoegd die wat stof spawnt rondom de shockwave. En Gijs heeft een dreunend geluid toegevoegd die afspeelt totdat de shockwave verdwijnt.
Deze vrij simpele shader pakt de kleuren van de achtergrond, en distort deze op basis van een distortion texture. De distortion shader scrollt over de x en y axis om de indruk te geven dat de lucht bewogen wordt.
Verder heb ik nog wat instellingen toegevoegd aan de material. Dingen zoals tint, snelheid, texture grootte, distortion texture en intensiteit. De shader is het meest overtuigend als je de tint op doorzichtig (oftewel zwart) houdt, maar we hebben de shockwave rood gemaakt zodat deze beter te zien is.
Ik heb ook een minimum snelheid toegevoegd, want wanneer de shockwave op het buitenste randje van de planeet zit, wil je niet dat de snelheid nul is. In dat geval zou de schijf nooit op gang komen.
Hiernaast zie je een voorbeeld van de Boss_HeadSlam class, die gebruikmaakt van de methode
Zoals je in de code kunt zien, wordt er één of twee keer een shockwave gespawnd op de locatie van het hoofd van de baas.
De locaties van deze omliggende shockwaves worden berekend met eenvoudige wiskunde. Neem bijvoorbeeld het Square-patroon: dit patroon heeft vier punten met coördinaten [-1, -1], [-1, 1], [1, -1] en [1, 1]. Deze offsets worden gebruikt om de posities te bepalen, afhankelijk van de
De lijn die een gelijkzijdige driehoek in tweeën splitst, is
De resulterende punten zijn:
Daarnaast moeten de shockwaves ook onderling correct gepositioneerd en georiënteerd zijn. Hiervoor wordt de middelste shockwave als referentie gebruikt. Deze krijgt als eerste het commando om
Sommige patronen hebben echter geen middelste shockwave. In dat geval wordt er tijdelijk een "fake shockwave" toegevoegd om de oriëntatie en positionering te regelen. Zodra dit is voltooid, wordt de fake shockwave weer verwijderd.
Bedankt voor het lezen!
De shockwave wordt geactiveerd wanneer de baas met zijn hoofd op de planeet slaat. Het is aan de speler om deze aanval te ontwijken, wat mogelijk is door op het juiste moment over de shockwave heen te springen.
Doelen en vereisten
Wanneer een shockwave verschijnt, moet de speler snel omhoog springen om niet geraakt te worden. Het belangrijkste doel van deze aanval is om de speler uit te dagen de aanvalspatronen van de baas te herkennen en hierop te anticiperen.Zonder een aanval die over de grond beweegt, zoals de shockwave, zou de speler weinig reden hebben om de jetpack te gebruiken om de lucht in te gaan. Deze aanval voegt daarom een extra laag toe aan de gameplay, waarbij de speler niet alleen horizontaal, maar ook verticaal moet bewegen. Dit introduceert een derde dimensie in de besturing en maakt de ervaring dynamischer.
Daarnaast is het essentieel dat de shockwave visueel duidelijk en aantrekkelijk is, terwijl het tegelijkertijd niet te overweldigend of frustrerend aanvoelt. De visuele impact en herkenbaarheid worden bereikt door het gebruik van een shader en particles, die de aanval zowel opvallend als esthetisch maken.
Shockwave
De shockwave is een prefab die bestaat uit meerdere onderdelen: Een mesh, een custom shader, code om te grootte en richting te bepalen, particles en geluid.Ik beschrijf deze onderdelen in de volgende hoofdstukken:
Planeet & schijven
De mesh van de shockwave is een schijf die vanaf het beginpunt naar het midden van de planeet beweegt en er voorbij. Wanneer de schijf het einde van de planeet bereikt, verdwijnt deze. Elke shockwave bevat ook een trigger die de speler schade toe kan richten, met dezelfde vorm als de mesh.Elke shockwave is een afzonderlijke GameObject. Dit betekent dat je meerdere shockwaves op de planeet kan hebben die onafhankelijk van elkaar bewegen,
Grootte
De grootte van de schijf wordt bepaald door middel van code. De belangrijkste factor en een goed beginpunt om de diameter te bereken, is de afstand tot de kern van de planeet. Dit is namelijk hetzelfde als de diameter gedeeld door twee.Hiernaast zie je de grafiek van hoe dat eruit zou zien. Zoals je misschien al zou verwachten is de grafiek in de vorm van een halfe cirkel.
Maar als je alleen dit als diameter gebruikt loop je al snel tegen een probleem aan. Je kan de schijf niet zien omdat hij precies even groot is als de planeet. Om deze reden wil je een klein beetje toevoegen aan de diameter. Ook dit moet afhankelijk zijn van de afstand tot de kern, omdat je anders aan het begin en eind een groter stuk krijgt dat uit de planeet steekt.
Ten slotte wordt er ook nog een golvend effect toegevoegd aan de diameter door middel van een sinusfunctie. Deze golf is af te stellen via de inspector, net zoals de dikte en snelheid van de shockwave.
Screenshake, particles en geluid
Wanneer de baas zijn hoofd op de planeet slaat en een shockwave creëert, worden er ook drie effecten gebruikt om de shockwave meerder "kracht" te geven. Screenshake, particles en geluid voegen meer juice toe aan de game.De screenshake werkt via een systeem die ik ook gemaakt heb. Dit systeem werkt door middel van Cinemachine Impulses en kan geactiveerd worden door de TriggerShake() method aan te roepen met een ScreenShakeSize enum als argument. De bron van de impulse is een GameObject die op het hoofd van de baas is bevestigt.
De particles en het geluid zijn niet door mij gemaakt. Chris heeft een mooi particlesysteem toegevoegd die wat stof spawnt rondom de shockwave. En Gijs heeft een dreunend geluid toegevoegd die afspeelt totdat de shockwave verdwijnt.
Shader
Dit is de eerste keer dat ik een shader heb gemaakt die in een game gebruikt is. Ik heb wel is een shader gemaakt, maar die had ik niet toegepast. Deze shader is gemaakt voor de universal rendering pipeline door middel van een ShaderGraph.Deze vrij simpele shader pakt de kleuren van de achtergrond, en distort deze op basis van een distortion texture. De distortion shader scrollt over de x en y axis om de indruk te geven dat de lucht bewogen wordt.
Verder heb ik nog wat instellingen toegevoegd aan de material. Dingen zoals tint, snelheid, texture grootte, distortion texture en intensiteit. De shader is het meest overtuigend als je de tint op doorzichtig (oftewel zwart) houdt, maar we hebben de shockwave rood gemaakt zodat deze beter te zien is.
Snelheid
De snelheid van de schijf lijkt misschien op het eerste gezicht constant te moeten zijn. Maar om het er realistisch uit te laten zien moet je de diameter verwerken in de snelheidsberekening. Dit is omdat de schijf anders te snel lijkt te bewegen bij het beginpunt en het eindpunt.Ik heb ook een minimum snelheid toegevoegd, want wanneer de shockwave op het buitenste randje van de planeet zit, wil je niet dat de snelheid nul is. In dat geval zou de schijf nooit op gang komen.
Verwante classes & onderdelen
- Boss_HeadSlam
- Shockwave
- Shockwave (shader)
- Shockwave (prefab inc. particle systems)
Shockwave Spawner
De ShockWaveSpawner is een systeem dat andere classes in staat stelt om op de planeet specifieke opstellingen van shockwaves te creëren.Hiernaast zie je een voorbeeld van de Boss_HeadSlam class, die gebruikmaakt van de methode
ShockWaveSpawner.Spawn()
. Dankzij het strategy pattern kunnen verschillende methodes worden aangeroepen om unieke vormen van shockwaves te genereren.
Zoals je in de code kunt zien, wordt er één of twee keer een shockwave gespawnd op de locatie van het hoofd van de baas.
Patronen
De spawner ondersteunt vijf verschillende patronen: Single, Repeat, Double, Triangle, Square en Cross.- Bij Single en Repeat worden de shockwaves direct op de opgegeven positie gespawnd.
- De overige patronen genereren shockwaves rondom de opgegeven positie.
De locaties van deze omliggende shockwaves worden berekend met eenvoudige wiskunde. Neem bijvoorbeeld het Square-patroon: dit patroon heeft vier punten met coördinaten [-1, -1], [-1, 1], [1, -1] en [1, 1]. Deze offsets worden gebruikt om de posities te bepalen, afhankelijk van de
forward
- en right
-vectors van de middelste shockwave. Dit werkt uiteraard alleen als de middelste shockwave correct is georiënteerd, maar daarover later meer.
Driehoekpatroon
Het berekenen van de punten voor het Triangle-patroon was iets uitdagender. In tegenstelling tot het vierkant hebben de punten van een gelijkzijdige driehoek geen eenvoudige coördinaten. Gelukkig herinnerde ik me uit mijn wiskundelessen dat een gelijkzijdige driehoek specifieke verhoudingen heeft tussen de zijden.De lijn die een gelijkzijdige driehoek in tweeën splitst, is
√3 / 2
keer zo lang als een zijde. Omdat we alleen deze splitsende lijn hebben, moesten we de berekening omdraaien. Bovendien beginnen we vanuit het middelpunt, wat de berekening iets complexer maakt.
De resulterende punten zijn:
- [0,
√3 / 3
] - [-0.5,
√3 / 6
] - [0.5,
√3 / 6
]
Oriëntatie
Bij het spawnen van een patroon is het cruciaal dat de shockwaves correct georiënteerd zijn. Elke shockwave heeft eenSnapToPlanet()
-methode die ervoor zorgt dat de shockwave naar de planeet wordt gericht en er naartoe wordt "getrokken" met behulp van een while
-loop.
Daarnaast moeten de shockwaves ook onderling correct gepositioneerd en georiënteerd zijn. Hiervoor wordt de middelste shockwave als referentie gebruikt. Deze krijgt als eerste het commando om
SnapToPlanet()
uit te voeren. Vervolgens worden de omliggende shockwaves gepositioneerd met behulp van de .forward
- en .right
-vectors van de transform van de middelste shockwave. Tot slot krijgen de buitenste shockwaves ook het SnapToPlanet()
-commando.
Sommige patronen hebben echter geen middelste shockwave. In dat geval wordt er tijdelijk een "fake shockwave" toegevoegd om de oriëntatie en positionering te regelen. Zodra dit is voltooid, wordt de fake shockwave weer verwijderd.
Verwante classes & onderdelen
Hier zijn enkele belangrijke onderdelen die met de ShockWaveSpawner te maken hebben:- Shockwave
- ShockwaveSpawner
- ShockwaveSpawnPattern (enum)
Testen
Ik heb het systeem getest door middel van planeten van verschillende groottes. Ik ben geen blijvend probleem tegengekomen. Alle problemen die ik had die te maken hadden bijvoorbeeld snelheid or grootte heb ik tijdens het ontwikkelproces opgelost.Bedankt voor het lezen!