Making a GUI used to cycle through different pages

Pythoicus · June 18, 2018, 9:09pm

I’m trying to make a game tutorial in the form of a GUI, where it simply shows different pages and players can click a button to go to the next page. I just need a frame in the middle, with two buttons to go back and forth between pages. I know this should be simple, but I cant figure out exactly how to get it to work.

BanTech · June 18, 2018, 9:41pm

Are you struggling with the GUI design, the scripting, or both? It’s best if you show us how far you got with it and then people can give suggestions to fix what you’ve already got

CheetahSp33d · June 18, 2018, 10:15pm

Do you need a template?

What does it currently look like.

GGGGG14 · June 18, 2018, 10:17pm

Dunno if this will help, but it sounds like you might need it:

http://wiki.roblox.com/index.php?title=API:Class/UIPageLayout

UIPageLayout lets you JumpTo and JumpToIndex between pages. Additionally, you can use Mouse events and connect the buttons to these built-in methods.

*Each page can show you one step in the tutorial or something like that

Pythoicus · June 18, 2018, 10:46pm

I need help with the scripting. I know how to make GUIs, but I don’t really know how to carry out this function with a script.

BanTech · June 18, 2018, 10:52pm

Make your pages using UIPageLayout as linked in GGGGG14’s reply. Then make some GUI buttons that you’d like to use to switch between each page. And then you’d want a localscript that hooks into the click events on the buttons and triggers the Next and Previous methods of the UIPageLayout.

-- Example using a script sibling to a frame called Pages
-- with the layout inside, and sibling to the buttons.

local pageLayout = script.Parent.Pages.UIPageLayout
local nextButton = script.Parent.NextButton
local prevButton = script.Parent.PrevButton

nextButton.MouseButton1Click:Connect( function ()
    pageLayout:Next()
end )

prevButton.MouseButton1Click:Connect( function ()
    pageLayout:Previous()
end )

Hope that helps.

Pythoicus · June 18, 2018, 11:05pm

I’m still having some trouble setting this up. I think I might be doing something wrong with the locations of the script and UIPageLayout, can you let me know where each one is supposed to be?

BanTech · June 18, 2018, 11:29pm

Again, you need to give more info than just “trouble”. Are you getting script errors? Open up the console (output) window to double check if it’s just not working.

I did also notice a bug that Next() and Previous() don’t work without this line being added to the bottom of the script. Just put it at the bottom.

pageLayout:JumpToIndex( 0 )

In terms of hierarchy, the demo I gave would be:

ScreenGui
- LocalScript
- Pages (Frame)
  - UIPageLayout
  - (your pages, each contained in a frame, go here)
- NextButton (TextButton/ImageButton)
- PrevButton (TextButton/ImageButton)

Contain each page in a frame. This can be transparent if you want and should be size {1,0,1,0} to fill the Pages frame. Make sure ClipDescendants is set true on Pages to prevent the user from seeing pages other than the current one.

If you’re still stuck, drop me a DM and I’ll send you a demo place that you can use to take a look at how the functions work. If you’re experienced with GUIs you should be able to do quite a lot without having to edit the script.

Pythoicus · June 18, 2018, 11:34pm

I still can’t get it to work properly. I’ll send you a DM with some more information about the problem.

cagefights · June 19, 2018, 9:31am

Some people suggested to use UIPageLayout, but I can’t say anything about it as I haven’t tried them before, instead, I make my own.

Here’s a simple code of how to go back and forth between pages. Please note that you need all pages named like “Page” and then the number you want them to show in order, so like: “Page1”, “Page2”, etc.
Making your own page layout gives you more access to customizing them, adding special effects, sliding, and cool stuff like that. I’m not sure if UIPageLayout offers any of these, but if it doesn’t, well, you have the following code:

-- I hope this works, cause I haven't tested it out.

-- Changeable variables (settings).
local TotalPages = 4 -- How many total pages are there.
local SlidingEffect = true -- If true, the pages will slide, with any speed you input in the "SlidingSpeed" variable.
local SlidingSpeed = 0.5 -- Page sliding speed. If "SlidingEffect" is on, this will take place.

-- Unchangeable variables.
local CurrentPage = 1
local CanUseNext = true
local CanUsePrevious = false

-- Main Variables.
local UI = script.Parent -- The gui.
local PagesList = UI.List -- The frame that holds all pages.
local Next = UI.Next -- The "next" button.
local Previous = UI.Previous -- The "previous" button.

-- Functions.
function UpdateVariables()
	if CurrentPage == TotalPages then
		CanUseNext = false
	elseif CurrentPage == 1 then
		CanUsePrevious = false
	end
	if PagesList:FindFirstChild("Page".. (CurrentPage - 1)) then
		CanUsePrevious = true
	elseif PagesList:FindFirstChild("Page".. (CurrentPage + 1)) then
		CanUseNext = true
	end
