Starten met programmeren van een 3D-omgeving in Unreal Engine – Een eerste level bouwen

print
Deze handleiding maakt deel uit van het programmeertraject:


Inhoud


Wat vooraf ging


Gebruikte terminologie

Als een nieuwe terminologie voor het eerst gebruikt wordt geef ik hier de officiële omschrijving (in het Engels).

Level

A Level is a user defined area of gameplay. Levels are created, viewed, and modified mainly by placing, transforming, and editing the properties of the Actors it contains. In the Unreal Editor, each Level is saved as a separate .umap file, which is also why you will sometimes see them referred to as Maps.

Objects

The base building blocks in the Unreal Engine are called Objects and contain a lot of the essential “under the hood” functionality for your game assets. Just about everything in Unreal Engine 4 inherits (or gets some functionality) from an Object.

Actor

An Actor is any object that can be placed into a level. Actors are a generic Class that support 3D transformations such as translation, rotation, and scale. Actors can be created (spawned) and destroyed through gameplay code (C++ or Blueprints).


Inleiding

In deze handleiding starten we van een leeg level en zetten de eerste stappen in het bouwen van een level.

Hiertoe gaan we gebruik maken van bestaand materiaal van de Marketplace.

Situering van deze handleiding binnen Unreal Engine


Project

  • Start Epic Games Launcher.
  • Klik op Unreal Engine.
  • Klik op Launch (rechtsboven) om Unreal Engine te starten.
  • Start een nieuw Third Person Desktop/Console project van Maximum Quality With Starters Content en geef het een passende naam (bv. EersteLevel).

Marketplace

Om dit level te bouwen gaan we bestaande (gratis) content van de Marketplace halen.

  • Start eventueel Epic Games Launcher.
  • Klik op Unreal Engine.
  • Klik op Marketplace (rechtsboven) om Unreal Engine te starten.
  • Klik op FreeEpic Games Content en zoek naar Infinity Blade: Grass Lands.
  • Misschien moet u het zich nog aanschaffen (het is gratis), bij mij is dit reeds gebeurd en ik kan meteen kiezen voor Add to Project.

  • Zoek naar uw hierboven aangemaakte project, selecteer het en klik op Add to Project.

Het Infinity Blade Grass Lands pakket is toegevoegd aan uw project. U vindt het in de Content Browser.

Neem eerst eens een kijkje in wat we hebben toegevoegd.

Het Infinity Blade Grass Lands pakket komt met twee voorbeeld mappen, u vindt deze in de folder ContentInfinityBladeGrassLandsMaps.

Er is een map Overview met een overview van alle assets.

Er is een speelbare demomap ElvenRuins.

In de folder ContentInfinityBladeGrassLandsEnvironments vindt u de beschikbare assets in de subfolders StaticMesh.

Nieuwe folder aanmaken

We gaan een eigen folder aanmaken om onze levels in te bewaren.

  • Voeg in de Root van de Content Browser een map Levels toe aan het project via Add New – New Folder.

Er is een nieuwe folder Levels aangemaakt.

Level toevoegen

We gaan starten vanuit een volledig lege level en deze stap voor stap opbouwen. We gaan dus eerst een leeg level toevoegen.

  • Ga naar het menu FileNew Level….

  • Kies het template voor het nieuwe level (hier Empty Level).

  • Bewaar meteen het level via Save Current en selecteer de net aangemaakte folder Levels.

Alternatief

  • U kan ook met de rechtermuisknop ingedrukt klikken in de folder Levels waar de Level moet komen en kiezen voor Level.

  • Vervolgens geeft u het nieuwe level de gewenste naam (bv. EersteLevel).
  • U dubbelklik op het icoontje om de net aangemaakte level te openen.

Let op, met deze alternatieve techniek maakt u een leeg level (Empty Level) aan.

In beide gevallen hebt u nu een nieuw leeg level open staan.

Er is niets te zien, helemaal niets!


Ons eerste level bouwen

Onderstaande grafiek toont de lagen van een level.

We gaan deze lagen toevoegen aan ons level (zij het niet in de exacte volgorde zoals hierboven).

Vloer

We beginnen met de vloer. Een object dat we in een level plaatsen wordt een actor genoemd (een model dat komt met materialen/textures).

Selecteer de folder ContentInfinityBladeGrassLandsEnvironments en zoek naar Floor (Engels voor vloer).

