UI Framework for GDevelop

(Loo-Wah You-EE)
Version 0.5.2 (Bug-Squash Build)
There are bugs, and more documentation to come.

What is LuwaUI?

LuwaUI is a powerful UI framework designed specifically for GDevelop games. It lets you create beautiful, interactive user interfaces without needing to code HTML or CSS. Everything can be controlled through GDevelop's visual events system.

This tool is developed for the technically minded and built on top of the GDevelop layer. While it interacts with many conditions and actions, until the final v1.0.0 build, the system is not fully accessible through GDJS*.

*Note: More features will be added by request, and once the system is complete, it will be overhauled and fully integrated into GDevelop to improve functionality with other Conditions, Actions, and Behaviors.

Getting Started📥

Installing the Extension:

1. Open your GDevelop project
2. Go to the Project Manager tab
3. Click on "Extensions" in the left sidebar
4. Click the "+" button to add a new extension
5. Search for "LuwaUI" and click "Install"

Basic Setup:

To use LuwaUI in your game, you need to initialize it first:

1. In your scene events, add a new event at the beginning
2. Add the condition: "At the beginning of the scene"
3. Add the action: "LuwaUI::InitializeUI"

That's it! The framework is now ready to use.

Creating UI Components

Panels:

Panels are containers that hold other UI elements. Here's how to create one:

1. Add a new action: "LuwaUI::CreatePanel"
2. Fill in the parameters:
   • Id: "mainPanel" (a unique identifier)
   • Title: "My Game Menu" (displays in the panel header)
   • Width: "400px" (or "50%" for responsive width)
   • Height: "auto" (adjusts to content) or "300px" (fixed height)
   • Position: "center" (other options: "top-left", "bottom-right", etc.)
   • Draggable: Yes/No (can the player move the panel?)
   • Closable: Yes/No (shows a close button)

Tips for Success

• Unique IDs: Always use unique IDs for components
• Responsive Design: Use percentage values for width when possible
• Testing: Preview your UI at different screen sizes
• Organization: Group related UI elements using panels and grids
• Cleanup: Always remove components when no longer needed
• Performance: Limit the number of active UI elements on screen at once

Troubleshooting

UI Not Showing

• Check that you called LuwaUI::InitializeUI() at the beginning
• Verify your panel positions are within the visible area
• Make sure parent components exist before adding children

Components Not Responding

• Check that you're using the correct component IDs in your events
• Make sure you're not creating duplicate components with the same ID
• Verify the parent component exists and is of the right type

Layout Issues

• Try adjusting the panel size and position
• Check if elements are properly nested (buttons inside panels, etc.)
• Use the grid layout for more precise positioning
  
  
  More documentation to come!