How can I create my own module to create Gui Objects?

Help and Feedback Scripting Support
#1

Hello.

I’m trying to make a module that I can require via a local script and do something like
local frame = UIModule:CreateElement("Frame"),
I’ve put the module script into ReplicatedStorage alongside a folder with the frames I will be using. How can I clone the frame and have it in the local player?

#2

Hey @jufdnhf!

Your question is pretty confusing, I think I understand some of it, but not enough to help you.

So, your sample code seems to suggest you’re interested in making a blank UIFrame or possibly one with preset properties without having to set them all manually.

However after you explain that you have the frame(s) there with the module.

The pluralization is throwing me off here because if you do want a module that can create these UI components for you why do you have more than one? When creating a frame is the module supposed to give a random one or would you have to name it?

Please let me break this problem down into what I currently understand, and we can build on it.

TL;DR - I don’t know what you’re asking so here’s my best guess.

local UIModule = {}

function UIModule:CreateElement(Element)
    return script.Parent:FindFirstChildWhichIsA(Element):Clone()
end

return UIModule

This script assumes the elements you want to create are premade and are children of the same parent as the module script.

I hope this helped.

#3

Hi, thank you for the reply. Sorry if I made it confusing. What I’m trying to do, is within the module is a pre-made frame, which already has text etc in it. I want to be able to from a localscript do something like local frame = UIModule:CreateElement("Frame") then have properties for it, like frame.Title = "Title Text" and frame.Position = UDim2.new(0, 0, 0, 0) etc. Kind of similar to how ro-strap works.

#4

Why are you using this instead of Instance.new()?

1 Like
#5

Because I’m trying to have pre-made frames, so all UI across my game is consistent.

1 Like
#6

The frames have shadows, colours, and text already in the right spot, making it easy to re-use.

1 Like
#7

Hmm ok, but why are you using a script to make your UI?

#8

Many games and libraries use that, like ro-strap. It makes it easier to manage.

1 Like
#9

In which way is this easier to manage?

#10

It’s similar to ro-act? Except it’s using custom made frames with custom properties.

#11

Perhaps making a UI in game.Lighting or game.ServerStorage then cloning it into the player’s GUI using :Clone() would work.

#12

I like this solution a lot actually to help keep UI elements consistent across the game. I don’t think you need to be completely constructing your GUIs by using this module, but it would work great for situations where you need to fill a ScrollingFrame at run time or something.

I think @RepValor had a pretty good solution. I would do something similar but change a few things:

local UIModule = {}

UIModule.new = function(elemName)
    local locatedElem = script:FindFirstChild(elemName)
    if locatedElem then
        return locatedElem:Clone()
    else
        error(string.format("Unknown UIModule preset (%s)", elemName))
    end
end

return UIModule

This makes the behavior of the UIModule.new(…) very similar to Instance.new(…). It adds a custom error message to be displayed which would make it more obvious when debugging your code that an incorrect usage of UIModule is the culprit. Also, this way requires that all preset UIElements have unique names. You could also improve this to wait for all the children of the cloned preset UI element by waiting for all children of the original to appear in the clone.

2 Likes
#13

I think you could use Frame:Clone() and put it into Player.PlayerGui.ScreenGui right? Correct me if I’m wrong but I think that is how you do it.

1 Like
#14

Thank you very much for this! Much appreciated.