Lag en futuristisk animert dataskjermbilde i Unreal 3 Editor

Unreal 3 Editor er et kraftig spillutviklingsverktøy som frigjøres med de fleste Unreal 3-spill (Unreal Tournament, Gears of War, Roboblitz). Det blir raskt et standardverktøy i spillutviklingsbransjen og er kjent for å sette mye makt direkte i kunstnerens hender, særlig gjennom det knuteprøvede materialredaktøren.

Denne opplæringen gir en introduksjon til Unreals materialredaktør og påtar seg ingen forkunnskaper om verktøyet eller tilstedeværelsen av andre verktøy, men redaktøren selv. Gjennom opprettelsen av et "flimrende skjerm" -materiale (eller "shader"), vil denne opplæringen vise noen av de kraftige tingene som er i stand med materialredaktøren.

Denne opplæringen ble opprettet ved hjelp av versjonen av Unreal Editor som ble levert med Unreal Tournament 3, men det er sannsynligvis å jobbe med andre versjoner av redaktøren.

Final Effect Preview

Trinn 1

Først må du få de filene vi skal bruke for å lage vår shader. Du kan hente dem ved hjelp av nedlastingslinken nedenfor. Du trenger både Text.tga og Panner.tga-filene, da vi skal bruke disse til å lage en gammeldags "skjerm" -skanner (komplett med pulserende og en blinkende rød advarsel).

Texturfiler

nedlasting

Steg 2

Start Unreal Editor ved å først lansere Unreal Frontend, som ligger i mappen "Binaries" av et uvirkelig spill du eier (du må kanskje søke etter UnrealFrontend.exe). Kjør UnrealFrontend.exe, og klikk deretter på "editor" -knappen for å starte editoren.

Trinn 3

Unreal Editor er et komplekst verktøy, men vi fokuserer bare på en liten del av den. Når den åpnes, klikker du på 'Generisk nettleser' -knappen for å åpne 'Generisk nettleser', som er Unreals verktøy for kapitalforvaltning.

Trinn 4

I "Generisk nettleser" klikker du på "Fil> Import". Naviger til hvor du lagret kildebilder fra trinn 1 og velg tekst.tga. Etter et øyeblikk vil en dialog for importalternativer vises. Alle standardinnstillingene er fine bortsett fra en; hvor dialogboksen ber om navnet på en pakke, skriv "Monitor". Gjør de samme trinnene for Panner.tga også. Unreal organiserer eiendeler i "Pakker", og nå skal begge kildebildene våre importeres til en pakke som heter 'Monitor' (se andre bilde).

Trinn 5

Nå som vi har importert våre kildebilder, kan vi sette opp vår skygge. For å gjøre dette, "Høyreklikk" på den grå bakgrunnen av "Generisk nettleser" og velg "Nytt materiale". I den neste dialogboksen gir materialet et navn som "Skjerm". Når du klikker ok, åpnes "Material Editor".

Trinn 6

Nå er det ting som blir morsomme! Det er fire hovedområder i "Material Editor": Det store gråområdet i sentrum er arbeidsområdet, og det inneholder innganger i hovedkanalene til shader, det mørke området til venstre er en 3D forhåndsvisning av materialet, Plassen langs bunnen av skjermen er materialvalgene, og kolonnen langs høyre side er en liste over alle materialuttrykkene (noder) du kan bruke til å bygge materialet ditt.

Bla gjennom listen til du finner en kalt "Texturesample". "Dra og slipp" -tekstur Eksempel på arbeidsområdet (ved hjelp av venstre museknapp), og en "Texturprøve" -node blir opprettet. Du kan flytte knuten rundt ved å klikke på den for å velge den, og deretter "ctr l + left click" og dra rundt. Du kan navigere i arbeidsområdet ved å høyreklikke på den grå bakgrunnen og dra.

Trinn 7

Flytt "Material Editor" ut av veien for et øyeblikk, slik at du kan se "Generic Browser" igjen. Klikk på "Tekst" -kilden bildet vi importerte tidligere for å velge det. Gå straks tilbake til 'Material Editor', og velg tekstureksempelkoden. Under alternativene bør det være en linje som sier "Texture: None". Klikk på den grønne pilen, på høyre side av linjen, for å koble valget fra 'Generic Browser' med 'Texture Sample'.

Trinn 8

Legg til en annen "Texture Sample" node, og knytt den til "Panner" -kilden bildet, på samme måte som du koblet til "Text" -bildet. Vi skal ikke bruke dette enda, men vi vil til slutt. Du bør ha noe som bildet nedenfor.