end

UpdateVariables()
Next.MouseButton1Click:Connect(function()
	if PagesList:FindFirstChild("Page".. (CurrentPage + 1)) and CanUseNext == true then
		if SlidingEffect == true then
			PagesList:FindFirstChild("Page".. CurrentPage):TweenPosition(UDim2.new(-1, 0, 0, 0), "Out", "Quad", SlidingSpeed, true) -- Slide to the left (off the screen).
		else
			PagesList:FindFirstChild("Page".. CurrentPage).Position = UDim2.new(-1, 0, 0, 0) -- Off the screen (no sliding effect).
		end
		CurrentPage = CurrentPage + 1
		if SlidingEffect == true then
			PagesList:FindFirstChild("Page".. CurrentPage):TweenPosition(UDim2.new(0, 0, 0, 0), "Out", "Quad", SlidingSpeed, true) -- Slide to the center.
		else
			PagesList:FindFirstChild("Page".. CurrentPage).Position = UDim2.new(0, 0, 0, 0) -- In the center (no sliding effect).
		end
		UpdateVariables()
	end
end)
Previous.MouseButton1Click:Connect(function()
	if PagesList:FindFirstChild("Page".. (CurrentPage - 1)) and CanUsePrevious == true then
		if SlidingEffect == true then
			PagesList:FindFirstChild("Page".. CurrentPage):TweenPosition(UDim2.new(1, 0, 0, 0), "Out", "Quad", SlidingSpeed, true) -- Slide to the right (off the screen).
		else
			PagesList:FindFirstChild("Page".. CurrentPage).Position = UDim2.new(1, 0, 0, 0) -- Off the screen (no sliding effect).
		end
		CurrentPage = CurrentPage - 1
		if SlidingEffect == true then
			PagesList:FindFirstChild("Page".. CurrentPage):TweenPosition(UDim2.new(0, 0, 0, 0), "Out", "Quad", SlidingSpeed, true) -- Slide to the center.
		else
			PagesList:FindFirstChild("Page".. CurrentPage).Position = UDim2.new(0, 0, 0, 0) -- In the center (no sliding effect).
		end
		UpdateVariables()
	end
end)

I haven’t tested the code, but that’s how I do my “page layout”. Please tell me if this doesn’t work, and I’ll try to update it.

BanTech · June 19, 2018, 9:54am

For anyone who’s curious about the UIPageLayout solution, here’s the demo I sent to DeusRomanum. It might help a few other people out if you’re lurking waiting for a similar solution Might also be useful to you @Scriptily if you’ve never tried it before.

UIPageDemo.rbxl (562.4 KB)

Hit play solo or test and you’ll see how it works. Animation can be disabled as a property of UIPageLayout if you don’t like animations. Play about with the other properties too depending on the type of pagination you’re after.

cagefights · June 19, 2018, 9:56am

Wow, didn’t thought it was that easy lol.

Chaotic_Cody · June 19, 2018, 10:04am

The UI objects are seriously awesome. UIListLayout, UIScale, UIGridLayout, et al are incredibly useful.

cagefights · June 19, 2018, 10:06am

UIGridLayout and UIListLayout are truly life saviors!

RuizuKun_Dev · June 19, 2018, 10:34am

Here’s an Alternative (Video Sample)

BackBtn.MouseButton1Down:Connect(function()
	Page = Page - 1
	Page = Page < 1 and #(MaxPage) or Page
    -- do stuff
end)

NextBtn.MouseButton1Down:Connect(function()
	Page= Page + 1
	Page= Page > #(MaxPage) and 1 or Page
    -- do stuff
end)

With this method you don’t need to name your stuff Page1 , Page2…

Just store them in a Table

local Pages = {Page1,Page2}

and you can do

Pages[#]

I would say it’s less messy than the other methods above, but the UIPageLayout isn’t bad either.

You don’t need to name your Gui Objs Page1,Page2… tho just use LayoutOrder

BanTech · June 19, 2018, 10:48am

Just to add on to that: if you’re using LayoutOrder and not naming convention to order your pages with UIPageLayout you’ll need to change the property SortOrder from Name to LayoutOrder.

Pythoicus · June 19, 2018, 5:01pm

Thanks for making this, it’s exactly what I was looking for.

Xemptia · April 20, 2020, 11:31pm

I am using UIPageLayout and I’m trying to make the 2nd frame that they switch to invisible for them because it is shown how do I fix this?

Xemptia · April 21, 2020, 12:02am

Nevermind! I used ClipDescendants!

papa_kupcake · January 23, 2021, 10:03pm

Thanks - This was very useful.