Image Loading Screen

Hello everyone, I’m currently trying to work on a loading screen for my game and I have came across an idea which I think I have seen been used in other games, but I don’t remember which.

The idea was that the ‘loading bar’ is actually an image, but in all black. Then, the image in colour slowly loads in.

Start

image

Middle

image

End

image

The issue is that I don’t know how to make the image big, but half loaded in, since the middle image shrinks if I scale it up/down. I’ve tried adding a UIAspectRatioConstraint to the overlaying image (the one with colour) but then realised I don’t think I want to keep the same aspect ratio either.

Sorry if this sounds confusing or if I put this in the wrong category, I wasn’t sure if there was scripting involved.

Thanks!

4 Likes

This will have to be accomplished by using ScaleType: Sliced and setting SliceCenter to be the entirety of the image box

image

image

With the darkened image on top (set z-index higher than the brightened image), merely resize the imagelabel and it will not stretch and will resemble what you intend for it to be–a seamless loading image

heres a sample file as I was intrigued by this so I too wanted to figure it out.

slice loading.rbxl (38.0 KB)

On my initial investigation, I expected to utilize ClipsDescendants but I was so wrong haha