Amazon Lumberyard Hvordan bruke Flow Graph System

Hva du skal skape

I denne veiledningen viser jeg deg hvordan du bruker Flow Graph System i Amazon Lumberyard. Du vil leke med det visuelle skriptystemet for å animere knapper og opprette interaksjoner mellom brukergrensesnittet og 3D-scenene dine. Deretter vil du opprette et nytt skript for å modifisere 3D-scenen din, tatt i betraktning av din avatar-plassering. Til slutt vil du bli utsatt for en utfordring.

Legg merke til at du anbefales å lese resten av serien for å få full forståelse av notatene fra denne delen.

Hvem skal lese denne opplæringsserien?

Denne opplæringsserien er primært rettet mot to grupper av spillutviklere: de som er helt ukjente med spillmotorer i det hele tatt, og de som er kjent med andre spillmotorer (for eksempel Unity, Unreal Engine eller Cry Engine), men ikke med Lumberyard . Jeg antar at du har litt kunnskap om datagrafikknotasjon, så jeg vil ikke fullt ut dekke alle notasjoner.

Flow Graph 

Flow Graph er et visuelt skript system som lar deg implementere komplekse spill logikk uten å måtte programmere en enkelt linje med kode. All logikk kan opprettes, endres og fjernes med bare noen få UI-interaksjoner. Flow Graph er også nyttig for prototyping av spill-spill-scenarier, effekter og lyder.

Kjernen består av Flow Graph av noder og lenker. Den førstnevnte representerer vanligvis nivå enheter eller handlinger som kan utføre en bestemt handling på en målenhet. Sistnevnte brukes til å koble til noder og er representert som piler som forbinder innganger og utganger mellom noder.

Flowgrafen kan åpnes på to hovedveier; den første er gjennom hovedmenyen, ved å bruke linken på Utsikt > Åpne visningspanel > Flow Graph.

Den andre måten er gjennom Flow Graph-ikonet som er tilgjengelig i Redaktør verktøylinje.

Åpne flowgrafen ved hjelp av ett av de tilgjengelige alternativene.


Flow Graph Editor er sammensatt av følgende komponenter:

  1. Nodgraf: hovedvinduet for visning av flytdiagrammer og tilkoblinger.
  2. komponenter: Nettleserdrane for alle noder du kan bruke.
  3. Flow Grafer: nettleserdrute for grafer og enheter; Hver flytdiagram opprettet vil bli plassert her.
  4. Eiendommer: Rute for å vise nodens inngangs- og utdataegenskaper.
  5. Søke: Rute for å søke i grafer og noder.
  6. Søkeresultater: Rute for å vise søkeresultater.
  7. Brytningspunkter: Rute for å vise brytpunkter; en utmerket måte å feilsøke spillet eller prototypen på.

Flow Graph Scripts

Før du hopper rett inn i handlingen, må du lære det grunnleggende av Flow Graph-skript.

Flow Graph-skript er organisert i fire forskjellige kategorier og finnes i Flowgrafer (Nummer 3 i det forrige bildet) mappetreet i Flow Graph Editor.

  • NivåDenne katalogen inneholder skript som er spesifikke for nivået som for øyeblikket er åpent. Det inneholder Entities, komponenter, og moduler. Entitetsfiler er flytdiagrammer opprettet og knyttet til en enhet som for øyeblikket er tilgjengelig i nivået. Komponenter er like, men nå er flytdiagrammer knyttet til komponenter av nivået. Moduler representerer en liste over moduler som er spesifikke for nivået.
  • Global: Inneholder brukergrensesnitthandlinger som brukes til å inkapslere brukergrensesnittlogg for enkel feilsøking og vedlikehold.
  • prefabs: I likhet med enheten prefab, kan du også lage graf prefabs. Du kan opprette en begivenhet i en prefab, gi den et navn, og referer deretter til prefab instance som du vanligvis gjør for en enhet.
  • Eksterne filer: Representerer en liste over importerte eller opprettede Flow Graph-skript.

Flow Graph Scripting: UI Lerret som standardvisning

