How can I stop from doing this terribleness?

Help and Feedback Scripting Support
#1

Absolute eyesore.

image
image664×893 112 KB

How can I avoid this?

#2

Add a copy of the object you’re constructing with the code to ReplicatedStorage, then clone it when you need it. If you need to dynamically change any values you can just directly reference the objects who need to be changed later.

1 Like
#3

Is there a specific reason you haven’t pre-made the UI elements already and just referenced them in the script?

What use case do you have where you need to manually instantiate the user interface elements?
Is there something dynamic you need to do with this?

#4

While I’m not trying to do anything special with these UIs, I am experimenting with using Visual Studio Code and finding more readable, faster ways to program.

In this case, creating instances programmatically. Creating UIs with Roblox Studio becomes a grueling process of aligning, positioning, sizing, scaling, etc… For now, I’m just looking for a better way to instantiate objects with code.

#5

That makes sense.

Well you could probably look at creating a function to set some very specific data that all or most UI elements have in common, for example;

  • BackgroundColor
  • BorderSizePixel
  • BackgroundTransparency
  • Parent
  • Size
  • Position

You could even create a table as a sort of ‘theme’ settings which would just be a generalised list of specific details you want your Frames, TextBox/Buttons, Labels etc to inherit.

local UI = {} --perhaps this could be a ModuleScript that you require and drop into other projects?
local theme = {
	BackgroundColor = Color3.fromRGB(240,75,200),
	BorderSizePixel = 0,
	Font = Enum.Font.Gotham,
	TextColor3 = Color3.fromRGB(60,50,60)
}

function UI.new(elementType)
	local element = Instance.new(elementType) --Frame, TextButton, ImageButton, etc

	element.BackgroundColor = theme.BackgroundColor
	element.BorderSizePixel = theme.BorderSizePixel
	
	if (elementType == "TextButton" or elementType == "TextBox") then
		element.Font = theme.Font
		element.TextColor3 = theme.TextColor3
	elseif (elementType == "etc...") then
		--etc
	end
	return element	
end

local SreenGui = Instance.new("ScreenGui",PlayerGui)
local background = UI.new("Frame")
background.Parent = ScreenGui

--etc

You could also set up a deeper theme table which identifies specific classes and themes each one.

local UI = {} --perhaps this could be a ModuleScript that you require and drop into other projects?
local theme = {
	["Frame"] = {
		BackgroundColor = Color3.fromRGB(250,32,150),
		BorderSizePixel = 2
	},
	["TextButton"] = {
		BackgroundTransparency = 0.75,
		TextColor3 = Color3.fromRGB(60,50,60),
		Font = Enum.Font.Gotham
	}
}


function UI.new(elementType)
	local element = Instance.new(elementType)
	local class = theme[elementType]
	for parameter,value in pairs(class) do
		-- get a little stuck here myself, this is all untested code so I'm not sure how you would set the properties of element to the values of parameter, but there's a fun challenge. :D
	end
end

Really at the end of the day, what I think you’re trying to do is cut down on duplicated code or implementing a framework that is easier to change and add to than hardcoding everything.

–Edit–
some actual functional code should you wanna pursue to second suggestion…

local player = game.Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local UI = {} 
local theme = {
	["Frame"] = {
		BackgroundColor3 = Color3.fromRGB(250,32,150),
		BorderSizePixel = 2
	},
	["TextButton"] = {
		BackgroundTransparency = 0.75,
		TextColor3 = Color3.fromRGB(60,50,60),
		Font = Enum.Font.Gotham
	}
}


function UI.new(elementType,parent)
	local element = Instance.new(elementType)
	element.Parent = parent

	local class = theme[elementType]
	for parameter,value in pairs(class or {}) do
		element[parameter] = value
	end
	return element
end




local gui = UI.new("ScreenGui",playerGui)
local frame = UI.new("Frame",gui)
frame.Size = UDim2.new(.5,0,.5,0)

local button = UI.new("TextButton",frame)
button.Size = UDim2.new(0,150,0,50)
button.Text = "Hello World!"
1 Like
#6

Hella late reply, sorry about that!

This looks awesome. I like the idea of using some sort of UI module for flexible soft-coded UI structuring for sure.

You nailed it. Having to hardcode everything gets awfully repetitive and ugly, and my whole idea is cutting down on that and making things more manageable and easy to read for bigger projects.

Thank you for these suggestions! I’ll keep them in mind.