Share
Hva du skal skapeI denne veiledningen i Amazon Lumberyard-serien, viser jeg deg hvordan du bruker brukergrensesnittredigereren og dens funksjoner. Du vil legge til og konfigurere flere elementer som bakgrunn, tekstetiketter og knapper. Deretter lærer du hvordan du oppretter en brukergrensesnittmeny fra grunnen av. 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.
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.
UI-editoren kan åpnes ved hjelp av to hovedveier; den første er gjennom Hovedmeny ved å bruke linken på Vis> Åpne visningspanel> UI-editor.
Den andre veien er gjennom UI Editor ikon tilgjengelig i Redigeringsverktøylinje.
Åpne UI Editor ved hjelp av en av de nevnte alternativene.
Etter UI Editor åpner, vil du legge merke til at det blir tomt. Når brukergrensesnittredigereren åpnes, lastes det som standard et tomt lerret.
For bedre å forstå hvordan UI Editor er organisert, vil vi åpne Lumberyard UI lerret prøven. For å gjøre det, klikk Fil> Åpne. Naviger nå til dev \ SamplesProject \ Levels \ samples \ UIEditor_Sample \ UI mappe og velg UiSample.uicanvas fil. Klikk Åpen. Et skinnende grensesnitt vises som følger:
De UI Editor består av følgende ruter:
Merk at du kan øke eller redusere størrelsen (ved å zoome inn og ut) i visningsporten ved hjelp av museskiven.
Hvis du velger Bakgrunn element inne i hierarki, følgende Eiendommer er presentert:
På samme måte, hvis du velger noen av knappene, Eiendommer menyen vil endres tilsvarende (det er kontekstsensitiv).
Med UI Editor åpnet, velg Bakgrunn element i hierarki ruten. Høyreklikk på den og velg Nytt> Tomt fra prefab ...> Knapp.
En ny knapp skal vises i visningsporten.
Du vil legge merke til at den nye Knapp har ikke det samme utseendet somde Spille, alternativer, og Slutte knapper.
For å begynne å endre knapputseendet, la oss først flytte knappen til et nytt sted. Den nye plasseringen skal være under Slutte knapp. For å utføre denne handlingen, velg Knapp (bruker view eller hierarki); velg deretter Bevege seg verktøy og endelig plasser den på ønsket sted.
Deretter må du endre Knapp tekst. Å velge Tekst under Knapp inne i hierarki ruten. Legg merke til at Eiendom ruten endret tilsvarende. Endre Tekst egenskapen til Handle om.
Du kan også endre teksten Farge, gjennomsiktighet (Alpha), Font banen, Skriftstørrelse, eller Font effekter, og begge deler vertikal tekstjusteringerog Horientalske tekstjusteringer. Som nevnt ovenfor er disse egenskapene kontekstfølsomme, slik at de endrer å ta hensyn til det valgte elementet.
Nå, endre Farge til hvitt og Alpha verdi til 1. Dobbeltklikk deretter på standardinnstillingen Font banen. Naviger til fonter mappe og velg notosans-regular.xml fil. Endelig, endre Font-effekt fra drop_shadow til misligholde. Dine knappkonfigurasjoner skal være som følger:
Velg den nye Knapp inne i hierarki rute og endre Sprite banen. Navigere til SamplesProject \ teksturer \ UIEditor_Sample, velg ButtonNormal fil, og klikk Åpen.
For å skjule bildet må du endre det Alpha. Endre ImageType til strukket, de Farge til hvitt, og Alpha til 0. Den endelige konfigurasjonen er:
En knapp uten brukermedvirkning er ikke en knapp. Det neste trinnet er å legge til noe samspill med knappene. I Lumberyard utføres en knapp ved hjelp av knappens tilstander. Endring av statene er en fin måte å sende tilbakemelding til brukeren for å gi dem beskjed når de manipulerer en bestemt knapp i visningsporten.
Hver knapp kan ha tre tilstander:
La oss begynne med å endre Sveve stat. Velg Sprite mappe og endre verdien til ButtonNormal. Som standard bør du være i den sist brukte mappen. Hvis ikke, naviger til SamplesProject \ teksturer \ UIEditor_Sample og velg ButtonNormal.
Endre nå presset angi ved å utføre det samme trinnet som før, men velg nå ButtonPressed fil.
For øyeblikket var det neste logiske trinnet å teste samspillene som nettopp er opprettet. Vi vil imidlertid forlate det for et senere trinn (i neste opplæring). For nå vil du bare tro at det du nettopp har utført, fungerer som ønsket.
Når du trenger mer enn en type element, anbefales det å lage, bruke og gjenbruke prefabs. Dette kan være svært nyttig hvis du trenger å gjenbruke elementet ditt på tvers av flere canvases i prosjektet ditt.
For å lagreknappen som prefab, høyreklikk på den, og velg Lagre som Prefab ... .
Navn prefab CustomButton og klikk Lagre.
Nå som du allerede har opprettet en prefab, kan du sletteknapp fra hierarki.
Hva med den nye prefab? Hvordan kan vi legge til det igjen? For å legge til prefab, bør du klikke på Ny… knappen og velg Element fra prefab> CustomButton.
Din knapp skal vises nøyaktig på samme sted der den tidligere ble konfigurert.
På dette punktet vet du allerede grunnleggende om UI Editor og dens egenskaper. Derfor er det nå på tide å lage en UI lærred fra bunnen av.
Åpne UI Editor og begynn med å legge til en Bilde prefab ( Ny… > Element fra prefab> Bilde).
Et hvitt torg er plassert inne i visningsporten. Det er nå på tide å konfigurere det. Velg Bilde og dobbeltklikk på navnet sitt. Endre det til Bakgrunn.
Med Bakgrunn valgt, se på Eiendommer ruten. Vårt mål er å passe Bakgrunnsbildet til det komplette visningsporten, så vi må kontrollere sine egenskaper under Transform2D eiendommer.
Velg Anker forhåndsinnstillinger og velg nederst til høyre.
Ved å gjøre det, sier du at Bilde bør dekke hele visningsporten. De Anker Angir proporsjonale posisjoner i foreldreelementets rektangel.
Har du lagt merke til de blå ankre som nettopp dukket opp?
De blå ankre inne i det hvite rektangel angir ankerpunktene. Ved hjelp av førnevnte konfigurasjon blir ankrene automatisk plassert nær de fire hjørnene.
Du bør imidlertid allerede ha lagt merke til at den hvite rektangelstørrelsen er forskjellig fra standardoppløsningen. For å løse dette problemet må du endre alt Forskyver til 0.
Ved hjelp av den konfigurasjonen kan du nå endre visningsoppløsningen til en gitt oppløsning, og bakgrunnsbildet vil endres tilsvarende.
Ditt neste skritt er å legge til et pent bakgrunnsbilde i Bakgrunn element. Last ned dette bildet og legg det inn i prosjektmappen din (for eksempel under dev \ SamplesProject mappe).
Merk at hvis du ikke plasserer bildefilen i prosjektet, vil Lumberyard returnere en "Manglende mangel på tekstur"Fortsett og velg den fra Sprite banen under Bilde delen av Eiendommer ruten.
Tekst
Legg til en Tekst prefab (Ny… > Element fra prefab> Tekst). Endre dens Tekst navn til "UTROLIG gamedevelopment.tutsplus.com GAME"og fargen til en lysegrønn Skriftstørrelse bør være 60, og den bør plasseres nær toppen.
Du har en tittel, men du mangler knapper for brukerinteraksjon. Derfor er det neste trinnet å opprette tre knapper:
For hver knapp vil du bruke forskjellige konfigurasjoner.
Det du forventes å skape, er noe som ligner på følgende:
Hvis du har problemer med å oppnå den forrige konfigurasjonen, går du til neste avsnitt og jeg går gjennom det.Du må opprette tre knapper med forskjellige egenskaper. La oss starte med den enkle, den CustomButton ferdighus. For å importere den knappen må du klikke på Nytt ...> Element fra prefab> CustomButton. Knappen skal vises. Det handler bare om å posisjonere det.
Den andre knappen skal være Start spill. Legg til en Knapp prefab (Nytt ...> Element fra prefab> Knapp) og endre dens Tekst navn til Start spill. Hvis du vil, kan du endre flere egenskaper på denne knappen. Er det opp til deg å gjøre det.
Den tredje knappen, alternativer, er litt vanskeligere enn de to foregående. Begynn med å legge til en annen Knapp prefab (Nytt ...> Element fra prefab> Knapp). Endre dens Sprite Path til options_icon.png fil. Etter dette trinnet vil du se knappbildet, men med feil Høyde størrelse. Fortsett og endre Høyde verdi til 200.
Ditt siste skritt er å lagre UI-lerretet. Velg Fil> Lagre som og nev det MyCanvases.
Som tidligere nevnt er det noen trinn som ikke ble riktig testet (som knappestater og videre brukers interaksjon). Hovedårsaken er at du må bruke FlowGraph for å teste disse interaksjonene. Derfor vil den neste opplæringen i serien fokuseres på FlowGraph, og vi vil komme tilbake til å dissekere denne delen.
Du er nå utfordret til å lage et nytt UI-lerret for Handle om og alternativer knapper. I neste opplæring vil du bli bedt om å koble til alt.
Dette avslutter denne opplæringen på Lumberyard. Du lærte hvordan du bruker UI Editor og dens egenskaper. Du lærte å legge til og konfigurere flere brukergrensesnittelementer som bilde, tekst og knapp. Du er nå i stand til å lage egendefinerte menyer fra bunnen av og konfigurere utseendet. Hvis du har spørsmål eller kommentarer, kan du som alltid gjerne slippe en linje i kommentarene.
Accentsconagua