Starten met programmeren van een 3D-omgeving in Unreal Engine – Prototyping (WhiteBoxing)

print
Deze handleiding maakt deel uit van het programmeertraject:


Inhoud


Wat vooraf ging

  • U kunt actors plaatsen in een level.
  • U bent vertrouwd met de fasen in het bouwen van een level.

Gebruikte terminologie

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.

Geometry Brush Actors

Geometry Brushes are the most basic tool for level construction in Unreal. Conceptually, it is best to think of a Geometry Brush as filling in and carving out volumes of space in your level. In general, you can think of Geometry Brushes as a way to create basic shapes for use in your level design process, either as permanent fixtures or as something temporary to test with while your artists finish creating final meshes.

BSP

Binary Space Partitioning, or BSP for short, is a simple and quick way of laying out space in your level; defining what’s solid and what’s not. Designers place BSP Brushes to create Geometry which is what forms the foundation of a level.

Material

A Material is an asset that can be applied to a mesh to control the visual look of the scene. At a high level, it is probably easiest to think of a Material as the “paint” that is applied to an object. But even that can be a little misleading, since a Material literally defines the type of surface from which your object appears to be made. You can define its color, how shiny it is, whether you can see through the object, and much more.


Inleiding

U bent reeds vertrouwd met de werkomgeving van Unreal Engine en u hebt weet van de fasen in het bouwen van een level.

In deze handleiding gaan we van start met de eerste fase, Prototyping, ook wel WhiteBoxing genoemd.

  • Start een nieuw Third Desktop/Console project van Maximum Quality With Starters Content en geef het een passende naam.


Werken met levels

Nieuw level toevoegen

Een 3D-project, een spel, kan uit meerdere levels bestaan. Maar voorlopig gaan we levels toevoegen om iets specifieks uit te testen.

  • Ga naar het menu FileNew Level….

  • Kies het template voor het nieuwe level (bv. Default).

Een default level komt reeds met een aantal standaard actors.

  • Klik op Play om het level op te starten.
  • In een Third Person-project ziet u uw karakter in een lege level.

Level bewaren

  • Om het level op te slaan klikt u ofwel op de knop Save Current (of u klikt op Ctrl-S of op File – Save Current).

  • Vervolgens bepaalt u waar het bestand moet worden opgeslagen (bv. de folder Maps) en geeft u het level een naam (bv. Test). Merk op dat er reeds 3 mappen beschikbaar zijn waaronder de map Minimal_Default, de map die u zag bij het opstarten.
  • Klik op Save.

Opslaan als

  • Wilt u de map opslaan onder een andere naam, met behoudt van de huidige, klik dan op FileSave Current As….

Level openen

Om een bestaande level te openen:

  • Klik u op FileOpen Level…, vervolgens selecteert u het gewenste level en kiest u voor Open.
  • Of zoek het gewenste level in de Content Browser in de folder Maps en dubbelklik het om het te openen.


Geometry Brush Actors

Geometry Brush actors (ook aangeduid met BSP) zijn basisvormen (rechthoeken, cilinders, kegels, trappen,…) die, in afwachting van de vervangende en meer gedetailleerde Static Mesh actors gebruikt worden om de lay-out en de gameplay van het level vast te leggen tijdens de prototyping/Whiteboxing fase (de zogenaamde Blocking Out Levels).

WhiteBoxing/Blocking Out Levels Afgewerkte level

Geometry Brush actors toevoegen aan het level

U vindt de Geometry Brush actors in de Place-mode onder Geometry.

  • Selecteer de gewenste Geometry en sleep het in het level op de gewenste plaats.
  • Zo heb ik hieronder een Box Geometry toegevoegd aan het level.

Deze Box is 2 meter (200 cm) breed bij 2 meter (200 cm) diep en 2 meter hoog (200 cm). U kunt dit aflezen, en wijzigen, in het Details-panel bij de Brush Settings. Een eenheid UU = 1 cm.

  • x = lengte (diepte)
  • y = breedte
  • z = hoogte

Let op, bij deze getallen moeten we ook nog de schaling vermenigvuldigen.

  • Kopieer de Box (door in de Verplaatsingsmode de Alt-toetst in te drukken tijdens het verplaatsen (slepen)).
  • Schaal de Box naar 2.0 in de Z-as.

