Starten met Programmeren van een 3D omgeving in Unreal Engine – Een tijdlijn toevoegen

print
Deze handleiding maakt deel uit van het programmeertraject:


Inhoud


Wat vooraf ging


Inleiding

Deze handleiding is genomen uit de vorige handleiding Starten met Programmeren van een 3D omgeving in Unreal Engine – Interactie met de omgeving en herneemt het werken met de tijdslijn.

Onderstaand voorbeeld werkt vanuit een Level Blueprint maar kan eveneens gebruikt worden binnen een Blueprint klasse.


Deur openen en sluiten met een tijdslijn

Level Blueprint

Om een object, een deur, interactief te maken moet u een Trigger toevoegen.

  • Voeg een BoxTrigger (die ik de naam DeurTriggerBox heb gegeven) toe zodat deze de deur langs beide zijden van de deur overlapt.

Met alle actors op zijn plaats en correct ingesteld kunnen we aan de programmeren slaan.

Wel, de deur moet open gaan, of meer specifiek, de deur moet 90° roteren. De deur (SM_Door) is het object waarmee iets moet gebeuren.

  • Selecteer SM_Door.

Het programmeren in dit voorbeeld gebeurt in Level Blueprint.

  • Met SM_Door nog steeds geselecteerd, klik in de knoppenbalk van de Viewport op BlueprintsOpen Level Blueprint.
  • Klik met de rechtermuisknop ingeduwd in Level Blueprint. Omdat we de actor SM_Door geselecteerd hebben kunnen we gemakkelijk een referentie naar de actor aanmaken door te kiezen voor Create a Reference to SM_Door.

Een referentie naar de actor SM-Door uit het persistent level is toegevoegd.

Nu we een referentie naar ons object MS_Door toegevoegd hebben aan Level Blueprint kunnen we dit gebruiken.

Blueprint Klasse

Om een Blueprint klasse te gebruiken, wat aan te raden is indien u meerdere deuren in uw level kunt hebben, gaat u als volgt terecht.

  • In de Content Browser, klik op Add NewBlueprint Class (of klik met de rechtermuisknop in de net aangemaakte folder en klik op Blueprint Class).

  • Kies de Parent Class Actor.

  • Geef het een gepaste naam (bv. MijnDeur).
  • Dubbelklik om de Blueprint te openen.

Merk de DefaultSceneRoot op die de positie in het level zal bepalen, deze is reeds Movable.

Componenten toevoegen

Er moeten 2 componenten worden toegevoegd:

  • Een Static Mesh dat de deur bevat (met de naam Deur).

  • Een Box Collision (te vergelijken met een TriggerBox) voor de interactie (met de naam DeurTriggerBox).

  • U ziet de hieronder de toegevoegde componenten.

  • Voeg de Static Mesh SM_Door toe aan de eigenschap Static Mesh van Deur.

  • Eens toegevoegd, dubbelklik de deur (in de Eigenschap Static Mesh) en voeg Collision toe.
  • Plaats de DeurTriggerBox rond de deur.

Events

De deur moet opengaan als de DeurTriggerBox overlapt wordt en nadien weer gesloten bij het beëindigen van de overlapping.

  • Selecteer de DeurTriggerBox en vindt onderaan, bij Events, de event On Component Begin Overlap en On component End Overlap.

  • Klik op de +-knoppen van On Component Begin Overlap en On Component End Overlap.
  • Ga naar Event Graph.

Programmeren

Onderstaande code is de code uit de Level Blueprint maar werkt gelijkaardig in de Blueprint klasse.

Wat moet er gebeuren met deze deur? Wel, de deur moet roteren rond zijn eigen as. Dit kan via de functionaliteit SetActorRelativeRotation (omdat de rotatie relatief is ten opzichte van de actor zal deze ook blijven werken moesten we de actor verplaatsen). Moest u zich afvragen of ik met deze kennis (dat de functionaliteit SetActorRelativeRotation moet gebruikt worden) geboren ben, wel, nee. Dit is een kwestie van opzoeken en een beetje gezond verstand gebruiken.

  • Sleep dus een node vanuit onze referentie naar MS_Door en zoek naar SetActorRelativeRotation.

  • Klik deze aan als u ze gevonden hebt. Merk op dat SM_Door als Target wordt gekoppeld.

  • Er moet 90° geroteerd worden rond de Z-as. U kunt nu gewoon die 90 intypen bij Z.

Wanneer moet dit gebeuren?

Wanneer moet de deur open gaan?

Wel, wanneer de “speler” de ruimte bepaald door de DeurTriggerBox binnen treedt. Of nog meer concreet bij de Event OnActorBeginOverlap van de actor DeurTriggerBox.

  • Selecteer de DeurTriggerBox in uw level.
  • Keer terug naar Level Blueprint en klik met de rechtermuisknop ingedrukt in Level Bleuprint.
  • Omdat onze DeurTriggerBox geselecteerd is, kunt u gemakkelijk events voor deze DeurTriggerBox toevoegen. De event die we zoeken vindt u onder CollisionAdd On Actor Begin Overlap.

  • Klik deze aan.

