The Moving Button Example
- You start with a button labeled “Click me” that moves to random positions inside a container when clicked.
- This illustrates the idea of GUI elements being positioned relative to a container frame rather than the entire screen.
What is a Frame?
- A Frame is a container that holds other GUI elements like buttons, labels, text boxes, etc.
- It helps organize multiple GUI elements so you can move, scale, or manipulate them as a group.
- When you add GUI elements inside a frame, their positions become relative to the frame’s position (not the screen).
How to Add a Frame
- Add a ScreenGui in Roblox Studio.
- Add a Frame inside the ScreenGui.
- The Frame appears at the top-left of the screen by default.
- Add GUI elements (like TextLabels, TextButtons) inside the Frame.
Important Properties of Frames
- Clip Descendants: When enabled, any GUI elements inside the frame that move outside its boundaries become invisible.
- This helps keep your UI clean by clipping elements that overflow the frame.
- You can disable it if you want elements to show even if they’re positioned outside the frame.
Position & Size Are Relative to Frames
- When GUI elements are inside a Frame:
- Their position (X, Y) and size (width, height) are relative to the Frame, not the whole screen.
- Position
0,0
means the top-left of the Frame, not the screen. - Size
1,1
(scale) means the full width and height of the Frame.
Frames vs Folders
- Folders are just organizational tools and don’t affect the GUI’s appearance or behavior.
- Frames are GUI elements themselves and can be moved, resized, and styled.
- Changing the Frame’s size scales all GUI elements inside it automatically.
- Folders don’t offer this — they only organize elements in the hierarchy.
What is a ScrollingFrame?
- A ScrollingFrame is like a Frame but allows users to scroll content vertically or horizontally.
- Useful for displaying lots of content without cluttering the screen.
- Shows a scroll bar to indicate scrolling.
- You can add lots of GUI elements inside it, like TextLabels, buttons, etc.
How to Use a ScrollingFrame
- Add a ScrollingFrame inside your ScreenGui.
- Add elements inside the ScrollingFrame.
- To arrange elements vertically or horizontally, add a UIListLayout inside the ScrollingFrame.
- Duplicate your elements multiple times to see the scrolling effect.
- Enable Automatic Canvas Size for the ScrollingFrame:
- This resizes the scrolling area dynamically based on the contents.
- Choose X, Y, or both axes for resizing.
Customizing ScrollingFrame
- You can change properties of the scrollbar:
- Color, thickness, transparency.
- The CanvasPosition property tells you the current scroll position (in pixels).
- You can make the ScrollingFrame scroll horizontally by adjusting the canvas size on the X-axis instead of Y.
Summary
- Frames group GUI elements and control their relative positions.
- ScrollingFrames extend Frames by adding scrollable content areas.
- Use Clip Descendants to hide overflowing content inside Frames.
- Use UIListLayout to neatly arrange elements inside scrolling frames.
- Automatic canvas size keeps scrolling content dynamic and responsive