Maak een futuristische geanimeerde computerschermshader in de Unreal 3-editor

De Unreal 3 Editor is een krachtige game-ontwikkelingstool die gratis wordt geleverd met de meeste Unreal 3-spellen (Unreal Tournament, Gears of War, Roboblitz). Het wordt snel een standaardtool in de game-ontwikkelingsindustrie en staat erom bekend dat hij veel kracht direct in de handen van de artiest legt, met name via zijn op node gebaseerde materiaaleditor.

Deze tutorial biedt een inleiding tot de materiaaleditor van Unreal en veronderstelt geen voorkennis van de tool of de aanwezigheid van andere tools dan de editor zelf. Door het maken van een 'flikkerend monitor'-materiaal (of' shader ') laat deze tutorial enkele van de krachtige dingen zien die in staat zijn met de materiaaleditor.

Deze tutorial is gemaakt met de versie van de Unreal Editor die werd meegeleverd met Unreal Tournament 3, maar werkt waarschijnlijk met andere versies van de editor.

Final Effect Preview

Stap 1

Eerst moet je de bestanden ophalen die we gaan gebruiken om onze shader te maken. Je kunt ze ophalen via de downloadlink hieronder. Je hebt zowel de Text.tga- als de Panner.tga-bestanden nodig, want we gaan deze gebruiken om een ​​ouderwetse 'computerscherm'-arcering te maken (compleet met pulserende en een knipperende rode waarschuwing).

Textuurbestanden

downloaden

Stap 2

Start de Unreal Editor door eerst het Unreal Frontend te starten, in de map "Binaries" van een op Unreal gebaseerde game waarvan u de eigenaar bent (mogelijk moet u naar UnrealFrontend.exe zoeken). Voer de UnrealFrontend.exe uit en klik vervolgens op de knop 'editor' om de editor te starten.

Stap 3

De Unreal Editor is een complexe tool, maar we concentreren ons slechts op een klein deel ervan. Als het eenmaal is geopend, klikt u op de knop 'Algemene browser' om de 'Generieke browser' te openen. Dit is het hulpprogramma voor activabeheer van Unreal..

Stap 4

Klik in de 'Algemene browser' op 'Bestand> Importeren'. Navigeer naar de locatie waar je de bronafbeeldingen van stap 1 hebt opgeslagen en selecteer Text.tga. Na een ogenblik verschijnt een dialoogvenster Importopties. Alle standaardinstellingen zijn goed, behalve één; waar het dialoogvenster naar de naam van een 'Pakket' vraagt, typt u 'Monitor'. Doe dezelfde stappen ook voor Panner.tga. Unreal organiseert items in 'Pakketten' en nu moeten onze beide bronafbeeldingen worden geïmporteerd in een pakket genaamd 'Monitor' (zie tweede afbeelding).

Stap 5

Nu we onze bronafbeeldingen hebben geïmporteerd, kunnen we onze arcering instellen. Om dit te doen klikt u met de rechtermuisknop op de grijze achtergrond van de 'Generieke browser' en kiest u 'Nieuw materiaal'. Geef het materiaal in het volgende dialoogvenster een naam als 'Scherm'. Wanneer u op OK klikt, wordt de 'Materiaaleditor' geopend.

Stap 6

Nu wordt het leuk! Er zijn vier belangrijke gebieden in de 'Materiaaleditor': het grote grijze gebied in het midden is de werkruimte en het bevat ingangen in de hoofdkanalen van de arcering, het donkere gebied links is een 3D-voorbeeld van het materiaal, de ruimte langs de onderkant van het scherm zijn de materiële opties en de kolom aan de rechterkant is een lijst van alle materiële uitdrukkingen (knooppunten) die u kunt gebruiken om uw materiaal te bouwen.

