Scripting Helpers is winding down operations and is now read-only. More info→
Ad
Log in to vote
0

How to make an auto-sizing scroll frame?

Asked by 8 years ago

I want to create a scrolling frame that contains the list of players in the game with buttons inside. I want the buttons to all be the same size, and the scroll frame will get larger depending on the amount of buttons (and by that the # of players) there are.

My guess is I would use RbxLibrary, but I'm not sure how to do it due to lack of documentation. Thanks in advance for the help.

Please note that this is NOT a request, I'm only asking for some documentation or anything you guys know about the frame ONLY. I just need help figuring it out. Thanks.

2 answers

Log in to vote
7
Answered by 8 years ago

Well in this case, there's an easy enough solution to not be bothered with ROBLOX's libraries. If you're completely sure that each button will be the exact same size, you could simply set the ScrollingFrame's CanvasSize Y Offset to the product of #Buttons * Button.Size.Y.Offset. Here could be an example of how to do this:

Note

This script only implements the concept of creating an auto scroll manager, but should be easy to figure out how to add it to a player list script.

-- A neat way to store all your buttons
local Buttons = {}

-- Assuming this is where the scrolling frame is
local Scroll = script.Parent:WaitForChild("ScrollingFrame")

-- Create a new button
local function NewButton()

    -- Parent the button
    local Button = Instance.new("TextButton",Scroll)

    -- Make sure you size it before you position it
    Button.Size = UDim2.new(1,0,0,25)

    -- Position the button based off the amount created, times it's Y offset size
    Button.Position = UDim2.new(0,0,0,#Buttons*Button.Size.Y.Offset)

    -- Return the button
    return Button
end

-- Create one every 1 second
while wait(1) do

    -- Created a new button which is already sized, positioned, and parented.
    local Button = NewButton()

    -- If the button's Position Y Offset plus it's Size Y Offset is greater than the ScrollingFrame's AbsolutePosition Y, then ...

    if Button.Position.Y.Offset+Button.Size.Y.Offset > Scroll.AbsoluteSize.Y then

        -- Set the canvas size to the product of buttons and it's individual size Y offset, plus it's original size (since the first button created is at position 0,0,0,0)
        Scroll.CanvasSize = UDim2.new(0,0,0,#Buttons*Button.Size.Y.Offset+Button.Size.Y.Offset)

    -- If it doesn't exeed the scroll frame, then...
    else

        -- Set it's scrolling size back to 0.
        Scroll.CanvasSize = UDim2.new(0,0,0,0)
    end

    -- Insert the button to the table.
    Buttons[#Buttons+1] = Button
end

If you wanna see what this'd look like without testing it raw, you can look here: https://gyazo.com/874d0baa0a0f34fb819a2ece8c0c12bc

What's actually happening

In case the solution was obfuscated in all that text, this is basically the auto scroll part:

-- Let's just make a variable for this...
local SizeYOffset = v.Size.Y.Offset

-- Check the bottom of the button's position, and compare it to the absolute size Y of the scrolling frame.
if v.Position.Y.Offset+SizeYOffset > Scroll.AbsoluteSize.Y then
    Scroll.CanvasSize = UDim2.new(0,0,0,#Buttons*SizeYOffset+SizeYOffset)
end

So we're basically getting the bottom position of the GUI by adding it's size Y to it's actual position Y, and comparing it to the size Y of the ScrollingFrame, to see if it exceeds the limit. And if it does, we'll make the CanvasSize's Y Offset be equal to the equation above (Amount of buttons mulitplied by the static size Y of each button, plus the size Y of the button).

Auto-positioning the scroller

If you want to make something that automatically positions the scroll bar to the end of the list, you would set it's Y vector to the CanvasSize Y Offset, subtracted by the ScrollingFrame's AbsoluteSize Y like this:

-- Don't forget to use Vector2
Scroll.CanvasPosition = Vector2.new(0,Scroll.CanvasSize.Y.Offset-Scroll.AbsoluteSize.Y)

Here's how this would look: https://gyazo.com/595c4f2fe1658b88e3eaf2c7b5a70cb3

Additional information

There are a lot of ways to create a automatic scrolling frame, all in which depend on how you want it to function (i.e, pushing all messages up, pushing all messages down, adding different size labels, ect). However, this is probably the most practical method for creating an auto scroll for something like this, since all text buttons will have the same Size Y Offset, and typically all player lists add a new player at the bottom of the list.

Hope that helped. If you have any questions, just let me know.

0
this is a great explanation especially since it introduces control arrays which lua doesn't have ProfessorSev 220 — 8y
0
Thanks, that's just what I was looking for. Appreciate it! Verbero 0 — 8y
Ad
Log in to vote
0
Answered by
Wutras 294 Moderation Voter
8 years ago

You'll need no specific methods or whatever for it, but simple math. I'll show it to you.

--Put this into the ScrollingFrame
plrs=game.Players:GetPlayers()
numplrs=table.getn(plrs)
maxplrs=10--Change this to the maximum amount of players.
while wait() do
    plrs=game.Players:GetPlayers()
    numplrs=table.getn(plrs)
    script.Parent.Size=UDim2.new(script.Parent.Size.X, 0, maxplrs/numplrs, 0)
end

This script gets the amount of players and has the amount of maximum players that was set by you. Then it changes the size to the amount of maxplrs/numplrs, which is below 1 and can be 0 or higher(1 is the screen size when using scale) I hope this helps. If you got any other questions, feel free to ask!

Answer this question