UMG
Il sistema di UI di Unreal si chiama Unreal Motion Graphics o UMG. Risulta molto differente dal sistema uGUI standard di Unity. Lo strumento di creazione UI Designer di UMG è perlopiù simile a UI Builder del kit di strumenti UI di Unity, per chi ha lavorato con quel sistema in precedenza. Il designer è trattato in modo approfondito nella documentazione ufficiale; le pagine Costruire la propria UI e Prassi migliori UMG sono particolarmente utili per effettuare la transizione degli sviluppatori di Unity. Nel cuore di UMG ci sono i widget, che sono una serie di funzioni precreate e gerarchia che puoi utilizzare per costruire la tua interfaccia utente.
CommonUI
CommonUI è un plugin di prima parte creato da Epic Games che utilizziamo in Parrot. CommonUI configura stili e azioni "comuni" nei widget che normalmente richiederebbero molto tempo per essere ripetutamente configurati manualmente. Un esempio pratico è rilevare le modifiche del dispositivo di input e automaticamente spostare le icone di input sullo schermo. Questo richiederebbe molto tempo manualmente, ma l'UI comune automatizza il processo. CommonUI è richiesto anche per il supporto alla rimappatura dei keyframe dell'Input avanzato, trattato in maniera più approfondita nella documentazione Input avanzato.
Per configurare CommonUI, devi prima abilitarlo nella finestra Plugin. Nel menu, vai su Modifica > Plugin, cerca "Plugin UI comune", abilitalo, poi riavvia l'editor.
Vai su Impostazioni del progetto > Impostazioni generali e modifica la Classe client Viewport gioco da "GameViewportClient" a "CommonGameViewportClient". Ciò rende possibile per i widget CommonUI ricevere eventi di input dal motore.
In Impostazioni del progetto > Impostazioni input comune, seleziona la casella di spunta per Abilita supporto input avanzato. Questo rende possibile per l'Input avanzato lavorare con CommonInput. CommonInput è il gestore dell'input all'interno dei widget CommonUI.
Infine, devi abilitare alcuni moduli nel progetto per utilizzarli nel codice. Vai al file
$ProjectName.Build.cs, in questo caso il fileParrot.Build.cs. Aggiungi quanto segue all'elenco di PublicDependencyModuleNames:CommonInputCommonUIEnhancedInputGameplayTagsUMG
Gerarchia widget specifica di Parrot
La prima classe UI da osservare in Parrot è AParrotHUD. La classe HUD in Unreal Engine è un attore creato per ciascun giocatore locale e gestisce il visore a sovrimpressione. Ha un canvas e un canvas di debug su cui è possibile disegnare direttamente. Puoi anche assegnarlo nell'ambito della configurazione della modalità di gioco. Dove utilizzi questa classe in Parrot, diventa come un attore che possiede il widget radice da cui sono creati e gestiti tutti i tuoi widget.
Il tipo di classe per questo widget proprietario è UParrotGameLayout. UParrotGameLayout è il contenitore del widget di base C++ per tutti gli altri widget UI. All'interno c’è un elenco di "layer" che sono di tipo UCommonActivatableWidgetContainerBase. Tutti gli altri widget che desideri mostrare saranno inviati su uno di questi layer.
I layer di base configurati sono:
Game: il layer cui invii il widget HUD UMG.
GameMenu: il layer in cui invii qualsiasi widget che vuoi mostrare in cima all'HUD.
Menu: il layer per tutti i widget di schermata come Schermata pausa, Schermata impostazioni, Schermata inventario e altre schermate simili.
Modal: il layer per tutte le finestre a comparsa modali.
Solo un widget per layer è attivo in ogni momento. Puoi inviare vari widget di schermata diversi sul layer "Menu", ma solo l'ultimo è attivo e mostrato.
In Parrot, abbiamo anche creato una gerarchia di classe per schermate attivabili poiché quei widget condividono tutti una funzionalità comune e inviano al layer Menu. La gerarchia di classe è come segue:
Con questa configurazione creiamo tutte le schermate UI in Parrot.
Stile dei widget
Con il plugin UI comune e la configurazione della schermata puoi iniziare a dare uno stile ai widget. W_ButtonBase in Content/UI/Widgets/Common è un buon esempio da prendere in esame. Utilizza i dati di stile ButtonStyle_Base in Content/UI/Styling. Utilizza la classe UCommonButtonStyle da UI comune. Ci sono molte opzioni che puoi personalizzare. Alcuni esempi sono suoni e pennelli basati sullo stato del pulsante. UI comune dispone di molte classi di stile differenti come questa in base al widget che stai usando. Se hai bisogno di qualcosa di personalizzato, il codice del motore per questi widget personalizzati è un buon posto dove cercare.
Schermata di caricamento
La schermata di caricamento in Parrot usa un plugin di prima parte di Epic Games: CommonLoadingScreen. Un altro esempio di questo plugin in pratica si trova nel progetto campione Lyra di Epic Games. Per comprendere perché utilizziamo questo plugin dobbiamo prima comprendere i fondamenti del caricamento dei livelli in Unreal Engine.
Ci sono alcuni modi per gestire il caricamento dei livelli in UE. Un approccio semplice è chiamare il nodo Open Level in una Blueprint. Questa funzione può caricare una mappa mediante una stringa o il riferimento di un oggetto soft alla mappa. Funziona bene per mappe semplici, ma a una condizione. Quando viene richiamata la funzione, la mappa viene caricata sincronicamente, il che può provocare un notevole movimento a scatti in base a quanti dati devono essere caricati per la nuova mappa. Un altro problema è che un widget aggiunto alla viewport qui sarà legato a un controller giocatore che esiste nel livello precedente. Quando il livello si sposta, viene risanato come operazione facente parte dello scaricamento del livello.
Può essere vantaggioso caricare una nuova modalità di gioco basata sulla mappa (ad esempio, livello Giocatore singolo o livello Multigiocatore). Ma come proseguire con la schermata di caricamento evitando il blocco di carimento con Open Level? Diamo un'occhiata a BP_ParrotGameInstance
Caricare il livello asicronicamente qui risolve il problema degli asset che non sono pronti nel momento in cui viene chiamato Open Level (Apri livello). Come menzionato nel commento, anche il lavoro della schermata di caricamento è già gestito qui. Configurare il plugin è semplice e puoi impostare il widget della schermata di caricamento da Modifica > Impostazioni progetto > Schermata di caricamento comune.
Presta inoltre attenzione alle opzioni di debug che puoi attivare o disattivare qui. Eseguire dei test con questi nell'editor ti fornirà un'idea migliore di come la schermata di caricamento si comporta in una versione impacchettata.
Ora disponi di livelli che si caricano con una schermata di caricamento. Vale la pena approfondire autonomamente BP_ParrotGameInstance per vedere come abbiamo configurato l'ordine del livello per giocatore singolo e multigiocatore. La configurazione dello stato di gioco viene trattata nella documentazione Framework di gameplay in Unreal.