‫Welkom terug.
‫En in deze video gaan we UI-elementen bekijken en in het bijzonder gaan we naar tekst
‫kijken.
‫Dus ik heb een nieuw project gemaakt.
‫Ik noem het Pong Basics.
‫En hier wil ik een UI-element maken.
‫Dus in de hiërarchie van jou, zorg ik ervoor dat ik met de rechtermuisknop klik en dan ga ik naar de gebruikersinterface.
‫Ik heb hier meerdere opties.
‫Ik heb een tekstafbeelding, een onbewerkte afbeeldingsknop, enzovoort.
‫Voor nu ga ik gewoon tekst gebruiken.
‫En zoals je ziet verschijnt de nieuwe tekst hier linksonder op ons scherm.
‫Dus als we uitzoomen naar de juiste positie, zullen we zien dat dit is waar onze tekst zich momenteel bevindt.
‫Het staat linksonder.
‫Dit is dus de rendermodus die we hebben voor ons canvas, namelijk groene ruimte-overlay.
‫Dus wat dat doet, het zal alles wat we toewijzen aan de UI-laag of aan de UI-ruimte hier bovenop onze
‫spelmodus overlappen.
‫Het is onze gameweergave zelf.
‫Dus nu, ongeacht wat we daar hebben als onze game-objecten, of laten we zeggen dat we een 3D-kubus en positie
‫toevoegen, het had nul nul nul.
‫Dit is waar het is.
‫En zoals je kunt zien, is het hier ergens in de buurt.
‫Dus de spelmodus zelf is erg klein in vergelijking met dit enorme scherm.
‫Dat is gewoon een enorme laag, onze UI-laag, ons canvas, die er bovenop wordt gelegd.
‫Dus dat is wat de schermruimte-overlay doet.
‫Er zijn andere opties voor bijvoorbeeld een schermruimtecamera.
‫Wat dat zal doen, is dat je het hier een camera moet geven, de camera laat draaien en het zal een andere
‫benadering hebben.
‫Dus nu is het gebaseerd op waar de camera zich momenteel bevindt en heb je een bepaald canvas tussen de camera en
‫de afspeelmodus.
‫En het is bijna als een laag er bovenop, maar het is nog steeds een iets andere benadering.
‫Dan heb je WorldSpace waar je een specifieke hoogte en hoogte voor je canvas kunt toewijzen en je
‫kunt wat extra lagen wijzigen, enzovoort.
‫We zullen de verschillende weergavemodi tijdens de cursus gebruiken.
‫Dus in de woorden daar, je zult die in detail zien in de volgende video's of in de volgende hoofdstukken.
‫Ik wilde je even snel de verschillende modi laten zien.
‫Nu hebben we binnen het canvas de tekst en tegelijkertijd hebben we ook een evenementsysteem gecreëerd.
‫Dus wanneer we een UI maken en we hadden nog geen UI-element, dan worden ons canvas en
‫evenementensysteem direct, automatisch voor ons gemaakt.
‫En ik heb de tekst gemaakt.
‫Zoals je kunt zien, is het een kind van ons canvas, dus het staat in onze canvasmap.
‫En nu kunnen we doorgaan en bijvoorbeeld de tekst wijzigen.
‫Dus hier hadden we nieuwe tekst.
‫Laten we dat veranderen in een gewone nul.
‫En zoals je kunt zien, kunnen we die nul nauwelijks zien.
‫Dus laten we de lettergrootte veranderen in, laten we zeggen 50.
‫En nu zou je kunnen zeggen, oh, --, waar is het gebleven?
‫Ik kan het niet meer zien.
‫Dat heeft te maken met het feit dat de hoogte en breedte niet meer passen bij de lettergrootte.
‫Dus onze tekst.
‫Element zelf, of tekst UI-element heeft een hoogte van slechts 30, dus alleen als ik het verhoog naar vier,
‫bijvoorbeeld 60, kan ik mijn nummer weer op mijn tekst zien.
‫Laten we nu teruggaan naar 30 en zeggen dat ik het nog steeds op 30 wil houden, maar ik wil nog steeds mijn nul zien, dus hoe
‫kan ik het oplossen?
‫Anders kunt u overflow gebruiken.
‫Dus horizontale overloop en verticale overloop zullen ervoor zorgen dat, zoals u kunt zien, uw nummer nog steeds verschijnt.
‫Nu is het echter afgebroken.
‫Dus hoe verplaats ik mijn nul terwijl jij hem van hier kunt verplaatsen?
‫Dus laten we uitzoomen tot het punt waarop we iets kunnen zien, zodat je het hierheen kunt verplaatsen.
‫Zoals je kunt zien met onze transformatie-editor hier of met onze transformatietools.
‫Nu kun je het rondslepen en je kunt zien waar het is.
‫Een andere manier om de positie van iets te veranderen is natuurlijk om te veranderen, om hier direct te transformeren,
‫zodat je hier waarden kunt toevoegen.
‫Dus je zou kunnen zeggen dat nul nul de juiste positie voor je is.
‫Nu staat de nul niet in het midden.
‫Waarom is dat?
‫Dat komt omdat de uitlijning van onze tekst hier niet gecentreerd is.
‫Je kunt het dus in beide richtingen centraal uitlijnen en dan perfect gecentreerd zijn en je kunt dat nog
‫veranderen door het anker te veranderen.
‫Dus hier is het nu bijvoorbeeld een anker dat is ingesteld op het midden.
‫Je zou hem linksboven kunnen verankeren.
‫Dus laten we nu linksboven verankeren.
‫Zoals je ziet, is er niets veranderd behalve de post Y en de X, dus die twee waarden zijn nu veranderd.
‫Dus als we die terugbrengen naar nul en nul, kun je zien dat onze nul teruggaat of perfect
‫naar de rand van onze linkerbovenhoek gaat.
‫Nu willen we het natuurlijk een beetje verplaatsen zodat we de nul nog steeds zien, dus laten we het
‫nu naar ons spel verplaatsen, zwart is misschien niet de juiste kleur voor jou.
‫Als je dat wilt veranderen, kun je hier naar de kleureigenschap gaan en de kleur wijzigen in bijvoorbeeld rood
‫of wit of groen of wat je maar wilt.
‫Oke.
‫Dus laten we dit roze nemen, want het past in het blauw.
‫We kunnen het heel goed zien.
‫En wat u dan kunt doen, is natuurlijk de regelafstand wijzigen.
‫Dus laten we zeggen dat je hier een tweede regel hebt.
‫Dan kun je de regelafstand wijzigen, dus laten we zeggen dat je een grotere afstand tussen de regels wilt hebben,
‫dus dat is de regelafstand.
‫Eentje is helemaal goed.
‫En tot slot kunt u het lettertype natuurlijk op elk moment wijzigen.
‫Dus de standaard is Israël en er zijn geen verdere lettertypen.
‫Standaard kunt u lettertypen downloaden vanuit de activawinkel of u kunt ze importeren vanaf waar u ze ook
‫hebt gedownload.
‫U downloadt ze bijvoorbeeld naar uw computer en kunt ze vanaf daar importeren.
‫Maar pas op dat u geen lettertypen downloadt die u niet bezit, want sommige lettertypen kosten geld.
‫De meeste van hen niet.
‫Zoek dus gewoon naar gratis lettertypen of royaltyvrije lettertypen en gebruik die dan.
‫Oke.
‫Dus dat gaat over het lettertype en de tekst.
‫En laten we nu eens kijken hoe we dat aantal programmatisch kunnen wijzigen in de volgende video.