Trinn 9

Selv om vi har lagt våre kildebilder inn i arbeidsområdet, har vi ennå ikke "wire" dem inn i materialets innganger. Klikk og dra på den svarte firkanten til venstre for den navnet "Text" Texture Sample. Dette er en "utgang". Utgangene er alltid til venstre for en knutepunkt. En ledning bør dukke opp, følger markøren mens du drar. Slett markøren på skjermens "Emissive" inngangskanal.

Det grønne "tekstbildet" skal vises på forhåndsvisningsobjektet til venstre. Som standard er forhåndsvisningsobjektet en sfære, men du kan finne en sylinder eller terning for å bli bedre. Det er knapper øverst i forhåndsvisningsvinduet, skifte mellom forhåndsvisningsobjekter.

Trinn 10

Klikk på den første av de tre merkene. Dette gjelder dine endringer i materialet. Gratulerer, du har bygget en skygge i Unreal! Dessverre er det veldig kjedelig, så resten av denne opplæringen handler om å spisse den opp. Nå er det en god tid å lagre pakken din tilbake i "Generisk nettleser".

Trinn 11

Til å begynne med, la oss anta at vi prøver å lage en eldre skjermskjerm, som noe du vil se i en krigskrigs militærbase. Å gi skjermen noe "flimrende" er en god måte å introdusere noe liv i materialet. En av de enkleste måtene å gjøre dette på er å raskt skifte mellom to versjoner av vårt "Tekst" -bilde.

Høyreklikk på den svarte utgangsfliken i tekstteksteksemplet, og velg "Break Link". Fra listen "Material Expression" klikker du og drar en node av hvert av følgende: Multiply, Constant, Linear Interpolation, Time og Sine. Prøv å arrangere dem som ligner på bildet nedenfor.

Trinn 12

Koble nu 'Text' Texture-prøven til en av inngangene til multipliseringen. Koble "Konstant" node til den andre inngangen til multipliseringen. Husk at innganger er alltid på høyre side av en node, og utgangene er til venstre. Unreal s 'Material Editor' flyter alltid rett til venstre. Når du har koblet 'Konstant' og 'Tekst' tekstur, klikker du på 'Konstant' node. I alternativene nederst i redigereren bør du se en type i boksen merket 'R'. Du kan endre verdien av konstanten der. Endre det til '1.2'. Dette gir oss en lysere versjon av vårt "Tekst" -bilde som kommer ut av multiplikasjonsnoden.

Trinn 13

Med Linear Interpolate-noden kan du fade fra ett bilde til et annet, eller i vårt tilfelle, mellom vårt opprinnelige "Tekst" -bilde og vår nye lysere versjon av den. Fest nikkene som vist på bildet nedenfor.

Det eneste vi mangler nå er en alfa for å kjøre hvordan de to versjonene av vår "Tekst" -bilde blandes. 'Alf' -inngangen til Linear Interpolate-noden krever spesiell forsiktighet, ikke bare noe kan gå inn i det. Det er begrenset til en enkelt kanal av informasjon. Vi kommer inn på det mer senere.

Trinn 14

'Sine' og 'Time' er en felles knutekombinasjon som gir deg en verdi som konstant svinger mellom '0' og '1' (vel, teknisk '-1', men det er ikke så stor). Det er viktig å merke seg at Unreal vil se en verdi på '0' som fargen svart. En verdi på '1' vil bli hvit. Så sett opp 'Sine' og 'Time' noder som nedenfor, og koble deretter 'Linear Interpolate' til 'Emissive' -inngangen på materialet, og du får et materiale som har en fin puls til den. Hvis effekten ikke er overdrevet nok for deg, kan du sveve konstanten opp til et høyere tall. Forsøk å se hva du får!

Trinn 15

Denne effekten er flott for en pulserende skjerm, men for å få det til å virke som om skjermen flimrer, må vi øke hastigheten til pulsen. Klikk på 'Sine' node og endre det er 'Periode' fra '1.0' til '0.1'. Nå skal det virkelig se ut som en gammel CRT-skjerm med dårlig flimmer.

Trinn 16

For å rydde opp ting, hold "Alt + Control" og klikk øverst til venstre, fremfor alt våre noder. Dra til nederst til høyre, og du vil opprette en valgboks. Når du slipper, velges alle knutepunktene du har valgt. Trykk på 'c' -tasten for å lage en kommentarboks, og oppgi boksen 'Flimrende'. Nå når du klikker på navnet "Flimring", kan du flytte hele gruppen (hold kontrolltasten og dra). Flytt "Flimrende" gruppen litt til høyre for å gi deg selv mer plass.

