Roblox UI Libraries - Introduction and Basic Design

Introduction

• Presenter: Diety (co-creator of Mercury UI Library with Abstract)
• Objective: Basics of creating UI libraries for Roblox as there are few or no tutorials available.
• Definition of UI Library: Reusable UI elements to avoid rewriting code for behavior.
• Other Libraries Mentioned: Mercury, Pepsi (undesirable according to the presenter).

Creating a Basic Screen UI

1. **Initial Setup: **
   • Create a simple Screen UI named 'My Library'.
   • Add a frame named 'Main'; this will hold all elements.
   • Settings:
     • Anchor Point: Set to (0.5, 0.5)
     • Position: Set to (0.5, 0.5)
     • Size: Set to (400, 300)

Understanding Anchor Points and Position

• Anchor Point: Determines where the position of the UI starts (e.g., (0,0) for top left).
• Position Settings Explained:
  • Offset and Scale explained (e.g., 1 for full right, 0.5 for center).
  • Example given for better visualization.

Working with Scale and Offset

• Scale: Percentage of the screen (e.g., 1.0 = far right, 0.0 = far left, 0.5 = center).
• Offset: Pixels from screen size (avoid using mouse to position the frame).
• Importance: Always work with property window for precise control and avoidance of errors.

Styling the Main Frame

• Change the background to dark mode.
• Add UICorner for rounded corners (recommended: size 6).
• Add UIStroke for border (avoid using BorderSizePixels).
• Shadow Plugin (Custom by Diety):
  • Add shadow using ZIndexBehavior set to Global for better layering.
  • Z-Index: Determines layer position of frames.

Adding a Top Bar

• Top Bar Setup:
  • Add a frame named 'TopBar'.
  • Set size to (1, 0) for full length, use (0, 30) for height.
• Styling Corners:
  • Use UICorner for rounded corners; deal with unwanted corners by adding another frame with specific anchor points and size.

Including UI Elements in Top Bar

• Title Setup:
  • Add a TextLabel for the title.
  • Set size to (0.5, 1, 0, 10).
  • Use UIPadding to offset text, set alignment to left.
• Control Elements:
  • Add images for control buttons (example given for exit button).
  • Use precise sizing and positioning using anchor points.
• Icon Usage:
  • Custom icons used for buttons (example given: minimize button).
  • Add functionality through scripting, avoid default Roblox buttons.

Conclusion

• Current Status: Basic frame and top bar created.
• Next Steps: Scripting the base functionalities and extending the UI library.

Important Tips

• Best Practices: Always name UI elements for organized scripting.
• Fonts & Colors: Experiment with different fonts and color schemes for aesthetics.