YT YouTube2Text

YouTube2Text → Transcripts → TextLabel - Roblox GUI Tutorial #2

TextLabel - Roblox GUI Tutorial #2 — Transcript

by BrawlDev · 2,862 words · 382 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00hey thanks for stopping by in this
0:02episode of my GUI tutorial on Roblox
0:04we're going to be going over text labels
0:06so in my last episode I made a broad
0:08introduction to guis and how they work
0:10on Roblox and also a little bit about
0:12creating screen guis as our container
0:14for our GUI objects that we're going to
0:16be implementing inside of our games and
0:19with those screen GUI containers I also
0:21added a text label to show text inside
0:24of our game for each of the players on
0:27their screen but in this episode we'll
0:29go a little bit deep into text labels
0:31and more about the properties that these
0:34text labels and really any of these GUI
0:36elements contain and we'll also throw in
0:38a little bit of scripting so that we can
0:40see how we can change these properties
0:42just like we do with any other instance
0:44inside of the game so how do we create
0:45these GUI elements well if you remember
0:47from my last episode we we create them
0:49inside of the folder called starter GUI
0:51that's inside of our Explorer we hit the
0:53plus sign and then we first create the
0:55container for all of these GUI elements
0:59called a screen GUI so we'll insert that
1:01and let's call this uh main GUI and then
1:06let's hit the plus sign here and let's
1:08just search for a text label so a text
1:11label looks like this and On Studio we
1:14should be able to see it on our screen
1:15we can click it we can drag it around
1:18and we can even change the size of it
1:19just like how we wanted to uh we can
1:22align it to the center or pretty much
1:24just anywhere it looks pretty boring and
1:26basic but we're about to change that by
1:28modifying a bunch of of the properties
1:31that this text label has and mostly for
1:34what a lot of these GUI elements will
1:36have so first things first we have the
1:38background color of this text label
1:40which is by default white and in order
1:42to change it we go to the right here and
1:45we click on this property called
1:47background color 3 so what we do is we
1:49click this little box with uh the color
1:52that it's associated with and Roblox
1:54will bring up a panel that lets us
1:57select a color for our background color
2:00so this basically takes in three numbers
2:02the red green and blue value and uses
2:04those values to represent a color and
2:07this is important to know when we uh
2:09start changing these colors through
2:11scripting rather than uh using this
2:13panel that Roblox has given to us so
2:15let's change this color to Orange let's
2:18say let's hit okay and as you can see
2:21the background color of this text label
2:23is now orange and the the numbers have
2:26also changed to fit that color as well
2:29so now if we want to change the
2:31transparency of this of this Frame so we
2:35don't want it to be fully opaque because
2:36opaque is the opposite of transparent
2:38transparent basically just means that
2:40we'll make it completely invisible and
2:42opaque means that we will show it fully
2:44so right now this background is being
2:46shown fully but if we want to change
2:48that uh we go to this background
2:50transparency property and this is
2:52basically a slider that gives a number
2:54between zero and one and the further
2:58along we go towards one the more
3:00invisible the background becomes so if
3:03it becomes one then the background
3:05becomes fully invisible if it's zero
3:07then it's fully opaque but you notice
3:10the text is still showing uh even though
3:13the frame is becoming invisible uh
3:15that's because this is specifically for
3:17the background transparency and the way
3:19we can do that is changing the
3:20transparency of the text but we will go
3:23through that in a little bit next thing
3:24we can do is add a border to the frame
3:28and we can do that with this property
3:30called border size pixel so this is a
3:33number from 0 to I believe 100 so zero
3:38means that there is no border but the
3:39bigger number we give it uh the bigger
3:42the Border will be so if we give it a
3:44value of five then we can see that
3:47Roblox has added in a black border
3:49inside of this text label um and I think
3:53the maximum is 100 which looks like this
3:56it looks really silly but but Roblox
3:58will allow you to do this just like
3:59letting you know that because if I set
4:00this to 101 it just goes back to 100 but
4:03let's just go back to five we can even
4:06change the color of this border by
4:08selecting border color three clicking on
4:11the circular color again and we can pick
4:14a different color so we can pick let's
4:17say toothpaste hit okay and now we can
4:20see that the color of the Border has
4:21changed so moving along let's scroll
4:24down a little bit um we're not going to
4:25go over the positions or rotations or
4:27sizes because I have more to say about
4:30these uh we will go over this in a
4:31future episode when I talk about uh any
4:33of the future GUI elements but I'm only
4:35going to go over some of the properties
4:37for right now so another property is
4:40visible um this basically sets whether
4:43you want this text label to show on the
4:46player screen or not so if I click it
4:48then it'll just completely disappear if
4:50I click it again then it will show up so
4:52that's pretty self-explanatory and now
4:54the next property is zindex so this
4:56basically acts the same way as if we go
4:59to screen GUI this acts as the same
5:02property as display order in which if we
5:04go back to our text label zindex
5:07essentially tells us which text label
5:09should be displayed first in front of
5:12the other text labels that belong to the
5:15same parent so if I let's say had
5:17another text label here both of them are
5:19parented to main GUI the text label with
5:22the bigger Z index will show up in front
5:25of the other text labels so let's just
5:28rightclick on text label and let's
5:30duplicate it and we'll also rename these
5:32text labels to show some differentiation
5:34so this first one we will call this text
5:36label one and then we will call this one
5:38text Label 2 and now for text Label 2
5:41let's just uh drag this down a little
5:43bit to the right as well and let's also
5:46change the background color of this to
5:49let's say green and so to demonstrate
5:53this property right now text Label 2 is
5:55in front of the first text label but if
5:58we select the first text label and we
6:00change the Z index to a greater number
6:03so let's say two for instance then the
6:06first text label will actually appear in
6:08front of the second one so by default
6:10the zindex is one but you can increase
6:12this number to have a higher priority on
6:16which ones will show in front of the
6:18other ones so that's something
6:20interesting to know about and the last
6:22category we'll talk about down here is
6:24the text category so you can see this
6:26label here it's kind of hard to read and
6:28it's pretty small uh there's a lot of
6:31things we can do in order to change that
6:33so first things first is the font uh
6:36which is just called font face uh if we
6:38click this there's a drop down of all of
6:40these different fonts that we can choose
6:42from so let's pick let's say permanent
6:45marker uh we can even change the style
6:47of it by making it uh bold or even
6:50italics as well and we can even change
6:53the text itself so it doesn't have to
6:56say label it can say something else that
6:58we wanted to say uh we can do that with
7:00this text property so on the right side
7:02it takes in a string so if we select it
7:05and delete this we can say something
7:07different um how about we say Roblox
7:11instead uh you can still see it but it
7:13is a little hard to read so in order to
7:16make it bigger we can change the text
7:18size so we do that by going over here
7:21down to text size and it's right now
7:25text size 14 but we can click on this
7:27and we can change the slide to make it a
7:30bigger number like let's say 52 or maybe
7:33even something even bigger like 75 now
7:35we can see the text a lot easier we can
7:38even change the color of the text so
7:40that it's not Black by setting text
7:42color 3 to something else like we can
7:46make this white instead and then we can
7:47hit okay and now we see that if we also
7:50want to add an outline to the text
7:53because it is a little hard to read then
7:55what we can do is we can add in a text
7:58stroke and the way we do that is by
8:01going on the right side there's going to
8:02be a property called text stroke
8:05transparency remember what I said about
8:07transparency properties is that it's
8:09either a value between 0o and one uh one
8:12being transparent and zero being opaque
8:14so by default the text stroke is one
8:17what we can do is we can click this and
8:19we can slide this down to zero so that
8:22we can see that there's a little outline
8:24on there and we can even change the text
8:26stroke color if we really wanted to by
8:28going to text Str color 3 and changing
8:31it to some random color like green so
8:35these are just some properties of the
8:37text label and gradually over time the
8:39further we go on through this tutorial
8:42guide we're going to be exposed to all
8:44the properties here the more we work
8:47with GUI element inside of this guide
8:49but for right now these are just some of
8:51the properties we can work with all
8:53right but now let's put this into
8:54practice there's a very common use case
8:56for text labels and that is currency
8:59so when you're playing a Roblox game
9:01there's usually going to be a label that
9:03shows your coins or any other currency
9:06that you have in the game and it'll show
9:07a text with a number on it that changes
9:10with your actual currency and so if
9:12you're very new to this then you can
9:14pretty much follow what I do in this
9:16episode Because by the end of it I want
9:17you to take away that these things
9:19actually have a practical use and I
9:21think it'll be very cool to show what
9:23these things can do very early on so
9:25that's what we're going to do I'm going
9:27to first delete text Lael 2 cuz we don't
9:29need this anymore and we'll also make
9:31modifications to text label one so first
9:34thing we're going to do is rename this
9:36so we're going to right click and rename
9:38we're going to call this currency label
9:42and down here let's change the font to
9:45something a little nicer let's make this
9:48highway Gothic so that the currency will
9:50be a little more readable and now what
9:52we'll do we're first going to create a
9:53leaderboard script and we're going to do
9:55that by creating a script inside of
9:57server script service so we will hit the
9:58plus sign
10:00script delete this and first we're going
10:03to make a player added event so we'll
10:05say game. players. player added colon
10:10connect function and then in parentheses
10:13we will put the player as an argument so
10:16we're first going to create the leader
10:17stats folder by saying local leader
10:19stats equals instance. new in quotations
10:25we will say int value we will set the
10:28parent of the leader stats to the player
10:31and then we will rename the leader stats
10:33folder to Simply leader stats in all
10:37lowercase and then oh sorry I made a
10:40typo uh instance. new folder not in
10:43value because we're going to make that
10:44down here with coins so we're going to
10:46say local coins equals instance. new int
10:52value and we will set the coins parent
10:55to leader stats and then we will set the
10:59name of coins to Simply coins so that's
11:03our basic leader stat script so we're
11:05done with that now we're we're going to
11:07do is insert a local script so if we go
11:10back into the game Let's insert a local
11:12script inside of our main gy it's very
11:15important that it is a local script that
11:16we're using so hit the plus sign local
11:18script the first thing we will do is
11:21make reference to to our local player
11:24and what's great about using a local
11:25script is that we can access our player
11:29with just one line because a local
11:31script is designed to be accessed for
11:33every single player which is why I find
11:36this to be very convenient so we will
11:38access this player by saying local
11:41player equals
11:44game.
11:46players. local player and it's very
11:50important to know that this property can
11:51only be used if this is inside of a
11:54local script this cannot be done inside
11:57of a normal script because the script
11:59doesn't know exactly what player you're
12:00talking about but a local script can
12:03tell you exactly what player you're
12:04talking about because these local
12:06scripts are run on the client side so
12:08essentially this is taking the current
12:11player that's executing the script
12:13inside of the players so it's going to
12:15take our player instance and as you know
12:17from our player we created a leader stat
12:20folder and inside of that leader stat
12:22folder we created a coins int value so
12:25so using this chain we're going to
12:28access access the coins int value so in
12:31our local script we're going to drop a
12:33line and we're going to first access the
12:35leader stats by saying local leader
12:38stats equals player colon wait for Child
12:42open parentheses close parentheses in
12:44quotations leader
12:46stats and then down here we're going to
12:49access the coins by saying local coins
12:51equals leader stats wait for child coins
12:57so now we've accessed the coin coins int
12:59value and now we want to make an event
13:02that basically triggers whenever the
13:04coins in value changes we will then
13:07change the text of this text label right
13:10here so we're first going to make
13:13reference to our currency label by
13:15saying local currency label equals
13:19script. parent. currency label and then
13:23we're going to make the event that
13:24triggers whenever the coin's int value
13:27gets changed and this is done by saying
13:31coins.
13:32changed colon connect
13:36function open parentheses closed
13:37parenthesis and then down here what
13:39we're going to do is we're going to
13:42change the text of the currency label so
13:45this text right here so we're going to
13:47say currency
13:49label. text equals and this new text is
13:53going to be the new value of coins and
13:57we fetch this value by saying saying
13:59coins. value and so this is pretty much
14:01our script right here if we go into the
14:03game we can actually see this change for
14:05ourselves so if we go into the game hit
14:06test and hit play what we'll do is that
14:09we're going to go to the server side by
14:11clicking on current client instead
14:13current server we're going to open up
14:15players open up our player and go to
14:17leader stats and coins let's change this
14:20property to 100 let's go back into the
14:24game and as you can see the text label
14:27has changed its text whenever the coins
14:29value changed on the server and before
14:32this just said Roblox but now it updated
14:35the text to whatever this was so if we
14:37go back into the server and change this
14:39to 10,000 or 100,000 I don't exactly
14:43know what it is it's 100,000 it updated
14:45it just like that so this is one
14:48instance of using text labels I think
14:50this will definitely come in handy
14:52whenever you have values that need to be
14:53updated during the game's runtime so
14:56that's pretty much going to be it for
14:57this episode on Tex labels there were a
14:59bunch of properties that I missed but
15:01that's because most of these GUI
15:03elements share the same properties so
15:05like I mentioned gradually over time
15:07we're going to be exposed to all these
15:09different properties and you'll be more
15:11competent with actually using these
15:13properties and understanding how all of
15:15them work so that's pretty much going to
15:17be it for this episode join my Discord
15:18the link is in the description and I
15:20will see you in the next episode take
15:22care

About this transcript

This page contains the full transcript of TextLabel - Roblox GUI Tutorial #2 by BrawlDev, generated from the public captions YouTube serves with the video. The transcript has 2,862 words across 382 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.