Share
Cosa starai creandoIn questo tutorial, ti mostrerò come utilizzare il Flow Graph System in Amazon Lumberyard. Giocherete con il sistema di scripting visivo per animare i pulsanti e creare interazioni tra l'UI Canvas e le scene 3D. Quindi, creerai un altro script per modificare la tua scena 3D prendendo in considerazione la posizione del tuo avatar. 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.
Flow Graph è un sistema di scripting visivo che consente di implementare una logica di gioco complessa senza la necessità di programmare una singola riga di codice. Tutta la logica può essere creata, modificata e rimossa con solo poche interazioni dell'interfaccia utente. Flow Graph è anche utile per la prototipazione di scenari, effetti e suoni di gioco.
Al suo interno, il Flow Graph è costituito da nodi e collegamenti. Le prime rappresentano solitamente entità di livello o azioni che possono eseguire un'azione specifica su un'entità di destinazione. Questi ultimi sono usati per connettere i nodi e sono rappresentati come frecce che collegano gli ingressi e le uscite tra i nodi.
Il diagramma di flusso può essere aperto in due modi principali; il primo è attraverso il menu principale, usando il link a vista > Apri il riquadro di visualizzazione > Diagramma di flusso.
Il secondo modo è attraverso l'icona del Flow Graph disponibile in editore barra degli strumenti.
Aprire il diagramma di flusso usando una delle opzioni disponibili.
L'editor Flow Graph è composto dai seguenti componenti:
Prima di saltare all'azione, è necessario imparare le basi degli script di Flow Graph.
Gli script di Flow Graph sono organizzati in quattro diverse categorie e contenuti nel Diagrammi di flusso (numero 3 nell'immagine precedente) albero delle cartelle in Flow Graph Editor.
Nel tutorial precedente, hai creato una tela dell'interfaccia utente contenente alcuni pulsanti. Si potrebbe anche ricordare che non è stato completamente testato. È giunto il momento di tornare indietro e finalizzarlo.
L'idea principale dietro la UI Canvas è la seguente:
Aprire Lumberyard Editor e poi il UI Editor. Clic Aperto e apri il tuo MyCanvases.uicanvas.
Sotto il Gerarchia riquadro, selezionare il sfondo elemento. Ora, sotto il Proprietà riquadro, fare clic Aggiungi componente ... e quindi selezionare il fader componente.
Sotto il Immagine proprietà; una nuova proprietà chiamata fader sarà mostrato.
Questo fader la proprietà verrà utilizzata per sfumare la tela dell'interfaccia utente quando si carica il livello.
Inizia aprendo il CompleteFirstLevel e quindi apri il Diagramma di flusso Editor. Dovrebbe apparire un grafico di flusso vuoto.
Sotto il componenti riquadro, selezionare il grafico Inizio, sotto il Gioco categoria.
Nota che puoi anche usare il Parola chiave di ricerca per cercare nodi specifici (quando sai cosa cercare).
Ora, clicca su File> Nuovo per creare un nuovo nodo grafico. Il nome predefinito è Predefinito, ed è posto sotto il File esterni sezione in grafici vetro.
Ora trascina il Inizio nodo nel grafico del nodo (centro dello schermo).
Il nodo Start è il nodo predefinito che viene eseguito quando si avvia il gioco usando il Passa al gioco opzione. Pertanto, normalmente la maggior parte dei grafici dei nodi inizieranno da questo nodo.
Prima di aggiungere i nodi necessari per visualizzare la tua interfaccia utente, devi acquisire ulteriori informazioni sul grafico del nodo e sulle proprietà dei suoi nodi.
Un nodo è rappresentato in Flow Graph come una scatola con input e output.
Un nodo è costituito da porte di input sul lato sinistro per la ricezione di informazioni e porte di uscita sul lato destro per la trasmissione di informazioni. Le porte di uscita vengono attivate in base alla funzione del nodo. Le porte possono avere i seguenti tipi di dati differenti.
| Tipo di dati | Colore | Descrizione |
|---|---|---|
| Qualunque | verde | Non specificato, qualsiasi tipo di dati può essere ricevuto |
| booleano | Blu | Vero o falso |
| EntityID | Verde / Rosso | Un valore unico che identifica qualsiasi entità in un livello |
| Galleggiante | bianca | Un valore in virgola mobile a 32 bit |
| Int | Rosso | Un numero positivo o negativo a 32 bit |
| UInt64 | n / A | Un numero positivo o negativo a 64 bit |
| Stringa | Turchese | Una serie di caratteri utilizzati per la memorizzazione del testo |
| Vec3 | Giallo | Un vettore 3D costituito da tre valori a virgola mobile. Può essere utilizzato per memorizzare posizioni, angoli o valori cromatici |
| vuoto | n / A | Utilizzato per porte che non accettano alcun valore ma che sono invece attivate per passare il flusso del controllo attraverso un diagramma di flusso |
Prendendo in considerazione l'immagine precedente:
Per consultare una documentazione completa relativa ai nodi del Flow Graph, è necessario leggere la documentazione ufficiale.
Quando il gioco inizia, vuoi caricare la tua tela dell'interfaccia utente. Fortunatamente, Lumberyard ha un nodo per quello. Seleziona il Caricare nodo sotto Interfaccia utente> Canvas e trascinarlo nel grafico del nodo.
Questo nodo ha due proprietà principali:
Seleziona il Caricare nodo e sotto il Proprietà riquadro, cambia il CanvasPathname proprietà a MyCanvases.uicanvas.
Quando si preme accedere chiave, la proprietà CanvasPathname dentro il Caricare il nodo dovrebbe cambiare di conseguenza.
Questo Caricare il nodo è quasi completo. Il tuo prossimo passo è connettere il Inizio nodo nel Caricare nodo. Questo viene eseguito trascinando un collegamento (o una freccia) da Inizio uscita nel Carica Attiva ingresso.
Se commetti un errore durante il collegamento di una freccia, puoi facilmente risolverlo. È necessario utilizzare il pulsante destro del mouse per fare clic sulla freccia e Rimuovere esso. Nota che puoi anche scegliere altre opzioni come disattivare, Ritardo, o Qualunque. Non li spiegherò in questo tutorial poiché non sono importanti per ciò che vogliamo realizzare.
Dal momento che vogliamo utilizzare un pulsante per attivare un'azione, dobbiamo aggiungerne uno ActionListener nodo. Sotto il UI > Tela, trascina il ActionListener nel grafico del nodo.
Il ActionListener ha tre proprietà molto importanti:
Non sto coprendo il Attivare di nuovo da quando l'ho spiegato prima.
Il primo passo è connettere il OnLoad al ActionListener Activate. Quindi, per passare l'id della tela, è necessario connetterli entrambi CanvasID uscita e input. Si noti che quando li si connette il CanvasID = 0 cambia in CanvasID.
Il ActionName non è così semplice dato che dobbiamo prima definire un'azione per il nostro pulsante. L'idea è di aggiungerne uno Azione clicca per Inizia il gioco pulsante.
Apri il UI Editor, e apri il MyCanvases.uicanvas. Seleziona il Inizia il gioco pulsante e sotto il Proprietà riquadro, aggiungi la stringa NewGameClick al Fai clic su Azione.
Salva il MyCanvases.uicanvas e tornare nel Diagramma di flusso editore. Seleziona il ActionListener nodo e cambia il ActionName proprietà a NewGameClick.
Il ActionListener è ora configurato. Ciò che rimane ora è configurare l'azione eseguita quando questo ActionListener E 'attivato. Ricorda il fader componente aggiunto in precedenza. È giunto il momento di usarlo.
Per questo, è necessario aggiungere il Animazione nodo all'interno del UI > fader albero nel nodo grafico.
Le nuove proprietà da guardare sono:
Il primo passo è verificare il elementID dal fader componente. Per questo, apri il UI Editor, carica la tua tela e seleziona il sfondo componente. Dentro il Proprietà riquadro, dai un'occhiata al numero all'interno del Id elemento.
Nota che hai selezionato il sfondo elemento, poiché è quello che ha il fader componente. Chiudi il UI Editor e cambia il elementID del Animazione nodo a 2.
Quindi, cambia il StartValue a 1 e il targetvalue a 0. Lasciare il Velocità valore come predefinito.
Ora collega il OnAction (ActionListener)al Attivare input (Animazione). Ancora una volta, collega il CanvasID insieme (Caricare nodo al Animazione nodo).
Questo Diagramma di flusso è quasi completo. Per capire cosa manca, gioca (Controllo-G). Cosa vedi? Il tuo menu con l'azione corretta all'interno del Inizia il gioco pulsante, ma nessun cursore del mouse per aiutarti. Risolviamolo, allora.
Cerca il MouseCursor nodo all'interno del Ingresso albero e aggiungerlo al nodo grafico. Questo nodo ha solo due ingressi (Mostrare e Nascondere). Entrambi sono auto-esplicativi, giusto?
Connetti il Inizio produzione (Inizio nodo) nel Mostrare input (MouseCursor nodo). Quindi, connetti il OnAction uscita al Nascondere ingresso.
Ora puoi avviare il gioco e testare se tutto è a posto. Ti renderai conto che lo è.
Tuttavia, eseguiremo un ulteriore passaggio di prestazioni. Dato che non vogliamo creare giochi con perdite di memoria, dovremmo prendere l'abitudine di fare le cose correttamente. Al termine dell'animazione dissolvenza, dovremmo scaricare la tela.
Aggiungi il Scaricare nodo (UI > Tela) come nodo finale nel grafico del nodo. Connetti il OnComplete (Animazione) output nel nodo Activate (Scaricare). Infine, collega il CanvasID insieme (Caricare nodo al Scaricare nodo).
Il diagramma di flusso completo è:
Salva il tuo diagramma di flusso e nominalo mygraphdemo.
Il prossimo passo di questo tutorial è quello di creare un altro diagramma di flusso. Tuttavia, questa volta, interagirai direttamente con gli oggetti all'interno della scena 3D per costruire il grafico. L'idea principale è quella di utilizzare la posizione del giocatore per interagire con un grilletto di prossimità per accendere una lampada.
Nel RollupBar, selezionare Entità > trigger e trascinare a Trigger di prossimità nella scena 3D.
Posiziona il Trigger di prossimità vicino a una lampada. La casella gialla 3d rappresenta l'area di innesco.
Fare clic con il pulsante destro del mouse Trigger di prossimità e selezionare il Crea il diagramma di flusso opzione.
Nominalo TriggerGraph e fare clic ok. L'editor del Flow Graph dovrebbe aprirsi. Noterai che questa volta il grafico sarà posizionato all'interno di Livello> Entità sezione.
Ora, riorganizza la tua interfaccia per vedere il Trigger di prossimità, il lampada (light1) e il Flow Graph Editor allo stesso tempo.
Seleziona il Trigger di prossimità e, all'interno del nodo grafico, utilizzare il pulsante destro del mouse e selezionare il Aggiungi entità selezionata opzione.
Una nuova ProximityTrigger apparirà il nodo.
Le uniche proprietà che useremo saranno le accedere e Partire uscite. Il primo viene attivato quando il giocatore entra nel Trigger di prossimità area, mentre il secondo è attivato quando il giocatore lascia il Trigger di prossimità la zona.
Quindi, seleziona il tuo light1 elemento e deselezionare il Attivo opzione all'interno del Proprietà di entità vetro.
Con il light1 selezionato, all'interno del Diagramma di flusso usa il tasto destro del mouse e seleziona Aggiungi entità selezionata ancora.
Ora devi connettere il ProximityTrigger nodo con il Luce nodo. Connetti il accedere uscita nel Abilitare ingresso. Infine, collega il Partire uscita nel disattivare ingresso.
Salvare il diagramma di flusso e nominarlo TriggerGraph. È giunto il momento di avviare il gioco e convalidare il nuovo diagramma di flusso. Tutto dovrebbe funzionare come previsto.
Al fine di testare la conoscenza che hai acquisito finora, ora sei sfidato a ricreare il Lumberyard di default -Livello completato getting-iniziato-. Per questo, dovrai giocare con i pennelli, l'illuminazione, i materiali, le trame, i terreni e i diagrammi di flusso. In breve, applica tutto ciò che hai imparato finora. Il tuo livello finale dovrebbe essere simile al seguente:
Questo conclude questo tutorial su Lumberyard. In questo tutorial, ti ho mostrato come usare il Flow Graph System. Hai giocato con il sistema di scripting visuale per configurare la UI Canvas come vista predefinita, e hai creato interazioni tra la UI Canvas e le tue scene 3D. Quindi, hai creato uno script per modificare la scena 3D, prendendo in considerazione la posizione del giocatore e un innesco di prossimità. Se avete domande o commenti, come sempre, sentitevi liberi di inserire una riga nei commenti.
Accentsconagua