Merk op, het schalen is in beide richtingen van de Z-as gebeurt, dit in tegenstelling tot het schalen van een Static Mesh waar de schaling effectief in de Z-richting (naar boven dus) zou gebeurt zijn. Dit komt omdat het centrum van de widget (dat witte bolletje) zich bij een Brush niet aan de voet bevindt (zoals bij een Static Mesh) maar in het midden van de Brush. Het gevolg is dat een deel van onze tweede geschaalde Box zich “onder de vloer” bevindt. U moet de Box dus ook nog 100 (hoogte was 200, door een schaling van 2 is er dus 200 bijgekomen waarvan de helft naar beneden, vandaar de 100) naar boven verplaatsen op de Z-as.

  • Wijzig de Z-locatie naar 220 (de originele 120 (middelpunt van de originele box ) + 100 (helft van de schaling met 2 die onder de vloer verdwenen was)).

Als u nu even naar de Details kijkt dan ziet u dat de initiële waarden van 200, ondanks de schaling, niet gewijzigd zijn. Conclusie, u moet deze waarden dus steeds vermenigvuldigen met de schaling.

Texture uitlijning wijzigen na schaling

De Texture is de “bekleding”. Deze bekleding gebeurt met een materiaal (zie later).

Onze net toegevoegde geometrische brushes hebben nog geen texture en hebben in de plaats die grid van vierkantjes.

Als u nu let op onze tweede geschaalde box dat ziet u dat deze vierkantjes in de Z-richting uitgetrokken zijn. Op zich is dit geen probleem, maar het is ook niet mooi, laten we dit dus wijzigen.

  • Selecteer een wand door erop te klikken.
  • Merk op dat u meer details krijgt, o.a. Surface properties. U ziet dat hier de Scale V op 2 staat.

Op het ogenblik hebben we echter nog maar één vlak geselecteerd, eventuele wijzigingen zullen dus enkel op dit vlak (de geselecteerde wand) van toepassing zijn.

  • Klik op GeometrySelectSelect Matching Brush om de volledige brush te selecteren.

  • Wijzig onder Surface propertiesScale V de 2 naar 1 en klik op Apply.

Geometry en Surface properties hebben nog veel meer opties voor het uitlijnen en aanpassen van de textures maar het heeft weinig zin dit allemaal in detail te beschrijven, u moet dit eens kunnen bekijken en dat kunt u in de video hieronder.

Karakterafmetingen

De officiële standaardafmetingen voor een karakter in Unreal Engine is:

  • x = 60 cm/uu
  • y = 60 cm/uu
  • z = 180 cm/uu

  • Klik op Play om het level op te starten en de afmetingen te bekijken.

Uitsnijdingen

  • Voeg een nieuwe default level toe.
  • We maken een muur aan. Voeg een Geometrische Box (vanuit Place-mode) toe en geef hem de waarden:
    • x = 20
    • y = 1000
    • z = 220.
  • Plaats deze muur zodat hij mooi op de vloer past.
  • Voeg een tweede Geometrische Box toe maar vink nu, onderaan, Subtract aan.

  • We gebruiken deze box als deur en geven het waarden zodat een karakter er door kan en het diep genoeg is om door de muur te kunnen:
    • x = 40
    • y = 100
    • z = 200
  • Verplaats deze tweede box door de muur. Doordat de deur in Subtractieve mode staat wordt deze van de muur “afgetrokken”.

Tips

  • De volgorde is van belang, de brush die u Subtract moet als laatste aan het level worden toegevoegd.
  • Bent u tijdens het toevoegen vergeten Subtract aan te duiden dan kan dit nog steeds nadien in DetailsBrush SettingsBrush Type.

  • Een brush in subtractieve mode is feitelijk onzichtbaar in de Viewport, u kunt deze het best selecteren in de World Outline. Hoewel ik het hierboven niet gedaan heb is een gepaste naam geven aan te raden zodat u de vorm gemakkelijk terugvindt.
  • Wanneer u beide brushes op dezelfde hoogte zet (location Z = 120) zie je tijdens het spelen een kleine storing. Daarom heb ik de tweede brush, de deur, iets lager, op z = 119, geplaatst (zie afbeelding hierboven).
  • In bovenstaande schermafdruk heeft de deur nog steeds de naam Box Brush2. Dit is een weinig zeggende naam, laten we de deur de passende naam Deur geven.

