Share
Cosa starai creandoIn questo tutorial nella nostra serie Amazon Lumberyard, ti mostrerò come utilizzare l'UI Editor e le sue funzionalità. Aggiungerai e configurerai diversi elementi come sfondo, etichette di testo e pulsanti. Quindi imparerai come creare un menu dell'interfaccia utente da zero. Alla fine, ti troverai di fronte a una sfida.
Si noti che si consiglia di leggere il resto della serie al fine di comprendere appieno le notazioni di questa parte.
Questa serie di tutorial si rivolge principalmente a due gruppi di sviluppatori di giochi: quelli che non hanno affatto familiarità con i motori di gioco e quelli che hanno familiarità con altri motori di gioco (come Unity, Unreal Engine o Cry Engine), ma non con Lumberyard . Presumo che tu abbia una certa conoscenza della notazione grafica del computer, quindi non coprirò in modo esaustivo tutte le notazioni.
L'editor dell'interfaccia utente può essere aperto utilizzando due metodi principali; il primo è attraverso il Menu principale usando il link a Visualizza> Apri riquadro di visualizzazione> Editor interfaccia utente.
Il secondo modo è attraverso il UI Editor icona disponibile in Barra degli strumenti dell'editor.
Apri il UI Editor utilizzando una delle opzioni di cui sopra.
Dopo il UI Editor si apre, si noterà che sarà vuoto. Quando si apre l'editor dell'interfaccia utente, per impostazione predefinita carica una tela vuota.
Per capire meglio come UI Editor è organizzato, apriremo il campione di tela dell'interfaccia utente di Lumberyard. Per fare ciò, fare clic File> Apri. Ora vai al dev \ SamplesProject \ Levels \ Samples \ UIEditor_Sample \ UI cartella e selezionare il UiSample.uicanvas file. Clic Aperto. Un'interfaccia lucida apparirà come segue:
Il UI Editor consiste dei seguenti riquadri:
Si noti che è possibile aumentare o diminuire le dimensioni (mediante lo zoom in avanti e indietro) della vista utilizzando la rotellina del mouse.
Se si seleziona il sfondo elemento all'interno del Gerarchia, il seguente Proprietà sono presentati:
Allo stesso modo, se si seleziona uno dei pulsanti, il Proprietà il menu cambierà di conseguenza (è sensibile al contesto).
Con il UI Editor aperto, selezionare il sfondo elemento nel Gerarchia riquadro. Fare clic destro su di esso e selezionare Nuovo> Svuota da prefabbricato ...> Pulsante.
Un nuovo pulsante dovrebbe apparire all'interno del viewport.
Noterai che il nuovo Pulsante non ha lo stesso aspetto diil Giocare, Opzioni, e Smettere pulsanti.
Per iniziare a modificare l'aspetto del pulsante, spostiamo prima il pulsante in una nuova posizione. La nuova posizione dovrebbe essere sotto il Smettere pulsante. Per eseguire questa azione, selezionare il Pulsante (usando il viewport o il Gerarchia); quindi selezionare il Mossa strumento e, infine, posizionarlo nella posizione desiderata.
Quindi, è necessario modificare il Pulsante testo. Selezionare Testo sotto il Pulsante dentro il Gerarchia riquadro. Si noti che il Proprietà riquadro modificato di conseguenza. Cambiare il Testo proprietà Di.
Puoi anche modificare il testo Colore, trasparenza (Alfa), Percorso dei caratteri, Dimensione del font, o Effetti di carattere, ed entrambi Verticale allineamenti di testoe Hallineamenti orizzontali del testo. Come accennato in precedenza, queste proprietà sono sensibili al contesto, quindi cambiano prendendo in considerazione l'elemento scelto.
Ora, cambia il Colore al bianco e al Alfa valore su 1. Quindi fare doppio clic sul valore predefinito Percorso dei caratteri. Vai a font cartella e selezionare il notosans-regular.xml file. Infine, cambia il Effetto font a partire dal drop_shadow a predefinito. Le configurazioni dei pulsanti dovrebbero essere come segue:
Seleziona il nuovo Pulsante dentro il Gerarchia riquadro e modificare il Percorso sprite. Navigare verso SamplesProject \ textures \ UIEditor_Sample, seleziona il ButtonNormal file e fare clic Aperto.
Per nascondere l'immagine, è necessario cambiarne l'aspetto Alfa. Cambiare il ImageType a teso, il Colore al bianco e al Alfa a 0. La configurazione finale è:
Un pulsante senza interazione dell'utente non è un pulsante. Il prossimo passo è aggiungere una certa interazione ai pulsanti. In Lumberyard, l'azione con un pulsante viene eseguita utilizzando gli stati del pulsante. Modificare gli stati è un ottimo modo per inviare feedback all'utente per fargli sapere quando stanno manipolando un pulsante specifico all'interno del viewport.
Ogni pulsante può avere tre stati:
Cominciamo cambiando il librarsi stato. Seleziona il folletto cartella e modificarne il valore ButtonNormal. Per impostazione predefinita, dovresti trovarti nell'ultima cartella utilizzata. In caso contrario, vai a SamplesProject \ textures \ UIEditor_Sample e selezionare il ButtonNormal.
Ora cambia il pressato stato eseguendo lo stesso passo di prima, ma ora seleziona il ButtonPressed file.
In questo momento, il prossimo passo logico è stato testare le interazioni appena create. Tuttavia, lo lasceremo per un passo successivo (nel prossimo tutorial). Per ora, crederai che ciò che hai appena eseguito funziona come previsto.
Quando è necessario più di un tipo di elemento, si consiglia di creare, utilizzare e riutilizzare prefabbricati. Questo può essere molto utile se hai bisogno di riutilizzare il tuo elemento su più tele all'interno del tuo progetto.
Per salvare ilpulsante come prefabbricato, fare clic con il tasto destro su di esso e selezionare Salva come Prefab ... .
Dai il nome al prefabbricato CustomButton e fare clic Salvare.
Ora che hai già creato un prefabbricato, puoi eliminare il filepulsante dal Gerarchia.
Che ne dici del nuovo prefabbricato? Come possiamo aggiungerlo di nuovo? Per aggiungere il prefabbricato, è necessario fare clic su Nuovo… pulsante e selezionare Elemento da prefabbricato> CustomButton.
Il tuo pulsante dovrebbe apparire esattamente nello stesso posto in cui era stato precedentemente configurato.
A questo punto conosci già le basi del UI Editor e le sue proprietà. Pertanto, è giunto il momento di creare un UI Canvas da zero.
Apri il UI Editor e inizia aggiungendo un Immagine prefabbricato ( Nuovo… > Elemento dal prefabbricato> Immagine).
Un quadrato bianco è posto all'interno del viewport. Ora è il momento di configurarlo. Seleziona il Immagine e fai doppio clic sul suo nome. Cambiarlo in sfondo.
Con il sfondo selezionato, guarda il Proprietà riquadro. Il nostro obiettivo è quello di adattare l'immagine di sfondo alla vista completa, quindi dobbiamo controllarne le proprietà sotto Transform2D proprietà.
Seleziona il Ancora preimpostare e scegliere quello in basso a destra.
In tal modo, stai dicendo che il Immagine dovrebbe coprire l'intera finestra. Il Ancora specifica le posizioni proporzionali all'interno del rettangolo dell'elemento genitore.
Hai notato le ancore blu che sono appena apparse?
Le ancore blu all'interno del rettangolo bianco indicano i punti di ancoraggio. Usando la configurazione di cui sopra, gli ancoraggi saranno posizionati automaticamente vicino ai quattro angoli.
Tuttavia, dovresti aver già notato che la dimensione del rettangolo bianco è diversa dalla risoluzione predefinita. Per risolvere questo problema, è necessario modificare tutto offset a 0.
Usando questa configurazione, ora puoi cambiare la risoluzione della vista a una data risoluzione e l'immagine di sfondo cambierà di conseguenza.
Il prossimo passo è aggiungere una bella immagine di sfondo nel sfondo elemento. Scarica questa immagine e inseriscila nella cartella del tuo progetto (ad esempio sotto il dev \ SamplesProject cartella).
Si noti che, se non si inserisce il file immagine all'interno del nostro progetto, Lumberyard restituirà un "Errore di trama mancante". Procedere e selezionarlo dal Percorso sprite sotto il Immagine sezione del Proprietà vetro.
Testo
Aggiungere un Testo prefabbricato (Nuovo… > Elemento da prefabbricato> Testo). Cambialo Testo nome a "GIOCO INCREDIBILE gamedevelopment.tutsplus.com"e il suo colore a un verde chiaro Dimensione del font dovrebbe essere 60, e dovrebbe essere posizionato vicino alla cima.
Hai un titolo, ma ti mancano i pulsanti per l'interazione dell'utente. Pertanto, il prossimo passo è creare tre pulsanti:
Per ogni pulsante, utilizzerai diverse configurazioni.
Quello che dovresti creare è qualcosa di simile al seguente:
Se hai qualche problema nel raggiungere la configurazione precedente, vai alla sezione successiva e ti guiderò attraverso.È necessario creare tre pulsanti con proprietà diverse. Iniziamo con quello facile, il CustomButton prefabbricato. Per importare quel pulsante, è necessario fare clic su Nuovo ...> Elemento da prefabbricato> CustomButton. Il pulsante dovrebbe apparire. Ora è solo questione di posizionarlo.
Il secondo pulsante dovrebbe essere Inizia il gioco. Aggiungere un Pulsante prefabbricato (Nuovo ...> Elemento prefabbricato> Pulsante) e cambiarne Testo nome a Inizia il gioco. Se lo desideri, puoi modificare le proprietà aggiuntive di questo pulsante. Spetta a te farlo.
Il terzo pulsante, Opzioni, è un po 'più complicato rispetto ai precedenti due. Inizia aggiungendo un altro Pulsante prefabbricato (Nuovo ...> Elemento prefabbricato> Pulsante). Cambialo Sprite Path al options_icon.png file. Dopo questo passaggio, vedrai l'immagine del pulsante ma con il torto Altezza taglia. Procedi e cambia il Altezza valore a 200.
L'ultimo passaggio è salvare la tela dell'interfaccia utente. Seleziona File> Salva come e nominalo MyCanvases.
Come accennato in precedenza, ci sono alcuni passaggi che non sono stati testati correttamente (come gli stati del pulsante e l'ulteriore interazione dell'utente). La ragione principale riguarda il fatto che è necessario utilizzare FlowGraph per testare quelle interazioni. Pertanto, il prossimo tutorial della serie sarà incentrato su FlowGraph, e torneremo a sezionare questa parte.
Ora sei sfidato a creare una nuova tela per l'interfaccia utente per il Di e Opzioni pulsanti. Nel prossimo tutorial, ti verrà chiesto di connettere tutto.
Questo conclude questo tutorial su Lumberyard. Hai imparato come utilizzare l'UI Editor e le sue proprietà. Hai imparato come aggiungere e configurare diversi elementi dell'interfaccia utente come immagine, testo e pulsante. Ora puoi creare menu personalizzati da zero e configurarne l'aspetto. Se avete domande o commenti, come sempre, sentitevi liberi di inserire una riga nei commenti.
Accentsconagua