YT YouTube2Text

YouTube2Text → Transcripts → Rich Text Markup - Roblox GUI Tutorial #11

Rich Text Markup - Roblox GUI Tutorial #11 — Transcript

by BrawlDev · 3,978 words · 507 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00oh Newbert I can't think of an intro for
0:01this video what should I do wait maybe
0:04you should die wait Newbert why are you
0:06telling me this I thought we were
0:08friends oh hold on maybe you should die
0:12you know what Newbert that actually gave
0:13me a great idea and no I'm not going to
0:16follow your request that you just gave
0:17to me but it's in the way that you said
0:20that message and how there were certain
0:22texts in that message that were
0:25formatted differently than the rest and
0:27that's actually something really
0:29interesting to know about when it comes
0:30to formatting messages inside of your
0:32game and I think that's what I'm going
0:34to be talking about inside of this GUI
0:36tutorial it's going to be what's called
0:38Rich Text markup but before we Implement
0:40that inside of Studio let me try and
0:42give you an understanding of it first
0:43thanks Newbert I really appreciate it
0:45all right let's think about this for a
0:46minute in the previous example I showed
0:48you with Newbert saying what he just
0:51said with his message there were certain
0:53parts of that message that were
0:54formatted in a different way compared to
0:57the rest of the string and this is with
1:00the use of Rich Text markup so in order
1:03to show you further of what I'm talking
1:04about I have this text label that just
1:06simply says this is a message but if I
1:09were to show you this version of the
1:11same message we can see here that the
1:14word message is in bold and it's also
1:17underlined but the rest of the string is
1:19not and this is all contained within the
1:22same string so we don't have um a
1:25specific format for the entire string
1:28but only for specific parts of the
1:30string so this is very useful when we
1:32want to um use the same string but then
1:35have certain parts of the string be in a
1:36different format compared to everything
1:38else I think from this point onward it's
1:40pretty self-explanatory but now it's a
1:41matter of understanding how we exactly
1:43format these strings and so for the rest
1:45of this tutorial that's what we're going
1:47to be doing inside of this video so with
1:50that being said let's now go straight
1:51into implementing now that we understand
1:53it let's Implement Rich Text markup
1:55inside of Roblox studio so what I'm
1:57going to do is go to the right side of
1:59starter G I hit the plus sign and I'm
2:01going to insert a screen GUI now inside
2:03of here I'm going to insert a text label
2:06so let's take this text label let's just
2:08scale it up just a little bit move it
2:11towards the center like this I'm going
2:13to go down and turn text scaled on so
2:15that we can actually see the text now in
2:17order for me to help you understand the
2:20structure of Rich Text markup and how we
2:22can incorporate this inside of our text
2:24I'm actually going to insert a local
2:26script inside of text label so I'm going
2:28to hit the plus sign insert a local
2:30script and delete this so what I'm first
2:32going to do is make reference to the
2:34text label by saying local text label
2:37equals script. parent and then what I'm
2:39going to do is say text label. text
2:43equals now we can make this text to be
2:45whatever we want to be it could be the
2:47previous example that we had which was
2:49this is a message like this so this is a
2:54basic message that we have here um and I
2:56also added it over here as well so this
2:58is basically what it looks like here
2:59here um this is how it is formatted but
3:02if you want to be able to uh to format a
3:05specific part of the string like let's
3:07say this word message here then we need
3:10to use Rich Text markup to add tags to
3:14surround the part of the string that we
3:17want to format and it's basically going
3:19to look something like this where we
3:20have a an open tag over here on the left
3:23side and then a Clos tag on the right
3:25side basically surrounding the the part
3:28of the string we want to um make a
3:30change to and so for Rich Text markup
3:33the way that is formatted it is
3:35formatted through tags and the way tags
3:37are formatted is something like this so
3:40we have a less than character and a and
3:44a greater than character and then on the
3:46end of it we have a less than character
3:49and a greater than character again but
3:51for the end character we want to add a
3:53forward slash so that we can
3:55differentiate between the end tag and
3:58the open tag so so now we have our tag
4:01format but we want to know what tag we
4:04want to use specifically uh for this
4:07message and like we mentioned before we
4:09want to make this part in bold so what
4:12we can do is simply just say lowercase b
4:15for bold and on the right side we can
4:18also say B and we need to make sure that
4:20it is on the right of the forward slash
4:23and not behind the forward slash and so
4:25this is basically how we create tags
4:27using Rich Text markup to format
4:30specific parts of the string so if we
4:32were to copy this and go to our game and
4:36we change the text to this um we can
4:39still see that we're seeing the tags
4:42here which is not meant to happen and
4:43that's because we need to enable this
4:46property called Rich text so if we
4:48enable this then we can see that message
4:52is formatted as the way we want to which
4:54is in bold but the rest of it is still
4:57as it is normally and you don't need to
5:00use a script to be able to format this
5:02properly you can even just do this
5:03directly inside of the text property as
5:05well but I just find it to be harder to
5:07read so that's why I write this down
5:08inside of a script first before putting
5:10it inside of the text property but this
5:12is how you use Rich Text markup in its
5:14basic format we can even add multiple
5:17tags to the same part of the the message
5:20that we want to format and the way we
5:23would do this is by simply adding more
5:25tags surrounding the specific message we
5:27want to change um so if I were to insert
5:31another tag we would have another open
5:33one over here and another closed one
5:35over here now the thing about this is if
5:38we added another tag uh to the same
5:42message then we can either put the open
5:44tag on the left side or the right side
5:46but it doesn't really matter where you
5:47put it for this example I'm going to put
5:49it on the left side but what is
5:51important is is to know the order of
5:54where you put the tags because if let's
5:56say this tag was to make the message
5:59bold then we would add a u to this and
6:01another U over here we need to have the
6:04tag be on the outside of the entire
6:06message uh because that's where we had
6:09the starting tag for uh for the
6:11underline so basically what I'm trying
6:13to say is if you have a tag that's
6:15closer to the message you need to have
6:17the end tag also be closer to the
6:19message and you need and you need to
6:21have the order match up like this so you
6:24need to do the same thing for the
6:26underline here as well this is the
6:28second closest tag to the message so
6:30that's why the end tag is also the
6:33second closest uh tag to the message and
6:36things like that so now that we've come
6:38to that understanding if we were to
6:40select this bring it over back here
6:42change the text to this then as you can
6:45see now the message is underlined and
6:48bolded at the same time because we added
6:50two tags rather than one and you can do
6:52this for as many tags as you'd like we
6:54can even add color to specific parts of
6:57the string so what I'm going to do to
6:58make this more simp simple is by getting
7:00rid of these tags that we currently have
7:03and I need you to understand how the
7:05structure of this tag is going to work
7:07so I'm first going to insert the less
7:09than and greater than symbol less than
7:11and greater than symbol and then add the
7:13forward slash to the end of it so the
7:15way we so the way that this is going to
7:17work is there's basically a group full
7:20of tags that we can use and what I'm
7:23talking about is there's a group called
7:25font and it has multiple properties that
7:28we can change change within that same
7:31group what we're going to do is say font
7:33spacebar and we're going to change
7:37specifically the color of it so we're
7:38going to say color and in order for us
7:40to actually change the color of it we're
7:42going to put an equal sign um and
7:45there's two ways we can change the color
7:46of a message we can either use an RGB
7:48value or we can use a hex value but for
7:51but for the sake of this example we're
7:53going to use an RGB value so we're
7:56simply going to say RGB
7:59open and close parentheses and we're
8:01going to put in our three RGB values so
8:04let's say we want to make this part red
8:05what we're going to do is give 255 for
8:09red comma zero for green and then comma
8:12Zer for blue one thing we need to do is
8:14surround this part with uh double quotes
8:18so we need to put a double quote here
8:20and we also need to put a double quote
8:22by the end of it as well like this but
8:24now you might think that there's a whole
8:26bunch of weird stuff happening here and
8:28there's actually an error that Roblox is
8:29giving us saying that there's an unknown
8:31Global variable RGB and that's because
8:34we can't have double quotes within
8:36double quotes so what we need to do is
8:39actually replace these double quotes on
8:41the outside with single quotes like this
8:44so that we can have uh double quotes
8:46within this string so now it should
8:48basically work as expected um now don't
8:51forget on the end here we need to
8:53specify font like this now we're not
8:56going to be saying font color or
8:57anything like that because font is the
8:59group and color is the property that we
9:02want to change specifically so now if we
9:04were to copy this string and then paste
9:07it into this text here then we can see
9:10that message is now formatted in red but
9:13the rest is not and so that's basically
9:16how you add color to your text we can
9:19also change more things with this font
9:22because this is a group that has
9:24multiple different properties um within
9:26the same tag so what we can try and
9:28change is the font of this specific part
9:31of the message right here and we're
9:33going to use what's called font family
9:36now often people get confused with font
9:38family and font face so this
9:40documentation shows what a font is and
9:43it explains pretty well the difference
9:45between font and font color but
9:47essentially this is a huge list of all
9:50the font families that you can use
9:52inside of your Roblox game now to help
9:54you understand what a font family is
9:56it's basically a bunch of fonts that
9:59look I that look similar to each other
10:02that is basically grouped into one font
10:05that is shared within the text that we
10:07use inside of our game and it also
10:09contains different weights as well so
10:11weights meaning if it's a normal text if
10:13it's bolded if it's semi bolded and
10:16things like that so that's what so
10:17that's what the weight is but for the
10:19font family it basically contains
10:21multiple fonts that are basically the
10:23same and groups them into one versus a
10:26font face which is a very specific
10:29specific font that you'd want to use
10:31like let's say Ariel bold is a font face
10:35that's a specific font that we want to
10:37use but Ariel is the name of the font
10:39family altogether and usually I would
10:42recommend just using the font family
10:44because it's a much more simplified way
10:45of adding your font inside of your game
10:48so what I'm going to do is select one of
10:50these fonts let's say bangers right here
10:52so what I'm going to do is Select this
10:55asset ID I'm going to copy it and now
10:58we're going to go back into Roblox
11:00studio so that we can add this inside of
11:01our script all right so I'm back into
11:03studio and I mentioned that we can have
11:06uh multiple properties being changed
11:08within the same tag which is font so all
11:11we need to do is basically just write a
11:13space after we make one of these
11:16property changes and specify the next
11:18property so what we're going to specify
11:20now is the family we're going to say
11:22family equals uh double quotes and
11:26double quotes again and we're simply
11:28paste what we copied from the website
11:30and now what we have is a change to the
11:33font color and a change to the font
11:35family by simply separating these two
11:38using a space and it's important to have
11:40this all contained within the open tag
11:43for font and we only specify font one
11:46time so this is one property change and
11:48this is another property change right
11:50here so now let's copy this text uh
11:53ignoring the single quotes so let's copy
11:56this go back to the game select our text
11:58label and let's now paste this new text
12:01and as you can see it is now red and the
12:05text uh and the text family has also
12:08changed to be bangers instead of what we
12:11had before so this is basically how we
12:13changed the font color and also the font
12:15family of this specific part of the text
12:18right here now there's other things we
12:19can add to this like adding a text
12:22stroke uh to be a different color and uh
12:25have a thickness to it so that we can
12:26actually see the stroke of a specific
12:28text so what I'm going to do is go back
12:31to our script and I'm going to get rid
12:33of this font tag just so that it's not
12:35in the way of everything else that we're
12:37trying to write here um so what I'm
12:39going to do is add in the open and close
12:42tag like this and another open and close
12:44tag like this with a forward slash Right
12:46Here and Now what I'm going to do is
12:49specify the stroke tag so we're going to
12:51say stroke like this and there's two
12:53things we're going to add in here so
12:55it's going to be the color and it's Al
12:56it's also going to be the thickness so
12:58we're going to say color
12:59equals don't forget the um the double
13:02quotes and we're going to specify an RGB
13:05value so we can make this RGB value
13:08let's say 0 255 and 0 to be fully green
13:12and we're also going to change the
13:14thickness of it so that we can see it
13:15better so we're going to get out of the
13:17color property and we're going to uh add
13:21thickness like this set this equal to
13:24double quotation double quotation and we
13:26can put a number inside of here like
13:28let's say uh four so that we can really
13:30see it it's very important that when
13:32we're having values inside of each
13:34property we use quotations um
13:37surrounding the value so that um the
13:40rich text markup language knows that
13:41this is going to be a value that we're
13:43trying to change and not like a property
13:45or anything like that uh oh yeah and
13:46also at the end here we also can't
13:48forget about this uh after the forward
13:50slash we add in the tag name which is
13:53stroke so now if we take this text once
13:56again and go inside of AR game right
13:58here change the text to this so we can
14:00now see the text stroke that is green
14:03and it also has a thickness of four so
14:05we can see it very well so that's how
14:06you add Strokes inside of your text
14:09another interesting thing is we can have
14:11custom line breaks inside of our message
14:14now what I mean by a line break is if we
14:16let's say had um a specific part of the
14:19text that that just says this is and we
14:21wanted to continue the message but have
14:24it be down here rather than have it go
14:26along this way then we would use what's
14:28called a line break to basically
14:30separate to basically let us know that
14:32this is where we want to end and we want
14:34to now move on to the the next line down
14:37here um to continue our message the way
14:40we write that inside of our script is if
14:42we go back inside of here uh I'm going
14:44to get rid of the stroke so that um we
14:46can read this better so I'm going to get
14:48rid of the stroke like this up until
14:50this point we've had open and close tags
14:52but in this case for a line break we
14:55actually don't need that we just need
14:57one tag that represents the line break
14:59and what we're going to do is just
15:00simply say uh open and close tag like
15:03this and we're going to put in a br so
15:06this indicates break for line break and
15:09we're also going to say space forward
15:11slash so this is the tag for a line
15:15break right here and the reason it's
15:17formatted like this is because we only
15:19need one tag for this which is the line
15:21break tag and we need to be able to end
15:23it by using the forward slash and so if
15:25we were to copy this message and put it
15:28inside our text label then we can see
15:31that it went from this is and then it
15:34just it just cut itself out right there
15:35to continue onward down here with a
15:38message now I want you to be careful
15:39with the spacing because if we had
15:42spacing over here then it's going to
15:44start with a space and then a message so
15:47what I would actually do is not uh space
15:50this out and I would just simply copy it
15:52like this and then have it be like this
15:55you can see it's now structured a lot
15:57better because we got rid of the space
15:59that was surrounding the the blind bre
16:02tag now we have Escape forms now
16:05basically what these are is these are
16:07specific characters we can add inside of
16:09our message that won't interfere with
16:12the formatting of the the message itself
16:15so what I mean is if we go back to our
16:17script and we want it to have a less
16:19than symbol but we don't want it to be
16:21confused with the actual formatting then
16:24we would use what's called Escape forms
16:26to represent the less than symbol or or
16:30the the greater than symbol for for
16:31instance where it won't be confused with
16:34the formatting of it so I'm going to
16:36show you a few examples of them but not
16:38go through all of them but just but just
16:40a few examples so inside of here I'm
16:42going to expand this message and um
16:45every single Escape form starts with an
16:48and peran symbol and it ends with a
16:51semicolon so for every single Escape
16:53form we have it starts with the ersan
16:56and it ends with a semicolon and then we
16:58put in whatever the tag is inside of
17:01these two characters right here and so
17:03for a less than character all we need to
17:06do is say LT because LT stands for less
17:10than and we can do the same thing for a
17:12greater than symbol as well by
17:14specifying the andand semicolon and then
17:18we say GT for greater than and so if we
17:22were to select this and bring this
17:25inside of our text label in here and we
17:27change the text to this then we can see
17:29that it is now rendered as the less than
17:32and greater than character rather than
17:34whatever we had here with the Escape
17:37form format and this is very useful if
17:39we don't want the message to overlap
17:41with characters that we actually want to
17:42show but is being interfered with the
17:45formatting uh so this this can also be
17:47for things like quotes and apostrophe
17:49symbols as well so if we were to write
17:52the n% semicolon and then inside of here
17:54we say quote like this and let's say we
17:56also want to have an apostrophe then we
17:58would do the the same thing with Anand
18:01uh semicolon and then apos apos is short
18:04for apostrophe and then quot T is short
18:07for quotation if we were to select this
18:09again go back to our game and then
18:11change this text we can now see that um
18:14we have the double quotes here which is
18:16quotation and then we have the
18:17apostrophe which is also known as a
18:19single quote as well so this is the use
18:21of Escape forms and I hope you find this
18:23to be useful inside of your text that
18:25you decide to change so for today's
18:27challenge I want you to recreate this
18:29panel on the right side of the screen um
18:32with a text label and three buttons here
18:34but you don't really have to make the
18:35buttons functional and to be honest you
18:36don't really have to make them buttons
18:38at all but what I want you to practice
18:40is using Rich Text markup to format
18:43these strings to be the way that they
18:45are now you don't have to match it
18:46perfectly because there are some things
18:48here that you may or may not know about
18:50like this strikethrough uh text or you
18:53might not know which font I'm using for
18:55some of these texts but I definitely
18:57want you to get into the habit
18:59of using Rich Text markup to make these
19:01specific changes like game mode is
19:04bolded underlined and it's in a
19:06different font um these three options
19:08here is bolded and they're in a
19:10different font these uh texts here are
19:12in a different color and have a stroke
19:14and then these ones they're in a
19:16different font and have different colors
19:18and things like that so I want you to be
19:20able to replicate this to the best of
19:21your ability and that's going to be your
19:23challenge for today if you want to learn
19:25more about learning how to make a text
19:28label then I will have a link to that
19:29for you right here to watch inside of
19:31this video and with that being said
19:33that's going to be it for today's video
19:35I hope you enjoyed it and I will see you
19:37in the next one take care

About this transcript

This page contains the full transcript of Rich Text Markup - Roblox GUI Tutorial #11 by BrawlDev, generated from the public captions YouTube serves with the video. The transcript has 3,978 words across 507 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.