Blader door die lijst tot je een 'Texture Sample' vindt. "Drag and Drop" Texture Sample op de werkruimte (met de linkermuisknop), en een 'Texture Sample' knooppunt wordt aangemaakt. U kunt het knooppunt verplaatsen door erop te klikken om het te selecteren en vervolgens op "Ctr L + klikken met de linkermuisknop" en rond te slepen. U kunt door de werkruimte navigeren door met de rechtermuisknop op de grijze achtergrond te klikken en te slepen.

Stap 7

Verplaats de 'Materiaaleditor' even weg, zodat u de 'Generieke browser' opnieuw kunt zien. Klik op de bronafbeelding 'Tekst' die we eerder hebben geïmporteerd om deze te selecteren. Keer onmiddellijk terug naar de 'Materiaaleditor' en selecteer het texture sample node. Onder de opties moet een regel staan ​​met de tekst "Textuur: Geen". Klik op de groene pijl aan de rechterkant van die regel om de selectie uit de 'Algemene browser' te koppelen aan het 'Textuurvoorbeeld'.

Stap 8

Voeg nog een 'Texture Sample' knooppunt toe en koppel die aan het bronbeeld 'Panner', op dezelfde manier als u de 'Tekst'-afbeelding hebt gekoppeld. We gaan dit nog niet helemaal gebruiken, maar we zullen het uiteindelijk wel doen. Je zou zoiets als de afbeelding hieronder moeten hebben.

Stap 9

Hoewel we onze bronafbeeldingen in de werkruimte hebben geplaatst, moeten we ze nog in de invoer van het materiaal 'bedraden'. Klik en sleep op het ZWARTE vierkantje links van het text-structuurvoorbeeld 'Tekst'. Dit is een 'uitvoer'. Uitgangen bevinden zich altijd aan de linkerkant van een knooppunt. Er zou een draad moeten verschijnen, die de cursor volgt tijdens het slepen. Laat de cursor los op het "Emissive" -ingangskanaal van de arcering.

De groene "tekstafbeelding" zou links in het preview-object moeten verschijnen. Standaard is het voorbeeldobject een bol, maar mogelijk vindt u een cilinder of kubus beter. Er zijn knoppen aan de bovenkant van het voorbeeldvenster die schakelen tussen preview-objecten.

Stap 10

Klik op de eerste van de drie vinkjes. Dit past uw wijzigingen in het materiaal toe. Gefeliciteerd, je hebt een shader in Unreal gebouwd! Helaas is het erg saai, dus de rest van deze tutorial gaat over het opfleuren. Het is nu een goed moment om je pakket terug op te slaan in de 'Generieke browser'.

Stap 11

Laten we er om te beginnen van uitgaan dat we proberen een ouder beeldscherm te maken - iets dat je zou zien in een militaire basis van een koude oorlog. Het scherm 'flikkeren' geven is een goede manier om wat leven in het materiaal te introduceren. Een van de gemakkelijkste manieren om dit te doen, is snel schakelen tussen twee versies van onze 'Tekst'-afbeelding.

Klik met de rechtermuisknop op het BLACK-uitvoertabblad van het 'Text'-structuurvoorbeeld en kies' Verbindingslink '. Klik in de lijst 'Materiaaluitdrukking' op een knooppunt van elk van de volgende elementen: Multiply, Constant, Linear Interpolation, Time and Sine. Probeer ze te rangschikken zoals de onderstaande afbeelding.

Stap 12

Verbind nu het 'Text' Texture Sample met een van de inputs van de vermenigvuldiging. Verbind het knooppunt 'Constant' met de andere ingang van het vermenigvuldigen. Onthoud dat de ingangen zich altijd aan de rechterkant van een knoop bevinden en de uitgangen aan de linkerkant. Unreal's 'Material Editor' vloeit altijd van rechts naar links. Nadat u het structuurvoorbeeld 'Constant' en 'Text' hebt verbonden, klikt u op het knooppunt 'Constant'. In de opties onderaan de editor ziet u een type-in-box met het label 'R'. Je kunt daar de waarde van de constante veranderen. Verander het in '1.2'. Dit geeft ons een helderdere versie van onze 'Tekst'-afbeelding die uit het vermenigvuldigingsknooppunt komt.

