Il materiale dell'indicatore è perfetto per l'utilizzo nella UI. Questo materiale può essere utilizzato come riferimento in un widget Immagine UMG per tenere traccia del tuo stato di salute, delle eliminazioni o della raccolta di beni e valuta nel gioco. Utilizza questo tutorial per creare il tuo materiale dell'indicatore e utilizzarlo in una progettazione di UI personalizzata.
Questo materiale può sovrascrivere l'aspetto predefinito di Fortnite con il materiale personalizzato che crei per tenere traccia della salute dei giocatori, degli scudi o di altro tipo di statistica incentrata sul giocatore.
Il materiale utilizza icone nel suo design. Unreal Editor per Fortnite (UEFN) include nativamente numerose icone. Trova le icone nelle cartelle Fortnite Texture > Icone.
Crea un materiale
Tutti i materiali vengono creati in Esplora contenuti. Per organizzare il tuo progetto, crea una cartella per ospitare tutti i tuoi materiali.
Fai clic con il pulsante destro del mouse in Esplora contenuti per aprire il menu contestuale.
Seleziona Materiale dal menu contestuale.
Assegna un nome al tuo materiale M_Meter.
Fai doppio clic sulla miniatura del materiale per aprire l'Editor materiali.
Per creare il materiale dell'indicatore, dovrai scaricare il Laboratorio materiali UI da Fab.
Per maggiori informazioni sui nodi del materiale e sul loro funzionamento, consulta Nodi e impostazioni dei materiali.
Nodi materiale
Di seguito è riportato un elenco dei nodi del materiale utilizzati in questo tutorial e il loro scopo nel prodotto finale. Per saltare questa spiegazione e iniziare a creare il materiale, fai clic qui.
| Nodo materiale | Finalità |
|---|---|
Aggiunge un colore all'icona e al riempimento di avanzamento. | |
Utilizzato per aggiungere una maschera di sfondo sotto all'icona. Utilizzato anche come barra di avanzamento per mascherare lo sfondo in base all'avanzamento. | |
Fornisce un modo per aggiungere una texture al materiale della UI. | |
Utilizzata per sovrapporre l'icona colorata a un colore di sfondo e per creare la maschera dell'icona sopra allo sfondo. | |
Genera le coordinate della texture UV dell'icona sotto forma di un valore vettoriale a due canali. | |
Funzione materiali > Scala UI | Le funzioni di texture sono una sottocategoria del Nodo della funzione materiali. Ciò fornisce un modo per ridimensionare gli UV dell'icona. |
Funzione materiali > Cerchio SDF UI | Fornisce un modo per mascherare la barra di avanzamento dietro all'icona e la parte del cerchio che si riempie con il colore di sfondo. In genere, questa funzione materiale viene utilizzata per disegnare un cerchio nel materiale. Può essere sostituita con altre funzioni del materiale Forma SDF (ad esempio, Casella SDF UI) da Laboratorio materiali UI per generare una forma diversa. |
Utilizzato per scalare gli assi X e Y dell'icona in modo uniforme, a cui aggiungiamo 2 parametri scalari. 1 per ridimensionare la X dell'icona e un altro per la Y dell'icona e collegarli a MF_UI_Scale. | |
Le UV dell'icona sono fissati tra 0 e 1 per garantire che l'icona non esegua il wrapping o sia affiancata. | |
Utilizzato per creare un intervallo da 0 a 10 per il parametro scalare Avanzamento sul dispositivo Tracciatore. ConstantBiasScale prende il valore impostato dal parametro, sottrae il valore di Bias e lo moltiplica per il valore di scala. | |
Un nodo Moltiplica prende due input, li moltiplica e restituisce il risultato. In questo esempio, i canali RGB di una texture vengono moltiplicati per un nodo Vector3 per colorare lo sfondo. Inoltre, il LinearGradient viene moltiplicato per un Vector3 per colorare l'icona. | |
Step | Crea una soglia per le coordinate X e Y. La soglia crea un contenitore per il materiale di sfondo nella UI. I nodi Step portano i valori al di sopra di una soglia a 1 e quelli al di sotto della soglia a 0. Ciò genera la maschera di una barra di avanzamento in cui c'è una netta separazione tra un'area piena e non piena. |
Prende i valori UGradient di Linear Gradient, li arrotonda al numero intero successivo e genera il risultato. Questo ci permette di creare facilmente uno sfondo pieno di base. | |
Costante | Fornisce un modo per aggiungere un valore a un attributo del materiale. |
Prepara il nodo del materiale principale
Prima di aggiungere qualsiasi nodo del materiale, prepara il materiale da utilizzare nella UI modificando le impostazioni del Nodo del materiale principale (MMN). Le impostazioni del MMN determinano quali input sono disponibili nel MMN e dove è possibile utilizzare il materiale.
Seleziona il nodo MMN.
Nel pannello Dettagli dell'Editor materiali, imposta il Dominio materiali su Interfaccia utente.
Imposta la Modalità di fusione su Traslucida.
Fai clic sull'immagine per ingrandirla.
Configura il Colore di avanzamento
Avvia il materiale dell'indicatore configurando il Colore di avanzamento, che può essere identificato in UMG tramite il widget Immagine. Puoi utilizzare questo colore di avanzamento per creare un design UI personalizzato.
Fai clic con il pulsante destro del mouse nel Grafico dei materiali per aprire il menu dei nodi.
Digita Gradiente lineare nella barra di ricerca. Seleziona LinearGradient nel menu a discesa. Il nodo viene visualizzato nel grafico.
Ripeti i passaggi uno e due per aggiungere i nodi seguenti al Grafico dei materiali:
Limite
Moltiplica
Constant3vector
Trascina il pin bianco del nodo Constant3Vector e collegalo all'input A del nodo Moltiplica. La forma nella viewport cambia colore.
Seleziona il nodo del materiale Constant3Vector nel Grafico dei materiali. Il nodo viene evidenziato nel grafico per indicare che è stato selezionato.
Fai clic sul quadrato nero del nodo per aprire la Ruota dei colori. Seleziona un colore del materiale dalla Ruota dei colori.
Trascina il pin UGradient del nodo Gradiente lineare e collegalo all'input sinistro del nodo Limite.
Trascina il pin destro del Limite e collegalo all'input B del nodo Moltiplica.
Questa configurazione del nodo fornisce il colore del contenitore UI.
Fai clic con il pulsante destro del mouse sull'area del grafico e aggiungi un nodo LinearInterpolate al grafico.
Trascina il nodo Moltiplica e collegalo all'input A del primo nodo LinearInterpolate.
Questa parte del materiale viene utilizzata per tracciare l'avanzamento in un indicatore riempiendo lo sfondo di un contenitore.
Per raggruppare i nodi e spostarli come un'unità, procedi nel modo seguente:
Fai clic con il pulsante sinistro del mouse e trascina un gruppo di nodi. Tutti i nodi selezionati vengono evidenziati.
Afferra un nodo e trascina il grafico: tutti i nodi selezionati si muovono insieme come un unico pezzo.
Imposta il ridimensionamento e il colore delle icone
Per questa sezione del materiale sceglierai e ridimensionerai un'icona e selezionerai un colore per l'icona nel materiale e nella UI. Le icone si trovano nelle cartelle Fortnite > Texture > Icone.
Fai clic con il pulsante destro del mouse nell'area del grafico e aggiungi i seguenti nodi al grafico:
TextureCoordinate
AppendVector
Fissa
TextureSample
Constant3vector
Moltiplica
Costante
Seleziona il nodo Costante nel grafico, quindi fai clic con il pulsante destro del mouse e seleziona Duplica nel menu a discesa. Sul primo nodo viene visualizzato un altro nodo Costante. Sposta il duplicato sotto l'originale.
Duplica il nodo Moltiplica.
Duplica il nodo LinearInterpolate (Lerp).
Seleziona il nodo Costante superiore nel grafico e aggiungi un Valore predefinito di 0,7 .undefined
Fai clic con il pulsante destro del mouse sul nodo e seleziona Converti in parametro nel menu a discesa. Denomina il parametro IconScaleX. Questo nodo controllerà la dimensione della scala delle coordinate X dell'icona.
Seleziona il nodo Costante inferiore nel grafico e aggiungi un Valore predefinito di 0,7.
Fai clic con il pulsante destro del mouse sul nodo e seleziona Converti in parametro nel menu a discesa. Denomina il parametro IconScaleY. Questo nodo controllerà la dimensione della scala delle coordinate Y dell'icona.
Trascina il nodo parametro IconScaleX e collegalo all'input A del nodo AppendVector.
Trascina il nodo parametro IconScaleY e collegalo all'input B del nodo AppendVector.
I valori X e Y di IconScale impostati nel nodo parametro si possono controllare all'esterno del materiale quando vengono convertiti in un'istanza materiale.
Successivamente, dovrai creare un nodo Funzione materiali per aggiungere una funzione al materiale che ridimensiona le UV dell'icona.
Imposta una Funzione materiali: UI_Scale
In questo step imparerai come creare una funzione materiale e cercare le funzioni da utilizzare con il nodo.
Fai clic con il pulsante destro del mouse sul grafico e digita MaterialFunction nella barra di ricerca. Seleziona MaterialFunctionCall nel menu a discesa. Il nodo MaterialFunctionCall viene visualizzato nel grafico.
Nel pannello Dettagli, fai clic sul menu a discesa Funzione materiali e digita UI_Scale nella barra di ricerca, quindi seleziona MF_UI_Scale nel menu a discesa. Il nodo MaterialFunctionCall si trasforma nel nodo Scala UI.
La funzione UI_Scale consente di aumentare o diminuire la scala delle UV dell'icona utilizzando le Funzioni materiali. Le Funzioni materiali si possono utilizzare solo in un materiale tramite il nodo Funzione materiali.
Configura UV icone
Successivamente, aggiungi un'icona e un colore di icona al materiale che viene ridimensionato quando si acquisiscono le informazioni dai parametri e dal ridimensionamento UI.
Trascina il nodo TextureCoordinate e collegalo all'input UV (V2) del nodo MF_UI_Scale.
Trascina il nodo AppendVector e collegalo all’input Scala (V2) del nodo MF_UI_Scale.
Trascina il pin Risultato sul nodo MF_UI_Scale e collegalo all'input bianco del nodo Fissaggio.
Seleziona il nodo Campione di texture per aprirne le opzioni nel pannello Dettagli.
Apri il menu a discesa Texture.
Digita "icona" nella barra di ricerca.
Seleziona un'icona nel menu a discesa.
Trascina il pin bianco del nodo Fissaggio e collegalo all'input UV del nodo Campione texture.
Trascina il pin RGB del Campione texture e collegalo all'input A del primo nodo Moltiplica.
Trascina il pin A del Campione texture e collegalo all'input B del primo nodo Moltiplica.
Trascina di nuovo il pin A del nodo Campione texture e collegalo all'input Alpha del secondo nodo LinearInterpolate (Lerp).
Trascina il primo nodo Moltiplica e collegalo all'input B del secondo nodo Moltiplica.
Seleziona il nodo Constant3Vector per aprirne le opzioni nel pannello Dettagli.
Fai clic nel campo Costanteper aprire la Ruota dei colori.
Seleziona un colore per l'icona nella Ruota dei colori.
Trascina il pin bianco del nodo Constant3Vector e collegalo all'input A del secondo nodo Moltiplica.
Trascina il pin bianco del secondo nodo Moltiplica e collegalo all'input B sul primo nodo LinearInterpolate (Lerp).
Trascina il pin bianco del primo nodo Moltiplica e collegalo all'input Alpha del primo nodo LinearInterpolate (Lerp).
Trascina il pin bianco del primo nodo Moltiplica e collegalo all'input B sul secondo nodo LinearInterpolate (Lerp).
Trascina il pin bianco del primo nodo LinearInterpolate (Lerp) nell'input Colore finale del nodo Materiale principale.
L'icona appare ora nella finestra di anteprima del materiale.
Successivamente, imposta la maschera della barra di avanzamento. Ciò funziona rivelando solo la parte del materiale che corrisponde all'aumento delle eliminazioni, proprio come nella gif qui sotto.
Configura una maschera della barra di avanzamento
L'ultimo step del materiale è la creazione di una maschera della barra di avanzamento che si può richiamare in un widget o nel Sequencer per animare il materiale della UI e far sì che la barra di avanzamento si riempia con il colore del materiale mentre il giocatore elimina i nemici.
Devi creare spazio per la serie successiva di nodi. Seleziona tutti i nodi attualmente esistenti facendo clic con il pulsante sinistro del mouse e trascinandoli intorno, quindi spostali a sinistra come gruppo.
Dovrai collegare la maschera configurata al secondo nodo LinearInterpolate (Lerp). Seleziona il secondo nodo LinearInterpolate (Lerp) e spostalo a destra verso il Nodo materiale principale. Di seguito è riportato l'aspetto che deve avere la configurazione del nodo a questo punto.
Fai clic sull'immagine per ingrandirla.
Per questa sezione del materiale, devi mascherare le proprietà del materiale in base alle coordinate X e Y nel contenitore. Queste coordinate verranno utilizzate anche per rivelare il materiale man mano che aumentano le eliminazioni dei giocatori.
Fai clic con il pulsante destro del mouse nell'area del grafico e aggiungi i seguenti nodi al grafico:
Costante
ConstantBiasScale
LinearGradient
Step
Moltiplica
Seleziona il nodo Costante, fai clic con il pulsante destro del mouse sul nodo e seleziona Duplica nel menu a discesa.
Seleziona il primo nodo Costante e assegnagli un valore di 5,0.
Fai clic con il pulsante destro del mouse sul nodo e seleziona Trasforma in parametro.
Denomina il parametro TrackerProgress.
Questo parametro viene utilizzato in UMG e Sequencer per tracciare le eliminazioni dei giocatori e far sì che il materiale venga rivelato nel contenitore.
Trascina il pin bianco del nodo Avanzamento del tracciatore e collegalo al nodo ConstantBiasScale.
Seleziona il nodo ConstantBiasScale e, nel pannello Dettagli, imposta il valore Bias su 0 e la scala su 0,1. Ciò normalizza TrackerProgress al valore 0-10 del Tracciatore.
Trascina il nodo ConstantBiasScale e collegalo all'input Y del nodo Step.
Trascina il pin VGradient del nodo LinearGradient e collegalo all'input X del nodo Step.
Trascina il pin bianco del nodo Step e collegalo all'input B del nodo Moltiplica.
Seleziona il secondo nodo Costante e assegnagli un valore di 0,9.
Fai clic con il pulsante destro del mouse sul grafico e digita MaterialFunctionCall nella barra di ricerca.
Seleziona il nodo Funzione materiali in modo che le relative opzioni si aprano nel pannello Dettagli.
Digita UI_SDF_Circle nella barra di ricerca.
Seleziona UI_SDF_Circle nel menu a discesa.
Questa funzione del materiale controlla le dimensioni del contenitore attraverso il nodo Costante e determina la forma del contenitore del materiale. In questo caso, si tratta di un contenitore circolare.
Trascina il secondo nodo Costante e collegalo all'input Dimensioni del nodo MF_UI_SDF_Circle.
Trascina il pin di Riempimento del nodo MF_UI_SDF_Circle e collegalo all'input A del nodo Moltiplica.
Trascina il pin bianco del nodo Moltiplica e collegalo all'input A del secondo nodo LinearInterpolate (Lerp).
Trascina il pin bianco del secondo nodo LinearInterpolate (Lerp) e collegalo all'input Opacità del Nodo materiale principale.
Il materiale è completo, la configurazione completa del nodo deve essere simile all'immagine seguente.
Fai clic sull'immagine per ingrandirla.
Per utilizzare questo materiale con UMG, trasformalo in un'istanza materiale. I parametri di un'istanza materiale possono essere sovrascritti, attivati o disattivati e richiamati in UMG e Sequencer per animare la UI con cui viene utilizzato il materiale.
Per creare un'istanza materiale:
Fai clic con il tasto destro del mouse sulla miniatura del materiale in Esplora contenuti.
Seleziona Crea istanza materiale nel menu a tendina.