Crea uno shader futuristico di un computer animato nell'editor di Unreal 3

Unreal 3 Editor è un potente strumento di sviluppo del gioco che viene distribuito gratuitamente con la maggior parte dei giochi Unreal 3 (Unreal Tournament, Gears of War, Roboblitz). Sta rapidamente diventando uno strumento standard nel settore dello sviluppo del gioco ed è noto per aver messo un sacco di potere direttamente nelle mani dell'artista, in particolare attraverso il suo editor di materiali basato su nodi.

Questo tutorial offre un'introduzione all'editor materiale di Unreal e non presuppone alcuna conoscenza preliminare dello strumento, né la presenza di altri strumenti, ma l'editor stesso. Attraverso la creazione di un materiale di "sfarfallio del monitor" (o "shader"), questo tutorial mostrerà alcune delle cose potenti che sono in grado con l'editor di materiali.

Questo tutorial è stato creato utilizzando la versione di Unreal Editor fornita con Unreal Tournament 3, ma è probabile che funzioni con altre versioni dell'editor.

Anteprima dell'effetto finale

Passo 1

Per prima cosa devi ottenere i file che useremo per creare il nostro shader. Puoi recuperarli utilizzando il link di download qui sotto. Avrai bisogno sia dei file Text.tga che di quelli di Panner.tga, dato che li useremo per creare uno shader "schermo di computer" vecchio stile (completo di pulsazioni e un segnale rosso lampeggiante).

File di trama

Scaricare

Passo 2

Avvia l'Unreal Editor lanciando prima Unreal Frontend, che si trova nella cartella "Binaries" di qualsiasi gioco basato su Unreal che possiedi (potresti dover cercare UnrealFrontend.exe). Esegui UnrealFrontend.exe, quindi fai clic sul pulsante "Editor" per avviare l'editor.

Passaggio 3

L'Unreal Editor è uno strumento complesso, ma ci concentriamo solo su una piccola parte di esso. Una volta aperto, fai clic sul pulsante "Browser generico" per aprire il "Browser generico", che è lo strumento di gestione delle risorse di Unreal.

Passaggio 4

Nel "Browser generico", fai clic su "File> Importa". Passare al punto in cui sono state salvate le immagini di origine dal passaggio 1 e selezionare Text.tga. Dopo un attimo apparirà una finestra di dialogo Opzioni di importazione. Tutti i valori predefiniti vanno bene tranne uno; dove la finestra di dialogo richiede il nome di un "Pacchetto", digita "Monitor". Effettua gli stessi passaggi anche per Panner.tga. Unreal organizza le risorse in "Pacchetti", e ora entrambe le nostre immagini di origine devono essere importate in un pacchetto chiamato 'Monitor' (vedi seconda immagine).

Passaggio 5

Ora che abbiamo importato le nostre immagini di origine, possiamo impostare il nostro shader. Per fare questo "clic destro" sullo sfondo grigio del "Browser generico" e selezionare "Nuovo materiale". Nella finestra di dialogo successiva dare al materiale un nome come 'Schermo'. Quando fai clic su OK, si aprirà "Editor materiali".

Passaggio 6

Ora è dove le cose si divertono! Ci sono quattro aree principali nel 'Material Editor': La grande area di grigio al centro è l'area di lavoro, e contiene input nei principali canali dello shader, l'area scura a sinistra è un'anteprima 3d del materiale, lo spazio lungo la parte inferiore dello schermo sono le opzioni materiali e la colonna sul lato destro è un elenco di tutte le espressioni materiali (nodi) che puoi utilizzare per creare il tuo materiale.

Scorri l'elenco finché non ne trovi uno denominato 'Texture Sample'. "Trascina e rilascia" Texture Sample nello spazio di lavoro (usando il tasto sinistro del mouse), e verrà creato un nodo "Texture Sample". Puoi spostare il nodo facendo clic su di esso per selezionarlo, quindi "ctr l + clic sinistro" e trascinamento. È possibile navigare nell'area di lavoro facendo clic con il pulsante destro del mouse sullo sfondo grigio e trascinando.

Passaggio 7

Spostare il 'Material Editor' per un momento, in modo da poter vedere di nuovo il 'Browser generico'. Fare clic sull'immagine di origine "Testo" importata in precedenza per selezionarla. Ritornare immediatamente al 'Material Editor' e selezionare il nodo di esempio della trama. Sotto le opzioni dovrebbe esserci una linea che dice "Texture: None". Fai clic sulla freccia verde, sul lato destro di quella linea, per collegare la selezione dal 'Browser generico' con 'Texture Sample'.

Passaggio 8

Aggiungi un altro nodo "Texture Sample" e collega quello all'immagine sorgente "Panner", allo stesso modo in cui hai collegato l'immagine "Testo". Non lo useremo ancora, ma alla fine lo faremo. Dovresti avere qualcosa come l'immagine qui sotto.