U krijgt alle bestanden met het woordje floor in de naam. Maar… u krijgt ook Materialen en Textures en die interesseren ons momenteel niet, ik ben alleen geïnteresseerd in Static Meshes (objecten).

  • Klik op Filters en vink Static Mesh aan.

U ziet nu enkel nog de Static Meshes met het woordje floor in de naam. U kunt elk van deze Static Meshes dubbelklikken om deze nader te bekijken.

  • Dubbelklik SM_Exo_Bridge_Tile_Floor om deze te bekijken.

U leest hier o.a. af, links boven, dat de Approx Size 200 x 200 x 4 is.

Oké, deze willen we gebruiken als vloer.

  • Sluit het venster.
  • Sleep SM_Exo_Bridge_Tile_Floor in het level.

  • Positioneer de vloer in het centrum, van de wereld, door in Location X-as, Y-as en Z-as op 0 te zetten.

Misschien stelt u zich wel de vraag “Ik zie helemaal geen vloer!”, correct, de vloer is nog niet te zien omdat er nog geen licht toegevoegd is aan de level.

We gaan zonlicht toevoegen.

  • Vanuit het Modes Place-panel, sleep een Directional Light in de level. De locatie is eigenlijk willekeurig maar ik heb de eigenschap Location voor de X-as en voor de Y-as op 0 gezet en voor de Z-as op 100.

We gaan nu de vloer uitbreiden. Een vloer tegel is 200 breed, hebben we hierboven gezien.

  • Om deze vloer nu gemakkelijk te kunnen kopiëren zetten we het best de Grid op een grootte van 100.

  • Selecteer nu de vloer, en met de Alt-toets ingedrukt sleept u naar rechts (of links), er wordt een kopij geplaatst.
  • Herhaal dit zodat u 5 kopijen hebt, 2 links en 2 rechts van het origineel (zodat de vloer centraal in het centrum blijft).

  • Selecteer nu deze 5 vloerassets, u kunt dit gemakkelijk in de World Outliner. Net zoals in de Verkenner, bovenste aanklikken, Shift-toets indrukken de onderste in de reeks aanklikken.

  • Sleep nu deze selectie met de Alt-toets ingedrukt zodat u ook weer 5 kopijen hebt, 2 naar boven en 2 naar beneden zodat de vloer nog steeds in het middelpunt staat.

Spelerkarakter

Nu de vloer gelegd is gaan we de spelerkarakter toevoegen. Moest u nu immers op start klikken dan is de kans groot dat uw karakter in een zwart gat valt.

  • Zoek in het Modes Place-panel naar Player Start en sleep Player Start in het level.

  • Zet de locatie voor de X-as en voor de Y-as op 0, voor de Z-as geef u een positieve waarde zodat uw Player Start boven de vloer hangt.

  • Druk op de End-toets, de Player Start “valt” op de vloer.

  • Druk op Play, u ziet de speler staan.

Atmosfeer (Fog)

Buiten de vloertegels is alles zwart. We gaan nu atmosfeer toevoegen.

  • In het Modes Place-panel, zoek naar Atmospheric Fog.

  • Sleep de Atmopheric Fog actor in uw level. De locatie is eigenlijk willekeurig maar ik heb de eigenschap Location voor de X-as en voor de Y-as op 0 gezet en voor de Z-as op 200. U ziet meteen het verschil.

We gaan nu het zonlicht koppelen aan de atmosfeer.

  • Selecteer Directional Light in de World Outliner (of rechtstreeks in het level), in het Details-panel zoek naar fog.
  • Vink Atmophere / Fog Sun Light aan.

De lucht is blauw.

Reflecties

We gaan een Sphere Reflection Capture toevoegen voor een betere reflectie.

  • Zoek in het Modes-panel naar Sphere Reflection Capture.

  • Sleep de Sphere Reflection Capture in het level. De locatie is hier niet willekeurig, u moet er hier op letten dat de Sphere Reflection Capture uw level omvat. Daarom heb ik de eigenschap Location voor de X-as en voor de Y-as op 0 gezet en voor de Z-as op 500.

Build

De Reflectie en de belichting dienen geBuild te worden voor u het effect kunt zien.

  • Klik op Build in de Toolbar.

Omdat onze level nogal leeg is ziet u weinig verschil, al is de vloer toch al een stukje “mooier”.

Voor we verder gaan met de belichting te verbeteren gaan we wat meer actors (Static Meshes) aan het level toevoegen.

U doet dit door deze in het level te slepen en eventueel te transformeren (Location, Rotation en Scale).

