Monster shadow

VIDEO

How to make a menu in Unity - UI Tutorial

Description:
Your user interface will be the first thing your players interact with when entering your game. Ensure your UI is reliable across different resolutions and aspect ratios. Better yet, make the menu FUN to navigate, instead of just a required element in your game. !! Somebody pointed out UI buttons actually have a "Sprite Swap" feature !! Subscribe if you learned something ;) Video assets: https://bit.ly/3n2v18M ========= SUBSCRIBE: https://bit.ly/3eqG1Z6 DISCORD: https://discord.gg/GqeHHnhHpz MORE TUTORIALS: https://www.youtube.com/tarodev 00:00 Intro & scene setup 00:30 Creating your first UI element 01:20 The Rect tool 01:45 Anchoring elements into position 03:35 Filling the screen with an image 04:15 Adding images to the UI 05:20 Expanding images without stretching 07:15 Adding text using TextMeshPro 08:40 Custom fonts in Unity 09:50 Styling the text 10:25 Adding buttons the menu 11:30 Scaling the canvas with screen size 12:20 Adding click events to Unity UI using IPointerDownHandler 15:00 Scrolling background using Raw Image 16:40 Ordering UI elements 17:30 Animated side menu 21:40 Animation state machine 24:43 Adding anchored decorations
ADD A COMMENT

thanh vo
I have a problem that when i click show button it does that animation but click hide it resets to original position without animation. I don't know where the problem lies, help me!
Paku
Very helpful <3 thank you very much
KRISZAB TUTOS
Excelent tutorial!
Martin Kašpar
Hi, this is great tutorial on UI. Please continue in more complex UI controls like sliders, option boxes, etc.
Arda Özler
Thank you! I love your tutorials. Can you make a video about Managers generally and how to use them together? Like using game manager/sound manager/menu manager/ npc manager on the same project.
Arda Özler
@Tarodev Thank you! I look forward to watching them!
Tarodev
That's a good idea 💡 they're a vital aspect of game dev. I'll add it to the list
Nikos Paraponiaris
Great Tutorial! Thanx again! <3
Oya Guni
Thank you for the video and for your time!
Diru Diaz Rusiñol
That's what exactly what I need , Thanks!
Mufaddal Rasheed
Thank you man so much, you really help all the early generation of coders. Once again, Thank You!
NarkoPraxis
Best tutorial ever! I ignored my kids to watch this video on my phone knowing full well I'd just need to watch it again later when I actually sit down to follow it. Don't worry, I bribed my kids with pancakes first. Cleaning up a syrup mess is an easy price to pay if I get to watch more juicy Tarodev content 😂
Nova Ridlehoover
7wn6g vyn.fyi
SEE ALL COMMENTS


Transcript:

