YT YouTube2Text

YouTube2Text → Transcripts → ReplicatedFirst (Loading Screen & ContentProvider) - Roblox Advanced Scripting #25

ReplicatedFirst (Loading Screen & ContentProvider) - Roblox Advanced Scripting #25 — Transcript

by BrawlDev · 4,663 words · 622 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00oh this game has a loading screen that's
0:01pretty cool oh wait a minute I just saw
0:03a move but now it's stuck at analytics
0:06service why is it stuck here is it going
0:09to move at all or is it just going to
0:10freeze and oh okay never mind it worked
0:12okay uh it just took a little bit of
0:14time but that okay I was a little bit
0:16worried there I thought it was just
0:17going to break all of a sudden and not
0:19allow me to join into the game which
0:21would have sucked but it looks like
0:22things worked out on its own okay but
0:24what you just saw there was a loading
0:26screen and I think you know what a
0:28loading screen is it basically showed
0:30shows uh how much progress that it takes
0:32for a Roblox game to load before you
0:35actually jump into the game and play
0:37it's a very neat feature to have it
0:39makes your game look more professional
0:40and you're able to add these custom
0:42loading screens into your own game so
0:44that so that you can load what you
0:46choose to load into the game before
0:48anything else so this tutorial is going
0:50to be about loading screens but more
0:52importantly it's going to be about
0:54replicated first because this is the
0:56service that we're going to be using to
0:59make these loing screens and I need to
1:01be able to explain to you how all the
1:02stuff works so with that being said
1:03let's go and go straight into the video
1:05all right let's think about this for a
1:07minute I'm going to try and explain the
1:09concept of loading things into a game
1:12before anything else and this is being
1:15done through a container that I've
1:18actually not talked about on this
1:19channel yet and that is called
1:21replicated first so if you were to
1:23basically just go into the Explorer then
1:26you can see on the right side that we
1:28have replicated storage which we have
1:30used in the past and I think you know
1:32what replicated storage is it it
1:34basically allows us to contain assets
1:37that we can access either by the server
1:39or the client uh anytime throughout the
1:41game so this can be things like module
1:43scripts it can be things like remote
1:45events remote functions that needs to be
1:47accessed by both the server and the
1:48client so it acts as a storage container
1:51for that but now we have something
1:53called replicated first which I have not
1:56talked about on this channel yet and so
1:59I think it's important to know uh the
2:01importance of replicated first and why
2:03this is different from replicated
2:04storage so now that we have that taken
2:08care of I'm going to explain this entire
2:10concept um as a whole so when we are
2:14replicating stuff from uh from server
2:17and client boundaries we need to be able
2:19to use services or containers that allow
2:21us to do that sort of stuff like I just
2:23said replicated storage does that for us
2:25but replicated first also does that for
2:27us but in its own specific way I'm going
2:30to demonstrate what that is exactly
2:32right now so what we have going on here
2:35is replicated first obviously and then
2:37we have replicated storage which is
2:39going to be the second place of uh a
2:42container inside of a game that allows
2:44us to replicate assets across client
2:49server boundaries and so of course when
2:51we're dealing with the server and we're
2:53also dealing with the client when we use
2:56replicated storage um essentially this
2:58is a container that that we can use to
3:02have the server in client access to like
3:03I just mentioned but with replicated
3:06first what's interesting about
3:07replicated first is that this is
3:10basically used to replicate things uh
3:14onto the client uh at its first number
3:18one priority so anything that's
3:20contained inside of replicated first
3:22it's going to be replicated to any uh
3:24player that joins into the game first
3:26thing before anything else gets loaded
3:28into the game so basically if we were to
3:30load anything from the workspace
3:32anything from the uh server script
3:34service anything from starter GUI
3:36anything contained inside of replicated
3:38first is going to be replicated to the
3:40client first before anything else so you
3:43might ask what things would be useful to
3:45load into the game before anything else
3:48well it's as I showed you in the
3:49beginning of this video loading screens
3:52are very good for loading stuff into the
3:55game first thing before anything else
3:57and the reason behind this is because
3:59when we we try to load assets into the
4:01game we don't want to join into the game
4:03and then see these assets being loaded
4:05into the game um before anything else
4:08what we want is a loading screen to
4:11basically show up in our face so that we
4:13don't see everything else that's being
4:15loaded in afterwards but instead we just
4:18see the loading screen because this is
4:19the first thing that was loaded in to
4:21the client and so uh another thing
4:24that's useful with replicated first is
4:26that we can also load things like uh
4:28pre-loaded app assets into replicated
4:31first so I actually should have put this
4:33in first here with pre-loaded assets
4:35because this is like a dictionary full
4:38of assets that we can load into the game
4:40before anything else so pre-loaded
4:42assets what are these pre-loaded assets
4:44are basically things that allow us to
4:46load stuff into the game before anything
4:48else like I just said so this can be
4:50things like loading screens it could
4:51even be things like sounds it could even
4:55be things like decals over here or just
4:58any sort of asset really it doesn't
5:00really matter too much of how you um see
5:04it it's basically just any asset that
5:06you want to load into the client first
5:08before anything else into the game and
5:10so comparing preloaded assets we can
5:13compare pre-loaded assets to Shared
5:15assets because shared assets can be used
5:18um to be accessed by the server and the
5:20client in replicated storage and things
5:23that are shared are things like module
5:25scripts and things like remote events
5:28and so these are what's being shared
5:30across the client in the server through
5:32the shared assets inside of replicated
5:33storage but for replicated first we are
5:36essentially loading things uh to the
5:38client before uh the player joins into
5:41the game and before anything else is
5:43being loaded uh into um the game so that
5:46is essentially the difference between
5:47replicated first and replicated storage
5:49I think this will make more sense once
5:51we go into the game and actually
5:52incorporate this um inside of Roblox
5:54studio so with that being said let's go
5:57ahead and get straight into implementing
5:59replicated first inside of Roblox studio
6:02now that we understand it let's
6:03Implement replicated first inside of
6:06Roblox and we're actually going to jump
6:09straight into creating a custom loading
6:11screen um for uh a good part of this
6:14tutorial so obviously we know what a
6:16loading screen is it's basically a GUI
6:20that shows up on our screen the first
6:22thing uh when we load into the game and
6:25it's going to load all the assets we
6:27need before we allow the player to play
6:30the game that they're playing and so
6:32replicated first is a great way for us
6:34to do this because we want to load the
6:36loading screen before loading anything
6:38else into the game for the client and
6:40that's one of the biggest reasons to use
6:43replica first is to create a custom
6:45loading screen so with that being said
6:46let's go ahead and create one so on the
6:48right side of the screen in starter GOI
6:51I'm going to hit the plus sign and I'm
6:52going to insert a screen GUI like this
6:55I'm going to rename this to loading
6:57screen and then I'm going to hit the
7:00plus sign again and I'm going to create
7:02a frame so this Frame is going to cover
7:05the entire screen so I'm going to make
7:08the size with uh offsets 1 and one for
7:12the X and Y so it's going to be 1 comma
7:140 comma 1 comma 0 like this so it's
7:16going to cover the entire screen and I'm
7:18going to change the background color
7:20three uh from white to some sort of gray
7:24like this going to hit okay and I'm
7:27going to hit the plus sign again I'm
7:29going to to insert a text label and I'm
7:31going to move this uh alongside here in
7:35the middle I'm going to scale this just
7:37a little bit like this um move it in the
7:41center like so okay and I'm going to go
7:43down I'm going to hit text scaled equal
7:45to true and then I'm going to change the
7:48background transparency to one so that
7:50we don't see the background and then
7:52finally I'm going to change the text
7:53color to white like this okay so now
7:57that we have this um I'm going to now
8:00add a loading bar to this as well so
8:02that we can visually see how much
8:04progress is being made in terms of
8:06loading the assets so inside of the
8:08frame I'm going to hit the plus sign uh
8:10insert another frame like this and I'm
8:12going to rename this to loading bar then
8:17I'm going to move this down here scale
8:19it like this I'm going to make it fairly
8:22sizable like probably about this big and
8:25then I'm going to move it to the center
8:26once again like this and now we have a
8:29loading bar that goes right below the
8:31text like that um so this is going to
8:34act as the frame of the loading bar but
8:37on top of it we need to add the actual
8:39bar itself so I'm actually going to
8:41change the background color of this to a
8:44really dark gray like probably like
8:47almost black like this going to hit okay
8:49and inside of the loading bar I'm going
8:51to insert another text label like this
8:53and I'm going to set the size of this to
8:55be exactly the same size of this bar so
8:57it's going to be 1 0 1 0 like this again
9:00I'm going to uh not have any text for
9:03this text label like this and then what
9:06I'm going to do now is change the
9:08background color of this to let's say
9:10some sort of green like this uh and then
9:14I'm actually going to change the size of
9:16this instead of 1 to0 1 0 I'm actually
9:19going to change the size of this to zero
9:21for the X scale so that um it's going to
9:24start at the very beginning here so once
9:26we continuously load stuff it's going to
9:29f fill up the progress bar until it
9:30reaches the very end of it so that's
9:32essentially what this is going to do um
9:35and finally I'm going to rename this
9:36text label to just simply bar like that
9:40so now we have the basics of our um
9:44loading screen done now it's a matter of
9:46incorporating a local script so that we
9:49can actually um make this loading bar
9:51functional and so like I mentioned for
9:54this loading screen the best place to
9:57put this is going to be inside of
9:58replicator first so what we need to do
10:00essentially is create a local script so
10:02that we can take this Frame and then put
10:05it inside of the player's um player GUI
10:08and so we can have the loading screen be
10:10functional uh for that reason so on
10:13replicated first we're going to hit the
10:14plus sign and we're going to insert a
10:16local script make sure this is a local
10:18script and not a normal script and I'm
10:21going to take this loading screen and
10:23I'm actually going to drag it into the
10:25local script like this okay and so now
10:28what we're going to do is make a bunch
10:29of references so I'm going to delete
10:32this here so there's going to be a few
10:33things we need to do first the first
10:35thing is going to be making our um
10:37references to the services that we need
10:39so we need players and we need
10:41replicated first so we're going to say
10:43local players equals game colon get
10:46service open and close parenthesis
10:48players like this and then replicated
10:51first so replicated first equals game
10:54get service uh replicated first like
10:57that okay now now here's something
11:00important we have to do so when we load
11:02into any Roblox game Roblox already has
11:06a default loading screen so in order for
11:08us to make our own custom loading screen
11:11we need to disable roblox's default
11:13loading screen that way we can add our
11:16own loading screen to replace roblox's
11:18default loading screen and we can do
11:20this using uh replicated first so what
11:23we can do is say replicated first colon
11:27remove default
11:29loading screen like this open close
11:32parentheses it's it's as simple as this
11:34this is all we need to do so that now
11:36instead of roblox's loading screen we're
11:38going to be replacing that with our own
11:41loading screen so that's going to be the
11:42important step that we have to take here
11:44all right and now that we have this we
11:45need to make reference to our player and
11:47also the loading screen um for that
11:50player so what we're going to do is drop
11:52two lines we're going to say local
11:54player equals players. local player like
11:58this and and then we're going to make
12:00reference to their player GUI as well so
12:02we're going to say local player GUI
12:05equals player colon weight for Child
12:08open close parentheses player GUI like
12:11this and so now what we need to do is
12:13make reference to our loading screen and
12:16keep in mind this local script is going
12:18to be local to the player that joins
12:20into the game and since we only have one
12:22loading screen we need to basically
12:24clone this loading screen and put it
12:26inside of the player's player GUI as
12:28soon as they load into the game so this
12:30is essentially what we're going to do
12:31we're going to say local screen GUI or
12:35we could even just say uh loading screen
12:38so loading screen equals script colon
12:43wait for Child open close parenthesis
12:46loading screen colon clone so we're
12:49actually going to take this loading
12:50screen we're going to clone it and then
12:51set the parent of this loading screen to
12:54the player GUI so we're going to say
12:56loading
12:58screen parent equals player GUI like
13:02this so now the player has their own
13:04loading screen whenever they join into
13:06the game and so what we're going to do
13:08now is make reference to uh the text
13:11label and the frame that we need uh in
13:13order to update uh the bar and the text
13:16and things like that so what we're going
13:17to do is say local uh frame equals
13:21loading screen wait for child frame and
13:24then we're going to make two references
13:26so the first one is going to be uh the
13:28loading text text so loading text is
13:31going to be equal to frame wait for
13:33child text label like this and then uh
13:37we're going to make reference to the bar
13:39as well so we're going to set this equal
13:41to frame wait for child loading bar wait
13:46for child bar like this so we now have
13:50all of our references that we need and
13:52now let's get into the functionality of
13:55pre-loading assets into the game for
13:57right now we can just make this a very
13:59basic loading screen by basically um
14:01having a task do weight statement for
14:03about maybe like 5 seconds or so until
14:07we quote unquote load into the game and
14:09then we should be able to uh destroy
14:12this loading screen once the game has
14:15been loaded in so what we can do down
14:17here is basically say task. wait for
14:20about 5 seconds and then down here we're
14:23going to say uh loading
14:27text. text
14:29equals loading
14:32complete uh just like that and then
14:34we're going to set the size of the bar
14:36so bar. size equals udm 2 so it's going
14:40to take in four values using uh the udm
14:432 Constructor so udm 2. new uh it's
14:46going to be 1 0 1 and then zero just
14:50like this so once we have this taken
14:53care of then what should end up
14:55happening is that once we uh we're
14:58actually going to add add another weight
14:59statement here so task. waight for about
15:011 second so that we can see this change
15:02let's actually make it 2 seconds and
15:04then let's destroy the loading screen so
15:07loading screen. destroy just like this
15:09and that should basically be the end of
15:11our script right there so once we go
15:13into the game hit test hit play then
15:16what should happen is uh we're going to
15:19be loaded into the game uh oh actually
15:21uh there's a little bit of space up
15:23there so there's actually something else
15:25we need to check off in the loading
15:27screen uh screen GUI and that is ignore
15:30GUI inset um if you don't know what this
15:33is then you should go back and watch uh
15:35my GUI tutorial guide on um that but now
15:39that we have this taken care of it
15:40basically covers the entire screen and
15:42once we wait for about 5 seconds it's
15:43going to say the loading has been
15:45complete uh the bar went full um all the
15:48way to the right side and then uh it
15:51deleted the GUI uh loading screen now
15:53obviously this isn't how we want to
15:56actually have the loading screen we want
15:57to have actual assets being loaded into
16:00the game in real time before we finish
16:03the loading screen and have the player
16:05um play the game like they um want to
16:08and things like that so I'm going to
16:10show you how we're going to be able to
16:11do this um and it's by using a service
16:14called content provider which I'm going
16:16to show you what that is in just a
16:17little bit okay so we need a way to be
16:19able to determine how we can preload
16:22certain assets into the game and be able
16:25to load each individual bit of asset set
16:29so that we can see in the progress bar
16:31that you know this thing has loaded and
16:33then now this thing is loaded and then
16:35now this thing is loaded until we reach
16:36all the way till the end once we go
16:38through all the assets that we want to
16:41uh load before the player gets to play
16:43the game and so that is basically
16:45achieved through a service called
16:47content provider and the purpose of
16:50content provider is to basically load
16:53assets that we give it um to be loaded
16:55in before anything else into the game
16:58and like I mentioned replicated first
17:00does this job extremely well because it
17:02purposefully loads uh everything and
17:05replicates it to the client before
17:07anything else inside of the game so now
17:08that we understand that um what assets
17:12do we want to load in exactly well to
17:14think of what assets we can load we can
17:17basically just take all the contents
17:19that are within the game so basically
17:21anything that has to do with workspace
17:22players lighting uh material service
17:25just like everything here like anything
17:26that's contained inside of the game we
17:28can basically load everything that's
17:30within each of these uh containers and
17:33so everything here is basically treated
17:35as an asset and so we can put this
17:37inside of a table and then throw it into
17:39content providers so that we can load it
17:41in one by one and so I'm going to show
17:44you what this looks like inside of our
17:46script when we modify it so let's go
17:48back into our script and what we're
17:50going to do at the top is make reference
17:52to uh content provider so it's going to
17:55look like this local content provider
17:58equals equals game colon get service
18:01open and close parentheses content
18:03provider like this so now that we have
18:05the content provider service what we
18:08need to do is figure out what our assets
18:10are and like I mentioned before our
18:13assets are basically just going to be
18:15all of these containers that are within
18:17the game so the way this is going to
18:19look is we're just going to say local
18:21assets equals game colon get children
18:26open and close parentheses so this
18:28return returns an array of all of these
18:31different containers and so when we go
18:33through each of them we're going to go
18:35through each one of these containers one
18:37by one to load everything that's
18:39contained within each one before moving
18:41on to the next one so since assets is a
18:45uh table what we need to do is Loop
18:47through all of the contents that are
18:49inside of here all of these containers
18:51so I'm going to uh disable this task. wa
18:54for 5 seconds since this is like
18:56basically a fake timer for a loading
18:58screen and instead incorporate the real
19:00deal so what we're going to do is make a
19:02for Loop by saying for index comma asset
19:08in pairs open close parentheses assets
19:12do so basically what we're going to do
19:14is say that we have an index for every
19:17single uh asset that we have loaded into
19:19the game and then we have the asset
19:21itself which is going to be the
19:23container so what we're going to do now
19:25is just say content provider
19:29colon preload async like this open to
19:33close parenthesis and what we're going
19:34to do is pass in uh the current asset
19:38that we are going to load and it's
19:41basically going to be a table like this
19:43so we're going to say open and close
19:44hard brackets asset so it's important to
19:47put in the open and close hard brackets
19:49when we're specifying what asset we want
19:51to load in and it's going to be each
19:53container that's within the Explorer so
19:56once we have this taken care of um then
19:59what's going to happen is basically it's
20:01going to Loop through every single asset
20:02and then it's going to finish loading
20:04and then it's basically going to be done
20:06but now we need to visually represent
20:08this so that we actually know that
20:10progress is being made in the loading
20:11screen so the first thing we're going to
20:13do is basically change the text to say
20:17loading text. text equals uh open and
20:22close uh quotes we're going to say
20:24loading uh and then we're going to
20:26concatenate this with uh the name of the
20:30asset so asset. name so the asset's
20:32basically going to be workspace players
20:34and things like that and then we're
20:35going to concatenate this again with
20:37three dots just like this and so now we
20:39know uh exactly which is being loaded in
20:43at this specific point in the loading
20:44bar so now down here what we're going to
20:46do is simply uh change the progress or
20:50the size of the loading bar to fit with
20:53uh the progress of the actual um assets
20:56that are being loaded so what we're
20:57going to do is note down the progress
21:00using the index variable and also uh
21:02with however many assets are within um
21:05the assets um dictionary or folder or
21:09table whatever you want to call it so
21:11we're going to make a variable by call
21:13by saying local progress equals index
21:17divided by uh the number of assets that
21:21are within the assets table so it's
21:24basically going to be like this so
21:26essentially if we are at the first
21:29second third fourth or fifth part of the
21:31Explorer so let's say we are in players
21:34this is going to be the second index and
21:36we're going to divide this by um the
21:38number of assets that are within here so
21:40basically everything here the number of
21:42that take that and use the index to
21:45divide by that and that's what's going
21:46to get us the scale size of the bar and
21:51I hope like you're able to sort of
21:52understand um like where this
21:54calculation came from because of it so
21:56now what we're going to do is change the
21:58size of the loading bar by saying bar.
22:00size equals udm 2. new open and close
22:04parentheses oh and I misspelled udm 2 it
22:07should be like this we're going to say
22:09progress for the X scale 0 1 and then
22:13finally zero so this is basically
22:15everything we need in terms of updating
22:17our loading screen and to properly load
22:20stuff into the game once we do this so
22:23once we go into the game hit test and
22:24hit play then what should happen is we
22:27should see a loading screen and and then
22:28it's going to load everything into the
22:30game before um it decides to destroy the
22:33loading screen and then finally get the
22:36player inside of the game uh for it to
22:39actually start so this is a real loading
22:40screen it's not a loading screen where I
22:42basically have a fake timer and then it
22:44just loads the player into the game even
22:46though the stuff was loaded in like a
22:48long time ago like this is a real
22:49loading screen and so now that this has
22:52basically been taken care of this is
22:54essentially how we create a loading
22:56screen using replicated first and using
22:59content provider and so I hope that you
23:01were able to gain some insight into uh
23:04using replicated first how loading
23:05screens are done and when assets are
23:08being loaded into the game first before
23:10anything else inside of the game so I
23:11hope this tutorial has given you great
23:14Insight when it comes to that all right
23:15and so to end off this video I'm going
23:17to give you a a tiny modification
23:19challenge that you can try on your own
23:21so if you remember at the start of this
23:23video when I showed you the initial
23:24loading bar it showed the bar changing
23:27in size but out of very smooth rate it
23:29wasn't just fixated like I showed you
23:31here with the loading bar that we
23:33created and it also changed color to
23:36Yellow but it changed the color in a
23:38very smooth way as well and a lot of
23:40that is used using tween service so what
23:43I want you to do is go into the script
23:45and basically where I commented stuff
23:47out where it's like you can Define tween
23:49service you can tween the bar and you
23:50can tween the the color change I want
23:52you to try and do these three things um
23:54before um you continue with whatever
23:56you're going to watch uh next so this is
23:58your challenge for today if you can do
24:00this then you have a great loading
24:01screen that you can use for your own
24:03game so with that being said that's
24:04basically going to be it for this video
24:06now if you need a refresher on tween
24:08service I will link that video for you
24:10right here to watch so that you can use
24:12this to help you with this challenge so
24:13go and watch that video right now and
24:15with that being said I will see you in
24:17the next episode take care

About this transcript

This page contains the full transcript of ReplicatedFirst (Loading Screen & ContentProvider) - Roblox Advanced Scripting #25 by BrawlDev, generated from the public captions YouTube serves with the video. The transcript has 4,663 words across 622 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.