I den forrige opplæringen opprettet du et UI-lærred som inneholder noen knapper. Du kan også huske at det ikke var fullt testet. Det er nå på tide å gå tilbake og fullføre det.

Hovedideen bak brukergrensesnittet er følgende:

  1. Når du kjører spillet ditt (Kontroll-G), skal brukergrensesnittet lastes inn (i stedet for første nivå).
  2. Når du klikker på Start spill knappen, skjer to sekvensielle handlinger:
  3. 1) UI-lerretet fades bort.
  4. 2) Du laster inn CompleteFirstLevel.

Fader-komponent

Åpne Lumberyard Editor og deretter UI Editor. Klikk Åpen og åpne din MyCanvases.uicanvas.

Under hierarki ruten, velg Bakgrunn element. Nå, under Eiendommer ruten, klikk Legg til komponent ... og velg deretter Fader komponent.

Under Bilde eiendommer; en ny eiendom kalt Fader vil bli vist.

Dette Fader eiendom vil bli brukt til å fade ut brukergrensesnittet når du legger inn nivået ditt.

Flow Graph Scripting

Begynn med å åpne CompleteFirstLevel og åpne deretter Flow Graph Redaktør. En tom flytdiagram skal vises.

Under komponenter ruten, velg grafen Start, under Spill kategori.

Legg merke til at du også kan bruke Søkeord å søke bestemte nodene (når du vet hva du skal søke).

Nå klikker du på Fil> Ny å opprette en ny nodediagram. Standardnavnet er Misligholde, og den er plassert under Eksterne filer delen i grafer ruten.

Dra nå Start knutepunkt i knutepunktet (midt på skjermen).

Startnoden er standardnoden som utføres når du starter spillet ditt ved hjelp av Bytt til spill alternativ. Derfor starter vanligvis de fleste nodediagrammer ved denne noden.

Før du legger til nødvendige noder for å vise brukergrensesnittet ditt, må du lære mer informasjon om nodediagrammet og dens noderegenskaper.

Flow Graph Nodes Beskrivelse

En knute er representert i Flow Graph som en boks med innganger og utganger.

En knute består av inngangsporter på venstre side for å motta informasjon og utgangsporter på høyre side for overføring av informasjon. Utgangsporter aktiveres avhengig av nodens funksjon. Portene kan ha følgende forskjellige datatyper.

Data-type Farge Beskrivelse
Noen Grønn Uspesifisert, hvilken datatype som helst kan mottas
boolean Blå Sant eller usant
ENTITYID Grønn / Rød En unik verdi som identifiserer alle enheter i et nivå
Flyte Hvit En 32-biters flytpunktsverdi
int rød Et 32-biters positivt eller negativt nummer
uint64
n / a Et 64-biters positivt eller negativt nummer
string turkis En rekke tegn som brukes til lagring av tekst
Vec3 Gul En 3D-vektor bestående av tre flytende punktverdier. Kan brukes til å lagre stillinger, vinkler eller farger
Tomrom n / a Brukes for porter som ikke godtar noen verdi, men utløses istedet for å sende strømmen av kontroll gjennom en flytdiagram

Tatt i betraktning det forrige bildet:

  • Teksten med blå bakgrunn representerer nodenavnet.
  • Teksten med rød bakgrunn representerer målgruppen.
  • Pilene på venstre del av noden representerer inngangsportene til MoveEntityTo node.
  • Pilene på høyre side av noden representerer utgangsportene til MoveEntityTo node.

For å konsultere en komplett dokumentasjon om Flow Graph noder, bør du lese den offisielle dokumentasjonen.

Flow Graph Scripting: Etterbehandling av UI Canvas

Når spillet starter, vil du laste inn UI-lerretet ditt. Heldigvis har Lumberyard en node for det. Velg Laste node under UI> Lerret og dra den inn i nodediagrammet.

Denne knuten har to hovedegenskaper:

  1. Aktiver: Den utløses automatisk når denne noden kalles.
  2. CanvasPathname: representerer banenavnet til brukergrensesnittet ditt. Her skal du sette navnet på brukergrensesnittet Laget opprettet i den forrige opplæringen (MyCanvases.uicanvas).

