How to create a page changing system

Help and Feedback Scripting Support
,
#1

So I have seen multiple games with similar style GUI’s that have a page-changing system, and they all seem to be pretty similar in terms of function, I was wondering how to create a similar effect, below is an example of what I am talking about:


I’ve created things similar, but my scripts are always inefficient and do not work the way they do in terms of the effect which depends on what side of the screen changes the direction of the tweeting frame. Sorry if my post is not clear, feel free to ask for clarification if necessary.

4 Likes
#2

Is your question how to make the GUIs have the animation of moving side to side? Or how to make those GUIs appear when the header buttons are clicked?

#3

The changing when top bar is pressed part

#4

I made something like this once:
I created the menu frame, created pages and made the menu the pages’ parent.
Then I scripted a button:

local button = script.Parent
button.MouseButton1Click:Connect(function()
	for i, children in pairs(button.Parent.Parent:GetChildren()) do
		if children == button.Parent then
			children.Visible = children.Visible
		elseif children == button.Parent.Parent.Cash then
			children.Visible = true
		else
			children.Visible = false
		end
	end
end)
#5

I would personally change the position of the wanted page frame based on which position the frame is in relative to the current one. If you use a numerical index for the frames (1 = Home, 2 = Teams, etc.), then you could probably do:

local debounce = false -- are we tweening?
local currentFrame = 1

-- button pressing event, given newFrame
    if debounce then
        return
    end
    debounce = true
    if newFrame < currentFrame then
        newFrame.Position.X.Scale = -1
    elseif newFrame > currentFrame then
        newFrame.Position.X.Scale = 1
    end
    newFrame.Visible = true
    -- animate newFrame in (position 0) and currentFrame out (position -newFrame.Position.X.Scale) with a tween, then wait for its completion
    currentFrame.Visible = false
    currentFrame = newFrame
    debounce = false
-- end button pressing code

(some of the code in this example is left out as it’s a lot to type on my phone)

#6

Since there would be multiple buttons, what would you recommend to do to see which one was pressed? Something along the lines of

local buttons = {buttonhere1, buttonhere2}

for i, v in pairs(Buttons) do
    v.Button1Down:Connect(function()
        -- run the rest of the script
    end)
end
#7

To achive these use tween service and offset the gui to be off the screen and call it to center and back with tween

#8

Yeah, basically. I would probably do

local function switchPage(currentFrame, newFrame)
    -- code
end

for i, v in ipairs(header:GetChildren()) do
    -- assuming all header children are buttons
    v.MouseButton1Click:Connect(switchPage, i)
end

With luck that should work, but as previously mentioned I’m away for the day and can’t test myself.

Note: The button instances would also be named numbers so the loop iterates through them in the right order.

#9

You can use UIPageLayout and when you want to go to a page you would use :JumpTo. Here.

#10

ipairs is for arrays, not instances, u should use pairs instead

#11

GetChildren returns an array of instances.
Pairs is slower since it parses the key name rather than saving an index (though the performance difference is negligible).

#12

Pairs should only really be used when it’s a dictionary since :GetChildren() returns an array.

#13

Probably be simpler eh? Granted still would need a way to create the effect that the GUI has when switching pages the direction of the frame coming in changes based on the current frame.

#14

It should be pretty simple since UIPageLayout has the tween options as the property so it should be fairly simple to recreate.

1 Like
#15

Yeah, just read up on it, use these.

You can still use my example as a way to do this without them via TweenService and Tween:Wait(), if you must.

1 Like
#16

I’m still a bit confused on how to format :JumpTo, this si what I have so far, but it is erroring out

local nextpage = "Teams"

script.Parent.PageButtons.teams.MouseButton1Click:Connect(function()
	script.Parent.PageFrame.UIPageLayout.CurrentPage:JumpTo(script.Parent.PageFrame)
end)

19:28:04.117 JumpTo is not a valid member of Frame "Players.DDZ_76.PlayerGui.tester.PageFrame.Home" - Client - LocalScript:4

#17

How that one probably works is assigning a value on how far in one direction it is, and then checking to see if the frame you’re currently on has a higher value than the frame you want to go to. That is my guess as to how it decides which direction the next frame comes from. From there it is just setting it to one side, and then tweening both frames in one direction or the other. (sorry if this doesn’t make much sense and there is probably a much simpler way to do this)

#18

You need to connect the JumpTo to the UIPageLayout and not the current page

1 Like
#19

You’re calling :JumpTo() on the frame returned by UIListLayout.CurrentPage, not UIListLayout itself.

Edit: Ah, @TheDCraft beat me to it by a millisecond…

1 Like
#20

planning on still using something similar to this in my script, how would you modify it assuming that you had children that also were not TextButtons? I also tried this removing the non TextButton children and it still did not work.