De Event OnActorBeginOverlap van de actor DeurTriggerBox is toegevoegd.

  • Verbindt de node van de Event OnActorBeginOverlap met de node SetActorRelativeRotation.

Oké, laten we dit testen.

  • Compileer het Level Blueprint door te klikken op de knop Compile. Vergeet dit niet!
  • Build en start het level.

Het werkt!

Alle, toch bijna, de deur vliegt open en eens open gaat ze niet meer dicht.

Ah, geen probleem, we voegen een Delay toe zoals bij de lamp. Oké, maar nee, een Delay zal er enkel voor zorgen dat het iets langer duurt voor de deur met dezelfde snelheid open vliegt. Het is het openen van de deur zelf die moet vertraagd worden.

De oplossing ligt in het gebruik van een Timeline.

Een tijdlijn toevoegen

Een tijdlijn laat toe om een waarde over een zekere tijdspanne te wijzigen.

Dus, onze rotatie van de deur moet niet van 0 naar 90 gaan in 0.0000 seconden maar pakweg in 2 seconden (dit is misschien wat te lang, praktischer zou bv. 1.2 seconden kunnen zijn, maar ik wil zeker zijn dat we het gezien hebben).

Hoe doen we dit?

  1. Eerst gaan we de Timeline-functionaliteit toevoegen. Deze zal moeten starten bij OnActorBeginOverlap.
  2. Binnen deze tijdslijn bepalen we dat de waarde van 0 naar 90 moet wijzigen in een tijdsspanne van 2 seconden.
  3. De tijdslijn wordt vervolgens gebruikt om de Z-waarde van SetActorRelativeRotation te “sturen”.

Laten we dit uitvoeren.

  • sleep een node uit de Event OnActorBeginOverlap en zoek naar Add Timeline.

Deze Timeline plaatst zich mooi tussen de huidige structuur eb is verbonden met OnActorBeginOverlap via Start en verbindt op zijn beurt SetActorRelativeRotation via Update. Na wat schuifwerk ziet u dit beter.

  • Dubbelklik nu de Timeline.

U komt terecht in de Editor voor de Timeline (meer specifiek Timeline_0 omdat we het nagelaten hebben een specifieke naam te geven). Hier moet u eerst bepalen welk soort van tijdslijn u wilt toevoegen, wat u wilt wijzigen over tijd.

  • F – Float track, animeert een Float waarde.
  • V – Vector track, animeert vectoren voor rotatie, locatie of schaal.
  • ! – Event track, dit levert een Event-pin die zal getriggerd worden op een bepaald moment in de tijdlijn.
  • C – Kleur track, animeert een kleur.
  • ~ – Voegt een bestaande curve in vanuit de Content Browser

In ons voorbeeld moet de waarde voor de rotatie gaan van 0 naar 90 over 2 seconden. We willen dus een waarde, meer specifiek een float wijzigen.

  • Klik dus op de f-knop (Add Float Track).

U krijgt onderstaande schermindeling.

  1. Track Name – De naam van de tijdlijn.
  2. External Curve group – Voeg een externe curve toe vanuit de Content Browser.
  3. Track timeline – Hier voegt u de Keyframes toe.
  • Vul een gewenste naam in (Bv. DeurRotatie).

We moeten nu twee punten toevoegen aan de tijdslijn om van 0 naar 90 te gaan in 2 seconden.

Een beginpunt op tijd 0 en een waarde van 0.

Een eindpunt op tijd 2 (seconden) met een waarde van 90.

  • Klik nu op de tijdlijn terwijl u de Shift-toets ingedrukt houdt. Er verschijnt een punt met als waarde voor de tijd de plek waarop u geklikt hebt.

  • Wijzig nu de Time van dit punt naar 0 (laat de waarde voor Value staan) en druk op Enter. Het punt schuift op helemaal naar links van de tijdlijn.

Doe nu hetzelfde om het tweede punt toe te voegen.

  • Klik met de Shift-toets ingedrukt ergens op de tijdslijn (of klik met de rechtermuisknop ingedrukt op de tijdslijn en kies Add key to …). Wijzig de waarde van Time naar 2 en van Value naar 90 (en druk op Enter).

Wellicht verwacht u een lijn te zien maar ziet u deze niet meteen.

  • Klik dan op de knopjes Zoom To Fit Horizontal en het knopje ernaast Zoom TO Fit Vertical.

Nu ziet u wellicht wel de verwachte lijn.

Eigenlijk zouden we hier kunnen stoppen, de tijdslijn is gemaakt, maar ik ga nog twee kleine aanpassingen doen.

Ten eerste verloopt de overgang nu lineair, op zich niets mis mee maar he zou mooier ogen als de deur in het begin, en op het einde, iets langzamer beweegt.

  • Selecteer beide punten (door ze allebei aan te klikken met de Ctrl-toets ingedrukt).
  • Klik met de rechtermuisknop op één van beide punten en vink Auto aan.

  • Zet de totale lengte van de tijdslijn eveneens op 2 in het vakje Length en klik op de knoppen Compile en Save.

  • Sluit nu het tabblad van de Timeline en keer terug naar de Event Graph
  • Merk op dat er een “optie” Deur rotatie is bijgekomen.

