UI Module

This module aims to let you create interactive user interfaces for your game using the visual editor or Roblox Studio.

This module is a bit different from the others, as it is mainly based on configuration files. Instead of creating UIs using Roact for Roblox, you can now create them using the visual editor of Roblox Studio.

Follow this guide to understand every concept used in this module.

Installation

In your wally.toml file, add this to your dependencies:

[dependencies]
ui-module = "release/ui-module@0.0.67"

Import

You have two solutions to import this module, depending if you wish to import the Controller or the Service on your own, or if you let the module give you the right code.

local UIModule = require(ReplicatedStorage.Packages["ui-module"])

            local UIController = Knit.GetController("UIController")
            -- This module is client side, there is no Service here.
        

Create an interface

First of all, you'll need to create an interface using Roblox Studio. To do so, open your place and create a new ScreenGui inside the StarterGui folder.

You can now create your interface using Frames, TextLabels, and more... Mine looks like this:

Now that you have an interface, you will need to convert it to configuration files that this module can understand. To do so, you will need to install our UI Converter plugin.

When you have installed the plugin, you'll be able to convert your interface into the necessary configuration files. Just select your main Frame, named HUD here, and click on the "Convert Frame" button in the Plugins tab.

Finally, a UI Generator folder should've been created in the ReplicatedStorage folder of the studio, with inside it your generated configuration files:

Now that you've generated the required configuration files, you can import them into Visual Studio Code like this:

What I did here, is that I created a "UI" folder inside the Client folder of my game with the generated files in it. As we cannot directly follow Roblox files structure, we need to add an init.lua file in our UI folder:

local UIModule = require(game.ReplicatedStorage.Packages["ui-module"]) local function getApplication(Folder: Folder) return require(Folder:FindFirstChildOfClass("ModuleScript")) end local function getChildren(Folder: Folder) local function addDescendantsToTable(parentFolder, parentTable) for _, child in ipairs(parentFolder:GetChildren()) do if child:IsA("Folder") then assert(parentTable[child.Name] == nil, "not nil") parentTable[child.Name] = {} addDescendantsToTable(child, parentTable[child.Name]) elseif child:IsA("ModuleScript") then assert(parentTable[child.Name] == nil, "not nil") parentTable[child.Name] = require(child) end end end local Children = {} if Folder:FindFirstChild("Children") ~= nil then addDescendantsToTable(Folder.Children, Children) end return Children end for _, app in script.Parent.UI:GetChildren() do if app:IsA("Folder") then local success, err = pcall(function() local application = getApplication(app) local children = getChildren(app) local name = app.Name UIModule:AddFrame(name, application, children) end) if not success then warn(app.Name, success, err) end end end UIModule:CreateApplication()

What this file does, is that it looks for all folders in the UI folder, and add the content to the generation system. Without this, your frames won't render in-game. Remember to require this file inside your client, otherwise it won't render either.

Inside the HUD folder, the content of the init.lua file is the content of the HUD file generated by the plugin.

Now that everything is set up, you can now start you game using the Play button, and it should look like this:

Last modified: 26 November 2024