Unreal Motion Graphics (UMG) è un potente strumento per la creazione di interfacce utente (UI). Per creare un semplice pop-up o sistemi UI complessi, comprendere i concetti fondamentali del lavoro in UMG ti dà la libertà di sperimentare questo potente strumento.
Per portare i tuoi progetti di UI dalla carta al playtest, devi capire come UMG compila la UI. Per familiarizzare con i flussi di lavoro di compilazione di UI di corretti, questa pagina è suddivisa nelle sezioni seguenti:
Progettazione di sistemi UI
La pianificazione del design della tua UI è fondamentale per creare sistemi UI belli e utili. Pensa a:
Il tipo di gioco che stai creando.
Il tipo di UI necessario per supportare i giocatori e mantenere il gameplay divertente e di facile comprensione.
Come apparirà la UI finale.
Ad esempio, nell'HUD di Fortnite tutto ciò che il giocatore deve capire sul gioco: informazioni rilevanti su salute e scudi per le statistiche generali del gioco sono disposte sullo schermo.
Abbozza le idee di progettazione della UI che hai. Utilizza queste bozze per guidare la creazione della UI in UMG.
Gli approcci di base al web design possono aiutarti a pianificare il layout della tua UI prima di iniziare a compilare i widget utente. Questi approcci si possono utilizzare per decidere quali parti della UI devono essere rigide e quali possono essere flessibili. Utilizza i seguenti approcci di progettazione Web per il layout della UI:
Layout assoluto
I layout assoluti di solito utilizzano calcoli e coordinate precisi per specificare dove posizionare gli elementi su uno schermo. È utile quando un elemento della UI deve rimanere in posizione utilizzando le coordinate X e Y. L'elemento UI deve considerare dove è posizionato l'elemento genitore sullo schermo; l'elemento genitore inizia nell'angolo in alto a sinistra del layout.
Questo stile di layout è meno flessibile e difficile da mantenere per schermi di varie dimensioni.
Una progettazione di layout assoluta è utilizzata al meglio per piccoli elementi che fanno parte di una progettazione più ampia. Ad esempio, utilizza una posizione assoluta per un'icona. In UEFN, può essere impostato utilizzando le impostazioni Allineamento e Spaziatura interna del widget Immagine.
L'icona rimane nella stessa posizione indipendentemente dalla posizione e dalle dimensioni degli altri elementi UI circostanti.
Layout relativo
Questo tipo di layout funziona al meglio per i giochi che si possono giocare su più piattaforme perché adatta la UI a un grande schermo televisivo o allo schermo di un piccolo cellulare.
Spaziatura interna e spaziatura
La spaziatura interna si può utilizzare per regolare piccoli spazi tra gli elementi di un tutto. La spaziatura interna può essere difficile da gestire per i singoli widget in UMG. Utilizza invece gli strumenti Allineamento per immagini e blocchi di testo: l'allineamento offre un maggiore controllo sullo spazio e sul posizionamento rispetto alla spaziatura interna.
Ciò significa che, una volta che tutti i pezzi sono a posto, se hai ancora bisogno di un po' di spazio tra gli elementi, la regolazione delle impostazioni di spaziatura interna dei singoli widget aggiunge lo spazio necessario.
Per forzare spazi più ampi tra i widget, utilizza un'immagine vuota o un widget slot tra i widget contenitore e i widget utente. Di seguito puoi vedere che un widget Immagine viene utilizzato per forzare lo spazio tra ciascun widget utente, fornendo spazio a ciascun widget per visualizzare chiaramente le informazioni.
Comprendere i widget UMG
Una UI deve essere progettata in sezioni in UMG. Compila la UI creando singoli widget utente e lavorando a livelli. Una volta che tutti gli elementi di una UI sono pronti, sovrapponi le singole sezioni a un widget utente genitore. Compilare la UI a livelli significa avere un maggiore controllo sulla progettazione e sul layout della UI complessiva.
Per pianificare e creare singoli widget utente, devi prima comprendere i widget disponibili nel pannello Tavolozza. Esistono due tipi principali di widget: contenitori ed elementi.
Contenitori
Un contenitore contiene più widget utente, elementi e altri contenitori per creare una parte di UI. Un elemento può essere un'immagine, un materiale, un testo o altro. La dimensione di un widget contenitore è determinata dalla dimensione dell'elemento figlio più grande.
| Widget contenitore | Finalità | Immagine |
|---|---|---|
Griglia | Dispone gli elementi all'interno di un pattern a griglia flessibile. Aggiunge opzioni agli elementi figlio per:
|  |
Griglia uniforme | Dispone gli elementi figlio in righe e colonne con spaziatura uguale. Aggiunge opzioni agli elementi figlio per:
|  |
Sovrapposizione | Posiziona gli elementi e gli altri widget contenitore uno sopra l'altro. I contenitori Overlay non aggiungono opzioni o impostazioni aggiuntive ai loro elementi figlio. |  |
Caselle impilate | Dispone gli elementi in orizzontale o in verticale (da sinistra a destra, dall'alto verso il basso). Questo widget contenitore non distanzia bene gli elementi da solo. Utilizza altri widget contenitore o elemento per creare spazio in una Casella impilata. |  |
Riquadro dimensioni | Introduce parametri che limitano le dimensioni degli elementi figlio. I contenitori Casella dimensione non aggiungono opzioni o impostazioni aggiuntive ai loro elementi figlio. |  |
Riquadro scala | Specifica come ridimensionare la UI in base alle dimensioni dello schermo. |  |
Riquadro di scorrimento | Crea un riquadro scorrevole per contenere una raccolta di elementi. I contenitori Riquadro di scorrimento non aggiungono opzioni o impostazioni aggiuntive ai loro elementi figlio. |  |
Commutatore widget | Fornisce un modo per "schedare" i widget. In questo widget contenitore, nel commutatore è visibile un widget alla volta. I contenitori Selettore widget non aggiungono opzioni o impostazioni aggiuntive ai loro elementi figlio. |  |
Canvas | Ancora gli elementi all'interno di uno spazio definito. È preferibile utilizzarlo al termine del processo di progettazione come contenitore genitore. Aggiunge le opzioni seguenti agli elementi figlio:
|  |
Widget elemento
Tutti i widget hanno proprietà Aspetto seguite da impostazioni specifiche per il widget selezionato nel pannello Dettagli.
La dimensione degli elementi figlio si può impostare nel pannello Dettagli ed ereditare le proprietà dal widget del contenitore genitore.
| Widget elemento | Finalità | Immagini |
|---|---|---|
Widget azione | Fornisce un modo per prendere un input da un'associazione di tasti per un'azione specifica utilizzando Verse. Di per sé, il widget è puramente estetico. |  |
Immagine | Fornisce un modo per aggiungere texture (possono essere immagini importate o texture trovate nativamente in UEFN) e materiali allo sfondo o in primo piano di un widget utente. |  |
Blocco di testo | Aggiunge testo al widget utente. Puoi controllare le dimensioni, il carattere, la spaziatura e altro ancora. |  |
Pulsante silenzioso | Pulsante rettangolare con sfondo trasparente. |  |
Pulsante normale | Pulsante rettangolare con sfondo opaco. |  |
Pulsante forte | Pulsante rettangolare con sfondo giallo. |  |
Cursore | Cursore di valore che aumenta o diminuisce all'interno di un intervallo specificato. |  |
Per scoprire di più sui widget in Verse, consulta Tipi di widget.
Creazione e stratificazione di widget utente
I widget utente sono file UI che contengono tutto ciò che hai progettato. Quando crei un widget utente, compartimenta il tuo design il più possibile. Ciò significa utilizzare solo ciò di cui hai bisogno in un widget utente per ottenere l'aspetto desiderato dell'elemento UI.
Nell'immagine seguente, sono stati creati quattro widget utente per ogni componente della hotbar degli oggetti raccolti. Ogni widget utente tiene traccia delle singole statistiche dei diversi componenti mantenendo lo stesso design della UI.
Progettare widget utente separati significa che possono essere sovrapposti all'interno di un widget utente genitore per creare un aspetto più coerente e controllato per la hotbar della barra di raccolta. Inoltre, è più facile per il dispositivo Tracciatore tenere traccia delle statistiche di ogni singolo componente della hotbar di raccolta.
Fai clic per ingrandire l'immagine.
La progettazione della UI in questo modo richiede pratica. Segui i tutorial Creare un HUD personalizzato e i tutorial Teenage Mutant Ninja Turtles per esercitarti a creare singoli widget utente per creare un aspetto della squadra personalizzato per un gioco.
Modifica di un layout
L'utilizzo di singoli widget utente per creare una UI semplifica la modifica della UI. Fornire un modo per modificare quel pezzo senza influire sulle altre parti del design della UI.
Tieni presente che nel design della hotbar della barra di raccolta sopra, tutte le etichette degli elementi sono centrate tranne una. In questo caso, lo sviluppatore apre semplicemente il widget utente per quell'elemento e modifica l'etichetta senza causare problemi per tutti gli altri elementi della hotbar della barra di raccolta.
Se stai progettando qualcosa di più complesso come un sistema di inventario, potresti scoprire di utilizzare widget contenitore non necessari o di avere problemi a rendere i widget elemento conformi al design. UMG offre opzioni che semplificano la modifica di un layout:
Sostituisci con…
Esegui wrapping con…
Sostituisci i widget
Sostituisci i widget non necessari dalla Gerarchia senza interrompere il layout. Fai clic con il pulsante destro del mouse sul widget non necessario, quindi seleziona Sostituisci con... e scegli un altro widget con cui sostituirlo. I widget sostitutivi sono tutti widget di tipo contenitore.
Le opzioni dei widget figlio cambiano in base al nuovo contenitore genitore utilizzato.
Esegui wrapping dei widget
Un modo per modificare il layout senza influire su tutti i widget figlio è utilizzare l'impostazione Esegui wrapping con... nella Gerarchia. Fai clic con il pulsante destro del mouse sul widget figlio e seleziona Esegui wrapping con... quindi seleziona un contenitore nel menu a discesa per sfruttare le sue proprietà e mantenere le impostazioni dei widget figlio.
Playtest
Una volta completato il tuo design, esegui il playtest del tuo design. Devi cercare quanto segue:
La UI ha uno scopo. Non creare una UI per il gusto di avere una UI, deve essere utile.
La UI è utile e facile da utilizzare, i giocatori non devono indovinare che cosa fa la UI mentre giocano.
La UI deve fondersi con il gioco e completare il gameplay.
Gli elementi della UI non bloccano il gameplay.