How to create a cool stage loading system

Help and Feedback Scripting Support
, , , ,
#1

Hello devs! I recently was trying an obby game out, and I came across this really cool looking stage loading animation.

I really loved how this looked and so I really wanted to recreate it. Can anyone please help me to script it? Thank you for reading!

#2

Hello! This seems really cool.

I think if you split it up into multiple parts, it’s easier to be understood

  1. Detect whether a player is in a region (GetPartsInPart)
  2. Tween the position from very low to the correct position
  3. Tween the Transparency of the parts from 1 to 0
  4. Add a bounce effect if you want

And you should probably put this inside a LocalScript, otherwise the changes will be for everyone, and well, that won’t end well.

3 Likes
#3

Hi, thank you for splitting it into four parts. I have understood the process. However, how can I tween the position of multiple objects at once, since you cannot tween every part singularly right? Please don’t mind my silly questions since I am relatively new to programming. I am not understanding -

  • How to tween multiple objects at once and
  • How to add a slight delay to it
1 Like
#4

you actually could do this
you just need to loop through the parts and tween them
to add a delay to it: roblox’s tweeninfo has a delay param

image
image834Ă—82 6.12 KB

(heres the tweenchart if you need it, i always forget it tbh.)

image
image1600Ă—1428 179 KB

how’d you actually do this:

for _, part in StageFolder:GetDescendants() do --replace with your stagefolder
    if part:IsA('BasePart') then --checking if its a part
          --tween and stuff here
    end
end

you could store the normal position in a variable and then move the parts down, and then finally you can tween the parts back to their normal position.

--heres an example:
local goals = {Position = part.Position}
part.Position = part.Position - Vector3.new(0, 50, 0) --or something like that
tweenService:Create(part, tweeninfo, goals):Play()

ALSO, please take this advice.

2 Likes
#5

Thank you so much! I’m not really good with loops. How do you think I can pull this off? Thank you so much for the chart. Even I keep forgetting it

#6

Where can I find better documentation for loops other than the creator hub?

#7

i dont think theres much, but you can look at others developers examples to understand it a bit more.

(i added your first question to my first msg)

1 Like
#8

Thank you so much dude! I really appreciate you’re help. I will surely try it out and let you know!

1 Like
#9

of course!
good luck doing this cool concept
if you need any more help or dont understand something please lmk!
glhf!

1 Like
#10 
for _, part in StageFolder:GetDescendants() do

“_” means ignore this. Typically, doing :GetChildren(), :GetDescendants(), :GetPlayers() etc, you are returned with a table, which includes the indexes and the values

The index just means the position within a table, and the value is the value stored in the index

For example,

-- structure
MyModel
    Part1
    Part2
    Part3

If you were to do MyModel:GetChildren(), you would be returned with a table that would look something like this:

{ 
  [1] = "Part1",
  [2] = "Part2",
  [3] = "Part3"
}

As you can see, you are returned with the index (left) and the value (right)

So, for the first line, it basically loops. For each part within StageFolder (descendants meaning not just direct children, it also includes children of the children), do this. In @functionally_wicked’s example, do a check to see whether it is a part, then run the code (within the if block)

-- luau
for _, part in StageFolder:GetDescendants() do
-- english
for every descendant in StageFolder, while also ignoring their position, first call it part

-- luau
if Part:IsA('BasePart') then
-- english
if the descendant is a part then

Hope this helps, pretty wordy though. If you need any more help just let me know!

1 Like
#11

image
image796Ă—596 106 KB

this image helped me understand it back then - the connection between i, v, and x (the table), is that i is the index, or position, where the loop is currently looping through in the table, and v is the value of that index, or position in that table. for example, 2 corresponds with "orange" in the table, so when the for loop’s index reaches 2, then the v would be "orange", and vise versa. as for the in pairs(), whatever goes inside the parenthesis after pairs is what is getting looped through. you can imagine it in an assembly form like the following.

this is just hypothetical, unreal code to demonstrate what happens behind the scenes of for loops

x (table) = {[1] = "apple", [2] = "orange", [3] = "banana"} -- this is our table
-- for loop starts, recognizes that x is a table that wants to be looped through from pairs(x)
print 1, apple -- loops through first item
print 2, orange -- loops through second item
print 3, banana -- loops through third item
-- for loop ends, code keeps running

this is what it would be in lua code (from the image)

local x = {[1] = "apple", [2] = "orange", [3] = "banana"}
for i, v in pairs(x) do
     print(i, v) -- 1, apple -> 2, orange -> 3, banana
end
1 Like
#13

Thank you so much! I will be sure to try it out.

#14

I really appreciate so much for sharing the explanation! Thank you so much! I understood a lot now!

1 Like