in this video you'll learn how to create a user interface for your game
including anchoring elements animation button clicks and more let's go
alright let's build this ui so i have included these ui assets uh link in the
description uh just some things that i drew to for this tutorial uh you can use
those or you can follow along with your own stuff
so to get started i'm just going to uh just set up my scene a bit i'm going to
change my camera from skybox to solid color
and maybe use a nice little blue like that
okay so to create ui elements right click in
your hierarchy ui and you'll see canvas here now
everything in the ui has to be placed on a canvas
but if you just create any other ui object here for example image it will
scaffold that canvas out for you and then put the
image as a child of the canvas this event system is used to uh capture
the events on the actual canvas you can completely ignore it
and actually i might just put it in a little object here just to get it out of
the way i usually just create a setup object
and place these inside of it so i'll just put that there and we can
just worry about the canvas so you can click on your little image
here and move it around and you'll notice by default unity selects this
rect tool here so this is the tool that we use to manipulate the canvas and
you'll notice we've got these anchor points here that you can grab and pull
around if you hold alt you can mirror the
action and if you hold shift you can
adhere to the aspect ratio um and if you hold both then you can mirror while
adhering to that aspect ratio just like that
now if we want this to maybe just stay at the top here and we don't care what
size their screen is what aspect ratio they are we just want it always to be
there if we for example go to free aspect here just so i can show you
different aspect ratios you'll see that it doesn't actually
adhere to what we want it to do see and that's because we're not
anchoring it so i'm going to change this back to 1080p
so selecting my image if i go up here and click this and as you'll notice
these images and everything on the canvas in fact has a wrecked transform
as opposed to a normal game object which is a transform
so a rec transform gives us access to a quite a few uh more little utilities
most notably this one here so if you click this
you this is setting your anchor okay so if you click here
you'll notice this little uh this little icon here goes to the top
and now if we go to free aspect you'll see that it sticks to the top of
the screen just like that all right so i head back to 1080p
now if you come back in here you'll see here
if you hold shift you can set the shapes pivot
so not only am i setting the anchor now i'm
also setting the pivot of the shape so now if we rotated this shape in a script
for example it would actually rotate around
the anchor point like that if we hold alt we can also set the position of our
shape directly okay so um i generally just hold shift
and alt and i put it where i want it because
nine times out of ten i don't care where the pivot point is um and so i just
chuck it all in the same place all right so that will that will always
adhere to exactly uh the top right top left of the screen
in addition we can stretch our object to be the full height or the full width or
both so for example like that it will always regardless of the aspect ratio it
will always go across the full length of the screen
alternatively we can do that and it will always be horizontal vertically
and lastly if we click this one it will always take up the full screen
regardless of the aspect ratio as you can see
so let's uh change it back to 1080p
now let's actually add our first uh real object that we're going to be using so
clicking on the image here and i'm going to go to my ui assets and
sprites and now you'll notice i can't actually drag
my sprites onto here and that's because they were imported as texture type
default now if you're using a 2d project these will import as the correct uh type
but if you see here we need them to be sprite 2d and ui so i'm just going to
highlight all of my sprites here and excluding my font
and click sprite 2d and ui and then just click apply
and now i should be able to click my image and then pull my
panel out onto it like that that doesn't look too good so
as soon as you set a image it will just it will stay to the current aspect ratio
that you have got here so if you just click set native size
it will go to this actual specific object's
proper size and we can just scale that up and down
like that but what you'll notice is if i try to
drag this now it actually uh stretches all of it
now that's not really ideal what would truly like is that these stay
true to their proper size and then these panels here
these wood panels all stretch so we can easily do that by going by
clicking on the panel and clicking our sprite editor now if it
says sprite manager isn't installed you can go to windows package manager
and make sure unity registry is selected and just install the 2d sprite package
there by just clicking the install button down here
once it's installed you can click it and go to sprite editor
and you'll get this window now you can just drag these in
to where you would so basically we're saying everything in this area here we
don't want it to stretch but everything within these bounds we
don't care if it stretches so that's not really scientific you might want to like
uh get perfect values here but it does not
matter so i'm just going to click apply and now let's just set native size again
on this and
now if we try to scale this you'll see that it still
stretches because we need to change image type to sliced
and there you'll see that it actually works as expected now this is uh really
big and fat so i'm just gonna down down scale it to about 0.5
and there we go perfect so i'm going to pin this to the center of the screen
just like that so if you remember hold alt shift and just click the center one
and it will set not only the pivot but also the anchor
and maybe scale that down a little bit and
scale it pull it down
cool so let's call that panel just so we
don't get confused now another important aspect of ui is
text so i'll show you how to do this in two separate ways so right click your
canvas and go ui and simply click text now this is the built-in uh unity text
which has been around since the beginning of the ui system
and if you come over here you'll see you've got you know your alignments
you've got your color and you can change the text here
hello but you'll see that it's not very clear
now there's a few ways to fix this for example you can up your text size really
high you can give it enough room and then you
can actually scale it down seems a little bit hacky i know
but that is how you get clear text using the default text input
but there is a better way and that is by using
ui text mesh pro now this used to be a
package that this uh one guy used to maintain but then unity is like hey our
text sucks so let's just actually buy uh this from this guy and they integrated
it into unity itself so now you can just click text and if you haven't got it
installed you'll see this little prompt come up and import text message press
essentials and there we go and now as you can see
straight out of the box it's crystal clear
now the good thing about text mesh pro is you can create your own
font assets by simply using an otf file just like
this so i just i just downloaded this one from google fonts so i included in
there just for the simplicity of this tutorial so you can go to window text
message pro font asset creator and it's already
detected that i want to use try to make an asset from this font otherwise you
can just click it and select your other otf default settings are fine for the
rest of this generate fun atlas let's save it
uh let's just save it right in the root right there
and there we go so we've got this file right here now if we click on our text
we can simply drag our new font asset over that default one and now we've got
this new font in in unity so
in the same way as the traditional font had we've got our
alignment here so i'm just going to center it
let's just get a bit more room here and again if you hold alt you can mirror the
uh expansion now let's change the text here let's say
building a ui
[Music] now the beautiful thing about text mesh
pro is that it gives us access to all this
uh additional stuff that the normal traditional unity text is not for
example we can add a outline like that let's just make it maybe that
and we can add an underlay which is basically if you use photoshop it's just
like a drop shadow so let's just offset that a little bit
like that and there we go just got some basic text you can do a lot more with it
playing with these settings you can get some pretty awesome results but that is
as far as i'm going to get into text mesh pro for now
so let's just leave that there next let's add a little button here
so right click on the panel now traditionally
you can go down to ui and actually select this button here and that will
give you this object which has got this button component here which also gives
you access to this on click but this normal button uh
also puts this text here now that may not be what what you want i just want to
use my own image for a button so i'm just going to add a normal image like
that let's call this play button and i'm going to drag my button image
onto it and as you can see it's already got text which is why i didn't need the
text now i'm going to set native size to make it the correct aspect ratio then
just zoom it down a little bit like that
now i can actually add that button component onto it
now if you press play ah so it's very little which i'll get
into in a moment but as you can see with that button component you'll see that
unity by default adds some uh click events to it so that it's it's changing
color like it's kind of actually being clicked
all right so this is not really what we're expecting
is it so if you look at our canvas we're pretty much trying to take up the entire
room here when you press play it's just this tiny little area
now that's because if you click on your canvas you'll see this canvas scalar
component and it's set to constant pixel size what we actually want is to scale
with screen size now if you press play
you'll see that it's taking up exactly what we wanted that's a exactly what we
see in this canvas rect here cool so now it would be cool if we can
click this button and it change from this sprite here
to this sprite like it's actually being pressed so let's make a little script
here let's call this uh clicky
button like that and open it up
okay so we're going to be needing a few things here
using hindi engine oops
dot event systems
and using unity engine ui cool so
when you're just using a game object with a collider you can just hook into
the void on mouse down
just like that but unity ui doesn't have this by default
but we can use something in unity engine event systems so if you just go to after
your mono behavior and start using the on pointer down handler and the eye on
pointer up handler and then you click on one you can just
press alt enter implement interface alt enter implement interface
and now these are effectively the same thing as on mouse down and on mouse up
all right now i'm not going to write the rest of the code here live i'm just
going to copy and paste it and then we'll go through it okay so we've got a
reference to our image the actual button image
we've got a sprite for the default state and then when it's pressed audio clips
for when it's compressed and uncompressed and the source that we're
playing the clip from on our on pointer down we're just setting it to the
pressed image and playing the compressed clip and vice versa on the pointer up
okay back to unity on our play button let's add a script that we just made
clicky button and start setting our references so we've got our image there
our default button our compressed button uh compressed clip which is in audio
uncompressed clip and we need a source there we go
let's try that beautiful not a very nice sound but
it is what it is okay so what if you want to actually
hook up an event to that well we can easily add a function i
was clicked i'm typing
debug log and let's just say
click like that's save it and go back into
unity and on our play button you can go to
your button component here and the on click just add an event let's send in
our clicky button and on our clicky button down here i was
clicked and now we should be able to click it and get an
event down at the bottom called bananas okay next let's add that
uh scrolling background effect and if you need a full tutorial for this
growing background i will include a link up there somewhere
so click that and then come back so what i'm gonna do here instead of adding an
image i'm going to add a ui raw image
now the difference between an image and a raw image is the raw image gives us
access to the uv rect and a few other things but what we care about right now
is the uv rect so let's name this scrolling
background and i'm going to scale it way up like
that now
for the image let's i've got this tarot dev image here and
you'll see i've set it up in kind of like a funny way
so just drag that on there now the reason i've got it set up like
this is so that we can tile it so if you go to uv rect and starts
doing the x here sorry it's it's not actually tiling it's
clamping so we need to change that go to the tarot dev sprite and you'll see down
here wrap mode is set to clamp if you change that to repeat
and then let's go back to our scrolling background again you'll see that you can
actually tile it like that so i'm going to set the width to something like 15
and the height to 15 as well and then let's
rotate it a bit like that that might be too many octa pods or octopus
or uh octopuses or apparently they're all correct so let's
uh change the color a bit go down to maybe like that
and if you've used sprite renderers before
you'll know that they've got the uh order layer property and depending on
the order layer they'll render in front of each other or not with ui it's a lot
more simple than that it's just hierarchical so if i just grab this and
then put it behind that panel you'll see that now it is in the correct
place behind the panel very very easy
all right so to make this start scrolling i have included this script
here as i said earlier if you actually want
to see how this works just go to the tutorial that i linked earlier so i'm
just going to flop that on there let's put in the raw image and let's
make this garlic maybe 0.2 and 0.2
press play and that's pretty damn fast let's make
that 0.1 and press play
yeah pretty cool cool enough anyway okay so lastly i want to add a little uh
little menu here that you can click and it will slide out with the icons
that you need and then if you click it again it will slide back in so let's
quickly do that so i'm going to create a new empty game
object here when you create an empty game object on a canvas element it will
actually create the rec transform type so let's call this settings panel
and let's clamp this to the top left so i'm holding shift and alt here and
just clicking on the top left one and it will clamp it up here all right so
up here let's add a
item let's make this an image i'm going to call this open
and i'm going to make it my gear icon like that set native size just to make
sure that it's the correct aspect ratio and scroll that down a bit
like that and let's actually pull this down a bit
the settings panel who knows how how big it's going to be
put that right there okay so
i'm going to make some more icons here and this one i'm going to call audio and
let's put the audio icon in and then let's make another copy down
here let's call this vibrate and i'll make the vibrate icon and we
want these to actually be starting off screen don't we because we want them to
come in when we click it there are a few ways to get these moving
you can do it in script and just like left the positions when you need to i
personally like to do this via animations uh it's the perfect thing to
animate to be honest so i'm going to add i'm going to click on my settings panel
and add an animator and then i've got my animation tabs down
here if you don't have them go to window animation and then just click these and
then just dock them so in my animation with my settings
panel clicked i'm going to click create now let's create a little folder here
called animations press save and actually i probably
should have known something better so let's
show uh settings
that's what my animation is called and now i'm going to click record
on my on my animator and we're going to animate these inwards
so let's start with the audio so if we just move forward to say 20
and then pull this in whoops and then pull this across
let's like over extend it a little bit you'll see because uh
we're in the chart a little bit basically it's taking our first position
and it's automatically adding a keyframe for us and then we're adding the
keyframe where we actually manually added it
and then let's go ahead another five and then pull it to the actual real
destination so now if you grab this you can see like it's kind of like doing
a little bit of a an over an over extend effect
uh you can do that with like lurps and stuff in in code
but that that's an easy way to do it with with animation next let's do it
with our vibration
so let's just actually take a note of where this is the over extend amount and
then with our vibrate so let's actually stagger the animation of these two so it
looks like they're kind of uh coming down in sequence so if we start this at
maybe five so we need to keyframe here so that this doesn't so that the the
movement starts here and not here so if you just go to five and then right
click here on pause x you can add a key just add the key there and then we need
to actually find out the over extended amount so i'm going to go to the point
where my audio is all the way out grab its x position
go back to my vibration now this is staggered by five so this is where it's
going to be overextending just copy that in there go forward
another five and then go back to its natural spot
and let's try that out there we go cool little wavy effect
that's all we really need to do for that so
stop recording now on our animator
we have this animation let's just actually name that properly
show settings but we don't want to be doing that the
moment it comes in we don't want to show it straight away so let's actually
create a empty state and let's just call this
starts and let's make this the default state
set as default state and now we want to actually transition to this when we when
we click this button we actually want to transition to it and we'll need a
parameter here so that whenever this parameter is triggered we'll actually
perform this action so in parameters here you it's probably default selected
to layers click parameters and let's create a trigger and let's call this
show now
you might be thinking why didn't we create a boolean and like only show it
when it's being shown and i'll show you why i chose a trigger in just a moment
so so here in the conditions we need to
tell it when do we actually want to transition from start to show settings
and we've only got one one trigger here so as soon as you click that it will
have the condition there and untick has exit time so it transitions the second
we press it and now that we're here we actually need
to transition back don't we once we once we
press the button again so we can actually use this same animation so copy
and paste it and let's call this one hide settings
now instead of speed one we can just set this to speed minus one
and it will do the reverse so let's set the transition here so make
transition this one will also be trigger
okay and remove the exit time and then from here we can just go straight back
to start and then we can just wait for the for the input again
so now we actually need to uh make this button clickable so let's add a button
here you'll see this on click uh handler so
you add one and throw in the setting panels animator
now i told you why we chose a trigger and not a boolean and that is because
these uh on click events can only handle functions with a single parameter and
booleans require two because they require you to say okay what's the name
of the boolean and then the value of the boolean whereas trigger is just like a
bam i just triggered something i don't care what it is it's just trigger so we
can actually use set trigger because all that all you need for that is the name
of it which we call show
so whenever we click this we're going to set the trigger show
so let's try that let's press play and go
aha so that's because on our animation we have got loop time clicked
so press play again let's try and there we go
in and out so then you would simply just make buttons of this and you'd connect
your settings manager or whatever and it would just toggle on the sound or
vibration easy as that
uh one last thing let's uh add some decoration to this
panel so i've got this panel here and i would like some decoration down
here and maybe up here or something so let's add a
ui image
and let's add this plant deco here set native size so it
reforms to its own uh aspect ratio and now i always want this to be right here
and if we grab our panel and start moving it around you'll see it does not
do what we want so that's where we need to use the anchor points so holding
shift and alt click the bottom one like this
then put it where you want it and you'll see now when we move the panel around it
sticks exactly where we want it so let's call that a plant
let's duplicate it and i'm going to use the gear that i
drew like that and for that one i want it in
the top left like that
call that one gear so cool that's about all i wanted to
show you you've learned how to make a little uh animated menu here with your
buttons you've learned some text mesh pro you've learned a little button here
with event handlers and you've learned how to
have scalable graphics
as well as anchoring your graphics to the correct locations on the screen and
that that's really the basics now that you know that uh you can start making
pretty complex uis if you want to know more about like things like sliders or
uh layout groups and stuff which are the more complex things of the ui i've got
videos on that so go check those out but until next time i'll see you later