Voor het plaatsen van de actors verwijs ik nog even naar de handleiding over Actors.

Tijd om een level te bouwen.

Mijn toen dertienjarige zoon heeft, met een klein beetje hulp, eveneens zijn eerste level gebouwd. Onderstaande schermafbeeldingen tonen een deeltje van zijn werk.


Eenvoudige visuele verbeteringen

We gaan een paar eenvoudige visuele verbeteringen aanbrengen.

Sky Light

De schaduwen zijn donker, zonder weerkaatsing (Indirect Light).

We kunnen dit probleem oplossen door een Sky Light toe te voegen.

  • Sleep vanuit het Modes Place-panel onder LightsSky Light in het level. De locatie is eigenlijk willekeurig maar ik heb de eigenschap Location voor de X-as en voor de Y-as op 0 gezet en voor de Z-as op 600.

U ziet het verschil in de schaduwen die nu zachter zijn door weerkaatsing.

Misschien vindt u de scene nu te licht?

Dit komt door Exposure of Eye Adaptation, de ogen van uw karakter die zich aanpassen aan de duisternis.

Exposure (Eye Adaptation)

Exposure is een realistische techniek die ervoor zorgt dat de ogen van uw karakter zich na een zekere tijd aanpassen aan de duisternis. Donkere scenes worden dus na een paar seconden (veel) lichter).

Dit is realistisch maar niet echt handig wanneer u zelf een belichting instelt voor uw level. Het wordt dan ook vaak uitgeschakeld.

Een manier om dit te doen is via een Post Proces Volume. Een Volume beslaat uw geheel, of een deel van, uw level. In het Post Process Volume kunt u heel wat eigenschappen instellen die de weergave van uw level bepalen.

  • Sleep vanuit het Modes Place-panel onder VolumesPost Process Volume in het level. De locatie is eigenlijk willekeurig maar ik heb de eigenschap Location voor de X-as en voor de Y-as op 0 gezet en voor de Z-as op 800.

We gaan een paar eigenschappen moeten aanpassen.

  • Selecteer eventueel het Post Process Volume en zoek naar de eigenschap Infinite Extend (Unbound). Als u de eigenschap Infinite Extend (Unbound) aanvinkt is het Post Process Volume voor het gehele level actief (en niet enkel binnen het volume), dit is wat we willen.
  • Vink de eigenschap Infinite Extend (Unbound) aan.

  • Zoek nu naar Exposure.
  • Merk op dat de Exposure (de aanpassing van uw ogen aan de duisternis) gaan van een Min Brightness van 0.03 tot een Max Brightness van 2.

  • Vink beiden (Min Brightness ven Max Brightness) aan en zet de waarde voor beiden op 1 om dit effect te neutraliseren.

U merkt het verschil. De kleuren zijn beter en omdat de Exposure (Eye adaptation) geneutraliseerd is blijven ze zo ook tijdens het spelen.

Sky Sphere (Skydome)

We hebben nog steeds geen wolken!

Om deze te krijgen moet u een Sky Sphere toevoegen.

  • Zoek in het Modes Place-panel naar Sky Sphere en sleep BP_Sky_Sphere in uw level. De locatie is eigenlijk willekeurig maar ik heb de eigenschap Location voor de X-as en voor de Y-as op 0 gezet en voor de Z-as op 1000.

De lucht heeft een wat rare roze schijn. Dit komt omdat we de BP_Sky_Sphere nog dienen te koppelen aan ons Directional Light Actor.

  • In het Details-panel onder de eigenschap Direction Light Actor, selecteer DirectionalLight.

U hebt een mooie zonnige, lichtbewolkte dag.

Later gaan we zien hoe u de het weer dynamisch kunt maken, dag en nacht cyclussen kunt toevoegen, maar voor nu, voor onze eerste level, is een mooie zonnige dag perfect datgene dat we willen. We hebben immers alle nodige onderdelen toegevoegd en er kennis mee gemaakt.


Blueprint Visual Scripting

Stel, u wilt fakkels aan de muur hangen.

Een fakkel bestaat uit meerdere onderdelen:

  • de fakkel zelf
  • vuur
  • licht

U wilt meerdere fakkels kunnen ophangen en, moest u iets willen wijzigen, dan wilt u dit meteen voor alle fakkels tegelijk wijzigen.

De methode die we tot nu toe gebruikt hebben, het plaatsen van actors rechtstreeks in het level, is hiervoor niet echt geschikt. Het kan, maar het zal veel werk zijn.

