La personalizzazione delle texture della UI richiede molto tempo e una profonda conoscenza delle funzioni materiali e delle impostazioni. Per rendere più accessibili le texture della UI personalizzate, Unreal Editor per Fortnite (UEFN) ha una serie di texture altamente personalizzabili.
Cartelle materiali UI
La cartella Materiali UI si trova in Esplora contenuti sotto Fortnite > UI > Materiali.
La cartella Materiali contiene due tipi di materiali UI:
Materiali del misuratore: in genere utilizzato per misurare salute e scudi. (Consulta le Raccolte di materiali dell'interfaccia utente per maggiori informazioni.)
Texture: utilizzate tipicamente come immagine di sfondo o nelle animazioni della UI.
Le texture appartengono alle seguenti categorie di parametri:
Texture SDF | Effetti di texture | Maschera texture |
Forma texture con contorno sfocato. Puoi impostare parametri personalizzabili:
Puoi anche ruotare e sfumare le texture. | Una Texture con 9 diversi effetti speciali personalizzabili. Tutti gli effetti sono guidati da funzioni materiali che puoi personalizzare utilizzando gli input dei parametri. | Una maschera texture nasconde parti della texture in base ai tuoi input. Puoi impostare parametri che consentono di personalizzare:
|
 |  |  |
Creazione di un'istanza materiale
Per utilizzare una texture dalla cartella UI, devi prima trasformarla in un'istanza materiale. Le istanze di materiale utilizzano meno memoria rispetto ai materiali o texture e sono molto più personalizzabili in UMG grazie ai parametri disponibili.
I parametri vengono manipolati nel modello di visualizzazione dove sono limitati a una funzione del dispositivo o al codice Verse che manipola il materiale affinché si comporti in un determinato modo.
Per creare un'istanza di un materiale, segui questi passaggi:
Apri le cartelle Progetto > Fortnite > UI > Materiali.
Fai clic sull'immagine per ingrandire. Fai clic con il pulsante destro del mouse su un materiale per aprire il menu contestuale a discesa.
Seleziona Crea istanza materiale nel menu a tendina.
Fai clic sull'immagine per ingrandire.
Un'istanza materiale viene generata automaticamente nella cartella principale del progetto.
Texture SDF
La texture SDF può sovrascrivere l'immagine dell'icona avatar predefinita del giocatore o essere usata per l'iconografia. Una texture SDF ha una serie di parametri personalizzabili che puoi usare per determinare l'aspetto dell'icona, rendere l'icona sfocata o nitida, creare un effetto bagliore per far sembrare l'icona un'insegna al neon e altro ancora.
Tutti i parametri di una texture si possono usare con il modello di visualizzazione in UMG e nel codice Verse tramite i campi Verse. Consulta la tabella seguente per saperne di più sull'uso dei diversi parametri.
Base R.S.O.
I parametri principali per la texture SDF.
Parametro | Descrizione | GIF |
Texture | Seleziona una texture SDF dal menu a discesa. | |
Colore | Scegli un colore per la texture. |  |
Bagliore max | Aumenta e diminuisce il bagliore del bordo della forma. Valori più vicini a 0 solidificano il contorno della forma. Valori più vicini a 1 aumentano il bagliore del contorno della forma. I parametri GlowMax aggiuntivi dipendono dal valore GlowMax. |  |
Rotazione | Ruota la texture dal centro. Un valore di 0,25 ruota la texture di 90 gradi a sinistra. Un valore di -0.25 ruota di 90 gradi a destra. |  |
Quantità di sfumatura texture | Determina la quantità di sfumatura da applicare ai bordi della texture SDF quando sono usati i parametri GlowMax. Valori alti aumentano la quantità di sfumatura, mentre valori bassi la diminuiscono. |  |
Colore dell'ombra
Determina il colore dell'ombra della texture.
Parametro | Descrizione | GIF |
Bagliore ombra max | Determina quanto bagliore ha l'ombra della texture. Valori più vicini a s0 solidificano il contorno della forma. Valori più vicini a 1 aumentano il bagliore del contorno della forma. |  |
Offset ombra X | Determina la quantità di offset dell'ombra della texture lungo l'asse X. Valori più alti allontanano l'ombra dalla texture. Valori più bassi avvicinano l'ombra alla texture. |  |
Offset ombra Y | Determina la quantità di offset dell'ombra della texture lungo l'asse Y. Valori più alti allontanano l'ombra dalla texture. Valori più bassi avvicinano l'ombra alla texture. |  |
Opacità ombra | Determina l'opacità dell'ombra della texture. Valori più vicini a 1 aumentano l'opacità del colore selezionato. Valori più vicini a 0 diminuiscono l'opacità del colore. |  |
Rotazione ombra | Ruota l'ombra della texture dal centro. Un valore di 0.25 ruota l'ombra della texture di 90 gradi a sinistra. |  |
Spessore ombra | Determina lo spessore dell'ombra della texture. Valori più alti aumentano lo spessore dell'ombra. Valori inferiori riducono lo spessore. |  |
Vogata
I parametri che influenzano l'aspetto del tratto della texture.
Parametro | Descrizione | GIF |
Colore tratto interno | Determina il colore del tratto interno della texture. |  |
Bagliore tratto interno max | Determina la quantità massima di bagliore del contorno interno della texture. InnerStrokeGlowMax dipende dal valore GlowMax. Il valore massimo di GlowMax impostato determina il valore massimo di bagliore per InnerStrokeGlowMax e OuterStrokeGlowMax. |  |
Spessore tratto interno | Determina lo spessore del tratto interno. Valori più alti aumentano lo spessore del tratto, mentre valori più bassi lo riducono. |  |
Bagliore spessore tratto interno max | Determina lo spessore del bagliore del tratto interno della texture. Valori più alti aumentano lo spessore del bagliore del tratto, mentre valori più bassi riducono lo spessore del bagliore del tratto interno della texture. InnerStrokeThicknessGlowMax dipende dal valore GlowMax. Il valore massimo di GlowMax impostato determina il valore massimo di bagliore per InnerStrokeGlowMax, InnerStrokeThicknessGlowMax e OuterStrokeGlowMax. |  |
Colore tratto esterno | Determina il colore del tratto esterno. |  |
Bagliore tratto esterno max | Determina quanto deve brillare il tratto esterno della texture. Valori più vicini a 0 solidificano il contorno della forma. Valori più vicini a 1 aumentano il bagliore del contorno della forma. OuterStrokeGlowMax dipende dal valore GlowMax. Il valore massimo di GlowMax impostato determina il valore massimo di bagliore per InnerStrokeGlowMax, InnerStrokeThicknessGlowMax e OuterStrokeGlowMax. |  |
Spessore tratto esterno | Determina lo spessore del contorno esterno della texture. Valori più alti aumentano lo spessore del tratto, mentre valori più bassi lo riducono. |  |
Bagliore spessore tratto esterno max | Determina lo spessore del bagliore del contorno esterno della texture. Valori più alti aumentano lo spessore del bagliore del tratto, mentre valori più bassi lo riducono. |  |
Effetti di texture
Gli effetti di texture includono una serie di effetti personalizzabili che possono trasformare l'aspetto della texture:
Unità
Distorsione
Pixelizzare
Rimbalza
Semitono
Gradiente a gradini
E molto altro ancora...
I parametri possono essere combinati e mirati con il modello di visualizzazione in UMG e nel codice Verse tramite i campi Verse. Consulta la tabella seguente per saperne di più sui diversi parametri.
Texture di base
I parametri di base della texture. Seleziona una texture dal menu a discesa.
Parametro | Descrizione | GIF |
Texture | Seleziona una texture dal menu a discesa. |  |
Tiling X | Aggiunge tile alla texture lungo l'asse X. Un valore pari a 1 non aggiunge tile alla texture. Valori superiori a 1 aggiungono tile lungo l'asse X. È meglio usare numeri interi per questo parametro per avere immagini complete. |  |
Tiling Y | Aggiunge tile alla texture lungo l'asse Y. Un valore pari a 1 non aggiunge tile alla texture. Valori superiori a 1 aggiungono tile alla texture lungo l'asse Y. È meglio usare numeri interi per questo parametro per avere immagini complete |  |
Trasla X | Sposta la texture lungo l'asse X. Puoi animare la texture mirando il parametro Trasla X con il Sequencer all'interno di UMG. |  |
Trasla Y | Sposta la texture lungo l'asse Y. Puoi animare la texture mirando il parametro Trasla Y con il Sequencer all'interno di UMG. |  |
Trasla velocità X | Determina la velocità di traslazione lungo l'asse X. |  |
Trasla velocità Y | Determina la velocità di traslazione lungo l'asse Y. |  |
Ridimensionamento
Parametri che ti permettono di modificare la scala e le dimensioni della texture. Crea un effetto martellante sulla texture.
Parametro | Descrizione | GIF |
Sta ridimensionando | Determina l'effetto di scala sulla texture. Questa opzione è visibile solo quando sono in uso anche gli altri parametri di ridimensionamento. |  |
Velocità scala massima | Determina la velocità massima dell'effetto di scala sulla texture. |  |
Velocità scala minima | Determina la velocità minima dell'effetto di scala sulla texture. |  |
Dimensione avvio | Dimensioni della texture all'inizio dell'animazione. |  |
Dimensione media | La dimensione della texture nel mezzo dell'animazione. |  |
Dimensione finale | La dimensione della texture alla fine dell'animazione. |  |
Deformazione
Parametri che permettono di aggiungere un effetto di deformazione alla texture.
Per modificare l'aspetto di un'icona, è necessario utilizzare parametri Deformazione aggiuntivi insieme al parametro IsWarping.
Parametro | Descrizione | GIF |
Sta deformando | Determina la quantità di effetto di deformazione sulla texture. |  |
Ampiezza X | Applica un effetto di allungamento lungo l'asse X. |  |
Ampiezza Y | Applica un effetto di allungamento lungo l'asse Y. |  |
Frequenza X | Applica un effetto onda sinusoidale alla texture lungo l'asse X. |  |
Frequenza Y | Applica un effetto onda sinusoidale alla texture lungo l'asse Y. |  |
Velocità distorsione | Determina la velocità con cui l'effetto distorsione agisce sulla texture. |  |
Pixelizzare
Parametri che permettono di pixelizzare l'aspetto della texture.
Parametro | Descrizione | GIF |
È pixelato | Aggiunge un effetto pixel alla texture. Un valore pari a 0 non applica l'effetto pixel alla texture. Un valore di 1 pixelizza completamente la texture. |  |
Numero di pixel | Determina il numero di pixel della texture. Un valore pari a 1 trasforma la texture in un quadrato. L'aggiunta di altri pixel crea una forma pixelata. |  |
Rimbalza
Parametri che consentono di aggiungere un effetto di rimbalzo alla texture.
Parametro | Descrizione | GIF |
Sta rimbalzando | Determina il tasso di rimbalzo dell'effetto. Questa opzione è visibile solo quando sono in uso anche gli altri parametri di rimbalzo. |  |
Velocità di rimbalzo | Determina la velocità con cui la texture rimbalza. |  |
Rimbalzo X | Determina la quantità di effetto di rimbalzo da applicare lungo l'asse X. |  |
Rimbalzo Y | Determina la quantità di effetto di rimbalzo da applicare lungo l'asse Y. |  |
Semitono
Parametri che creano un effetto a punti di inchiostro in stile fumetto sulla texture.
Parametro | Descrizione | GIF |
È semitono | Determina se l'effetto è in uso e l'opacità dell'effetto semitono. Valori più alti aumentano l'opacità dell'effetto, mentre valori più bassi diminuiscono l'opacità dell'effetto. |  |
Densità dei punti | Aumenta la densità dei punti nell'effetto. Valori più alti aumentano il numero di punti e ne diminuiscono le dimensioni. Valori inferiori diminuiscono il numero di punti e aumentano la dimensione dei punti. |  |
Bagliore punto max | Determina la quantità massima di bagliore applicato intorno ai punti. Valori positivi fanno sembrare i punti come stelle, valori negativi fanno sembrare i punti come cerchi. |  |
Bagliore punto min | Determina la quantità minima di bagliore intorno ai punti. I valori si possono utilizzare per cambiare il colore dello sfondo e dei punti. Valori pari o superiori a 5 determinano la dissolvenza dell'effetto in un unico colore. Allo stesso modo, valori inferiori a -7 fanno sì che l'effetto sfumi in un colore. |  |
Dimensione punto max | Determina la dimensione massima dei punti. |  |
Dimensione punto min | Determina la dimensione minima dei punti. |  |
Colore gradiente 1 | Determina il colore primario dell'effetto semitono. |  |
Colore gradiente 2 | Determina il colore secondario dell'effetto semitono. |  |
Velocità panoramica semitono X | Determina la velocità con cui i punti percorrono l'asse X. |  |
Velocità panoramica semitono Y | Determini la velocità con cui i punti si muovono lungo l'asse Y. |  |
Rotazione dei semitoni | Ruota la direzione in cui viaggiano i punti. |  |
Gradiente a gradini
Parametri che consentono di aggiungere un gradiente graduale alla texture.
Questi parametri dipendono dai parametri di Colore tinta.
Parametro | Descrizione | GIF |
È un gradiente a gradini | Determina se l'effetto di gradiente a gradini è applicato alla texture. |  |
Quantità di gradiente a gradini | Determina la quantità di gradiente a gradini da applicare alla texture. IsSteppedGradient deve essere abilitato con un valore inferiore a 1.0 affinché questo parametro funzioni. |  |
Colore tinta
Questi parametri ti permettono di aggiungere colori alla texture per creare un effetto gradiente sulla texture.
Parametro | Descrizione | GIF |
Opacità gradiente tinta | Determina l'opacità dei colori nel gradiente. Valori più bassi diminuiscono l'opacità della texture, mentre valori più alti aumentano l'opacità del materiale. |  |
Colore tinta 1 | Determina il primo colore del gradiente. |  |
Posizione colore tinta 1 | Determina la posizione del primo colore nel gradiente. Questa opzione funziona solo quando l'opzione TintGradientOn è selezionata e un valore è impostato. |  |
Colore tinta 2 | Determina il secondo colore del gradiente. |  |
Posizione colore tinta 2 | Determina la posizione del secondo colore nel gradiente. Valori più alti spostano il gradiente in modo che inizi dal lato opposto. Valori più bassi aumentano la visibilità della seconda selezione di colore. Questa opzione funziona solo quando l'opzione Tint GradientOn è selezionata e un valore è impostato. | |
Colore tinta 3 | Determina il terzo colore del gradiente. | |
Posizione colore tinta 3 | Determina la posizione del secondo colore nel gradiente. Valori più alti spostano il gradiente in modo che inizi dal lato opposto. Valori più bassi aumentano la visibilità della seconda selezione di colore. Questa opzione funziona solo quando l'opzione TintGradientOn è selezionata e un valore è impostato. | |
Gradiente tinta attivato | Determina se l'effetto gradiente viene applicato alla texture. | |
Rotazione gradiente tinta | Ruota la direzione del gradiente. |  |
Gradiente radiale tinta | Trasforma il gradiente in un gradiente radiale. | |
Dimensione gradiente radiale tinta | Determina la dimensione del gradiente radiale. |
Colore Alpha
Parametri che ti permettono di aggiungere trasparenza, colore e gradiente a una texture con Alpha e altre caratteristiche.
Questi parametri funzionano meglio su texture a colori, come l'immagine di un carattere, o una texture in bianco e nero.
Parametro | Descrizione | GIF |
Opacità Alpha | Determina l'opacità dei colori Alpha sulla texture. Valori più bassi diminuiscono l'opacità della texture, mentre valori più alti aumentano l'opacità del materiale. |  |
Colore Alpha 1 | Determina il primo colore del gradiente. |  |
Posizione colore Alpha 1 | Determina la posizione del primo colore nel gradiente. Questa opzione funziona solo quando l'opzione AlphaGradientOn è selezionata e un valore è impostato. |  |
Colore Alpha 2 | Determina il secondo colore del gradiente. |  |
Posizione colore Alpha 2 | Determina la posizione del secondo colore nel gradiente. Valori più alti spostano il gradiente in modo che inizi dal lato opposto. Valori più bassi aumentano la visibilità della seconda selezione di colore. Questa opzione funziona solo quando l'opzione AlphaGradientOn è selezionata e un valore è impostato. |  |
Colore Alpha 3 | Determina il terzo colore del gradiente. |  |
Posizione colore Alpha 3 | Determina la posizione del terzo colore nel gradiente. Valori più alti spostano il gradiente in modo che inizi dal lato opposto. Valori più bassi aumentano l'aspetto della terza selezione di colori. Questa opzione funziona solo quando l'opzione AlphaGradientOn è selezionata e un valore è impostato. |  |
Gradiente Alpha attivo | Determina se il gradiente sia applicato alla texture. |  |
Rotazione gradiente Alpha | Ruota la direzione del gradiente. |  |
Gradiente radiale Alpha | Trasforma la sfumatura in una sfumatura radiale. |  |
Dimensione gradiente radiale Alpha | Determina la dimensione del gradiente radiale. |  |
Maschera texture
La Maschera texture utilizza parametri che possono mascherare l'icona o l'avatar del giocatore e aggiungere elementi di contorno all'icona o all'immagine dell'avatar.
Il materiale Maschera texture ha una serie di parametri personalizzabili che puoi utilizzare con il modello di visualizzazione in UMG e nel codice Verse tramite i campi Verse. Consulta la tabella seguente per saperne di più sull'uso dei diversi parametri.
Texture
Parametri che determinano l'aspetto della texture.
Parametro | Descrizione | GIF |
Texture | Seleziona una texture dal menu a discesa. |  |
Alfa texture | Determina il colore Alpha della texture. Il valore 1 è bianco. Valori inferiori a 1 riducono il valore del bianco e si fondono con il colore di sfondo. |  |
Posizione texture X | Posiziona la texture lungo l'asse X. |  |
Posizione texture Y | Posiziona la texture lungo l'asse Y. |  |
Scala texture X | Ridimensiona la texture lungo l'asse X. |  |
Scala texture Y | Ridimensiona la texture lungo l'asse Y. |  |
Riempi
Parametri che determinano l'aspetto del gradiente applicato allo sfondo.
Parametro | Descrizione | GIF |
Texture di riempimento personalizzata | Seleziona una texture di riempimento dal menu a discesa. | |
Alpha riempimento | Determina il colore Alfa della maschera. Il valore 1 è il bianco, i valori inferiori a 1 diminuiscono il valore del bianco e si fondono con il colore di sfondo. |  |
Colore di riempimento 1 | Determina il primo colore del gradiente. |  |
Posizione gradiente colore di riempimento 1 | Determina la posizione del primo colore nel gradiente. |  |
Colore di riempimento 2 | Determina il secondo colore del gradiente. |  |
Posizione gradiente colore di riempimento 2 | Determina la posizione del secondo colore nel gradiente. Valori più alti spostano il gradiente in modo che inizi dal lato opposto. Valori più bassi aumentano la visibilità della seconda selezione di colore. |  |
Colore di riempimento 3 | Determina il terzo colore del gradiente. |  |
Posizione gradiente colore di riempimento 3 | Determina la posizione del terzo colore nel gradiente. Valori più alti spostano il gradiente in modo che inizi dal lato opposto. Valori più bassi aumentano l'aspetto della terza selezione di colori. |  |
Dimensione gradiente radiale colore di riempimento | Determina la dimensione del gradiente sullo sfondo. |  |
Tipo gradiente di riempimento | Modifica il tipo di gradiente da radiale a lineare. |  |
Bagliore | Determina l'intensità del bagliore dello sfondo. | |
Rotazione riempimento gradiente lineare | Ruota il gradiente attorno a un cerchio. L'opzione LinearGradientFillRotation dipende dai valori impostati nell'opzione FillGradientType. |  |
Forma | Determina la forma della maschera intorno alla texture. |  |
Rotazione forma | Ruota la forma della maschera attorno alla texture. |  |
Dimensione forma | Determina le dimensioni della forma della maschera attorno alla texture. |  |
Raggio angolo inferiore sinistro | Modificando questo parametro si aggiunge un angolo arrotondato all'angolo in basso a sinistra in base al valore utilizzato. |  |
Raggio angolo inferiore destro | La modifica di questo parametro aggiunge un angolo arrotondato all'angolo in basso a destra in base al valore utilizzato. |  |
Raggio angolo superiore sinistro | La modifica di questo parametro aggiunge un angolo arrotondato all'angolo in alto a sinistra in base al valore utilizzato. |  |
Raggio angolo superiore destro | Modificando questo parametro, aggiungi un angolo arrotondato all'angolo in alto a destra in base al valore usato. |  |
Profilo
Parametri che determinano l'aspetto del contorno intorno alla maschera.
Parametro | Descrizione | GIF |
Spessore gap | Determina la dimensione del gap tra il contorno e la texture. L'opzione GapThickness dipende dall'opzione OutlineAlpha con un valore impostato su 0.40. |  |
Contorno Alpha | Determina il colore Alpha del contorno. Il valore 1 rappresenta il colore Alpha completo, mentre i valori inferiori a 1 diminuiscono il valore del colore e si fondono con lo sfondo. |  |
Colore contorno 1 | Determina il primo colore del gradiente del contorno. |  |
Posizione colore contorno 1 | Determina la posizione del primo colore nel gradiente del contorno. |  |
Colore contorno 2 | Determina il secondo colore del gradiente del contorno. |  |
Posizione colore contorno 2 | Determina la posizione del secondo colore nel gradiente del contorno. |  |
Colore contorno 3 | Determina il terzo colore del gradiente del contorno. |  |
Posizione colore contorno 3 | Determina la posizione del terzo colore nel gradiente del contorno. |  |
Spessore contorno | Determina lo spessore del contorno. |  |
Maschera texture
Parametri per modificare l'aspetto della maschera texture.
Parametro | Descrizione | GIF |
Mostra anteprima maschera | Determina l'opacità dell'anteprima della maschera. Un valore pari a 0 significa che l'anteprima è invisibile, mentre un valore pari a 1 significa che la maschera è completamente visibile. Questo parametro è visibile solo quando le opzioni MaskWidth e MaskHeight hanno valori superiori a 0.0. |  |
Posizione maschera X | Posiziona la maschera lungo l'asse X. |  |
Posizione maschera Y | Posiziona la maschera lungo l'asse Y. |  |
Altezza maschera | Determina l'altezza della maschera. |  |
Larghezza maschera | Determina la larghezza della maschera. |  |
Pendenza
Parametri che determinano il grado di inclinazione da applicare allo sfondo e al contorno della maschera.
Parametro | Descrizione | GIF |
Inclinazione X | Inclina lo sfondo e il contorno della maschera lungo l'asse X. |  |
Inclinazione Y | Inclina lo sfondo e il contorno della maschera lungo l'asse Y. |  |