YT YouTube2Text

YouTube2Text → Transcripts → BillboardGui - Roblox GUI Tutorial #9

BillboardGui - Roblox GUI Tutorial #9 — Transcript

by BrawlDev · 4,496 words · 575 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00yo brawler that's a pretty cool name
0:02that's also a pretty cool heal bar oh
0:04wait what oh okay okay I guess he
0:06doesn't want to be friendly with me okay
0:08I I have no choice but to kill him all
0:11right all right let's see what you got
0:13bro let's see what you got yeah you got
0:15nothing on me bro I did him so good he's
0:17literally levitating off the ground
0:19right now he's already became a ghost oh
0:23okay well now he's gone all right well I
0:24think that's the last I'll ever sea of
0:26brawler so one thing I found interesting
0:28about him was that he had a custom
0:29health bar on top of his head so if I
0:31pretty much found this guy uh he had a
0:34health bar above his head but it kind of
0:37acted as like a GUI so it's kind of
0:39similar to what we just talked about in
0:40the last episode with surface guis but
0:42this sort of floats above some part or
0:45some instance within the game and that
0:46is essentially what a billboard GUI is
0:49I'm going to go more into detail about
0:50that later in this episode but yeah dude
0:52I keep discovering new things every
0:54single day so I'm going to hope that
0:55this train keeps on going but with that
0:57being said let's go ahead and Implement
0:59billboard GI inside of Roblox studio now
1:01that we understand it let's Implement
1:03billboard guis in Roblox studio so like
1:06we did with surface guis we basically
1:08added a GUI element slapped on top of a
1:12part or an instance inside of the 3D
1:14World so we're basically going to be
1:16doing the same thing here with a
1:17billboard GUI let's say we wanted to
1:19insert a part so let's go to model and
1:22then insert a part that's uh just right
1:24here and then uh like we did with
1:26surface GUI we're going to go to the
1:28right side of the Explorer we're going
1:31to hit the plus sign next to part and
1:32then we're going to insert a billboard
1:35gy like this uh and then there's going
1:37to be nothing on here until we start
1:39adding stuff inside of this billboard
1:40GUI so we're going to hit the plus sign
1:42and I'm going to just insert a text
1:44label so right now you don't really see
1:46anything but if we zoom out then you can
1:49actually see that there is something
1:50being shown here and that is um the text
1:54label so it's really interesting because
1:56this doesn't work the same way as a
1:58surface GUI and how it would basically
2:01just be slapped onto one side of this
2:03part and then we would be able to see it
2:05and then not be able to see it if we
2:07were looking at a different side but
2:09with this billboard GUI we can view this
2:12no matter where we are inside of the
2:14game because our camera is constantly
2:17able to see this billboard GUI no matter
2:20where we're facing in the game so that
2:22is the primary difference between a
2:24billboard GUI and a surface GUI both of
2:26them allow you to view GUI elements
2:28within the 3D world but depending on how
2:31you use them they can be viewed in
2:32different ways okay so there's something
2:35important that we need to know about
2:36before we continue working with this
2:38billboard GUI and that is uh scaling
2:41versus offsetting so if you remember
2:43from my scale versus offset video I
2:45talked about the difference between the
2:46two and why it's important when it comes
2:49to um modifying GUI elements either
2:52within our screen or within the 3D World
2:54so if uh you forgot the difference
2:57between the two uh I will give you a
2:58quick recap but I could also suggest
3:00that you rewatch that video um to really
3:03understand the concept before we
3:05continue watching this um but basically
3:07when we're playing a Roblox game we can
3:09be playing on any screen we can be
3:11playing on a phone we can be playing on
3:12a tablet or a TV or whatever it may be
3:14if we're scaling or positioning a GUI
3:17element either within our screen or
3:19within the 3D world there's two ways we
3:22can do that the first way is using a
3:24scale and the other way is by using an
3:26offset an offset it's basically a fix
3:30number of pixels that determine the
3:32position or the size of a GUI element
3:35within the game the issue with this is
3:36that if we have different screen
3:38resolutions then this is not going to
3:40accommodate for uh whatever screen
3:43resolution you're using so if I had a
3:46offset of 200 then it's not going to
3:48look the same if I was playing on a TV
3:50versus on a phone so that's why I highly
3:53recommend using scale rather than offset
3:55because scale changes the position and
3:58size based on the screen resolution and
4:01this is very important when we're using
4:02billboard guis uh because I would still
4:04recommend using scale over offset and
4:07that is basically the difference and if
4:09you are still stumped about that once
4:10again just go rewatch my scale versus
4:13offset video before continuing this
4:14video okay so first things first let's
4:16go ahead and manipulate the size and
4:18position of this billboard GUI so here's
4:21already the first thing that's kind of
4:22awkward about it okay so if we go down
4:24to the size property it's using offsets
4:26which is already a problem uh what we
4:28want to do in instead is use scales and
4:30the reason we want to do that is because
4:33you can kind of see that if we're
4:34looking at this GUI text label and then
4:37we zoom out it just kind of scales so
4:40awkwardly the farther away I leave uh
4:43from the GUI element it's just going to
4:44continue to have this offset in a fixed
4:48pixel size um when we walk away and then
4:52come back just to see that it's very
4:53very small the difference is pretty
4:55massive once we use scaling so I'm going
4:57to set the size of the offsets to zero
5:01and then I'm going to change the scale
5:02to some random numbers so I'm going to
5:04make the scale for the x value five and
5:07then I'm going to make the scale for the
5:10uh y value let's say two so as you can
5:12see um we can now see that this
5:15billboard GUI is more fixated but the
5:19text label is not and that's because if
5:22we go to the text label we can also see
5:24that the size is using offset so in this
5:26case because we want this to fill up the
5:29ENT higher billboard GUI uh frame we're
5:32just going to set the scale to one on
5:35both the X and the Y AIS and we're also
5:38going to get rid of the offsets that are
5:40within it by default so now if we zoom
5:43out we can see that it's way better than
5:46what it was before because it scales it
5:48differently and it scales it in the way
5:50that we wanted to um versus what we had
5:52before with offsets now you can use
5:54offsets if you want I think there can be
5:56some instances where you would use it
5:58but generally I think think this is a
6:00lot better when it comes to scaling and
6:02positioning so that's a quick rundown of
6:04using size for billboard GUI and my of
6:07billboard G wise and my recommendation
6:09for it okay now there's three properties
6:11I want to introduce you to with
6:12billboard G wise the first one is size
6:15offset the second one is studs offset
6:17and the third one is studs offset World
6:19space so I'm going to go through each of
6:21these one by one but basically a size
6:24offset is kind of like a GUI Anchor
6:27Point but instead it's attached to to a
6:29physical part instead now if you don't
6:31remember what an anchor point is it's
6:34basically the starting point of where a
6:36gy element is located so that we can
6:38change its position or its size
6:40according to that according to that
6:43starting position so in this case a
6:45billboard GUI it's usually within it's
6:48usually within the part that it's
6:50attached to so this one right here and
6:51right now it's in the direct center of
6:53it so we want to move it aside so that
6:55we can actually see it better so with
6:56this size offset it takes in two values
6:58an X and a yalue uh if we change the
7:01yvalue to let's say one then we can see
7:04that it moved up from the origin point
7:07of the the part so it moved up so now
7:09we're able to see it better and if we
7:11change its x value to like let's say one
7:13then it's going to move to the right
7:14side like this and if we move around we
7:17can still see that it's still uh one
7:20size up and one size to the right okay
7:24but now we have size offset I'm going to
7:26quickly switch this back to 00 to
7:28explain studs offset but this is
7:31basically a vector 3 value that takes in
7:33an X Y and Z value and this also
7:35determines the offset of the GUI element
7:38from its origin which is going to be the
7:40center of this part right here now the
7:42the main difference between studs offset
7:44and size offset is that this takes in
7:45three values instead of two so this adds
7:48in another layer of where we want to
7:50position this element um based on our
7:54camera's view so if we change the Z
7:56value uh which is in studs so it's not
7:59in pixels or anything like that this is
8:01in studs uh we can change this to let's
8:03say five uh which is going to position
8:05it like this we can change the x value
8:08to let's say five again and then the y-
8:10value to also five so we can kind of see
8:12that this allows us to further
8:14manipulate the studs offset that size
8:17offset can't do they both act very
8:19similar but I recommend experimenting
8:21with the size offset and studs offset to
8:23really get to know um what it is that's
8:26special about these two and how you can
8:28use them to to manipulate the size and
8:31position of a GUI element based on its
8:33based on its adorney which is also this
8:36part right here okay and then finally we
8:37have studs offset World space now I'm
8:40not going to go too technical into this
8:41one if you haven't seen my CF frames
8:44video I go into more detail about the
8:46difference between relative versus
8:48global axes uh and this kind of ties
8:51more into that um but what I want to
8:53tell you about this is there is a
8:55difference between the two and I want to
8:56show you so if let's say I was to rotate
8:59this part then the GU element is going
9:02to remain unchanged because the studs
9:04offset is only manipulated um based on
9:08our camera's view but if we were to
9:10change the studs offside World space the
9:13GUI element is going to be manipulated
9:15based on the world view rather than the
9:17camera view so if I were to change this
9:20to 0000 and then change the world space
9:23uh offset to 555 and then you can see
9:27that there is already a difference here
9:29where it's positioned along this way
9:30rather than it being this way and if I
9:32were to rotate this part then we can see
9:35that this guy element is being rotated
9:37alongside this part because this is
9:40being determined by the world space now
9:42again I don't want to overwhelm you with
9:44all this stuff like if you're still sort
9:46of confused about that then you don't
9:47really have to use this if you don't
9:48want to but I just wanted to point this
9:50out and show you that there is a
9:52difference um between these three
9:53properties okay but now I'm going to
9:55show you that there's actually a
9:56property that can allow us to hide a
9:59billboard GUI from a specific player and
10:02its property is called player to hide
10:04from this basically takes in a player
10:06object um that will allow us to not show
10:09this GUI element specifically for that
10:11player and uh show it for everybody else
10:14but let's make a few modifications first
10:16so that we can see it better uh let's
10:17change the size offset to have one stud
10:22uh above the origin point which is going
10:24to be where the part is so now we can
10:26see it better uh but let's but you might
10:28have also noticed that as we've been
10:29scaling out and scaling in you can see
10:32that the the text itself has been kind
10:34of awkward when it comes to uh scaling
10:36it and then not scaling it because it
10:38uses offsets rather than scaling uh
10:40that's why I would highly recommend
10:42going to the text label going all the
10:44way down and then selecting uh text
10:47scaled so that it will automatically
10:49scale as we move back or move forward
10:52from the text label so now that we have
10:54this uh let's just write a quick script
10:56uh so that we can manipulate the play
10:59player to hide from property so I'm
11:00going to hit the plus sign next
11:01billboard GUI insert a script uh we're
11:04just going to make a very quick
11:06statement here just by saying a task.
11:08wait for maybe about 5 seconds or so and
11:10then what we're going to do is say
11:12script.
11:13parent. uh player to hide from equals
11:18game. players. braw battle you can
11:21replace this with um the name of your
11:23character uh just to like quickly show
11:25you that this does work as intended okay
11:27so I can see the label uh in about 5
11:29Seconds now I should not be able to see
11:31the label and the way I know this works
11:33is if I go to the server we can still
11:35see the label regardless of uh whether I
11:38can see it or not because we
11:40specifically hid the billboard GUI um to
11:43be hidden from my character specifically
11:46so with that being said I'm now going to
11:48show you how we can Implement a custom
11:50health bar inside of our game using
11:52billboard gu wi so the first thing we
11:54might do is create a rig so that we can
11:57see what this would look like on an
11:59actual character so I'm going to go to
12:00Avatar and we're going to click on rig
12:02Builder I'm going to insert a block
12:04Avatar so that we can see it right here
12:06uh let's just move this alongside over
12:09here and now we have our rig so what we
12:11want to do is open up our rig and then
12:13we want to go to its head because that's
12:16where we want the rig's um health bar
12:19bar guy to be located it's on the head
12:21but slightly offsetted to the top of it
12:23so we can see it better but let's add a
12:25billboard GUI inside of the rig's head
12:28like this and what we're going to do is
12:30insert a frame um inside of this
12:33billboard GUI because what we want to do
12:36is have a frame that goes behind it that
12:38basically acts like you know that's
12:40going to be the bar and then over it
12:41we're going to have the actual bar so
12:43that we can see that it is progressing
12:45down as we take down more Health from
12:48the character you'll see what I mean in
12:49a little bit but basically what we're
12:51going to do is we're first going to
12:53change the size of our billboard GUI to
12:56not have offset but instead we're going
12:58to use scale so I'm going to use a scale
13:00of five and then let's say for the Y AIS
13:02I'm going to use a scale of two uh that
13:04might be a little too big so let's
13:06change it to one that looks good let's
13:08also change the size offset to move it
13:11slightly upward so we're going to change
13:12the yv value to one and we should now
13:15see it over here but now what we want to
13:18do is go to the frame and set its size
13:21to 1 0 1 and zero so that it fills up
13:26the entire uh frame as we see here
13:29uh what we're going to do now is
13:30basically change the background color to
13:33some dark color like this and then we're
13:35going to hit the plus sign in the frame
13:38and we're going to add in a text label
13:40like this we're going to call this the
13:42meter uh and then we're going to change
13:45the size once again to one 1 0 so it
13:48fits the entire thing and then we're not
13:50going to have any text that's going to
13:52be inside of here and we're also going
13:54to change the background color of this
13:56to be some sort of green so that we can
13:58you know see the so that we can actually
14:00see the bar um so great we basically
14:03have our bar but another thing we might
14:05want is a visible text to like see how
14:08much health do we have exactly so we're
14:11basically just going to take our meter
14:12and then we're going to duplicate this
14:15and we're going to call this the label
14:18we're going to set the background
14:19transparency to one so that we don't see
14:21it and then we're going to give it a
14:24default text so that we know that it
14:26works we're basically going to say 0/0
14:28we're going to change the text scaled
14:30and then we're going to make the color
14:33white so that we can see it better with
14:35green okay and sweet we basically have
14:37the base we basically have the layout of
14:40our health bar bar um but now what we
14:42want to do is create a script inside of
14:44our frame so we're going to hit the plus
14:45sign next to frame create a script now
14:47remember this is a script this is not a
14:49local script because we're utilizing the
14:513D World and this isn't independent with
14:54the local player so let's go back to
14:56this and we're actually going to rename
14:58the billboard gy to uh health bar like
15:02this oh like that okay so let's first
15:05make some references we're going to say
15:07local frame equals script. parent and
15:09then we're going to say local meter
15:11equals frame. meter and then local label
15:15equals frame. label okay now because
15:18we're working with health health is in
15:21the humanoid which is this right here so
15:23if we go down we can see that over here
15:26we have the health property but we also
15:28have what's called a Max Health property
15:30and basically the difference between the
15:31two is health is obviously the current
15:33health of the character uh and then Max
15:35Health it's the maximum health that the
15:37character can possibly have so the
15:40health can never be bigger than the
15:42maximum health it's always going to be
15:44the same as the max health or less than
15:46the max health so that's an important
15:48distinction to know about when we're
15:50using uh the health property within our
15:52script so the first thing we're going to
15:54do is locate our character and then
15:56locate the humanoid because the humanoid
15:58has the health property that we need so
16:00we're going to drop two lines the
16:02character is going to be from the frame
16:03we're going to say parent parent parent
16:08so it's going to be three parents we're
16:09going to say local character equals
16:12frame. parent. parent. parent uh and
16:17then we're going to find the humanoid by
16:20saying character wait for Child open
16:25close parenthesis humanoid and we're
16:27using a wait for child just in case the
16:29character does not load in fast enough
16:30while the script is running now here's
16:32how this is going to work so we have
16:34access to the humanoid and we need the
16:36health property to tell us how big the
16:38bar should be and also what we should
16:40display on the text we need the health
16:43and the max Health to be able to
16:44determine these two things because
16:46that's those are the two things we need
16:48to accomplish from this how we can do
16:49this is we can set up an event that
16:51basically Updates this guy bar every
16:54time the health changes what we're going
16:56to do is say humanoid colon get
17:01property property changed signal uh and
17:06then this is going to take in uh a
17:07string which is going to be the property
17:09name uh we're going to say health we
17:11want to wrap this signal in a connection
17:14wrap this in a function like this and
17:17then we're going to hit enter now that
17:18we have this we want to change the text
17:20label and also the bars size based on
17:23the new health so this is how we're
17:25going to do it we're basically going to
17:27change the labels
17:28text equal to the new health versus the
17:32max Health that the character has so
17:36we're going to say it like humanoid do
17:38health and then because this is a string
17:40we're going to concatenate this with a
17:43um a forward slash like this and then
17:45we're going to concatenate this again
17:47using uh the max health of the humanoid
17:50so we're going to say humanoid do Max
17:53health so once again the character's
17:55current health is going to be on the
17:57left side and the max health is going to
17:59be on the right side uh but now we need
18:01to change the size of the meter now this
18:02can be kind of confusing at first
18:04because what we need to understand is
18:07the scale of this health bar right here
18:10so if we go to our uh meter and we
18:13decide to look at our size property
18:15right now the X scale property is one so
18:18it basically fills up all the way with
18:20our frame that we have here if we decide
18:22to change this to 0.5 for example then
18:24it's going to go down halfway and if we
18:27decide to go down by let's say two then
18:29it's going to go down all the way here
18:31and then of course zero is just going to
18:32be at the very end right there so if we
18:34if we were to try to imagine this in a
18:37script let's say the max health is 100
18:41and then uh the current health let's say
18:44is 50 uh if we were to change the X
18:48properties if we were to change the X
18:50scale of the size we would need to do an
18:53equation that would basically tell us
18:54that okay we have our health and we want
18:57to divide this by the max Health uh in
18:59order to get us the scale that we need
19:02for the X property so if we were to do
19:0450 / 100 that would give us 0.5 and as
19:08you know 50 is half of 100 if we change
19:11the scale to 0.5 that's going to be half
19:14of the bar so that is going to be the
19:16equation we're going to use here uh to
19:18determine the size change of this bar so
19:22I hope that part made sense to you let's
19:24see what this looks like in our script
19:25it's just going to be one line we're
19:27basically going to say
19:29meter. size equals and remember if you
19:32want to change a size it takes in a udm
19:352 value so udm 2. new and then we're
19:38just going to change the size of the X
19:40property so it's basically going to be
19:42uh the human the humanoid do Health
19:46property divided by the humanoid Max
19:50Health property and the remaining
19:52parameters is just going to be the same
19:54it's going to be 0o 1 and then zero so
19:56that is basically how we change the size
19:58of of the meter so if we now go into the
20:00game hit test and hit play we should be
20:01able to see that this health bar this
20:03health bar should be working whenever we
20:05change the health of this rig right here
20:07okay so let's go to the server side uh
20:09let's open up workspace let's open up
20:11our rig go to the humanoid let's change
20:13the health property to 50 all right so
20:16as you can see uh we've changed the text
20:18label to be 50 over 100 and we've also
20:21changed the scale of the bar to fit uh
20:24the current health versus the max health
20:26so if I change it to 75 then it's going
20:28to update the bar basically as intended
20:30and we basically know it's working up
20:32until this point so if you change it to
20:33zero then this rig is basically dead
20:36just like that now it is kind of
20:37annoying that we have this bar on top of
20:40our current bar um the way we can change
20:42that is if we go back uh go to our rig
20:46and then go to the humanoid we can
20:48change this property here that says
20:49Health display type display when damaged
20:52let's change this to always off so that
20:54we can only see our custom health bar
20:57and finally if we want to to update this
20:58bar to have its starter text and its
21:00starter uh scale before even changing
21:03its health bar we would basically just
21:05take uh what we had here and just paste
21:08it directly up here so that as soon as
21:10the script runs we're going to update
21:12the text and the size of the meter uh
21:14based on the current health so that's
21:16like the last thing I wanted to include
21:17with this health bar and I hope this has
21:19helped you understand more about
21:21billboard G wi that's pretty much going
21:23to be it for this episode again if there
21:25were some Concepts that were sort of
21:27confusing to in this video like the
21:29scale versus offset thing then I
21:31encourage you to watch my scale versus
21:33offset video that I have on this
21:35playlist and I will put that video for
21:37you right here so that you can go and
21:38watch it but with that being said I hope
21:40you found this video to be helpful and I
21:41will see you in the next episode take
21:45care

About this transcript

This page contains the full transcript of BillboardGui - Roblox GUI Tutorial #9 by BrawlDev, generated from the public captions YouTube serves with the video. The transcript has 4,496 words across 575 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.