Passaggio 9

Sebbene abbiamo collocato le nostre immagini di origine nello spazio di lavoro, dobbiamo ancora collegarle agli input del materiale. Fai clic e trascina sul riquadro NERO a sinistra del campione di texture denominato "Testo". Questo è un 'risultato'. Le uscite sono sempre sulla sinistra di un nodo. Dovrebbe apparire un filo, seguendo il cursore mentre si trascina. Lascia andare il cursore sul canale di input "Emissive" dello shader.

La "immagine di testo" verde dovrebbe apparire sull'oggetto di anteprima a sinistra. Di default l'oggetto di anteprima è una sfera, ma potresti trovare un cilindro o un cubo per essere migliore. Ci sono dei pulsanti nella parte superiore della finestra di anteprima che si alternano tra gli oggetti di anteprima.

Passaggio 10

Fare clic sul primo dei tre segni di spunta. Questo applica le tue modifiche al materiale. Congratulazioni, hai costruito uno shader in Unreal! Sfortunatamente è molto noioso, quindi il resto di questo tutorial riguarderà l'aromatizzazione. Ora è un buon momento per salvare il pacchetto di nuovo nel 'Browser generico'.

Passaggio 11

Per cominciare, supponiamo che stiamo cercando di creare uno schermo di monitor più vecchio, come qualcosa che vedresti in una base militare della guerra fredda. Dare allo schermo un po 'di sfarfallio è un buon modo per introdurre un po' di vita nel materiale. Uno dei modi più semplici per farlo è quello di passare rapidamente tra due versioni della nostra immagine 'Testo'.

Fai clic con il pulsante destro del mouse sulla scheda di output NERO del campione di texture "Testo" e scegli "Interrompi collegamento". Dall'elenco 'Espressione materiale', fare clic e trascinare un nodo di ognuno dei seguenti elementi: Moltiplicare, Costante, Interpolazione lineare, Tempo e Seno. Prova e disponili in modo simile all'immagine qui sotto.

Passaggio 12

Ora collega il campione di texture "Testo" a uno degli input del multiplo. Collegare il nodo 'Costante' all'altro input del multiplo. Ricorda, gli input sono sempre sul lato destro di un nodo e le uscite sono sulla sinistra. Il 'Material Editor' di Unreal scorre sempre da destra a sinistra. Dopo aver collegato l'esempio di trama "Costante" e "Testo", fai clic sul nodo "Costante". Nelle opzioni nella parte inferiore dell'editor dovresti vedere una "scatola" di tipo "R". Puoi cambiare il valore della costante lì. Cambiarlo in '1.2'. Questo ci dà una versione più luminosa della nostra immagine 'Testo' che esce dal nodo multiplo.

Passaggio 13

Il nodo 'Interpola lineare' consente di sfumare da un'immagine all'altra, o nel nostro caso, tra la nostra immagine 'Testo' originale e la nostra nuova versione più luminosa di essa. Collega i nodi come mostrato nell'immagine qui sotto.

L'unica cosa che ci manca ora è un alfa per guidare il modo in cui le due versioni della nostra immagine "Testo" si mescolano. L'input 'alpha' del nodo 'Linear Interpolate' richiede un'attenzione speciale, non solo qualsiasi cosa può esserci. È limitato a un singolo "canale" di informazioni. Ci arriveremo più tardi.

Passaggio 14

'Sine' e 'Time' sono una combinazione di nodi comuni che ti dà un valore che oscilla costantemente tra '0' e '1' (beh, tecnicamente '-1', ma non è un grosso problema). È importante notare che Unreal vedrà il valore "0" come colore nero. Un valore di '1' sarà bianco. Quindi imposta i nodi "Sine" e "Time" come sotto, quindi collega l'interpolazione lineare all'ingresso "Emissive" del materiale e otterrai un materiale con un impulso piacevole. Se l'effetto non è abbastanza esagerato per te, allora puoi aumentare la costante fino a un numero più alto. Sperimenta per vedere cosa ottieni!

Passaggio 15

Questo effetto è ottimo per uno schermo a impulsi, ma per farlo apparire come se lo schermo stesse tremolando, dobbiamo aumentare la velocità dell'impulso. Fai clic sul nodo "Sine" e modifica il suo "Periodo" da "1.0" a "0.1". Ora dovrebbe davvero sembrare un vecchio monitor CRT con uno sfarfallio brutto.

Passaggio 16

Per mettere un po 'in ordine le cose, tieni premuto "Alt + Control" e clicca in alto a sinistra, sopra tutti i nostri nodi. Trascina in basso a destra e creerai una casella di selezione. Quando lasci andare, saranno selezionati tutti i nodi inseriti. Premi il tasto 'c' per creare una casella di commento e chiama la casella 'Sfarfallio'. Ora quando fai clic sul nome "Sfarfallio" sarai in grado di spostare l'intero gruppo (tieni premuto il tasto Ctrl e trascina). Sposta il gruppo "Sfarfallio" leggermente verso destra per concederti un po 'di spazio in più.

