FreeRBXScripts.com

About Us

Roblox GUI: Frames & ScrollingFrames Explained

Jaden

·

·

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

  1. Add a ScreenGui in Roblox Studio.
  2. Add a Frame inside the ScreenGui.
  3. The Frame appears at the top-left of the screen by default.
  4. 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

  1. Add a ScrollingFrame inside your ScreenGui.
  2. Add elements inside the ScrollingFrame.
  3. To arrange elements vertically or horizontally, add a UIListLayout inside the ScrollingFrame.
  4. Duplicate your elements multiple times to see the scrolling effect.
  5. 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

Jaden