stevedunn / gleed2d

UI System Outline

The UI system in Gleed2D is designed to provide a flexible and extensible way to create and manage user interfaces for games.

Key Concepts

  • UI Elements: The basic building blocks of the UI, such as buttons, labels, text boxes, and lists. These elements can be arranged and manipulated to create complex user interfaces.
  • UI Containers: These are special UI elements that can contain other UI elements, allowing for hierarchical UI structures. Examples include Panels, Tabs, and Scrollbars.
  • UI Layouts: UI Layouts control the arrangement and positioning of UI elements within a container. Common layout options include vertical/horizontal stacking, grid layouts, and flexible layouts.
  • UI Events: UI events are triggered by user actions such as clicking, hovering, or dragging UI elements. These events can be handled by scripts attached to UI elements, allowing for custom UI interactions.

Creating UI Elements

UI elements can be created and manipulated using the UI class. The following code example demonstrates creating a simple button:

// Create a new UI element
          UI ui = new UI();
          // Create a button
          var button = ui.CreateButton(new Vector2(100, 100), new Vector2(100, 50), "Click Me");
          // Set the button's color
          button.Color = Color.Green;
          // Add the button to the UI
          ui.AddElement(button);

Layout Options

The UI class provides various layout options to manage the arrangement of UI elements:

  • Vertical Stacking:
  • Horizontal Stacking:
  • Grid Layout:
  • Flexible Layout:

Example

// Create a new UI element
          UI ui = new UI();
          // Create a panel container
          var panel = ui.CreatePanel(new Vector2(100, 100), new Vector2(300, 200));
          // Create two buttons and add them to the panel
          var button1 = ui.CreateButton(new Vector2(10, 10), new Vector2(100, 50), "Button 1");
          var button2 = ui.CreateButton(new Vector2(10, 70), new Vector2(100, 50), "Button 2");
          panel.AddElement(button1);
          panel.AddElement(button2);
          // Add the panel to the UI
          ui.AddElement(panel);

Event Handling

UI events can be handled using the Event class and the On<Event> method:

// Create a new button
          var button = ui.CreateButton(new Vector2(100, 100), new Vector2(100, 50), "Click Me");
          // Handle the button's click event
          button.On<ClickEvent>(e =>
          {
              Console.WriteLine("Button clicked!");
          });

Further Information

Refer to the following sources for detailed information on the UI System: