Ci sono due modi per creare un materiale UI personalizzato per il tuo progetto:
Raccolta materiale: raccolta di materiali con tutte le funzionalità UI predefinite nel materiale.
Materiale genitore personalizzato: un materiale creato da zero utilizzando le funzioni materiali.
Raccolta materiale
Raccolta materiale è una serie di contatori materiali e texture altamente personalizzabili. Puoi trovare la raccolta materiali in Esplora contenuti in Fortnite > UI > Materiali. I materiali sono suddivisi in due tipi:
Contatore materiali: in genere utilizzato come barre di avanzamento.
Texture: di solito si usano per le icone e i ritratti dei giocatori.
Il material_collection_device mostra come usare la raccolta materiale con Verse per visualizzare le texture e i materiali, oltre a usare i parametri delle istanze materiale per cambiare in modo dinamico i materiali dell'UI quando nel gioco si verificano eventi di danno.
Materiale genitore personalizzato
Per creare un Materiale genitore personalizzato per un Widget Immagine UMG, devi Imposta il Dominio Materiale su Interfaccia Utente per il Nodo Materiale principale. Questo materiale genitore utilizza le funzioni dei materiali che rendono il materiale più dinamico.
I Materiali vengono convertiti in Istanze di Materiale per garantire un riutilizzo efficiente del Materiale genitore e un’Interfaccia più intuitiva che permette di personalizzare i Parametri del Materiale. I Parametri del Materiale vengono quindi aggiornati nella UI tramite le Proprietà del Widget UMG.
Qualsiasi modifica apportata a un Materiale genitore dopo la conversione avrà propagazione in tutte le sue Istanze.
In Esplora contenuti, apri le cartelle UI > Dispositivi > Controller HUD > MaterialInstances. Trova e apri il materiale della barra degli scudi denominato MI_HCD01_ShieldBar facendo due volte clic sulla miniatura. Si apre l'istanza materiale nell'Editor istanza materiale.
Nella sezione precedente, Impostazione dei parametri del dispositivo, è stato spiegato come la proprietà Progress dell'istanza materiale è stata utilizzata per aggiornare la barra degli scudi nell'HUD quando un giocatore subisce danni da scudi o ripara il proprio scudo. Queste modifiche si ottengono utilizzando le informazioni sul giocatore del Controller HUD per indicare all'istanza materiale in che direzione scorrere sulla barra in base alle informazioni del giocatore.
Materiali
Il motivo per cui un'Istanza Materiale può ascoltare la funzione di un dispositivo risiede nel fatto che ha Parametri impostati nel Materiale genitore. I materiali dell'interfaccia utente utilizzano le funzioni materiale per creare ritmi o pattern a tempo nel materiale che possono essere sfruttati tramite le istanze materiale per aggiornare le informazioni sui giocatori nell'HUD.
Questo modello utilizza le stesse Funzioni materiali del progetto UI Material Lab. Per comprendere meglio i diversi tipi di funzioni materiali e il modo in cui sono stati utilizzati, consulta la pagina Analisi delle funzioni dei materiali del progetto UI Material Lab.
Di seguito è riportata una tabella che illustra i diversi materiali creati per il progetto e come utilizzarli.
| Elenco dei materiali di progetto | Utilizzo |
|---|---|
M_DropShadow | Crea un'ombra discendente da visualizzare sotto una forma. Consente di creare un quadrato, un cerchio, un esagono o una forma personalizzata (utilizzando una texture). Le forme personalizzate non consentono di ammorbidire l'ombra. |
M_IconWithbackground | Crea un'icona con uno sfondo e un contorno. |
M_Meter | Crea un misuratore a barra semplice per il dispositivo Interazione avanzata. |
M_Notches | Crea tacche decorative equidistanti. Utilizzato con M_Meter per creare un misuratore a barra con tacche per il dispositivo Interazione avanzata. |
M_ProgressBar_Basic | Crea una barra di avanzamento con angoli curvi o acuti con riempimento e contorno sfumati. |
M_ProgressBar_Orb | Crea una barra di avanzamento a forma di sfera che si riempie man mano che avanza. Ha una texture icona al centro del globo. |
M_Texture_Complex | Consente di ridimensionare e/o deformare una texture personalizzata. Ad esempio, può essere utilizzato per creare un effetto scintillio o sott'acqua. |
M_Texture_SImple | Permette di colorare texture semplici. Può essere utilizzato con una semplice texture in bianco e nero o una texture ricca di canali (utilizzando i canali RGB). |
M_Wave | Crea un'onda con bolle che fluttuano verso l'alto. |
Gruppi di parametri
Apri le diverse istanze di materiale dal modello per visualizzare i diversi parametri elencati nei gruppi di parametri. Questi sono i Parametri modificabili della Funzione materiali che possono essere associati ai dispositivi e aggiornati nell'HUD.
I gruppi di parametri possono essere modificati nell'Editor istanza materiale solo se sono contrassegnati da un segno di spunta.
Per modificare i parametri nell'Editor istanza materiale, apri Esplora contenuti e le cartelle UI > Dispositivi > SkilledInteraction > MaterialInstances, quindi trova e apri l'istanza materiale MI_SID03_Water.
Inizia modificando il colore dell'acqua, fai due volte clic sui parametri Colore liquido 1 e Colore liquido 2. Si apre la ruota dei colori. Cambia l'acqua in un colore diverso. Nell'esempio seguente, il colore dell'acqua è cambiato da blu a verde.
Osserva attentamente le bolle. Se hai selezionato la finestra Editor Istanza Materiale, dovresti vedere le bolle nel Materiale fluttuare verso l'alto. Puoi modificare la dimensione della bolla abilitando i parametri di dimensione BubblesStartSize e BubblesMiddleSize, quindi modificandone i parametri. Se la dimensione del parametro è troppo grande, le bolle sembrano scomparire dietro un muro.
Parametri come questi possono essere impostati nelle associazioni di visualizzazione e utilizzati dalle funzioni del dispositivo per aggiornare le informazioni sul giocatore.
Esegui la migrazione di istanze di materiale e asset di texture da utilizzare nei tuoi progetti.
Texture
Le texture vengono utilizzate nella UI per aggiungere dettagli e rifiniture che non sono possibili con i soli materiali. Se decidi di utilizzare le texture nei progetti delle tue UI, tieni presente che le texture richiedono molta memoria.
Utilizzando la texture di interazione avanzata e la combinazione di campioni di texture e materiale, puoi vedere quanto della UI è composta da texture. Nell'esempio Texture, quando disattivi il widget Backplate, le uniche parti della UI rimaste visibili sono il messaggio, la barra della salute e il contatore delle eliminazioni.
Il metodo preferito per creare l'aspetto delle caselle stilizzate sulla piastra posteriore è utilizzare una texture. La complessità del design e della forma sarebbe difficile da riprodurre in UMG. I materiali UI si possono utilizzare solo per creare forme primitive di base, aggiungere un tratto attorno alla forma del materiale e aggiungere gradienti alla forma e al tratto del materiale.
L'esempio di UI con materiale e texture mostra come la fusione di texture e materiali crea un aspetto raffinato per la UI. L'interfaccia utente è composta da tre texture che compongono il design della piastra posteriore e l'immagine della creatura.
L'immagine della creatura è posizionata sopra un widget Immagine. Il widget Immagine non utilizza un'istanza materiale. Invece, l'opzione Pennello crea un rettangolo bianco sul livello sotto l'immagine della creatura. Le dimensioni del rettangolo sono controllate nel pannello Dettagli utilizzando le Opzioni Dimensione immagine.
Nel pannello Gerarchia, i widget che precedono gli altri nell'elenco si trovano sul livello di sfondo, con ogni widget aggiuntivo sopra il widget precedente nell'elenco.
Un'istanza materiale viene utilizzata come ombra discendente per la fotografia della creatura nel progetto.
Texture SDF
Campo di Distanza Firmato (SDF) è una funzione che utilizza la posizione come input e restituisce la distanza da tale posizione. Ad esempio, nell'immagine sottostante il centro della radiale è 1, che significa completamente bianco, ma man mano che avanza verso il bordo, passa a 0, completamente nero. Utilizzando questo concetto, le SDF forniscono un modo per specificare un intervallo di valori compreso tra 0 e 1 per applicare un effetto.
Ciò significa che puoi:
Ottieni valori compresi tra 0.5 e 1.0 e applica un colore pieno.
Ottieni valori compresi tra 0.49 e 0.0 e applica un colore di dissolvenza che imita un bagliore.
Le texture normali non lo fanno perché le texture normali sono 1 (bianco) o 0 (nero). Gli SDF forniscono tutti i dati compresi tra 0 e 1.
Questi concetti si possono applicare anche alla fotografia. Se una fotografia viene salvata come file .png e a cui sono applicati effetti B.A.S.E., ma non c'è una gamma completa di dettagli di colore e illuminazione nell'immagine, quindi c'è meno personalizzazione che si può fare con l'immagine perché la modifica dell'immagine per renderla più luminosa o più scura può causare la perdita di dettagli o farli saltare in aria.
Se la stessa immagine è stata scattata con una fotocamera DSLR, il file raw, che contiene tutte le informazioni su colore e illuminazione, può essere personalizzato in base al livello di granularità, ad esempio rendendo più luminose le parti scure senza perdere i dettagli all'interno di quelle aree scure e viceversa.
Cerca nelle cartelle UI > Texture > SDF per visualizzare l'anteprima completa delle texture SDF per creare la tua UI dall’aspetto unico.
C'è una cartella chiamata Icone piene di icone SDF.
Texture SDF nei materiali
La maggior parte dei materiali UI sono materiali 2D piatti che utilizzano valori binari di 0 e 1 per definire l'esterno e il centro del materiale. Nei materiali 2D. Quando le texture SDF vengono utilizzate in un nodo Campione texture e abbinate a una funzione materiale SDF, è possibile modificare la UI manipolando alcuni valori nel materiale UI.
La modifica di valori diversi in un materiale UI utilizzando texture SDF e nodi materiale produce alcuni effetti diversi, come ad esempio:
Ombre
Sfocatura
Bagliore
Brilla
Contorni
Animazioni
Ridimensionamento
Le Texture SDF rendono i Materiali UI più dinamici e univoci perché consentono di scala facilmente senza perdere qualità, mentre gli asset normali perdono qualità quando vengono ridimensionati. Le Texture SDF hanno una migliore ottimizzazione per creare facilmente tutti gli effetti B.A.S.E. utilizzando una sola Texture, creando un Grafico materiale più pulito.
D'altra parte, le normali Texture in bianco e nero non sono facilmente manipolabili nel Grafico materiale e ricorrono all'utilizzo di più Texture. Nell'immagine qui sopra, il modo più semplice per aggiungere un bagliore alle Texture è sovrapporre la Texture a un gradiente radiale, invece di creare un Grafico materiale dettagliato per ottenere un Risultato simile.
Nodo Materiale Step liscio
I nodi dei materiali di tipo Step di solito creano direttamente una transizione dura nei materiali, ad esempio da 0 a 0.25. Il nodo Step graduale, invece, utilizza le funzioni SDF per creare una transizione graduale nei materiali della UI. I materiali UI nel modello che utilizzano texture SDF utilizzano il nodo materiale Step uniforme per creare una transizione graduale dal centro del materiale al bordo esterno.
Takeaway
Ecco alcuni aspetti chiave per l'utilizzo di materiali e texture per gli asset UI:
L'utilizzo di Funzioni materiali consente di risparmiare tempo con nodi Materiale predefiniti che fanno riferimento a funzioni nei Materiali della barra della salute e dello scudo e Materiali UI della backplate che li fanno reagire agli Eventi nel gioco.
I materiali e le texture SDF creano un'interfaccia utente dall'aspetto più dinamico.
Comprendere come sovrapporre i widget immagine fa la differenza tra una UI dall'aspetto semplice e una UI visivamente più interessante.
Le texture devono essere utilizzate per gli elementi di un progetto che sono visivamente complessi e non possono essere prodotti con i materiali.