Passaggio 17

Ora usiamo il campione di texture 'Panner' che abbiamo aggiunto in precedenza per rendere il nostro shader del monitor simile a un problema di refresh / scanline. Fallo, faremo una barra orizzontale per scorrere l'immagine.

Vai all'elenco "Espressioni materiali" e aggiungi un nodo "Panner". Questo nodo ti consente di scorrere un nodo campione di trama. Aggancia il nodo 'Panner' con il nostro esempio di Texture 'Panner', quindi collegalo all'ingresso 'Emissive' del materiale. Per impostazione predefinita, il nodo "Panner" ha una velocità pari a "0", quindi fai clic su di esso e modifica "Velocità Y" su "-0,2". L'unico problema è che è una pergamena bianca e dobbiamo mescolarla nel nostro sfarfallio verde.

Passaggio 18

Dall'elenco "Espressioni materiali", trascinare in un nodo "Aggiungi" e un nodo "Maschera componente" e agganciarli come nell'immagine seguente (tutte le immagini a colori in Unreal sono composte da tre canali in scala di grigi, a 8 bit: un rosso , un verde e un blu). Il nodo 'Maschera componente' ci consente di selezionare solo un singolo canale e isolarlo. Seleziona il nodo "Maschera componente" e, nelle sue opzioni, deseleziona la casella accanto a "G" (per verde). Collegare il nodo "Maschera componente" al nodo "Aggiungi", insieme al nostro campione di texture "Panning", ma non utilizzare l'output NERO del campione di Texture, utilizzare invece quello VERDE. Approfitterò di più sul perché dopo.

Ora abbiamo i nostri due effetti sovrapposti, ma è tutto bianco. Va bene. Questo è come apparirà il nostro canale 'Green'. Ricreeremo un risultato a colori alla fine.

Passaggio 19

Seleziona i nodi "Sample Mask", "Sine", "Add", "Panner" e "Panner" Sample Sample e premi "C". Dà al suo gruppo il nome "Barra orizzontale" e poi trascina i due gruppi in giro per ordinarli un po '.

Potresti aver notato che la parola 'Fail' nell'immagine 'Testo' originale non compare più nella finestra di anteprima materiale. Questo perché era completamente ROSSO nell'immagine "Testo" originale, e dal momento che stiamo usando il canale VERDE solo adesso, non lo vedremo. Isolare il canale ROSSO dal campione di texture "Testo" e fare il nostro effetto finale su questo.

Passaggio 20

Ormai dovresti sapere abbastanza per creare da zero la seguente immagine. È molto simile alla combinazione che abbiamo usato per creare l'effetto sfarfallio. Puoi fare clic con il pulsante destro del mouse sul precedente campione di testo "Testo" e scegliere "Duplica" per creare una seconda copia da utilizzare qui.

Ci sono tre principali differenze tra questa combinazione e l'impostazione "Flickering".

  1. Il nodo 'Costante' è impostato su '6', il che significa che l'immagine sarà molto più luminosa.
  2. Il 'Periodo' del nodo 'Sine' è stato lasciato su '1', il valore predefinito.
  3. Questa impostazione utilizza l'uscita ROSSA dal campione di texture "Testo", anziché l'uscita NERA (l'uscita NERA è una combinazione dei canali ROSSO, VERDE e BLU, ma questa volta vogliamo solo il canale ROSSO).

Se guardi la finestra di anteprima materiale, abbiamo una versione in scala di grigi della parola "Fail" pulsata. Questa è una rappresentazione in bianco e nero di tutto ciò che sarà rosso nel nostro materiale finale. Raggruppa questi nodi e chiamali "PulsingRedFail"

Passaggio 21

Per unire tutto il nostro lavoro in un unico risultato a colori, utilizzare un nodo "Aggiungi" dall'elenco "Espressione materiale". Ciò consente di ricreare un'immagine multicanale da canali separati a 8 bit. Dovresti avere un bel "primo 1990" dall'aspetto verde con un avviso rosso lampeggiante in basso.

Se vedi una schermata verde acqua, controlla che il tuo gruppo "Barra orizzontale" sia impostato correttamente (e stai utilizzando solo il canale verde dall'esempio di trama "Panner")..

Risultati finali

Ecco il materiale finale e un aspetto che sembra applicato al modello.

Clicca sull'immagine per una versione ad alto rez


Ora dovresti avere una conoscenza di base del Material Editor in Unreal, insieme ad alcune esperienze con alcuni dei nodi più comuni. Ci sono molti effetti sorprendenti che puoi creare con questo strumento, quindi divertiti a sperimentare!