Velg Laste knutepunkt og under Eiendommer ruten, endre CanvasPathname eiendom til MyCanvases.uicanvas.


Når du trykker på Tast inn nøkkel, eiendommen CanvasPathname inne i Laste noden bør endres tilsvarende.

Dette Laste noden er nesten fullført. Ditt neste skritt er å koble til Start node inn i Laste node. Dette utføres ved å dra en lenke (eller pil) fra Start utdata i Last inn Aktiver inngang.

Hvis du gjør en feil når du kobler en pil, kan du enkelt fikse det. Du må bruke høyre museknapp for å klikke på pilen og Fjerne den. Merk at du også kan velge andre alternativer som Deaktiver, Utsette, eller Noen. Jeg vil ikke forklare dem i denne opplæringen siden de ikke er viktige for det vi ønsker å oppnå.

Siden vi vil bruke en knapp for å utløse en handling, må vi legge til en Action node. Under UI > Lerret, dra Action inn i nodediagrammet.

De Action har tre svært viktige egenskaper:

  1. CanvasID: Representerer et unikt heltallidentifikator for lerretet for å lytte til. Det betyr med andre ord lerretet som er lastet i forrige node. Derfor må den ha samme identifikator som MyCanvases.uicanvas.
  2. ActionName: Representerer navnet på handlingen som Action vil lytte. Dette handlingsnavnet er bestått når brukeren klikker på en knapp.
  3. VedHandling: Den utløser riktig utgang når lerretet sender handlingen det sender en ordre som skal utføres.

Jeg dekker ikke Aktiver igjen siden jeg forklarte det tidligere.

Det første trinnet er å koble til På Last til ActionListener Aktiver. Deretter må du koble til begge deler for å sende passordet ID CanvasID utgang og inngang. Legg merke til at når du kobler dem til CanvasID = 0 endres til CanvasID.

De ActionName er ikke så enkelt siden vi må først definere en handling for vår knapp. Tanken er å legge til en Handling klikk til Start spill knapp.

Åpne UI Editor, og åpne MyCanvases.uicanvas. Velg Start spill knappen, og under Eiendommer ruten, legg til strengen NewGameClick til Klikk på Handling.


Lagre MyCanvases.uicanvas og gå tilbake til Flow Graph redaktør. Velg Action node og endre ActionName eiendom til NewGameClick.

De Action er nå konfigurert. Det som gjenstår nå er å konfigurere handlingen som utføres når dette Action utløses. Minner om Fader komponent lagt til tidligere. Det er nå på tide å bruke det.

For det må du legge til animasjon node inne i UI > Fader tre i grafnoden.

De nye egenskapene å se på er:

  1. ElementID: Representerer den unike heltallidentifikatoren for Fader element.
  2. StartValue: Representerer verdien for Fader å starte; Det varierer fra 0 til 1.
  3. Målverdi: Representerer verdien for Fader å ende; igjen, det varierer fra 0 til 1.
  4. Hastighet: Representerer sekunder som er tatt av Fader å blekne; 1 representerer 1 sekund, 2 vil være dobbelt så fort. 0 representerer en umiddelbar handling. 
  5. onComplete: Utløser utgangen når Fader er fullført.

Det første trinnet er å verifisere ElementID fra Fader komponent. For det, åpne UI Editor, last opp lerretet ditt, og velg Bakgrunn komponent. Inne i Eiendommer ruten, ta en titt på nummeret inne i id element. 

Merk at du valgte Bakgrunn element, siden det er den som har Fader komponent. Lukk UI Editor og endre ElementID av animasjon node til 2.

Deretter endrer du StartValue til 1 og Målverdi til 0. La Hastighet verdi som standard.

Nå, koble til VedHandling (Action)til Aktiver inngang (animasjon). Igjen, koble til CanvasID sammen (Laste node til animasjon node).

Dette Flow Graph er nesten fullført. For å forstå hva som mangler, spill spillet (Kontroll-G). Hva ser du? Din meny med riktig handling inne i Start spill knappen, men ingen musemarkør for å hjelpe deg. La oss fikse det da.

