I materiali hanno molta funzionalità in UEFN grazie ai parametri dei materiali modificabili esposti in Verse. I materiali parametrizzati sono fondamentali per creare un'interfaccia utente (UI) dall'aspetto di alta qualità con un material_block.
Un material_block utilizza i parametri di un materiale o delle istanze di materiale della UI per modificare e controllare i valori dei parametri tramite il codice Verse per creare una UI dall'aspetto dinamico. Ad esempio, i parametri di un materiale indicatore della UI si possono manipolare in Verse per programmare il comportamento del materiale quando il giocatore subisce danni o danneggia un nemico.
Prima di scrivere una riga di codice, pensa a come vuoi utilizzare i materiali nella UI. Crea reticoli per determinare l'aspetto che vuoi che abbia la tua UI e l'effetto che vuoi che facciano i materiali.
Materiali e texture della UI
La codifica di uno slot material_block inizia con la creazione del materiale della UI. Puoi utilizzare le funzioni del materiale e i materiali disponibili nel modello di funzioni delle interfacce utenteoppure puoi creare il tuo materiale personalizzato da zero.
Vedi la sezione Materiali della UI per saperne di più sulla creazione dei tuoi materiali della UI personalizzati.
Materiali
La creazione di un nuovo materiale personalizzato distingue la tua UI dagli altri che modificano i materiali della UI esistenti e ampiamente disponibili. Per prima cosa, configura i tuoi materiali della UI. Utilizza i seguenti passaggi di configurazione essenziali e le buone prassi per la creazione di materiali della UI:
Imposta il Dominio materiali su Interfaccia utente nel Nodo materiale principale (MMN).
Modifica il materiale radice in modo che sia semplice.
Più parametri hai, più libertà hai con il tuo materiale.
Trasforma il tuo materiale in un'istanza materiale quando il materiale è completo.
Le istanze materiale sono utilizzate come tipo di classe nel codice Verse. In Verse puoi impostare valori predefiniti per le proprietà e i parametri del materiale.
Quando assegni un nome alle istanze materiale, utilizza la seguente convenzione di denominazione di Fortnite:
MI_UI_MaterialName
Texture
Le texture aggiungono un tocco di eleganza al design della UI che non si può ottenere utilizzando solo i materiali. UEFN fornisce una cartella di texture che puoi utilizzare nella tua UI sotto Cartella progetto > Fortnite > Textures. Qualsiasi texture che importi deve rispettare la regola della potenza di due.
I nodi materiale utilizzano parametri del materiale e li espongono nel codice Verse. Utilizzando Verse, puoi usare i parametri del materiale per indirizzare i valori dei pixel della texture (chiamati texel) all'interno del materiale e creare un tipo di maschera o per altri calcoli per modificare e cambiare l'aspetto e il comportamento delle texture.
Per fare in modo che le tue texture siano ottimizzate per l'utilizzo nella UI, apri la miniatura e utilizza le seguenti impostazioni nel pannello Dettagli:
Imposta Impostazioni gen Mip su Nessuna MipMaps.
Imposta gruppo di texture su UI.
Imposta le impostazioni di compressione su Interfaccia utente 2C (RGBA8).
Le texture importate che non rispettano la regola della potenza di due possono essere modificate per adattarle alla scala di texture corretta. Per modificare una texture, segui le istruzioni in Ridimensionamento delle texture.
Esempio di blocco materiale 1
Un material_block è utilizzato come uno degli slot all'interno di un widget personalizzato creato con il codice Verse. Durante il gameplay, material_block ti consente di manipolare i parametri del materiale tramite Verse per modificare l'aspetto e il comportamento del materiale della UI/dell'istanza materiale sull'HUD. Questo è simile al modo in cui image_block ti permette di utilizzare una texture in Verse.
Il widget del materiale personalizzato è utilizzato in diversi modi nel codice Verse:
Fornisce un modo per utilizzare i parametri del materiale per determinare le dimensioni, il comportamento e l'aspetto del materiale nella UI.
Passa i dati in Verse ai parametri, consentendo ai parametri di essere guidati da dati di gameplay dinamici disponibili solo da Verse.
Il codice seguente dimostra come material_block è utilizzato per visualizzare un blocco di materiale in dissolvenza nell'HUD. L'intero blocco di codice si trova nella sezione Codice completo di seguito.
Il codice Verse deve sempre utilizzare le buone prassi per posizionare e visualizzare gli elementi della UI.
Moduli per UI e materiali
I seguenti moduli contengono le funzioni utilizzate per controllare material_block come widget UI e determinare i colori, il posizionamento del materiale e altro ancora.
using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /UnrealEngine.com/Temporary/UI }Puntamento ai widget UMG e ai materiali della UI nella classe del dispositivo
Nella classe del dispositivo Verse, viene dichiarata una variabile del widget stackbox denominata MyUI. con un'impostazione di Orientamento pari a orientation.Vertical. Ciò fa sì che StackBox visualizzi i contenuti verticalmente.
Successivamente, un parametro UI.MaterialBlock.MI_UI_Dissolve_material denominato DissolveMaterial viene dichiarato con un parametro Dissolvi e assegna ad esso un valore predefinito di 0,2.
materialblock_test_device := class(creative_device):
var MyUI:stack_box = stack_box{Orientation := orientation.Vertical}
DissolveMaterial:UI.MaterialBlock.MI_UI_Dissolve_material = UI.MaterialBlock.MI_UI_Dissolve_material {Dissolve := 0.2}
Controllo della UI e dei materiali con la funzione All'inizio
Nella funzione OnBegin, viene creato un quadrato sull'HUD che si dissolve all'inizio del gioco.
La variabile DissolveMaterialBlock è di tipo material_block e fa riferimento al materiale della UI impostando DefaultImage sul materiale della UI (DissolveMaterial), mentre DefaultDesiredSize imposta la dimensione predefinita di material_block quando esegue il rendering in un widget utilizzando le coordinate X e Y.
Un'espressione for viene utilizzata per visualizzare la UI sullo schermo di ogni giocatore nello spazio di gioco. La funzione GetPlayspace(). GetPlayers() ottiene un array di tutti i giocatori nel gioco, quindi aggiunge il widget che contiene material_block al loro HUD in base alle seguenti istruzioni nell'espressione do:
Crea una casella dello stack chiamata MyStackBox.
Imposta il suo orientamento su verticale.
Inserisce DissolveMaterialBlock nel primo slot di MyStackBox.
Imposta MyUI su MyStackBox in modo che possa essere aggiunto all'HUD del giocatore al di fuori di questo loop.
OnBegin<override>()<suspends>:void=
DissolveMaterialBlock := material_block:
DefaultImage := DissolveMaterial
DefaultDesiredSize := vector2{X:=400.0, Y:=400.0}
for:
Player:GetPlayspace().GetPlayers()
PlayerUI := GetPlayerUI[Player]
do:
MyStackBox:stack_box = stack_box:
Codice completo
Copia e incolla il blocco di codice completo di seguito per visualizzare il blocco del materiale in dissolvenza nell'HUD.
Per far funzionare questo blocco di codice, devi avere un materiale di dissolvenza nel tuo progetto.
Vedi Crea il tuo dispositivo Verse per i passaggi sulla creazione del tuo dispositivo Verse personale.
using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /UnrealEngine.com/Temporary/UI }
materialblock_test_device := class(creative_device):
var MyUI:stack_box = stack_box{Orientation := orientation.Vertical}
DissolveMaterial:UI.MaterialBlock.MI_UI_Dissolve_material = UI.MaterialBlock.MI_UI_Dissolve_material {Dissolve := 0.2}
Esempio blocco di materiale 2
Questo esempio si basa sull'esempio precedente introducendo due materiali della UI aggiuntivi, un dispositivo attivatore e dispositivi attivatore di input. Gli attivatori vengono utilizzati per mostrare e modificare il materiale visualizzato sull'HUD.
Il codice Verse inizia con gli stessi moduli del blocco di codice di cui sopra per controllare material_block e determinare i parametri del materiale della UI. Per il funzionamento delle proprietà modificabili di questo codice è necessario un modulo aggiuntivo:
using { /Verse.org/Simulation }
Configurazione della classe di dispositivi Verse
Questa classe di dispositivi Verse ha più funzionalità rispetto alla classe di dispositivi precedente. Un'espressione di messaggio denominata Testo viene utilizzata per visualizzare il messaggio "Questo è un Blocco di testo". Questa espressione viene chiamata nella funzione OnBegin da un text_block.
# A Verse-authored creative device that can be placed in a level
materialblock_test_device := class(creative_device):
Text<localizes><public> : message = "This is a Text Block."
Tre dispositivi attivatore modificabili e due dispositivi attivatori di input modificabili vengono aggiunti alla classe del dispositivo per controllare material_block e StackBox. Ogni attivatore viene rinominato dopo la funzione che esegue, ad esempio:
TriggerShow
TriggerChange
TriggerHide
InputTriggerInc (aumenta un valore)
InputTriggerDec (Diminuisce un valore)
@editable
TriggerShow:trigger_device = trigger_device{}
@editable
TriggerChange:trigger_device = trigger_device{}
@editable
TriggerHide:trigger_device = trigger_device{}
@editable
InputTriggerInc:input_trigger_device = input_trigger_device{}
@editable
InputTriggerDec:input_trigger_device = input_trigger_device{}
Viene dichiarata una variabile widget StackBox chiamata MyUI, come la variabile MyUI nel codice di cui sopra.
var MyUI:stack_box = stack_box{Orientation := orientation.Vertical}I tre materiali della UI (RadialMaterial, StripeMaterial e DissolveMaterial) vengono aggiunti alla classe del dispositivo e hanno assegnato valori predefiniti ai loro effetti del materiale.
RadialMaterial:UI.MaterialBlock.MI_UI_MaterialBlock_Radial_material = UI.MaterialBlock.MI_UI_MaterialBlock_Radial_material {Progress := 1.0}
StripeMaterial:UI.MaterialBlock.MI_UI_Stripe_material = UI.MaterialBlock.MI_UI_Stripe_material {Speed := 0.5}
DissolveMaterial:UI.MaterialBlock.MI_UI_Dissolve_material = UI.MaterialBlock.MI_UI_Dissolve_material {Dissolve := 0.2}
Controllo della UI, dei materiali e degli attivatori con la funzione All'inizio
La funzione OnBegin configura i controlli per i diversi dispositivi attivatore iscrivendo funzioni differenti ai rispettivi TriggeredEvents e controlla i dispositivi attivatore di input iscrivendo le funzioni ai rispettivi PressedEvents. Quando il valore predefinito aumenta o diminuisce, i materiali della UI sono influenzati da Verse che utilizza material_block per eseguire le seguenti operazioni:
OnShow- Mostra il materiale della UI sull'HUD del giocatore.OnChange- Modifica il parametro Avanzamento del materiale della UI per mostrare una modifica nel materiale di riempimento.OnHide- Nasconde il materiale della UI al giocatore.IncreasesValue- Aumenta l'avanzamento e la velocità di dissolvenza del materiale e la quantità di dissolvenza nel materiale.DecreasesValue- Diminuisce l'avanzamento e la velocità di dissolvenza del materiale e la quantità di dissolvenza nel materiale.
OnBegin<override>()<suspends>:void=
Print ("Init")
TriggerShow.TriggeredEvent.Subscribe(OnShow)
TriggerChange.TriggeredEvent.Subscribe(OnChange)
TriggerHide.TriggeredEvent.Subscribe(OnHide)
InputTriggerInc.PressedEvent.Subscribe(IncreaseValue)
InputTriggerDec.PressedEvent.Subscribe(DecreaseValue)
Una variabile text_block denominata Etichetta viene utilizzata per aggiungere un text_block al dispositivo Verse. Il text_block viene utilizzato per eseguire il rendering di una stringa di testo sull'HUD di un giocatore. Un text_block visualizza il messaggio codificato nella variabile Testo predefinito e controlla l'aspetto e il posizionamento del testo utilizzando le seguenti impostazioni del blocco di testo:
DefaultTextColorDefaultShadowColorDefaultShadowOffset
var Label:text_block = text_block:
DefaultText := Text,
DefaultTextColor := NamedColors.White,
DefaultShadowColor:= color{R:=0.0, G:=0.0, B:=0.0},
DefaultShadowOffset := option{vector2{X:=5.0, Y:=2.0}}I tre materiali della UI sono aggiunti alle espressioni e controllati tramite material_block.
RadialMaterialBlock := material_block:
DefaultImage := RadialMaterial
DefaultDesiredSize := vector2{X:=400.0, Y:=400.0}
StripeMaterialBlock := material_block:
DefaultImage := StripeMaterial
DefaultDesiredSize := vector2{X:=400.0, Y:=400.0}
Un'espressione for viene utilizzata per determinare quando la UI appare sullo schermo e quale UI visualizzare sullo schermo.
La UI appare sullo schermo trovando ciascun giocatore nello spazio di gioco tramite GetPlayspace().GetPlayers(), quindi chiama GetPlayerUI[Player] per restituire la classe player_ui del giocatore. Questo è essenziale per aggiungere un widget all'HUD/alla UI di un giocatore.
for:
Player:GetPlayspace().GetPlayers()
PlayerUI := GetPlayerUI[Player]Quindi, nell'espressione do, viene creato un nuovo stack_box denominato MyStackBox utilizzando le impostazioni del widget UMG StackBox. Una volta assegnati i valori del widget a MyStackBox, a una nuova variabile denominata MyUI vengono assegnati tutti i valori MyStackBox in fase di esecuzione.
Ciò consente a MyUI di utilizzare le proprietà del widget StackBox e di fare riferimento a material_block per eseguire le operazioni seguenti:
Utilizza la proprietà
Orientamentodi StackBox.Assegna uno
stack_box_slota ognimaterial_block,text_blockevariabile Etichettaall'interno di un array utilizzando l'espressione Slots:arrayper organizzare gli oggetti dell'array.
do:
MyStackBox:stack_box = stack_box:
Orientation := orientation.Vertical
Slots := array:
stack_box_slot:
Widget := stack_box:
Orientation := orientation.Horizontal
Slots := array:
stack_box_slot:
Widget := RadialMaterialBlock
Creazione della funzione OnShow
Una volta chiamato TriggerShow.TriggeredEvent, la funzione OnShow attira tutti i giocatori nello spazio di gioco e la relativa UI, quindi aggiunge il widget alla UI del giocatore utilizzando il valore MyUI.
Infine, il valore di avanzamento di RadialMaterial è impostato su 1,0 al runtime, il che significa che all'inizio del gioco la barra della salute o dello scudo è piena.
OnShow(InAgent: ?agent):void=
Print ("Show")
for:
Player:GetPlayspace().GetPlayers()
PlayerUI := GetPlayerUI[Player]
do:
PlayerUI.AddWidget(MyUI)
set RadialMaterial.Progress = 1.0
Creazione della funzione OnHide
Per nascondere il materiale della UI all'HUD quando la barra della salute o dello scudo subisce danni, la funzione OnHide utilizza un'espressione for per attirare i giocatori nello spazio di gioco e nella UI del giocatore, quindi aggiorna la UI del giocatore tramite PlayerUI.RemoveWidget (MyUI).
OnHide(InAgent: ?agent):void=
Print ("Hide")
for:
Player:GetPlayspace().GetPlayers()
PlayerUI := GetPlayerUI[Player]
do:
PlayerUI.RemoveWidget(MyUI)
Creazione della funzione OnChange
Il materiale della UI cambia aspetto in base ai valori passati attraverso il parametro Avanzamento. Quando si verifica TriggerChange.TriggeredEvent, viene chiamata la funzione OnChange che aggiorna il parametro Avanzamento del materiale della UI RadialMaterial in base a IncreaseValue e DecreaseValue.
OnChange(InAgent: ?agent):void=
Print ("Change Material Parameter")
set RadialMaterial.Progress = RadialMaterial.Progress - 0.25Creazione della funzione IncreaseValue
La funzione IncreaseValue aumenta i valori del parametro Avanzamento sul materiale in base ai valori predefiniti di Avanzamento, Velocità e Dissolvenza:
Avanzamento = +1,0
Velocità = +0,1
Dissolvenza = +0,025
Questa modifica si verifica quando i giocatori ricevono salute o scudi: vedranno questi aumenti riflessi sulla salute e sul materiale scudo sull'HUD.
Il codice funziona anche quando viene applicato alla salute e allo scudo di un'IA nemica quando viene generata nel gioco una nuova IA.
IncreaseValue(InAgent: agent):void=
Print ("Increase Value of Material Parameter")
set RadialMaterial.Progress += 1.0
set StripeMaterial.Speed += 0.1
set DissolveMaterial.Dissolve += 0.025
Creazione della funzione DecreaseValue
La funzione DecreaseValue riduce i valori del parametro Avanzamento sul materiale in base ai valori predefiniti di Avanzamento, Velocità e Dissolvenza:
Avanzamento = -1,0
Velocità = -0,1
Dissolvenza = -0,025
Questa modifica si verifica quando i giocatori subiscono danni alla salute o allo scudo: vedranno queste diminuzioni riflesse sulla salute e sul materiale scudo sull'HUD.
Questo codice funziona anche quando viene applicato a un'IA nemica quando l'IA subisce danni alla salute o agli scudi durante il gioco.
DecreaseValue(InAgent: agent):void=
Print ("Decrease Value of Material Parameter")
set RadialMaterial.Progress -= 1.0
set StripeMaterial.Speed -= 0.1
set DissolveMaterial.Dissolve -= 0.025
Ora tocca a te
Se hai un materiale radiale, a strisce o a dissolvenza, puoi copiare e incollare il codice seguente nel tuo progetto per vedere come funziona material_block su ciascun materiale nel codice Verse.
using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /UnrealEngine.com/Temporary/UI }
# A Verse-authored creative device that can be placed in a level
materialblock_test_device := class(creative_device):
Text<localizes><public> : message = "This is a Text Block."