Simplify a tweening script

DDZ_76 · May 2, 2022, 10:48pm

So I have a script for a UI that “Changes Pages” if you will. My problem with the script is it isn’t very efficient in the sense that in order to make sure that the right pages are being moved out of the way when the top icons are pressed. It’s a bit hard to explain in text, which is why I have a video down below.

Video

Script

local Home = script.Parent.PageButtons.HomeButton
local Teams = script.Parent.PageButtons.TeamsButton
local Settings = script.Parent.PageButtons.SettingsButton
local Credits = script.Parent.PageButtons.CreditsButton
local Shop = script.Parent.PageButtons.ShopButton
local Bar = script.Parent.PageButtons.Bar
local tweentime = 0.3

local HomeScreen = script.Parent.Home
local TeamScreen = script.Parent.Teams
local SettingsScreen = script.Parent.Settings
local CreditsScreen = script.Parent.Credits
local ShopScreen = script.Parent.Shop

Home.MouseButton1Click:Connect(function()
	Home.TextColor3 = Color3.fromRGB(255, 136, 0)
	Teams.TextColor3 = Color3.fromRGB(255, 255, 255)
	Settings.TextColor3 = Color3.fromRGB(255, 255, 255)
	Credits.TextColor3 = Color3.fromRGB(255, 255, 255)
	Shop.TextColor3 = Color3.fromRGB(255, 255, 255)
	
	Bar:TweenPosition(UDim2.new(0.182, 0, 0.075, 0), "InOut", "Quad", tweentime, false)
	
	Bar:TweenSize(UDim2.new(0.06, 0, 0.005, 0), "InOut", "Quad", tweentime, false)
	
	HomeScreen:TweenPosition(UDim2.new(0, 0, 0, 0), "InOut", "Quad", tweentime, false)
	TeamScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	SettingsScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	ShopScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	CreditsScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
		
end)
Teams.MouseButton1Click:Connect(function()
	Teams.TextColor3 = Color3.fromRGB(255, 136, 0)
	Home.TextColor3 = Color3.fromRGB(255, 255, 255)
	Settings.TextColor3 = Color3.fromRGB(255, 255, 255)
	Credits.TextColor3 = Color3.fromRGB(255, 255, 255)
	Shop.TextColor3 = Color3.fromRGB(255, 255, 255)
	
	Bar:TweenPosition(UDim2.new(0.308, 0, 0.075, 0), "InOut", "Quad", tweentime ,false)
	Bar:TweenSize(UDim2.new(0.06, 0, 0.005, 0), "InOut", "Quad", tweentime, false)
	HomeScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	
	TeamScreen:TweenPosition(UDim2.new(0, 0, 0, 0), "InOut", "Quad", tweentime, false)
	HomeScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	SettingsScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	CreditsScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	ShopScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	
end)
Settings.MouseButton1Click:Connect(function()
	Settings.TextColor3 = Color3.fromRGB(255, 136, 0)
	Home.TextColor3 = Color3.fromRGB(255, 255, 255)
	Teams.TextColor3 = Color3.fromRGB(255, 255, 255)
	Credits.TextColor3 = Color3.fromRGB(255, 255, 255)
	Shop.TextColor3 = Color3.fromRGB(255, 255, 255)
	
	Bar:TweenPosition(UDim2.new(0.432, 0, 0.075, 0),"InOut", "Quad", tweentime, false)
	Bar:TweenSize(UDim2.new(0.076, 0, 0.005, 0),"InOut", "Quad", tweentime, false)
	
	SettingsScreen:TweenPosition(UDim2.new(0, 0, 0, 0), "InOut", "Quad", tweentime, false)
	HomeScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	TeamScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	CreditsScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	ShopScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	
end)
Credits.MouseButton1Click:Connect(function()
	Credits.TextColor3 = Color3.fromRGB(255, 136, 0)
	Home.TextColor3 = Color3.fromRGB(255, 255, 255)
	Teams.TextColor3 = Color3.fromRGB(255, 255, 255)
	Settings.TextColor3 = Color3.fromRGB(255, 255, 255)
	Shop.TextColor3 = Color3.fromRGB(255, 255, 255)
	
	Bar:TweenPosition(UDim2.new(0.559, 0, 0.075, 0), "InOut", "Quad", tweentime, false)
	Bar:TweenSize(UDim2.new(0.063, 0, 0.005, 0), "InOut", "Quad", tweentime, false)
	
	CreditsScreen:TweenPosition(UDim2.new(0, 0, 0, 0), "InOut", "Quad", tweentime, false)
	HomeScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	ShopScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	TeamScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	SettingsScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	
end)
Shop.MouseButton1Click:Connect(function()
	Shop.TextColor3 = Color3.fromRGB(255, 136, 0)
	Home.TextColor3 = Color3.fromRGB(255, 255, 255)
	Teams.TextColor3 = Color3.fromRGB(255, 255, 255)
	Settings.TextColor3 = Color3.fromRGB(255, 255, 255)
	Credits.TextColor3 = Color3.fromRGB(255, 255, 255)
	
	Bar:TweenPosition(UDim2.new(0.691, 0, 0.075, 0), "InOut", "Quad", tweentime, false)
	Bar:TweenSize(UDim2.new(0.049, 0, 0.005, 0), "InOut", "Quad", tweentime, false)
	
	ShopScreen:TweenPosition(UDim2.new(0, 0, 0, 0), "InOut", "Quad", tweentime, false)
	HomeScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	CreditsScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	SettingsScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	TeamScreen:TweenPosition(UDim2.new(-1, 0, 0, 0), "InOut", "Quad", tweentime, false)
	
end)

GUI Model (If interested)

GUItest.rbxm (18.9 KB)

Misinformater · May 2, 2022, 11:03pm

Make a variable CurrentPage and TweenOut or TweenIn for every page if it’s possible.

MP3Face · May 2, 2022, 11:07pm

interesting that I wrote an example to give to someone once that’s almost exactly the same problem. Here’s the file, as it references instances used in example of how it works; Parent it to a ScreenGui:
btn_frame sel example.rbxm (6.2 KB)
it will take adaptation of course but I think you’ll find it’s a very clean way to do it without having to truly manage the current page.
Since your pages incorporate buttons, I recommend disconnecting every button connection that’s not within the active page and connecting only what is being shown. Also consider disabling the inactive pages so they’re not being rendered (Roblox culls UI off the screen, but manually doing it may optimize it just a bit more). Saves the client some extra work

DDZ_76 · May 2, 2022, 11:18pm

Thanks, I’ll check it out and see if I can adapt it to my use case!

DDZ_76 · May 2, 2022, 11:31pm

So I modified the script (a bit) to my use case, now granted I’m not 100% how to use your script, but from what I found I can change the page once, then pressing the buttons does nothing, and that when I went to change the page, the wrong page was displayed. In addition, whichever page is displayed button on the top doesn’t change color.

ffff.rbxm (19.7 KB)