Se etter MouseCursor node inne i Input tre og legg det til grafnoden. Denne noden har bare to innganger (Vise fram og Gjemme seg). Begge er selvforklarende, riktig?

Koble til Start utgang (Start node) inn i Vise fram inngang (MouseCursor node). Deretter kobler du til VedHandling utdata til Gjemme seg inngang.

Du kan nå kjøre spillet og teste om alt er greit. Du vil innse at det er.

Vi vil imidlertid utføre ett ekstra ytelsestrinn. Siden vi ikke vil lage spill med minnelekkasje, bør vi bli vant til å gjøre ting riktig. Etter avsluttende animasjon slutter, bør vi laste av lerretet.

Legg til Lesse knutepunkt (UI > Lerret) som din endelige node i nodediagrammet. Koble til onComplete (animasjon) Utgang til Aktiver noden (Lesse). Til slutt kobler du til CanvasID sammen (Laste node til Lesse node).

Den komplette flytdiagrammet er:

Lagre flytdiagrammet ditt og navnet på det mygraphdemo.

Mer Flow Graph Scripting

Det neste trinnet i denne opplæringen er å opprette en annen flytdiagram. Men denne gangen vil du direkte samhandle med objektene i 3D-scenen din for å konstruere grafen. Hovedideen er å bruke spillerens plassering for å samhandle med en nærhetsutløser for å slå på en lampe.

I RollupBar, å velge Entity > Triggers og dra a Nærhet Trigger inn i 3D-scenen.

Plasser Nærhet Trigger nær en lampe. Den gule 3d-boksen representerer utløserområdet.

Høyreklikk på Nærhet Trigger og velg Lag flytdiagram alternativ.

Navngi det TriggerGraph og klikk OK. Flow Graph Editor skal åpnes. Du vil legge merke til at denne gangen grafen vil bli plassert inne i Nivå> Enheter seksjon.

Nå omorganisere grensesnittet ditt for å se Nærhet Trigger, de lampe (Light1) og Flow Graph Editor samtidig. 

Velg Nærhet Trigger og, inne i grafnoden, bruk høyre museknapp og velg Legg til valgt enhet alternativ.

En ny ProximityTrigger node vil vises.

De eneste egenskapene vi vil bruke, vil være Tast inn og Permisjon utganger. Den første blir utløst når spilleren går inn i Nærhet Trigger område, mens det andre utløses når spilleren forlater Nærhet Trigger område.

Deretter velger du din Light1 element og avmarker Aktiv alternativet inne i Entity Properties ruten.

Med Light1 valgt, inne i Flow Graph bruk høyre museknapp og velg Legg til valgt enhet en gang til.

Nå må du koble til ProximityTrigger knutepunkt med Lys node. Koble til Tast inn utdata i Aktiver input. Til slutt kobler du til Permisjon utdata i Deaktiver inngang.

Lagre flytdiagrammet og navnet på det TriggerGraph. Nå er det dags å kjøre spillet og validere den nye flytdiagrammet. Alt skal fungere som forventet.

Utfordring

For å teste kunnskapen du har kjøpt så langt, er du nå utfordret til å gjenskape standard Lumberyard komme-i gang-ferdig-nivå. For det må du leke med børster, belysning, materialer, teksturer, terreng og flytdiagrammer. Kort sagt, bruk alt du har lært så langt. Ditt siste nivå bør se ut som følgende:

Konklusjon

Dette avslutter denne opplæringen på Lumberyard. I denne veiledningen har jeg vist deg hvordan du bruker Flow Graph System. Du har spilt med det visuelle skriptystemet for å konfigurere brukergrensesnittet som standardvisning, og har skapt interaksjoner mellom brukergrensesnittet og 3D-scenene dine. Deretter opprettet du et skript for å modifisere 3D-scenen din, med tanke på spillerens plassering og nærhetstrykk. Hvis du har spørsmål eller kommentarer, kan du som alltid gjerne slippe en linje i kommentarene.