Starten met programmeren van een 3D-omgeving in Unreal Engine – Gekleurd materiaal voor WhiteBoxing

print
Deze handleiding maakt deel uit van het programmeertraject:


Inhoud


Wat vooraf ging


Inleiding

In deze handleiding gaan we onze Whiteboxes van gekleurd materiaal voorzien. Deze handleiding is een eerste kennismaking met Materialen.

Situering van deze handleiding binnen Unreal Engine


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.

Instanties (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.

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

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.