Share
Wat je gaat creërenIn deze tutorial in onze Amazon Lumberyard-serie laat ik je zien hoe je de UI-editor en de bijbehorende functies gebruikt. U zult verschillende elementen zoals achtergrond, tekstlabels en knoppen toevoegen en configureren. Vervolgens leert u hoe u vanuit de basis een gebruikersinterfacemenu maakt. Eindelijk zul je voor een uitdaging staan.
Merk op dat u geadviseerd wordt om de rest van de serie te lezen om de notaties uit dit deel volledig te begrijpen.
Deze tutorialserie is in de eerste plaats gericht op twee groepen game-ontwikkelaars: degenen die helemaal niet bekend zijn met game-engines en degenen die bekend zijn met andere game-engines (zoals Unity, Unreal Engine of Cry Engine), maar niet met Lumberyard . Ik neem aan dat je enige kennis hebt van de notatie van computerafbeeldingen, dus ik zal niet alle notaties volledig behandelen.
De UI-editor kan op twee manieren worden geopend; de eerste is door de Hoofdmenu via de link op Beeld> Deelvenster openen> UI-editor.
De tweede manier is via de UI-editor pictogram beschikbaar in de Editor werkbalk.
Open de UI-editor een van de eerder genoemde opties gebruiken.
Na de UI-editor opent, zult u merken dat het leeg zal zijn. Wanneer de UI-editor wordt geopend, laadt deze standaard een leeg canvas.
Om beter te begrijpen hoe het UI-editor is georganiseerd, zullen we de Lumberyard UI canvas sample openen. Om dit te doen, klikt u op Bestand> Openen. Ga nu naar de dev \ SamplesProject \ levels \ Samples \ UIEditor_Sample \ UI map en selecteer de UiSample.uicanvas het dossier. Klik Open. Een glanzende interface zal als volgt verschijnen:
De UI-editor bestaat uit de volgende panelen:
Merk op dat u het formaat (door in en uit zoomen) van het venster kunt vergroten of verkleinen met behulp van het muiswiel.
Als u de Achtergrond element binnen de Hiërarchie, het volgende eigenschappen zijn gepresenteerd:
Evenzo, als u een van de knoppen selecteert, de eigenschappen menu zal dienovereenkomstig veranderen (het is contextgevoelig).
Met de UI-editor geopend, selecteert u de Achtergrond element in de Hiërarchie ruit. Klik er met de rechtermuisknop op en selecteer Nieuw> Leeg van prefab ...> Knop.
Binnen de viewport zou een nieuwe knop moeten verschijnen.
U zult opmerken dat het nieuwe Knop heeft niet hetzelfde uiterlijk alsde Spelen, opties, en ophouden toetsen.
Laten we eerst de knop naar een nieuwe locatie verplaatsen om het uiterlijk van de knop te wijzigen. De nieuwe locatie hoort onder de ophouden knop. Als u deze actie wilt uitvoeren, selecteert u de Knop (de ... gebruiken uitkijk postje of de Hiërarchie); selecteer vervolgens de verhuizing tool en plaats hem uiteindelijk op de gewenste locatie.
Vervolgens moet u de Knop tekst. kiezen Tekst onder de Knop binnen in de Hiërarchie ruit. Merk op dat de Eigendom paneel dienovereenkomstig gewijzigd. Verander de Tekst woning aan Wat betreft.
U kunt de tekst ook wijzigen Kleur, transparantie (Alpha), Lettertype pad, Lettertypegrootte, of Lettertype-effecten, en beide Verticaal tekstuitlijningenen Horizontale tekstuitlijning. Zoals hierboven vermeld, zijn deze eigenschappen contextgevoelig, dus veranderen ze, rekening houdend met het door u gekozen element.
Wijzig nu het Kleur naar wit en de Alpha waarde tot 1. Dubbelklik vervolgens op de standaardwaarde Lettertype pad. Navigeer naar de fonts map en selecteer de notosans-regular.xml het dossier. Wijzig tot slot de Lettertype-effect van drop_shadow naar standaard. Uw knopconfiguraties moeten als volgt zijn:
Selecteer de nieuwe Knop binnen in de Hiërarchie deelvenster en wijzig het Sprite-pad. Navigeren naar SamplesProject \ texturen \ UIEditor_Sample, selecteer de ButtonNormal bestand en klik Open.
Om de afbeelding te verbergen, moet u de afbeelding wijzigen Alpha. Verander de Beeldtype naar uitgerekt, de Kleur naar wit en de Alpha tot 0. De uiteindelijke configuratie is:
Een knop zonder gebruikersinteractie is geen knop. De volgende stap is om wat interactie toe te voegen aan de knoppen. In Lumberyard wordt acteren met een knop uitgevoerd met behulp van de statussen van de knop. Het wijzigen van de toestanden is een geweldige manier om feedback naar de gebruiker te sturen om hen te laten weten wanneer ze een specifieke knop in het kijkvenster manipuleren.
Elke knop kan drie toestanden hebben:
Laten we beginnen met het veranderen van de zweven staat. Selecteer de sprite map en wijzig de waarde in ButtonNormal. Standaard zou je in de laatst gebruikte map moeten staan. Als dat niet het geval is, navigeer dan naar SamplesProject \ texturen \ UIEditor_Sample en selecteer de ButtonNormal.
Verander nu het gedrukt status door dezelfde stap uit te voeren als hiervoor, maar selecteer nu de ButtonPressed het dossier.
Op dit moment was de volgende logische stap om de zojuist gemaakte interacties te testen. We laten dit echter voor een latere stap (in de volgende tutorial). Voorlopig zul je geloven dat wat je net hebt uitgevoerd werkt zoals bedoeld.
Als u meer dan één type element nodig heeft, wordt u geadviseerd om prefab te maken, te gebruiken en opnieuw te gebruiken. Dit kan erg handig zijn als je je element op verschillende doeken in je project moet hergebruiken.
Om het te reddenknop als een prefab, klik er met de rechtermuisknop op en selecteer Opslaan als Prefab ... .
Geef het prefab een naam CustomButton en klik Opslaan.
Nu u al een prefab hebt gemaakt, kunt u de prefab verwijderenknop van de Hiërarchie.
Hoe zit het met de nieuwe prefab? Hoe kunnen we het opnieuw toevoegen? Om de prefab toe te voegen, moet u klikken op de Nieuwe… knop en selecteer Element uit prefab> CustomButton.
Uw knop zou precies op dezelfde plek moeten verschijnen als waar hij eerder was geconfigureerd.
Op dit moment ken je de basis van de UI-editor en de eigenschappen ervan. Daarom is het nu tijd om een UI Canvas helemaal opnieuw.
Open de UI-editor en begin met het toevoegen van een Beeld prefab ( Nieuwe… > Element van prefab> Afbeelding).
Een wit vierkant wordt in de viewport geplaatst. Het is nu tijd om het te configureren. Selecteer de Beeld en dubbelklik op de naam. Verander het in Achtergrond.
Met de Achtergrond geselecteerd, kijk naar de eigenschappen ruit. Ons doel is om de achtergrondafbeelding in de volledige viewport te plaatsen, dus we moeten de eigenschappen onder de Transform2D eigenschappen.
Selecteer de Anker voorinstellingen en kies de rechtsonder.
Door dat te doen, zeg je dat het Beeld moet de gehele viewport beslaan. De Anker specificeert proportionele posities binnen de rechthoek van het bovenliggende element.
Heb je de blauwe ankers opgemerkt die net zijn verschenen?
De blauwe ankers binnen de witte rechthoek geven de ankerpunten aan. Met behulp van de bovengenoemde configuratie worden de ankers automatisch in de buurt van de vier hoeken geplaatst.
Het is u echter al opgevallen dat de grootte van de witte rechthoek anders is dan de standaardresolutie. Om dit probleem op te lossen, moet u alles wijzigen offsets naar 0.
Als u die configuratie gebruikt, kunt u nu de viewport-resolutie naar een bepaalde resolutie wijzigen en zal de achtergrondafbeelding dienovereenkomstig veranderen.
De volgende stap is om een mooie achtergrondafbeelding toe te voegen aan de Achtergrond element. Download deze afbeelding en plaats deze in uw projectmap (bijvoorbeeld onder de dev \ SamplesProject map).
Let op: als u het afbeeldingsbestand niet in ons project plaatst, retourneert Lumberyard een "Textuur Ontbrekende fout"Ga verder en selecteer het uit de Sprite-pad onder de Beeld deel van de eigenschappen paneel.
Tekst
Voeg een ... toe Tekst prefab (Nieuwe… > Element van prefab> Tekst). Verander zijn Tekst naam "GEWELDIGE gamedevelopment.tutsplus.com GAMEen de kleur ervan is lichtgroen Lettertypegrootte zou moeten zijn 60, en het zou dicht bij de bovenkant moeten worden geplaatst.
U hebt een titel, maar u mist knoppen voor gebruikersinteractie. Daarom is de volgende stap om drie knoppen te maken:
Voor elke knop gebruikt u verschillende configuraties.
Wat er van u wordt verwacht, is iets dat lijkt op het volgende:
Als je een probleem hebt bij het bereiken van de vorige configuratie, ga dan naar het volgende gedeelte en ik zal je er doorheen leiden.U moet drie knoppen met verschillende eigenschappen maken. Laten we beginnen met de gemakkelijke, de CustomButton prefab. Om die knop te importeren, moet je klikken op Nieuw ...> Element uit prefab> CustomButton. De knop zou moeten verschijnen. Het is nu gewoon een kwestie van positioneren.
De tweede knop zou moeten zijn Start het spel. Voeg een ... toe Knop prefab (Nieuw ...> Element uit prefab> Knop) en verander zijn Tekst naam voor Start het spel. Als u wilt, kunt u aanvullende eigenschappen van deze knop wijzigen. Het is aan jou om dit te doen.
De derde knop, opties, is een beetje lastiger dan de vorige twee. Begin met het toevoegen van nog een Knop prefab (Nieuw ...> Element uit prefab> Knop). Verander zijn Sprite Path naar de options_icon.png het dossier. Na deze stap ziet u de knopafbeelding maar met de verkeerde Hoogte grootte. Ga verder en verander de Hoogte waarde voor 200.
De laatste stap is om het UI-canvas op te slaan. Selecteer Bestand> Opslaan als en noem het MyCanvases.
Zoals eerder vermeld, zijn er enkele stappen die niet goed zijn getest (zoals de knoptoestanden en verdere gebruikersinteractie). De belangrijkste reden heeft te maken met het feit dat je moet gebruiken flowgraph om die interacties te testen. Daarom zal de volgende tutorial in de serie worden gefocust flowgraph, en we komen terug om dit deel te ontleden.
Je wordt nu uitgedaagd om een nieuwe UI-canvas te maken voor de Wat betreft en opties toetsen. In de volgende zelfstudie wordt u gevraagd om alles aan te sluiten.
Dit concludeert deze tutorial over Lumberyard. Je hebt geleerd hoe je de UI-editor en de bijbehorende eigenschappen gebruikt. U hebt geleerd hoe u verschillende UI-elementen als afbeelding, tekst en knop kunt toevoegen en configureren. U kunt nu vanuit het niets aangepaste menu's maken en de weergave ervan configureren. Als u vragen of opmerkingen heeft, kunt u zoals altijd een regel in de opmerkingen plaatsen.
Accentsconagua