Trinn 17

La oss nå bruke "Panner" Texture Sample vi la til tidligere for å få skjermbildet til å se ut som om det har et oppdaterings- / scanline-problem. Gjør dette, vi lager en horisontal bar bla gjennom bildet.

Gå til 'Material Expressions' listen og legg til en 'Panner' node. Med denne noden kan du bla en tekstur på tekstur. Koble 'Panner'-noden opp med vår "Panner" -teksturprøve, og koble så opp til materialets "Emissive" -inngang. Som standard har 'Panner'-noden en hastighet på' 0 ', så klikk på den og endre den' Speed ​​Y 'til' -0.2 '. Det eneste problemet med det nå er at det er en hvit rulle, og vi må blande den inn i vår grønne flimring.

Trinn 18

Fra listen "Materiell uttrykk", dra i en "Legg til" -node og en "Komponentmaske" -node og koble dem opp som følgende bilde (alle fargebilder i Unreal består av tre gråtoner, 8-biters kanaler: en rød , en grønn og en blå). Komponenten Mask-noden tillater oss å velge bare en enkelt kanal og isolere den. Velg "Component Mask" node, og i alternativene, merk av i boksen ved siden av 'G' (for grønn). Koble komponenten Mask-noden til "Add" -noden, sammen med vår "Panning" -teksteksempel, men bruk ikke den svarte utgangen fra teksturprøven, bruk den grønne i stedet. Jeg får mer inn i hvorfor senere.

Nå har vi våre to effekter overlaid, men det er ALLE hvite. Det er greit. Dette er hva vår siste "grønne" kanal ser ut. Vi vil gjenskape et fargesultat i slutten.

Trinn 19

Velg 'Component Mask', 'Sine', 'Add', 'Panner' og våre 'Panner' Texture Sample noder, og klikk 'C'. Gi gruppen sin navnet 'Horisontal Bar', og dra deretter de to gruppene dine rundt for å få dem til litt.

Du har kanskje lagt merke til at ordet "Mislykkes" i det opprinnelige "Tekst" -bildet ikke lenger vises i forhåndsvisningsvinduet. Det er fordi det var helt RØD i det opprinnelige "Text" -bildet, og siden vi bare bruker den grønne kanalen akkurat nå, vil vi ikke se den. Vi isolerer den Røde kanalen fra "Text" Texture Sample, og gjør vår siste effekt på det.

Trinn 20

Nå bør du vite nesten nok til å lage følgende bilde fra bunnen av. Det er veldig lik den kombinasjonen vi pleide å skape den flimrende effekten. Du kan høyreklikke på den tidligere 'Text' Texture Sample, og velg 'Duplicate' for å lage en andre kopi for å bruke her.

Det er tre store forskjeller mellom denne kombinasjonen og 'Flimrende' oppsett.

  1. Den konstante noden er satt til '6', noe som betyr at bildet vil bli mye lysere.
  2. 'Sine'-nodens' Periode 'ble igjen på' 1 ', standard.
  3. Denne oppsett bruker den RØDE utgangen fra tekstteksteksempelet, i stedet for den svarte utgangen (den svarte utgangen er en kombinasjon av RØD, GRØN og BLÅ kanaler, men vi vil bare ha den RØDE kanalen denne gangen).

Hvis du ser på forhåndsvisningsvinduet, har vi en gråtoneversjon av ordet "Feil" pulserende. Dette er en svart og hvit representasjon av det som vil være rødt i vårt siste materiale. Gruppere disse noder og ring dem 'pulsing rededail'

Trinn 21

For å kombinere alt arbeidet vårt til et enkelt fargesultat, bruk en "Legg til" node fra listen "Material Expression". Dette lar deg gjenskape et flerkanalsbilde ut av separate 8-biters kanaler. Du bør ha en fin "tidlig 1990-tallet" som ser grønn skjerm med en blinkende rød advarsel på bunnen.

Hvis du ser en tealskjerm, så kontroller du at gruppen "Horisontal strekk" er riktig konfigurert (og du bruker bare den grønne kanalen fra "Panner" Texture Sample.

Endelige resultater

Her er det endelige materialet, og en hvordan det ser ut til å brukes på modellen.

Klikk på bildet for en High-Rez-versjon


Nå bør du ha en grunnleggende forståelse av Material Editor i Unreal, sammen med litt erfaring med noen av de vanligste noder. Det er mange fantastiske effekter du kan opprette med dette verktøyet, så ha det gøy å eksperimentere!