Stap 13

Met het knooppunt 'Lineaire interpolatie' kunt u vervagen van de ene afbeelding naar de andere, of in ons geval, tussen ons oorspronkelijke 'Tekst'-beeld en onze nieuwe helderdere versie ervan. Sluit de knooppunten aan zoals wordt weergegeven in de onderstaande afbeelding.

Het enige wat we nu missen, is een alfa die aangeeft hoe de twee versies van onze 'Tekst'-beeldmix zich vermengen. De 'alpha'-invoer van het knooppunt' Linear Interpolate 'vereist speciale zorg, niet alleen alles kan erop ingaan. Het is beperkt tot een enkel 'kanaal' van informatie. Daar komen we later meer op in.

Stap 14

'Sine' en 'Time' zijn een veelgebruikte knoopcombinatie die je een waarde geeft die constant schommelt tussen '0' en '1' (nou ja, technisch '-1', maar dat is geen probleem). Het is belangrijk op te merken dat Unreal een waarde van '0' als de kleur zwart ziet. Een waarde van '1' is wit. Dus maak de 'Sine' en 'Time' knooppunten zoals hieronder, en verbind dan de 'Linear Interpolate' met de 'Emissive' input van het materiaal, en je krijgt een materiaal dat een mooie puls heeft. Als het effect niet overdreven genoeg voor u is, dan kunt u de constante naar een hoger cijfer draaien. Experimenteer om te zien wat je krijgt!

Stap 15

Dit effect is geweldig voor een pulserend scherm, maar om het te laten lijken alsof het scherm flikkert, moeten we de snelheid van de puls verhogen. Klik op het knooppunt 'Sine' en wijzig de 'Periode' van '1.0' in '0.1'. Nu zou het echt moeten lijken op een oude CRT-monitor met een slechte flikkering.

Stap 16

Om dingen een beetje op te ruimen, houdt u "Alt + Control" ingedrukt en klikt u links bovenaan, boven al onze knooppunten. Sleep naar rechtsonder en u maakt een selectievak. Als je loslaat, worden alle knooppunten die je hebt ingesloten geselecteerd. Druk op de toets 'c' om een ​​opmerkingenvenster te maken en geef het vak 'Flikkeren' de naam. Wanneer u nu op de naam 'Flickering' klikt, kunt u de hele groep verplaatsen (houd de Control-toets ingedrukt en sleep). Verplaats de 'Flikkerende' groep een beetje naar rechts om jezelf wat meer ruimte te geven.

Stap 17

Laten we nu de 'Panner' Texture Sample gebruiken die we eerder hebben toegevoegd om onze monitorshader er uit te laten zien alsof het een vernieuwings- / scanline-probleem heeft. Doe dit, we zullen een horizontale balk maken door de afbeelding scrollen.

Ga naar de lijst 'Material Expressions' en voeg een 'Panner' knoop toe. Met dit knooppunt kunt u bladeren door een textuur-voorbeeldknooppunt. Haak het knooppunt 'Panner' op met ons 'Panner' Texture Sample en haak dit vervolgens vast aan de 'Emissive'-invoer van het materiaal. Standaard heeft het knooppunt 'Panner' een snelheid van '0', dus klik erop en verander het 'Snelheid Y' in '-0.2'. Het enige probleem met het nu is dat het een witte scroll is, en we moeten het in onze groene flikkering mengen.

Stap 18

