Le schermate di selezione delle missioni di solito appaiono all'inizio di una partita per fornire ai giocatori una scelta di missioni. A volte viene visualizzata una schermata di selezione della missione dopo che un breve tutorial di gioco ha familiarizzato i giocatori con le regole e le meccaniche di gioco.
La selezione della missione avvia il gioco e porta i giocatori in un punto di partenza specifico dell'isola per quella missione. Queste schermate possono includere dettagli sulle statistiche della missione, fornire informazioni sul tipo di missioni tra cui il giocatore può scegliere o semplicemente trascinare i giocatori nella missione selezionata.
Il seguente tutorial ti insegna come creare una schermata della missione che trascina i giocatori nella missione selezionata.
Step 1: Ricerca gli stili di selezione delle missioni
Esistono diversi modi per progettare una schermata di selezione del menu, a seconda della quantità di informazioni che si desidera fornire ai giocatori. Le informazioni possono essere sotto forma di descrizioni di missioni o immagini di texture del livello di missione. In questo esempio, vedrai esempi di entrambi per vedere l'impatto che puoi creare con i soli materiali o aggiungendo strategicamente texture al tuo design.
Le texture consumano molta memoria e possono consumare una parte significativa della memoria totale dell'isola.
Decidere la quantità di informazioni da includere nella schermata di selezione della missione giova alla fase di progettazione.
Step 2: Progetta il layout
Progetta il layout della schermata della missione prima di aprire UMG. Qualsiasi scelta progettuale che fai a questo punto non è permanente e può essere riprogettata senza compromettere alcuna funzionalità della UI. La disposizione dello schermo dipende da ciò che è incluso nella schermata di selezione della missione.
Queste sono 4 decisioni iniziali di layout da prendere in questa fase:
Combinazione di colori - Utilizza la regola 60/30/10 quando utilizzi il colore nella tua UI.
Font Choice - Attualmente sono disponibili due tipi di font; Burbank e HeadingNow.
Materiali - Utilizza i materiali del modello di funzione UI per creare il tuo aspetto unico per la tua UI.
Immagini/Texture - Le Texture devono essere riservate alla grafica complicata che non può essere facilmente ricreata con Materiali, come personaggi o Contenitori artistici.
La regola 60 / 30 / 10 significa che il 60% del colore utilizzato nel design della tua UI deve essere il colore principale, il 30% il colore secondario e il 10% il colore dell'accento. In questo modo l'interfaccia utente sarà più facile da leggere e consultare.
Quando hai deciso una combinazione di colori, crea materiali e istanze di materiale da utilizzare nella progettazione della tua UI.
In questo esempio, il design è semplice. C’è una Chiama all’azione nella parte superiore dello schermo che dice ai giocatori di “Scegli la tua missione”, seguito da tre immagini etichettate Missione 1, 2 e 3, ognuna con un pulsante AVVIO.
Fase 3: Progettare il layout del widget
L'esempio di layout del widget si compone di 4 parti principali:
Design dello sfondo
Design delle caselle Missione 1
Design delle caselle Missione 2
Design delle caselle della missione 3
Per creare un widget con pulsanti funzionanti, devi utilizzare una variante Widget Finestra di dialogo modale. Esiste uno speciale modello di visualizzazione utilizzato con il widget della variante Finestra di dialogo modale che consente di associare i pulsanti ai dispositivi.
All'interno della cartella, crea un widget Variante Finestra di dialogo modale .
Assegna un nome al widget Mission_Select_UI.
Fai doppio clic sul widget Mission_Select_UI per aprire l'Editor widget.
Design dello sfondo
In questo esempio, il design dello sfondo della schermata di selezione della missione prevede l’utilizzo di Materiali per aggiungere blocchi di colore allo sfondo, l’aggiunta di un invito all’azione nella parte superiore dello schermo e l’aggiunta di un’immagine Texture di un carattere.
Nell'Editor widget, esegui le operazioni seguenti:
Dal pannello Palette, trascina un widget Overlay nel grafico del widget. Questo widget diventa il widget radice e funge da schermata in cui viene visualizzata la UI.
Nel Grafico widget, espandi il widget Overlay fino a raggiungere le dimensioni di 1920 X 1080.
Nel pannello Gerarchia, fai clic con il tasto destro del mouse sul widget Overlay per aprire il menu contestuale. Seleziona Rinomina dal menu a tendina e denomina il widget Root. Questo widget comprende tutti i widget che compongono la schermata Selezione missione.
Modifica il layout del grafico in Desired. Ciò ti permette di Imposta l'interfaccia utente con le dimensioni esatte in cui desideri che appaia su qualsiasi schermo.
Puoi vedere come cambia la tua UI in base alla piattaforma selezionando una schermata dal menu a discesa Dimensioni schermo.
Trascina un pannello Overlay dal pannello Palette sotto il widget Radice e rinominalo Contenitore genitore. Questo widget Overlay ospiterà tutte le parti della schermata di selezione della missione.
Questo widget deve avere le stesse dimensioni del widget Radice.
Modifica le opzioni di allineamento del widget Contenitore principale in Riempi orizzontalmente e Riempi verticalmente.
Trascina un widget Immagine dal pannello Palette nel pannello Gerarchia sotto il widget Contenitore genitore.
Fai clic con il pulsante destro del mouse sul widget Immagine per aprire il menu contestuale. Seleziona Rinomina dal menu a tendina e denomina il widget Colore di sfondo UI.
Seleziona il widget Colore di sfondo UI nel pannello Gerarchia per aprire le relative opzioni nel pannello Dettagli.
Nelle opzioni Slot (Slot overlay), utilizza le seguenti impostazioni di allineamento:
Allineamento orizzontale = Riempi orizzontalmente
Allineamento verticale = Riempi verticalmente
Sotto le opzioni Aspetto, utilizza il menu a discesa Pennello > Immagine per selezionare il materiale del colore primario. In questo modo il widget Immagine diventa il colore del materiale.
Trascina un widget del pannello Griglia dal pannello Palette nel widget Contenitore genitore e rinominalo Corpo. Il pannello Griglia funge da contenitore per tutto il contenuto della UI. Aggiunge anche una griglia flessibile al layout che organizza i widget figlio in righe e colonne. In questo esempio, il contenuto della schermata della missione e l'immagine del carattere.
In Opzioni slot (Slot overlay), utilizza le impostazioni seguenti:
Allineamento orizzontale = Allineamento al centro
Allineamento verticale = Allineamento al centro
Padding = 64.0
Trascina una casella stack nel widget Corpo e rinominalo Content. Una Stack Box utilizza l'allineamento orizzontale o verticale per disporre i widget figli.
Modifica le impostazioni di allineamento del widget Contenuto in Riempi orizzontalmente e Riempi verticalmente.
Sotto l'opzione Comportamento, modifica l'impostazione Orientamento in Verticale.
Aggiunta del testo del callout
Trascina un Widget Casella di testo dal Pannello Palette e nidificalo in Contenuto. Questo diventa il testo del callout che chiede ai giocatori di scegliere una missione.
Rinomina la casella di testo in Scegli la tua missione.
Seleziona il widget Scegli la tua missione nel pannello Gerarchia per aprire le relative opzioni nel pannello Dettagli.
In Opzioni slot (Slot Overlay), utilizza le impostazioni seguenti:
Size = Auto
Allineamento orizzontale = Allineamento a sinistra
Allineamento verticale = Riempi verticalmente
Fai clic sul campo Testo, elimina il testo predefinito e digita Scegli la tua missione.
Nelle opzioni Aspetto, utilizza le impostazioni seguenti:
Color and Opacity = Hex Linear E0137CFF
Font Family = HeadingNow
Carattere tipografico = 86Grassetto
Dimensione = 85
Dimensione contorno = 2
Angoli mitrati = Check
Colore contorno = Lineare esadecimale FFFFFFFF
Trascina un widget Immagine nel widget Contenuto e rinominalo Spacer. Questo widget viene utilizzato come distanziatore per mettere uno spazio tra il callout e le caselle missione.
Aggiunta dello spazio Caselle della missione
Trascina un Widget Overlay nel Widget Contenuto e rinominalo Caselle.
Trascina un Widget Immagine nel Widget Caselle e rinominalo TileBG.
Seleziona il widget TileBG nel pannello Gerarchia per aprire le relative opzioni nel pannello Dettagli.
Nelle opzioni Slot (Slot overlay), utilizza le impostazioni seguenti:
Allineamento orizzontale = Riempi orizzontalmente
Allineamento verticale = Riempi verticalmente
Nelle opzioni Aspetto, utilizza le impostazioni seguenti.
Pennello > Immagine = Materiale di sfondo secondario
Dimensioni immagine:
X = 1200
Y = 32.0
Trascina un widget Riquadro stack nel widget Riquadri e rinominalo Riquadri missione. Questa casella impilata ordina le caselle missione da sinistra a destra.
Il layout dello sfondo è Completato. La schermata di selezione della missione dovrebbe apparire abbastanza vuota in questa fase.
Successivamente, disporrai le tre caselle di selezione della missione e le costruirai all'interno del widget Stack Box. Aggiungerai anche una Texture carattere al design per aggiungere interesse visivo. Design Caselle Missione 1
La progettazione delle caselle della missione può fornire informazioni sul livello e sugli obiettivi, includere statistiche sugli obiettivi dei giocatori e persino tenere traccia dei progressi del giocatore in tali obiettivi. Questo esempio di Caselle fornisce un design più semplicistico. È presente una texture di sfondo che mostra una rappresentazione del livello, un numero di missione e un pulsante di avvio. L'utilizzo di una serie di riquadri stack consente di disporre i widget da sinistra a destra o in alto e in basso. Quando hai un layout verticale o orizzontale, una casella Stack aiuta a mantenere il layout coerente. Tutte e tre le caselle Missione seguono lo stesso pattern di progettazione. Segui le istruzioni seguenti per costruire tutte e tre le caselle di selezione.
Trascina un widget Overlay nel pannello Griglia nel pannello Gerarchia e rinominalo Missione 1. Questo diventa un contenitore che contiene tutti gli Elementi di design per la Casella Missione 1.
Seleziona il widget Missione 1 nel pannello Gerarchia per aprirne le opzioni nel pannello Dettagli.
Sotto l'opzione Slot (Slot Stack Box), utilizza le seguenti impostazioni di spaziatura:
Left = 0.0
Top = 0.0
Destra = 24.0
Bottom = 0.0
Trascina un widget Immagine nel widget Missione 1 nel pannello Gerarchia e rinominalo Mission1Image. Questo widget è la rappresentazione visiva di Mission1.
Seleziona Mission1Image nel pannello Gerarchia per aprire le relative opzioni nel pannello Dettagli.
Nelle opzioni Slot (Slot stack box), utilizza le impostazioni seguenti:
Allineamento orizzontale = Tutto orizzontale
Allineamento verticale = Verticale completo
Nelle opzioni Aspetto, modifica le impostazioni seguenti:
Immagine = Texture della missione 1
Dimensioni immagine:
X = 256.0
Y = 256.0
La regolazione delle dimensioni dell'immagine fornisce un ulteriore livello di controllo sul design delle caselle.
Ordinare i contenuti del riquadro
Trascina un widget Riquadro stack nel widget Missione 1 e rinominalo M1Content.
Seleziona M1Content nel pannello Gerarchia per aprirne le opzioni nel pannello Dettagli.
Nelle opzioni Slot (Slot overlay), modifica le impostazioni seguenti:
Allineamento orizzontale = Allineamento centrale
Allineamento verticale = Allineamento centrale
In questo modo tutti i widget figlio della Stack Box si allineano al centro.
Sotto l'opzione Comportamento , imposta Orientamento su Verticale. In questo modo tutti i widget figlio vengono impilati verticalmente.
Trascina un widget Overlay in M1Content e rinominalo M1Header. Questo overlay funge da bucket per tutti gli asset di intestazione e li formatta in base alle impostazioni dell'overlay.
Seleziona M1Header nel pannello Hierarchy per aprirne le opzioni nel pannello Details.
In Slot (Slot Stack Box), modifica le opzioni seguenti:
Spaziatura:
Left = 0.0
Top = 0.0
Right = 0.0
Bottom = 128.0
Size = Auto
Allineamento orizzontale = Allineamento al centro
Allineamento verticale = Verticale completo
Le impostazioni di riempimento univoche forniscono il riempimento sul lato destro della Casella della Missione 1.
Stile del testo del riquadro della missione
Trascina un widget Immagine in M1Header e cambia il suo nome in M1Stroke.
Seleziona M1Stroke nel pannello Hierarchy per aprirne le opzioni nel pannello Details.
In Asola (Slot overlay), imposta l'allineamento su Tutto orizzontale e Tutto verticale.
In Opzioni di aspetto, utilizza le impostazioni seguenti:
Image = Materiale sezione
Dimensioni immagine:
X = 200.0
Y = 32.0
Trascina una casella di testo nel widget M1Header e rinomina il widget Mission_1.
Seleziona il widget di testo Mission_1 nel pannello Gerarchia per aprire le relative opzioni nel pannello Dettagli.
In Opzioni slot (Slot overlay), utilizza le impostazioni di allineamento seguenti:
Allineamento orizzontale = Allineamento centrale
Allineamento verticale = Allineamento superiore
Modifica il testo in Missione 1.
Dallo strumento Pennello > Immagine, apri il selettore colore e scegli il colore di accento per il testo.
In Font imposta le opzioni seguenti:
Typeface = Grassetto
Size = 25.0
Spaziatura lettere = 65
Quantità di inclinazione = 0.28
In Impostazioni contorno, imposta le seguenti opzioni:
Dimensione contorno = 1
Alpha riempimento separato = Controlla
Applica contorno ad aggiunta ombre = Check
Colore contorno = Seleziona il colore principale con lo strumento Selezione colore
Cambia il colore dell'ombra nel tuo colore principale con lo strumento Selezione colore. Il carattere deve apparire leggermente 3D e avere uno stile distinto diverso dal testo del callout.
Aggiunta di un pulsante Start
Trascina un widget Pulsante silenzioso nel widget M1Content e rinominalo START_M1_Button.
Seleziona START_M1_Button nel pannello Gerarchia per aprire le relative opzioni nel pannello Dettagli.
Modifica il testo del pulsante in START.
Nelle opzioni Slot (Slot Stack Box), imposta Altezza minima su 56. In questo modo si riduce l'altezza del pulsante.
Seleziona Selezione > Selezionabile. Questo rende il pulsante selezionabile per il giocatore.
In Input, imposta le opzioni seguenti:
Metodo tocco = Giù
Press method = Button Press
Segui i passaggi per costruire il layout per la Missione 2 e la Missione 3.
Prima di aggiungere le caselle Missione 2 e Missione 3, il design deve essere simile all'immagine seguente.
Una volta completate tutte le caselle della missione, aggiungi un carattere al design per conferire un certo interesse visivo all'interfaccia utente.
Aggiungi una texture di carattere
L'aggiunta di una Texture di carattere alla UI richiama tutti i colori scelti per il design e aggiunge stile visivo alla UI. Ricordati di utilizzare la potenza di due e di assicurarti che la texture che utilizzi sia di alta qualità e scalabile a qualsiasi dimensione.
Trascina un Widget Immagine nel Widget body e rinominalo carattere.
Seleziona il widget Character nel pannello Hierarchy per aprirne le opzioni nel pannello Details.
In Aspetto, utilizza le seguenti impostazioni:
Pennello > Immagine = Texture del carattere
Dimensioni immagine:
X = 700
Y = 700
In Opzioni slot (slot griglia), utilizza le impostazioni seguenti:
Allineamento orizzontale = allineamento a destra
Allineamento verticale = Verticale completo
Nudge = Utilizza gli strumenti dell'Asse X e dell'Asse Y per posizionare con precisione la Texture del carattere.
Una volta completata la sezione della missione, puoi procedere a collegare le funzionalità dei pulsanti nella tua UI.
Step 4: Aggiungi un Viewmodel
Un Viewmodel controlla le informazioni sul giocatore attraverso un elenco di funzioni e fornisce un modo specifico per associare i Widget UMG ai dispositivi Creativi. Esiste un Viewmodel specifico che utilizza i pulsanti, il CreativeModalDialogViewmodel. Questo viewmodel funziona solo con la variante Widget Finestra di dialogo modale e fornisce numerose funzioni dei pulsanti.
Per utilizzare il Viewmodel, esegui le operazioni seguenti:
Apri il menu Windows dalla barra del menu principale.
Seleziona Modelli di visualizzazione dal menu a discesa. Il pannello CreativeModalDialogViewmodel esegue automaticamente la documentazione nella finestra dell'Editor widget.
Tutte le funzioni dei pulsanti vengono aggiunte al widget. Ora devi aggiungere le associazioni per far funzionare i pulsanti.
Passaggio 5: aggiungi dispositivi
Una volta configurate le aree di missione, ogni area ha bisogno del proprio dispositivo di teletrasporto configurato per ricevere il giocatore. Un dispositivo Finestra di dialogo pop-up prende il widget Variante Finestra di dialogo modale e mostra l'interfaccia utente del widget quando viene attivato.
Dispositivi Finestra di dialogo a comparsa
Inizia aggiungendo un dispositivo Finestra di dialogo pop-up al progetto. Modifica le opzioni, quindi aggiungi il widget Variante Finestra di dialogo modale al dispositivo.
Trascina un dispositivo Finestra di dialogo pop-up nella viewport.
Nel pannello Dettagli, imposta le opzioni utente seguenti:
Description = Schermata di selezione della missione
Display automatico = Inizio del gioco
Tipo di risposta = 3 pulsanti
Queste opzioni identificano il widget, determinano quando la UI viene visualizzata nell'HUD e il numero di pulsanti associati al widget.
In Opzioni avanzate, imposta le opzioni seguenti:
Pulsante indietro predefinito = Nessuno
Testo pulsante 1 = INIZIO
Testo pulsante 2 = INIZIA
Testo pulsante 3 = AVVIO
Mask background = Controlla
Abilitato durante la fase = Solo gameplay
Scorri fino a Widget modale > Classe override modello e seleziona il tuo widget Mission_Select_UI dal menu a tendina.
Scorri fino a Opzioni utente-Funzioni e, in Mostra, apri un elemento dell'array.
Aggiungi la Pedana di generazione giocatore 1 al campo superiore.
Seleziona Quando il giocatore viene generato per la funzione Pedana di generazione.
Dispositivo Teletrasporto
Per ridurre i tempi di sviluppo, crea il primo dispositivo di teletrasporto e modifica le relative opzioni, quindi copia il dispositivo e posiziona i dispositivi aggiuntivi nelle rispettive aree di missione.
Trascina un dispositivo Teletrasporto nella viewport.
Nel pannello Dettagli, sotto Opzioni Utente, deseleziona Fenditura teletrasporto visibile e Riproduci effetti visivi.
Scorri verso il basso fino a Opzioni utente-Funzioni e, sotto Teletrasporto, apri un elemento dell'array.
Aggiungi la finestra di dialogo pop-up al campo superiore.
Seleziona Quando il pulsante 1 risponde.
Duplica il dispositivo Teletrasporto 2 volte.
In ciascuna delle funzioni aggiuntive Opzioni utente del teletrasporto - Funzioni > Teletrasporto > Dispositivo Finestra di dialogo pop-up, cambia la funzione nel pulsante corrispondente (Quando risponde il pulsante 2, Quando risponde il pulsante 3).
Per iniziare una missione, il giocatore fa clic sul pulsante associato a un'area di missione, quindi viene teletrasportato nell'area di missione selezionata. Per creare questa funzionalità, dovrai associare la funzionalità del pulsante ai pulsanti nella schermata di selezione.
Passaggio 6: Visualizza associazioni
Visualizza associazioni aggiunge la logica che lega il dispositivo e la funzione widget.
In questo esempio, i pulsanti sono Limite ai dispositivi tramite la funzione di teletrasporto. Quando il giocatore seleziona una missione, facendo clic sul pulsante INIZIA si attiva il teletrasporto collegato e il giocatore viene teletrasportato nell'area della missione.
Tutti i pulsanti aggiunti alla Gerarchia sono numerati. In questo modo è più facile associare la funzione del pulsante al dispositivo.
Per aggiungere le associazioni, esegui le operazioni seguenti:
Seleziona Start_Mission_1_Button nel pannello Gerarchia per evidenziarlo, quindi seleziona Visualizza associazioni dalla barra degli strumenti inferiore. Si apre la finestra Visualizza associazioni con il pulsante Silenzioso già selezionato.
Seleziona +Aggiungi widget Start_Mission_1_Button. In questo modo viene creata una vista di associazione sottostante.
Seleziona il campo a sinistra che contiene Start_Mission_1_Button e seleziona Al clic > Evento dal menu a tendina. L'evento Al clic viene aggiunto al pulsante Silenzioso.
Seleziona il campo a destra e seleziona CreativeModalDialogViewmodel > Risposta > Seleziona dal menu a tendina. In questo modo viene aggiunta una funzione di risposta all'evento On Clicked del pulsante.
Nel menu a discesa Risposta, seleziona Pulsante 1. La funzione è associata al primo pulsante silenzioso.
Ripeti questi passaggi per associare i due pulsanti successivi.
A questo punto, tutti i pulsanti devono essere associati ai teletrasporti, e la schermata di selezione della missione dovrebbe apparire quando il giocatore si genera nel gioco all'inizio del gioco.
Risultato
L'ultimo passaggio è eseguire il playtest del progetto per assicurarsi che la UI funzioni come previsto. Avvia una sessione, quindi la schermata Selezione missione dovrebbe apparire dopo che il giocatore si è generato sull'isola e il giocatore deve teletrasportarsi nella missione selezionata dalla UI.
In autonomia
Esistono diversi modi per modificare il design della schermata di selezione della missione per renderla univoca per il tuo progetto.
Puoi cambiare la Caselle della missione in background in un Materiale invece che in una Texture. Questo può conferire alla schermata della missione un aspetto diverso.
Puoi aggiungere un tracciatore a ogni missione per tenere traccia delle statistiche dei giocatori o degli oggetti raccolti.
Puoi aggiungere un dispositivo Impostazioni round per rigenerare i giocatori e riportare la schermata di selezione della missione in modo che i giocatori possano selezionare le altre missioni che non hanno ancora giocato e rendere non disponibili le missioni selezionate dopo che sono state completate con successo.
