Crea una UI personalizzata con il materiale di base M_UI_Shape_Rectangle creando le istanze materiale dal materiale di base da utilizzare nei widget UMG. Il materiale della forma ti permette anche di creare forme piatte che possono essere utilizzate per creare design di UI esclusive. Il materiale M_UI_Shape_Rectangle si trova in Esplora contenuti nella cartella Fortnite in UI > Materiali.
Le istanze materiale possono essere utilizzate per riempire un widget come la pittura. I materiali sono preferibili all'aggiunta di texture ai widget perché i materiali utilizzano meno memoria delle texture importate. I materiali sono anche un modo migliore per progettare la UI in UEFN e UE, soprattutto per un design di UI piatta perché è più facile da renderizzare, per non parlare del fatto che puoi sbizzarrirti con i materiali dinamici e 3D.
I widget UMG sono indicati in apposite impostazioni UI di alcuni dispositivi in Unreal Editor per Fortnite (UEFN). I widget UMG sostituiscono la UI predefinita di Fortnite nel visore a sovrimpressione (HUD).
Per altri tutorial sull'utilizzo di materiali per creare la UI, consulta quanto segue:
Creazione di forme UI personalizzate
Prima di creare una forma UI personalizzata, decidi come vuoi che appaia la UI, quindi utilizza il materiale M_UI_Shape_Rectangle per progettare l'aspetto del tuo widget UI. Può trattarsi di qualcosa di semplice, come un quadrato personalizzato, o di qualcosa di più complicato, come una forma di fiore. I design possono richiedere più forme che si possono posizionare insieme quando crei il tuo widget.
Per creare forme, devi prima creare un'istanza materiale del materiale M_UI_Shape_Rectangle originale.
Fai clic con il pulsante destro del mouse sulla miniatura del materiale e seleziona Crea istanza materiale.
Nella finestra Salva asset come, assegna un nome all'istanza materiale che verrà salvata nella cartella dei contenuti del progetto. Assegna un nome agli asset in modo da raggrupparli. Ad esempio, le istanze materiale di scorta in UEFN iniziano con "M_UGC_" e terminano con "_Inst". Il nome dell'istanza materiale deve essere simile a M_UGC_Circus_Inst.
Fai doppio clic sulla nuova istanza materiale per visualizzare l'Editor istanza materiale. Puoi accedere all'editor anche facendo clic con il tasto destro del mouse sull'asset e selezionando Modifica.
Il pannello Dettagli dell'Editor istanza materiale contiene gli strumenti necessari per personalizzare completamente le istanze materiale. Questi strumenti si trovano nelle sezioni:
[1] Riempimento
[2] Tratto
[3] Colori
[4] Stato (Passaggio del mouse/Selezionato/Premuto/Disabilitato)
Riempi
Le opzioni nella sezione Riempimento influenzano la forma del materiale. Per molte opzioni come Trasparenza riempimento, un valore di 0,0 disattiva l'impostazione, mentre un valore di 1,0 la attiva. Ricorda sempre di attivare l'opzione Trasparenza riempimento, in modo che la tua forma sia visualizzata nella Viewport.
Nell'immagine qui sopra, vedrai le impostazioni regolate che sono state utilizzate per creare una forma.
Vogata
Le opzioni nella sezione Tratto possono essere regolate per creare un bordo personalizzabile. Grazie al colore del bordo blu preimpostato, potrai visualizzare il tuo design mentre regoli i valori delle opzioni di Pennellata.
L'immagine sopra mostra l'opzione Trasparenza tratto impostata a 1,0 per visualizzare un bordo blu.
Colori
Le opzioni nella scheda Colore possono essere modificate per personalizzare ulteriormente le forme create. Queste opzioni si possono modificare solo dopo aver impostato l'opzione su "On", facendo clic sulla casella booleana corrispondente.
Puoi anche creare gradienti sia per le forme che per i bordi. Puoi vedere l'anteprima dei gradienti, mentre vengono modificati nella viewport.
Nell'immagine qui sopra, i colori sono applicati in gradienti. Questa opzione si attiva regolando il valore di attivazione/disattivazione del gradiente sopra a 0,0.
Stato
Questa opzione si trova nella sezione Colore e si può modificare per impostare i colori della forma in vari stati. Puoi impostare colori personalizzati per varie azioni del giocatore, come fluttuante, concentrazione, pressione, o disabilitare la forma della tua UI.
A meno che tu non abbia impostato un materiale per l'opzione Materiale fisico, la tua forma avrà un bordo trasparente quando verrà importata nel widget creato. Per evitare questo problema, imposta il materiale fisico come Legno così è possibile renderizzarlo come un materiale vero e proprio.
Una volta terminata la personalizzazione della forma UI, ricordati di salvarla facendo clic sull'icona del floppy disk nell'angolo in alto a destra. La tua istanza materiale personalizzata verrà salvata nella cartella dei contenuti del progetto.
L'esempio di questo tutorial utilizza forme che si combinano per formare un girasole e uno sfondo a pulsanti.
Creazione di widget UI
Ora dovrai creare dei widget con cui i giocatori potranno interagire. Leggi il documento Editor widget UI per saperne di più sulla creazione dei widget e sull'organizzazione della scheda Gerarchia.
A questo punto, devi aver creato delle istanze materiale per ogni elemento del tuo design.
L'esempio di questo tutorial consiste in istanze multiple di un petalo di fiore e di un disco del fiore. Il pulsante è composto da una base e da due immagini che vengono utilizzate come icone del pulsante.
Queste istanze materiale saranno disposte nei Blueprint widget per creare un design personalizzato. La Blueprint widget è ciò che verrà importato nel dispositivo Finestra di dialogo a comparsa per eseguire l'override della UI prescorta.
Crea un nuovo Blueprint widget che conterrà sia le istanze materiale che i widget dei pulsanti che compongono la tua UI personalizzata. Questa sarà il Blueprint widget che verrà aggiunto alle impostazioni del dispositivo.
In questo widget, combina tutte le istanze materiale personalizzate per creare il tuo design. Quando crei il tuo widget UI, trascina gli asset da Comune, UI comune, Pannello, UIKIT e Utente creato sotto il nome del tuo widget.
Nella foto qui sopra, gli asset sono organizzati nella scheda Gerarchia e riposizionati nella viewport per creare una forma a fiore per la UI personalizzata.
Quando sei soddisfatto del tuo design, salva la Blueprint e torna a Esplora contenuti. Questa Blueprint sarà ora importata in un dispositivo Finestra di dialogo a comparsa, che visualizzerà la UI personalizzata.
Aggiunta di widget ai dispositivi
Una volta che il tuo design è pronto, posiziona un dispositivo Finestra di dialogo a comparsa per visualizzare il tuo widget.
Trascina il widget in Dettagli > Widget modale > Classe override modello.
Puoi visualizzare e testare la tua creazione attraverso una sessione avviata.