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
Middle
End
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.
This will have to be accomplished by using ScaleType: Sliced and setting SliceCenter to be the entirety of the image box
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.
You could skip multiple images for that effect. Just use one white-on-transparent PNG, and tween its ImageColor3 from black to green. This lets you tint the white areas cleanly with a simple script.
local TweenService = game:GetService("TweenService")
local image = script.Parent
image.ImageColor3 = Color3.new(0, 0, 0)
task.wait(1) -- a stall on blackened moment
local loadTime = 6 -- whatever time you were going to use
local tweenInfo = TweenInfo.new(loadTime, Enum.EasingStyle.Linear, Enum.EasingDirection.Out)
local tween = TweenService:Create(image, tweenInfo, {
ImageColor3 = Color3.new(0, 1, 0)
})
tween:Play()
tween.Completed:Wait()
task.wait(2) -- a stall on colored moment