Holle ruimte (kamer) maken

  • Voeg een nieuwe default level toe.
  • We maken een kamer aan. Voeg een Geometrische Box toe, geef het de naam Kamer en geef hem de waarden:
    • x = 500
    • y = 940
    • z = 400 (zodat we ons hoofd niet stoten als we in de kamer omhoog springen)
  • Plaats deze kamer zodat hij mooi binnen de vloer past. De X-location = 30, Y-location = 0, Z-location = 210 (in mijn voorbeeld).
  • Om de kamer, een holle ruimte, te maken vinkt u nu de optie Hollow aan. De dikte van de muur (Wall Thickness) kan je op 10 laten staan.

  • Voeg een tweede Geometrische Box toe maar vink nu, onderaan, Subtract aan.

  • We gebruiken deze box als deur en geven het waarden zodat een karakter er door kan en het diep genoeg is om door de muur te kunnen:
    • x = 40
    • y = 100
    • z = 200
  • Verplaats deze tweede box door de muur van de kamer. Doordat de deur in Subtractieve mode staat wordt deze van de muur “afgetrokken”.

  • Om de belichting, schaduwen in de kamer, goed aan te maken klikt u eerst op BuildBuild Lighting only (of klik gewoon op Build voor een volledige “build”).

  • Klik op Play om het level op te starten en de afmetingen te bekijken.

Eigen vormen maken

Unreal Engine komt met een aantal basis geometrische vormen (Box, Cone, Cilinder, Curverd stair, linear stair, spiral stair en sphere). Maak vaak zal u een meer specifieke vorm wensen.

Stel, u wenst een dak weer te geven op de kamer (die we hierboven aangemaakt hebben). Ok, u kunt er gewoon een Box op leggen en dit als dak beschouwen, of als u er een sprookjeskasteel van wilt maken kunt u er misschien een Cone op plaatsen. Maar u wilt het toch iets correcter doen en er op zijn minst iets op plaatsen dat lijkt op een dak en de vorm heeft van een dak, dit kan immers belangrijk zijn voor collision.

