Share
Ce veți creaÎn acest tutorial din seria Amazon Lumberyard, vă vom arăta cum să utilizați editorul UI și caracteristicile acestuia. Veți adăuga și configura mai multe elemente, cum ar fi fundalul, etichetele de text și butoanele. Apoi veți învăța cum să creați un meniu al interfeței utilizator de la zero. În cele din urmă, veți fi confruntat cu o provocare.
Rețineți că vi se recomandă să citiți restul seriei pentru a înțelege pe deplin notațiile din această parte.
Această serie de tutori este destinată în primul rând a două grupuri de dezvoltatori de jocuri: aceia care sunt complet necunoscuți cu motoarele de joc și cei care sunt familiarizați cu alte motoare de jocuri (cum ar fi Unitatea, Unreal Engine sau Cry Engine), dar nu cu Lumberyard . Presupun că ai niște cunoștințe despre notația grafică pe calculator, așa că nu voi acoperi exhaustiv toate notațiile.
Editorul UI poate fi deschis în două moduri principale; prima este prin Meniu principal folosind linkul de la Vizualizare> Panou vizualizare deschisă> Editor UI.
A doua cale este prin Editor UI pictograma disponibilă în Bara de instrumente a editorului.
Deschide Editor UI utilizând una dintre opțiunile menționate mai sus.
După Editor UI se deschide, veți observa că va fi gol. Când se deschide editorul UI, în mod implicit, se încarcă o pânză goală.
Pentru a înțelege mai bine cum Editor UI este organizată, vom deschide proba de pânză pentru UI din Lumberyard. Pentru aceasta, faceți clic pe Fișier> Deschidere. Acum, navigați la dev \ SamplesProject \ Niveluri \ Samples \ UIEditor_Sample \ UI și selectați UiSample.uicanvas fişier. Clic Deschis. O interfață strălucitoare va apărea după cum urmează:
Editor UI constă în următoarele panouri:
Rețineți că puteți mări sau micșora dimensiunea (prin mărirea și micșorarea) a ferestrei de vizualizare utilizând rotița mouse-ului.
Dacă selectați fundal element în interiorul Ierarhie, următoarele Proprietăți sunt prezentate:
De asemenea, dacă selectați oricare dintre butoanele, Proprietăți meniul se va schimba în consecință (este sensibil la context).
Cu Editor UI deschis, selectați fundal element în Ierarhie panoul. Faceți clic dreapta pe el și selectați Nou> Gol din prefabricat ...> Buton.
În interiorul ferestrei de vizualizare trebuie să apară un nou buton.
Veți observa că noul Buton nu are același aspect ca Joaca, Opțiuni, și Părăsi butoane.
Pentru a începe modificarea aspectului butonului, lăsați mai întâi să mutați butonul într-o locație nouă. Noua locație ar trebui să se afle sub Părăsi buton. Pentru a efectua această acțiune, selectați Buton (folosind viewport sau Ierarhie); apoi selectați Mișcare instrument și în final, plasați-l în locația dorită.
Apoi, trebuie să schimbați Buton text. Selectați Text sub Buton în interiorul Ierarhie panoul. Observați că Proprietate se modifică în consecință. Schimba Text proprietate Despre.
De asemenea, puteți modifica textul Culoare, transparență (Alfa), Calea fonturilor, Marimea fontului, sau Efecte de fonturi, și ambele Vertical aliniamente de textsi Halinieri orizontale ale textului. După cum sa menționat mai sus, aceste proprietăți sunt sensibile la context, deci se schimbă luând în considerare elementul ales.
Acum, schimbați Culoare la alb și la Alfa valoarea la 1. Apoi faceți dublu clic pe implicit Calea fonturilor. Navigați la fonturi și selectați notosans-regular.xml fişier. În cele din urmă, schimbați Efectul fontului din umbra la Mod implicit. Configurațiile butonului dvs. ar trebui să fie după cum urmează:
Selectați noul Buton în interiorul Ierarhie și modificați fereastra Sprite. Navigheaza catre SamplesProject \ texturi \ UIEditor_Sample, selectează ButtonNormal fișier și faceți clic pe Deschis.
Pentru a ascunde imaginea, trebuie să o schimbați Alfa. Schimba ImageType la Întins, Culoare la alb, și la Alfa la 0. Configurația finală este:
Un buton fără interacțiunea cu utilizatorul nu este un buton. Următorul pas este să adăugați o anumită interacțiune cu butoanele. În Lumberyard, acționarea cu un buton este efectuată utilizând stările butonului. Modificarea stărilor este o modalitate excelentă de a trimite feedback utilizatorului pentru a le permite să știe când manipulează un anumit buton în interiorul ferestrei de vizualizare.
Fiecare buton poate avea trei stări:
Să începem prin schimbarea Planare stat. Selectează spiriduș și modificați valoarea acestuia ButtonNormal. În mod implicit, ar trebui să vă aflați la ultimul dosar utilizat. Dacă nu, navigați la SamplesProject \ texturi \ UIEditor_Sample și selectați ButtonNormal.
Acum schimbați Presat stați la fel ca înainte, dar acum selectați ButtonPressed fişier.
În acest moment, următorul pas logic era de a testa interacțiunile create. Cu toate acestea, vom lăsa asta pentru un pas mai târziu (în următorul tutorial). Pentru moment, veți crede doar că ceea ce tocmai ați efectuat lucrul așa cum a fost intenționat.
Când aveți nevoie de mai mult de un tip de element, vi se recomandă să creați, să utilizați și să reutilizați prefabricate. Acest lucru poate fi foarte util dacă trebuie să reutilizați elementul dvs. în mai multe pânze din interiorul proiectului.
Pentru a salvabutonul ca prefab, faceți clic dreapta pe el și selectați Salvează ca Prefab ... .
Denumiți prefabricatul CustomButton și faceți clic pe Salvați.
Acum că ați creat deja un prefab, puteți ștergebutonul din Ierarhie.
Ce zici de noul prefabricat? Cum îl putem adăuga din nou? Pentru a adăuga prefabricatul, trebuie să faceți clic pe Nou… și selectați Element din prefabricat> CustomButton.
Butonul dvs. trebuie să apară exact în același loc unde a fost configurat anterior.
În acest moment știți deja elementele de bază ale Editor UI și proprietățile sale. Prin urmare, acum este momentul să creați o UI Canvas de la zero.
Deschide Editor UI și începe prin adăugarea unui Imagine prefab ( Nou… > Element din prefab> Imagine).
În interiorul ferestrei de vizualizare este amplasat un pătrat alb. Acum este momentul să îl configurați. Selectează Imagine și faceți dublu clic pe numele său. Schimbă-l la fundal.
Cu fundal selectat, uita-te la Proprietăți panoul. Obiectivul nostru este de a potrivi imaginea de fundal în portul de vizualizare complet, astfel încât trebuie să controlam proprietățile sale sub Transform2D proprietăţi.
Selectează Ancoră presetări și alegeți partea din dreapta jos.
Procedând astfel, spuneți că Imagine ar trebui să acopere întregul port de vizualizare. Ancoră specifică pozițiile proporționale în interiorul dreptunghiului elementului părinte.
Ai observat ancorele albastre care tocmai au apărut?
Ancorele albastre din interiorul dreptunghiului alb indică punctele de ancorare. Folosind configurația menționată mai sus, ancorele vor fi plasate automat în apropierea celor patru colțuri.
Cu toate acestea, ar fi trebuit deja să observați că dimensiunea dreptunghiului alb este diferită de rezoluția implicită. Pentru a rezolva această problemă, trebuie să modificați toate Offsets la 0.
Folosind această configurație, puteți schimba acum rezoluția de vizualizare la orice rezoluție dată și fundalul Imaginea se va schimba în consecință.
Următorul pas este să adăugați o imagine destul de fundal în fundal element. Descărcați această imagine și plasați-o în interiorul folderului proiectului (de ex dev \ SamplesProject pliant).
Rețineți că, dacă nu plasați fișierul imagine în interiorul proiectului nostru, Lumberyard va returna un "Lipsă de textură"Continuați și selectați - l din Sprite sub Imagine secțiunea din Proprietăți panou.
Text
Adauga o Text prefab (Nou… > Element din prefabricat> Text). Schimbă-l Text nume pentru "AWESOME gamedevelopment.tutsplus.com JOC"și culoarea ei într-o verde deschis Marimea fontului ar trebui să fie 60, și ar trebui să fie poziționat aproape de partea de sus.
Aveți un titlu, dar nu aveți butoane pentru interacțiunea cu utilizatorul. Prin urmare, următorul pas este să creați trei butoane:
Pentru fiecare buton veți folosi configurații diferite.
Ceea ce trebuie să creați este ceva similar cu următorul:
Dacă aveți o problemă în realizarea configurației anterioare, mergeți la secțiunea următoare și vă voi trece prin ea.Trebuie să creați trei butoane cu proprietăți diferite. Să începem cu cea mai ușoară CustomButton prefabricat. Pentru a importa acel buton, trebuie să faceți clic pe Nou ...> Element din prefabricat> CustomButton. Trebuie să apară butonul. Acum este doar o chestiune de poziționare.
Al doilea buton ar trebui să fie Incepe jocul. Adauga o Buton prefab (Nou ...> Element din prefabricat> Buton) și să-i schimbe Text nume pentru a Incepe jocul. Dacă doriți, puteți modifica proprietățile suplimentare ale acestui buton. Depinde de dvs. să faceți acest lucru.
Al treilea buton, Opțiuni, este puțin mai dificil decât cele două. Începeți prin adăugarea altui Buton prefab (Nou ...> Element din prefabricat> Buton). Schimbă-l Sprite Cale la options_icon.png fişier. După acest pas, veți vedea imaginea butonului, dar cu greșit Înălţime mărimea. Continuați și schimbați Înălţime valoare pentru 200.
Ultimul pas este să salvați pânza UI. Selectați Fișier> Salvare ca și numește-o MyCanvases.
După cum sa menționat anterior, există câțiva pași care nu au fost testați corespunzător (cum ar fi stările butonului și interacțiunea cu utilizatorul). Motivul principal se referă la faptul că trebuie să utilizați FlowGraph pentru a testa aceste interacțiuni. Prin urmare, următorul tutorial din serie va fi axat pe FlowGraph, și vom reveni pentru a diseca această parte.
Sunteți acum provocat să creați o nouă pânză UI pentru Despre și Opțiuni butoane. În tutorialul următor, vi se va cere să conectați totul.
Acest lucru încheie acest tutorial pe Lumberyard. Ați învățat cum să utilizați Editorul UI și proprietățile acestuia. Ați învățat cum să adăugați și să configurați mai multe elemente ale UI ca Imagine, Text și Buton. Acum puteți crea meniuri personalizate de la zero și configurați aspectul. Dacă aveți întrebări sau comentarii, ca întotdeauna, nu ezitați să renunțați la un comentariu.
Accentsconagua