Sleep vanuit de lijst 'Materiaaluitdrukkingen' een knooppunt 'Toevoegen' en een knooppunt 'Componentmasker' naar beneden en haak ze vast zoals in de volgende afbeelding (alle kleurenafbeeldingen in Unreal zijn samengesteld uit drie grijstinten, 8-bits kanalen: een rode , een groen en een blauw). Met het knooppunt 'Componentmasker' kunnen we slechts één kanaal selecteren en isoleren. Selecteer het knooppunt 'Componentmasker' en vink bij de opties het selectievakje naast 'G' aan (voor groen). Bedraad het knooppunt 'Componentmasker' naar het knooppunt 'Toevoegen', samen met ons 'Panning'-structuurvoorbeeld, maar gebruik niet de ZWARTE uitvoer van het Textuurmonster, maar gebruik in plaats daarvan de GROENE. Ik zal later meer ingaan op waarom.

Nu hebben we onze twee effecten overlay, maar het is ALLE wit. Dat is geen probleem. Dit is hoe ons laatste 'groene' kanaal eruit zal zien. Uiteindelijk maken we een resultaat in kleur opnieuw.

Stap 19

Selecteer de 'Component Mask', 'Sine', 'Add', 'Panner', en onze 'Panner' Texture Sample-knooppunten en druk op 'C'. Geef hun groep de naam 'Horizontal Bar' en sleep vervolgens je twee groepen rond om ze een beetje te verslaan.

U hebt misschien gemerkt dat het woord 'Fail' in de originele 'Tekst'-afbeelding niet meer in het materiaalvoorbeeldvenster verschijnt. Dat komt omdat het volledig ROOD was in de originele 'Tekst'-afbeelding, en aangezien we het GROENE kanaal nu alleen gebruiken, zullen we het niet zien. We isoleren het RODE kanaal van het 'Text' Texture Sample en doen daar ons uiteindelijke effect op.

Stap 20

Inmiddels zou je bijna genoeg moeten weten om de volgende afbeelding helemaal opnieuw te maken. Het lijkt erg op de combinatie die we gebruikten om het flikkerende effect te creëren. U kunt met de rechtermuisknop klikken op het eerdere 'Text'-structuurvoorbeeld en' Dupliceren 'kiezen om een ​​tweede exemplaar te maken om hier te gebruiken.

Er zijn drie grote verschillen tussen deze combinatie en de instelling 'Flikkeren'.

  1. Het knooppunt 'Constant' staat op '6', wat betekent dat het beeld veel helderder zal zijn.
  2. De 'Periode' van de 'Sine' node stond op '1', de standaardwaarde.
  3. Deze opstelling gebruikt de RODE uitvoer van het 'Text' Texture Sample, in plaats van de BLACK-uitvoer (de BLACK-uitvoer is een combinatie van de RODE, GROENE en BLAUWE kanalen, maar we willen deze keer alleen het RODE kanaal).

Als u naar het venster met de materiaalvoorbeelden kijkt, hebben we een grijswaardenversie van het woord 'Fail' pulserend. Dit is een zwart-wit weergave van alles wat rood is in ons uiteindelijke materiaal. Groepeer deze knooppunten en noem ze 'PulsingRedFail'

Stap 21

Als u al ons werk wilt combineren in één volledig kleurresultaat, gebruikt u een knooppunt 'Toevoegen' in de lijst 'Materiaalexpressie'. Hiermee kunt u een meerkanaals beeld opnieuw creëren van afzonderlijke 8-bits kanalen. Je zou een mooi 'begin jaren negentig' groen scherm moeten hebben met onderaan een knipperende rode waarschuwing.

Als je een groenblauw scherm ziet, controleer dan of je 'Horizontale balk'-groep juist is ingesteld (en je gebruikt alleen het groene kanaal uit het textuurvoorbeeld' Panner '.

Eind resultaat

Dit is het uiteindelijke materiaal en hoe het eruit ziet toegepast op het model.

Klik op de afbeelding voor een hoge-rez-versie


Nu zou je een basiskennis moeten hebben van de Materiaaleditor in Unreal, samen met enige ervaring met enkele van de meest voorkomende knooppunten. Er zijn veel geweldige effecten die je met deze tool kunt maken, dus veel plezier met het experimenteren!