Er is geen dakvorm voor handen dus gaan we zelf zo’n vorm moeten ontwerpen.

  • We werken verder met het level dat de kamer bevat (zie hierboven).
  • We maken een dak aan. Voeg een Geometrische Box toe, geef het de naam Dak en geef hem de waarden:
    • x = 540
    • y = 1000
    • z = 260
  • Plaats dit zodat het mooi boven op de vloer past (plaats eerst het dak boven de kamer en druk op de End-toets om het dak op de kamer te laten “vallen”. De X-location = 30, Y-location = 0, Z-location = 540 (in mijn voorbeeld).

We moeten nu de Box-vorm van het dak aanpassen zodat het meer op een dak gaat gelijken.

  • Ga hiervoor naar Geomety Editing.

Om een dak te maken gaan we vanuit het midden van het dak de vorm moeten naar omlaag laten lopen, zodat we een helling creëren die vanuit het centrum start.

  • Om onze Box in twee te delen (zodat we een middelste bovenrand van het dak kunnen verkrijgen) selecteert u één van de lange bovenzijden en klikt u op Split. Dit selecteren van zo’n zijde vraagt grote nauwkeurigheid en kan misschien gemakkelijker in een Ortograpic View.

Merk op dat de box een bijkomende, middelste “zijde” gekregen heeft.

  • Selecteer de bovenste zijrand van de Box. We maken gebruik van de Widget om deze vorm aan te passen.
  • We gaan naar beneden slepen dus we selecteren de Z-as (de blauwe pijl die bij selectie geel wordt.

  • Sleep de bovenste zijrand van de Box naar omlaag.

  • Laat los eens u op de gewenste plek bent.

  • Herhaal dit proces voor de andere zijde.

Ons dak staat erop.

Wie meer wil weten over de verschillende mogelijkheden en opties voor het bewerken van geometrische brushes raad ik aan onderstaande video’s te bekijken.

Een samenvatting vindt u op de officiële wiki.


Prototyping/WhiteBoxing

Tijden de Whitebox-fase wordt gebruikt voor:

  • Het bepalen van lay-out van het level.
  • Prototyping.
  • Gameplaytesting van het level.
  • Schaal en proporties.

Dit gebeurt allemaal zonder in detail te gaan, met basisvormen, eventueel met wat kleuraccent maar meer niet. Het accent ligt meer op de vraag “Deze lay-out, werkt die, zijn er geen problemen (zijn alle deuren breed genoeg, kan ik overal op en door?), is het proportioneel correct en is de gameplay leuk?”.

Onderstaande video demonstreert hoe u aan de slag kunt met Whiteboxing.


Tip – Gekleurd materiaal voor WhiteBoxing

Het lijkt misschien wat tegenstrijdig om tijdens WhiteBoxing gekleurde materialen te gebruiken maar door een kleurtje toe te voegen aan de Geometric Brushes, die u gebruikt tijdens het Whiteboxen, kunt u deze Geometric Brushes reeds een extra betekenis geven. Zo kunt u een kleurtje gebruiken voor muren, een ander voor de vloer, voor water, nog een kleurtje voor Geometric Brushes waar de speler schade kan oplopen,…

Niet alleen maken deze kleuren de level overzichtelijker maar geven ze ook al meteen een extra betekenis aan de vormen.

  • Voeg eerst een nieuw, Default level toe (of gebruik een bestaand level) aan uw project.
  • Plaats er op zijn minst een vloer en een muur (al dan niet met een deurtje in de muur zoals in mijn onderstaand voorbeeld).

We gaan deze vloer en muur voorzien van een eigen kleurtje.

Om een kleurtje te geven aan de Geometric Brushes moeten we beschikken over gekleurd materiaal. We gaan dit zelf ontwerpen.

Om de zaken op orde te houden ga ik alle materialen bij mekaar plaatsen in een specifieke map (bv. een map Materialen).

  • Voeg in de Content Browser een map Materialen toe aan het project via Add New – New Folder. Denk even na waar u deze map het best plaatst binnen uw mappenstructuur. Omdat dit om een eenvoudige test gaat plaats ik de map hier gewoon onder de root.

  • Ga naar deze Folder door erop te dubbelklikken.

We gaan nu een volledig nieuw, erg eenvoudig, materiaal maken.

  • Klik met de rechtermuisknop in uw Materialen folder.
  • Klik op Material.

  • Geef het materiaal een gepaste naam. Omdat ik eerst een basismateriaal ga maken waarvan ik later andere materialen kan afleiden (instances) noem ik dit materiaal Kleur_Basis.

  • Dubbelklik het materiaal Kleur_Basis om het te openen.

We gaan deze Material editor nog vaker tegenkomen en ik ga het principe toepassen “al doende leert men”, wat inhoudt dat ik hem niet volledig ga bespreken maar gewoon telkens datgene ga bespreken dat we op dat ogenblik nodig hebben.

Maar omdat het misschien de eerste keer is dat u met deze Material editor werkt, toch even een korte rondleiding.

  • Linksboven, die zwarte bol ziet u een Preview. Zo zal uw materiaal eruit zien. Hebt u liever een andere vorm dan een bol dan kunt u één van de andere vormen kiezen. De laatste vorm, het theepotje, staat voor de huidige geselecteerde Static Mesh.
  • Linksonder ziet u het Details-panel en kunt u gedetailleerde eigenschappen instellen.
  • Rechts ziet u een pallet met allerhande mogelijke “functies” die u kunt gebruiken om het materiaal aan te maken.
  • In het midden hebt u de Viewport. Hier bouwt u het materiaal door de gewenste waarden toe te kennen aan de beschikbare delen (Result nodes) die samen het materiaal bouwen.

Het materiaal dat we gaan maken is heel eenvoudig, het bestaat uit:

  1. Een kleur
  2. Een Texture van een Grid (we kiezen de meegeleverde Grid)
  3. De kleur en de grid worden gecombineerd (Multiply) en toegevoegd aan de Base Color (u zou ze ook kunnen toevoegen aan de Emissive Color dat een lichte gloed verspreidt).
  4. Omdat we dit materiaal willen hergebruiken, maar met een ander kleurtje, gaan we van de kleur een parameter maken.

Kleur

Een kleur bestaat uit 3 waarden, een waarde voor Red, Green en Blue (RGB). Zo u wilt kunt u er een 4de waarde aan toevoegen voor het Alpa-kanaal (transparentie).

We moeten dus 3 waarden kunnen invoeren en dit gebeurt via de Constant3Vector.

  • Klik met de rechtermuisknop in de Viewport en zoek naar Constant3Vector (druk op 3).

  • Dubbelklik op de aangemaakte node en gebruik de Color Picker om een witte kleur te selecteren. Klik op OK

Texture

Textures zijn afbeeldingen die gebruikt worden bij het aanmaken van materialen. Ze zijn de “tekening” van het materiaal. In ons voorbeeld wensen we als “tekening” een Grid.

  • Klik met de rechtermuisknop in de Viewport en zoek naar TextureSample.

  • Om een Texture toe te voegen klik u in Details-panel, terwijl Texture Sample geselecteerd is, onder Material Expression Texture Sample – Texture op het pijltje van de keuzelijst en zoekt u naar DefaultWhiteGrid. Vindt u dit niet meteen zorg dan dat onder de View Options een vinkje staat bij Show Engine Content.

Multiply

Deze twee nodes dien nu met mekaar gecombineerd te worden. Dit gebeurt via een Multiply-node.

  • Klik met de rechtermuisknop in de Viewport en zoek naar Multiply (druk op *).
  • Order de nodes zodat u ze gemakkelijk kunt verbinden.

  • Verbindt het witte bolletje van de Texture Sample met de A van Multiply. Verbindt de Constant3Vector met de B van Multiply. Verbindt de uitgang van Multiply met Base Color. U merkt dat de Preview nu effectief de preview toont (er is nu immers iets gewijzigd aan de Base Color.

Parameter

Omdat we dit eenvoudig materiaal willen hergebruiken, telkens met een andere kleur, maken we een parameter van de kleur. We noemen dit ook Instanced Material. Dit beantwoordt aan het programmeerprincipe DRY (Don’t Repeat Yourself).

  • Klik rechts op de Constant3Vector en klik op Convert to Parameter.

  • In het Details-panel kunt u nu een gewenste naam geven aan de parameter (bv. Kleur). Eventueel kunt u er ook nog de standaardwaarde (Default value) wijzigen.

Het materiaal is klaar, vergeet het niet te bewaren.

  • Klik op Save en sluit het venster.

Instances nemen van het basismateriaal

We gaan nu van het basismateriaal (Kleur_Basis) een Instanced Material maken met een andere kleur.

  • Klik met de rechtermuisknop op het basismateriaal (Kleur_Basis) en klik op Create Material Instance.

  • Geef het een passende naam (bv. Kleur_Bruin).
  • Dubbelklik de Material Instance om het te openen.
  • Merk dat u niet in de Designer komt maar in een scherm waar u de parameter Kleur kunt wijzigen.

  • Vink eerst de parameter kleur aan.
  • Gebruik de Color Picker om de gewenste kleur te selecteren. Klik op OK eens u die gevonden hebt.


Het materiaal is klaar, vergeet het niet te bewaren.

  • Klik op Save en sluit het venster.

Herhaal dit proces nu voor andere kleuren.

Materialen toepassen

Op het ogenblik hebben we echter nog maar één vlak geselecteerd, eventuele wijzigingen zullen dus enkel op dit vlak (de geselecteerde wand) van toepassing zijn.

  • Selecteer de Geometry Brushes waarop u het materiaal wilt toepassen.
  • Zorg er eventueel voor dat u de Geometry Brushes volledig geselecteerd hebt. Klik op GeometrySelectSelect Matching Brush om de volledige brush te selecteren.

  • Sleep het materiaal naar de selectie.
  • Klik op Build en vervolgens op Play om dit uit te testen.


Project Level Creation – Whiteboxing

In ons doorlopend project beginnen we ook met Whiteboxing.

Geometry Layout

Eerst bouwen we de algemene lay-out (geometrie).

Adding Windows and doors

We gaan nu de geometrie “uitsnijden” met deuren en vensters.


Masterclass – Whiteboxing a Star Citizen ship

In een Masterclass wordt een stapje verder gezet en gekeken hoe men bepaalde technieken in een professioneel ontwerpt toepast. Deze video’s zijn bestemd voor de cursist die net iets meer wilt weten.

Star Citizen is een heel ambitieus project waarin men een universum in 3D probeert na te bouwen. Centraal staat het bouwen van ruimteschepen die u gebruikt om uw rol te spelen in dit universum. Star Citizen werkt op basis van crowd funding en heeft een redelijk open development, er wordt regelmatig (wekelijks) een inkijk gegeven hoe ze dit immens project bouwen.

Hieronder ziet u hoe WhiteBoxing de eerste stap is bij het bouwen van het ruimteschip “Anvil Crucible”.


Sidekick – Materialen

Bij het bouwen van een 3D omgeving komt veel meer kijken dan enkel maar het programmeren. Denk aan belichting, AI (Artificiële Intelligentie), animaties, cinematics, geluid, particle effects, materialen,….

Het is teveel gevraagd om gespecialiseerd te zijn in al deze materie, specialisatie dringt zich op. Ik leg in deze handleidingen de nadruk op het leren programmeren en zal al heel tevreden zijn als u dit onder de knie krijgt. Maar toch wil ik u ook, via deze Sidekicks, laten kennismaken met de andere aspecten nodig om een 3D omgeving te bouwen. Ik doe dit aan de hand van videoreeksen die ik gespreid aanbied als aanvulling bij de eigenlijke handleidingen. Deze Sidekicks maken geen deel uit van de eigenlijke “leerstof”, voel u vrij ze al dan niet te bekijken.

Omdat we er in deze handleiding reeds over spreken, en omdat ze belangrijk zijn om onze 3D wereld in te kleden, ga ik als eerste Sidekick-reeks een tutorial over Materialen aanbieden.

Overview

Creating a Basic Material

Geef een reactie

  • 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.