Een betere werkwijze zou zijn moesten we deze drie onderdelen (fakkel, vuur en licht) kunnen samen als een geheel. Dit kan via een Blueprint.

Nieuwe folder aanmaken

Het is handig om uw eigen Blueprints te verzamelen in een eigen folder.

Om een nieuwe folder aan te maken:

  • Selecteer de folder, of de Root, waar u een nieuwe folder wilt onder maken en kies voor Add New – New Folder. U krijgt dezelfde keuzemenu door met de rechtermuisknop te klikken in de folder zelf.

  • Geef de folder een naam (bv. MijnBlueprints) en u hebt een nieuwe folder aangemaakt.

Blueprint

Er zijn verschillende manieren om een nieuwe Blueprint aan te maken. Ik ga hier rechtstreeks vanuit het level werken.

We maken een fakkel aan, in het level, zoals we die normaal zouden aanmaken. We beschikken over een aantal mogelijke fakkels in InfinityBladeGrassLands ik koos voor SM_Plains_Ruins_Brazier_01. Misschien niet echt een “fakkel” maar… het kan ervoor doorgaan.

Deze komt tegen de muur. Omdat ik iets wil tegen de muur plaatsen kan ik Surface Snapping activeren door het aan te vinken.

  • Vink Surface Snapping aan. U vindt dit rechtsboven in de Viewport.

  • Zoek naar SM_Plains_Ruins_Brazier_01 en sleep het in het level.

  • Duidelijk veel te groot. Schaal het naar 0.5 over alle assen (X,  Y en Z).

Dit ziet er al beter uit.

We gaan nu vuur toevoegen, vuur is een Particle effect.

We doen dit niet rechtstreeks in het level maar als onderdeel (component) van de fakkel.

  • Met de fakkel nog steeds geselecteerd, klik op Add Component in het Details-panel en kies voor Particle system.

  • Voor de eigenschap Template, zoek naar Fire en klik P_Fire aan. P_Fire maakt deel uit van de Starter Content.

  • Positioneer het vuur zodat het net uit het kommetje lijkt te komen, ik heb het ook naar 0.5 geschaald voor de X, Y en Z-as.

We gaan nu ook wat meer licht toevoegen.

  • Met de fakkel nog steeds geselecteerd, klik op Add Component in het Details-panel en kies voor Point Light.

  • Positioneer het licht in het vuur.

We hebben nog steeds geen herbruikbare Blueprint.

  • Met de fakkel nog steeds geselecteerd, klik op Blueprint/Add Script.

  • Geef aan dat u het wilt bewaren in onze net aangemaakte Folder (MijnBlueprints) en geef het een passende naam (bv. BP_Fakkel) en klik op Create Blueprint.

  • U ziet de Blueprint en met zijn verschillende componenten.

  • Sluit de Blueprint.
  • Ga naar de folder MijnBlueprints.
  • U ziet er uw Blueprint BP_Fakkel staan.

  • Sleep deze BLueprint BP_Fakkel in het level om kopijen (instanties) te plaatsen. Let op, u zal opnieuw moeten schalen naar bv. 0.5. Ook al hadden we dit reeds gedaan toe we het eerste, originele exemplaar geplaatst hebben.

U hebt echter liever een roodgloeiend licht, dat beter bij het vuur past.

Deze aanpassingen doen we nu binnen de Blueprint zelf.

  • In de folder MijnBlueprints open BP_Fakkel door te dubbelklikken en selecteer Viewport.
  • Selecteer PointLight en wijzig de eigenschap Light Color, in het Details-panel, naar een meer rode kleur.

  • Klik op Compile en Save en sluit dit venster.

  • U ziet dat de kleurverandering voor alle instanties van BP_Fakkel gewijzigd is.

Aan een Blueprint kunt u nadien ook programmeercode toevoegen, maar dit gaan we voorlopig nog niet doen.

Ik ben tevreden over mijn eerste level.


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

  • IC BC017 – kan ICT veilig en duurzaam gebruiken
  • IC BC023 – kan ICT aanwenden om problemen op te lossen
  • IC BC247 – kan de bouwstenen van een specifieke ontwikkelomgeving gebruiken
  • IC BC248 – kan bouwstenen voor een specifieke ontwikkelomgeving maken
  • IC BC250 – kan bij het programmeren in functie van een specifieke ontwikkelomgeving, een juiste logica volgen
  • IC BC344 – kan oplossingen voor eenvoudige probleemstellingen bedenken

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.