De waarde van Deur rotatie moet nu gekoppeld worden met de Z-waarde van SetActorRelativeRotation.

  • Sleep de Deur rotatie naar New Relative Rotation en… merk op dat er een fout wordt getoond.

Deze fout zou u niet mogen verbazen. De Float-waarde van Deur rotatie is immers maar één waarde die we proberen te koppelen aan 3 rotatiewaarden (X, Y en Z) en dit kan dus niet (bovendien kwamen de kleurtjes groen en paars niet overeen).

De oplossing bestaat er uit de drie waarden van de rotatie op de splitsen in drie afzonderlijke waarden voor X, Y en Z. Dit doe je als volgt:

  • Klik met de rechtermuisknop ingedrukt op New Relative Rotation en kies voor Split Struct Pin.

U ziet nu drie verschillende New Relative Rotation voor X, Y en Z (elk met een groen kleurtje, dus van het type Float).

  • Sleep nu de Deur rotatie naar New Relative Rotation Z(Yaw) en… merk op dat het nu lukt!

Laten we dit testen.

  • Compileer het Level Blueprint door te klikken op de knop Compile. Vergeet dit niet!
  • Build en start het level.

Het werkt!

De deur sluiten

Rest ons nu nog de deur te sluiten.

Wanneer moet de deur sluiten?

Wel, wanneer de “speler” de ruimte bepaald door de DeurTriggerBox verlaat. Of nog meer concreet bij de Event OnActorEndOverlap van de actor DeurTriggerBox.

  • Selecteer de DeurTriggerBox in uw level.
  • Keer terug naar Level Blueprint en klik met de rechtermuisknop ingedrukt in Level Bleuprint.
  • Omdat onze DeurTriggerBox geselecteerd is, kunt u gemakkelijk events voor deze DeurTriggerBox toevoegen. De event die we zoeken vindt u onder CollisionAdd On Actor End Overlap.

  • Klik deze aan.

De Event OnActorEndOverlap van de actor DeurTriggerBox is toegevoegd.

De deur sluiten is eigenlijk het omgekeerde als de deur openen. Je zou kunnen zeggen, het is de tijd van de tijdslijn die de deur opent terugdraaien. Wel, dit gaan we dan ook doen.

  • Verbind de Event OnActorEndOverlap met de Reverse-actie van de Timeline.

Laten we dit testen.

  • Compileer het Level Blueprint door te klikken op de knop Compile. Vergeet dit niet!
  • Build en start het level.

Het werkt, onze deur gaat open en toe!

Een Blueprint Klasse

Hieronder ziet u de schermafdrukken van dezelfde uitwerking maar nu in een Blueprint klasse.

Merk de extra casting op die er voor zorgt dat de deur enkel maar open gaat als een PlayerCharacter (of een FirstPersonCharacter) de triggerbox overlapt.

Componenten

Event Graph

TimeLine

LERP

Als aanvulling wil ik even stilstaan bij een veelgebruikte techniek LERP (lineaire interpolatie).

Bij een LERP wordt een waarde tussen A en B gekozen op basis van Alpha. Heel vaak wordt deze Alpha aangestuurd door een Timeline.


Quickshots

Quickshots zijn korte, op zichzelf staande video’s, rond een specifiek onderwerp. Meestal aansluitend bij wat net besproken is.

Changing Things over Time


Behandelde Basiscompetenties uit de module ICT Programmeren – Specifieke ontwikkelomgeving: eenvoudige functionaliteiten

  • IC BC234 – kan de basisprincipes van programmeren in een specifieke ontwikkelomgeving toepassen
  • IC BC236 – kan eenvoudige wijzigingen aan een programma aanbrengen
  • IC BC241 – kan een programma in een specifieke ontwikkelomgeving maken
  • IC BC247 – kan de bouwstenen van een specifieke ontwikkelomgeving gebruiken
  • IC BC249 – kan de instellingen van een specifieke ontwikkelomgeving wijzigen
  • IC BC250 – kan bij het programmeren in functie van een specifieke ontwikkelomgeving, een juiste logica volgen

Behandelde Basiscompetenties uit de module ICT Programmeren – Specifieke ontwikkelomgeving: eenvoudige functionaliteiten

  • IC BC234 – kan de basisprincipes van programmeren in een specifieke ontwikkelomgeving toepassen
  • IC BC236 – kan eenvoudige wijzigingen aan een programma aanbrengen
  • IC BC241 – kan een programma in een specifieke ontwikkelomgeving maken
  • IC BC247 – kan de bouwstenen van een specifieke ontwikkelomgeving gebruiken
  • IC BC249 – kan de instellingen van een specifieke ontwikkelomgeving wijzigen
  • IC BC250 – kan bij het programmeren in functie van een specifieke ontwikkelomgeving, een juiste logica volgen

Geef een reactie

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

  • Abonneer je op deze website d.m.v. e-mail

    Voer je e-mailadres in om je in te schrijven op deze website en e-mailmeldingen te ontvangen van nieuwe berichten.