How do i make a loading screen like the one in Pet Sim. X?

Help and Feedback Scripting Support
, , ,
#1

Hello, Dose anyone know how to make a loading screen like the one in Pet Simulator X?
A Video of the screen:

Thanks, Mason

3 Likes
#2

I don’t know if this will help, but I’ve made a circle bar gui.

Let me know if this helps at all!

1 Like
#3

It helped me. Thanks for the gui!

1 Like
#4

Ok so what I’m thinking they did was using Image Rect Size where all the frames are all on one image and you switch the Image Rect Offset to each frame to make an animation you can see more Here Sorry if that sounded a little unclear

#5

Okay so ill reactivate this post now, because here isnt that clear answer. The Circle Bar Gui that @eatabler0ck mentioned is only a gui buildup without any scripts…
And to get to this answer back, it seems like you have an exact vision of how it works…Can you explain it more detailled?

#6

image

To give the loader an animation like Pet Sim X did you will need to have the frames of that animation laid out on a single image like the example above. Now to make this work you will need to use two instances called Image Rect Offset which will allow you to go through each frame and ImageRectSize which will allow you to crop in on the frame.

Loader2

Here is an example of a script using ImageRectOffset and ImageRectSize.

Script is from ImageLable|Documentation

local imageLabel = script.Parent

-- The following image is 1024x1024 with 12 frames (256x256) <-- Frame Size

imageLabel.Image = "rbxassetid://848623155"
imageLabel.ImageRectSize = Vector2.new(256, 256) --Using ImageRectSize to crop in on the frame

-- The order of the frames to be displayed (left-to-right, then top-to-bottom)

--List of frame positions
local frames = {
	Vector2.new(0, 0), 
	Vector2.new(1, 0),
	Vector2.new(2, 0),
	Vector2.new(3, 0),
	Vector2.new(0, 1),
	Vector2.new(1, 1),
	Vector2.new(2, 1),
	Vector2.new(3, 1),
	Vector2.new(0, 2),
	Vector2.new(1, 2),
	Vector2.new(2, 2),
	Vector2.new(3, 2),
}

--Goes through the frames above
while true do
	for _, frame in ipairs(frames) do
		imageLabel.ImageRectOffset = frame * imageLabel.ImageRectSize
		task.wait(0.1)
	end
end

Hope that explained it more in detail I’ll be sure to answer any questions.

#7

Thanks alot for this! I found the original image for this loading circle uploaded by preston. I never really understood RectSize/RectOffset but due to your code I think I got it now.
Thanks for your help!

1 Like