Help making ImageLabel tween to follow loading bar

[Falcon_Aviator (qoqr)]

Hi everyone,

I don’t know how to explain this, but here goes.

I’d like to make a loading screen where an aircraft icon follows the end of a loading bar that is tweening its size to match the asset loading percentage. Here’s a picture:

I would like the plane icon to tween at the same speed as the bar. Here’s the script:

local ReplicatedFirst = game:GetService("ReplicatedFirst")
local ContentProvider = game:GetService("ContentProvider")
local TweenService = game:GetService("TweenService")
local Background = script.Parent:WaitForChild("Background")
local Icon = script.Parent:WaitForChild("Background"):WaitForChild("plane")

local event = game:GetService("ReplicatedStorage"):WaitForChild("PlrJoin")

ReplicatedFirst:RemoveDefaultLoadingScreen()
local assets = game.Workspace:GetDescendants()
script.Parent.Enabled = true

local function gui()
	for i = 1, #assets do
		local asset = assets[i]
		local percentage = math.round(i / #assets * 100)
		local current = Icon.Position
		ContentProvider:PreloadAsync({asset})
		Background:WaitForChild("DisplayPercentage").Text = percentage.."%"
		Background:WaitForChild("AssetsLoaded").Text = "Loading Assets: "..i.."/"..#assets
		TweenService:Create(Background.BarBackground.Bar, TweenInfo.new(0.2,Enum.EasingStyle.Sine, Enum.EasingDirection.Out), {Size = UDim2.fromScale(percentage/100, 1)}):Play()
		TweenService:Create(Icon, TweenInfo.new(0.2,Enum.EasingStyle.Sine, Enum.EasingDirection.Out), {Size = UDim2.fromScale(percentage/1000, 1)}):Play()
		if i % 50 == 0 then
			task.wait()
		end
	end
	Background:WaitForChild("AssetsLoaded").Text = "Game loaded!"
	wait(3)
	for i, v in pairs(script.Parent:GetDescendants()) do
		if v:IsA("Frame") then
			TweenService:Create(v, TweenInfo.new(0.5), {BackgroundTransparency = 1}):Play()
		elseif v:IsA("TextLabel") then
			TweenService:Create(v, TweenInfo.new(0.5), {TextTransparency = 1}):Play()
		elseif v:IsA("ImageLabel") then
			TweenService:Create(v, TweenInfo.new(0.5), {ImageTransparency = 1}):Play()
		end
	end
	wait(1)
	script.Parent.Enabled = false
end

event.OnClientEvent:Connect(function()
	gui()
end)

Any help is appreciated. Thanks!

[SubtotalAnt8185]

Your loading bar uses a variable loading time which a tween cannot account for. However, you can set the position of the plane to the percentage of the loading bar’s progress, or possibly interpolate it there.

[Falcon_Aviator (qoqr)]

How would I set the position to be the percentage of the loading bar’s progress? Would I have to create a new frame about as wide as the entire loading bar and parent the label to that, then tween it according to the percentage of the size of the new frame?

[SubtotalAnt8185]

I’d parent the airplane to the loading bar’s frame or the loading bar itself.

You got the rest.

[sir_gagigo]

Here’s an example:

local goalSizeBar = --(full size)
local goalPositionIcon = --(icon position at full)

local startSizeBar = --(empty size)
local startPositionIcon = --(icon position at empty)

--assuming that you want to tween the position of the icon and size of the bar when the amount of assets loaded is updated

local function gui()
--assumming that we have an assetsToBeLoaded number value and an assetsLoaded 
number value
    local percentage = assetsLoaded/assetsToBeLoaded

    TweenService:Create(Background.BarBackground.Bar, TweenInfo.new(0.2,Enum.EasingStyle.Sine, Enum.EasingDirection.Out), {Size = startSizeBar:Lerp(goalSizeBar,percentage))}):Play()
	TweenService:Create(Icon, TweenInfo.new(0.2,Enum.EasingStyle.Sine, Enum.EasingDirection.Out), {Position = startPositionIcon:Lerp(goalPositionIcon,percentage)}):Play()
end

I hope I gave you a good example of what you are trying to do and that this answered your question!