I made a UI script for practice and i want to get some feedback on it. like things i can improve on tips to make it a little better or mistakes i did. It’s still a work in progress, it’s just the buttons for now and i wanted to practice using module scripts and try to make somewhat of a responsive UI. I dont have much experience in making UI or Coding them so i’d really appreciate any feedback you might have. Thanks! it can really help me improve my works!
Here’s a little preview of what i made:
Client Script:
----- //< Services >// -----
local ReplicatedStorage = game:GetService("ReplicatedStorage")
----------------------------
----- //< Modules >// -----
local ButtonFunction = require(ReplicatedStorage.Modules.Interface["Hover/Click Handler"])
----------------------------
----- //< Variables >// -----
-- [Frames] --
local MainFrame = script.Parent
-- < Folders > --
local ButtonsFolder = MainFrame.Buttons
local MenusFolder = MainFrame.Menus
-----------------
local MainButtonFrame = ButtonsFolder.MainButtonFrame
--------------
--Table to store all the buttons
local ButtonsTable = {
PlayButton = MainButtonFrame.PlayButton,
SettingsButton = MainButtonFrame.SettingsButton,
CreditsButton = MainButtonFrame.CreditsButton,
DonateButton = MainButtonFrame.DonateButton
}
---------------
-- [Menus Frames] --
local PlayButtonMenuFrame = MenusFolder.PlayMenuFrame
local SettingsButtonMenuFrame = MenusFolder.SettingsMenuFrame
local CreditsButtonMenuFrame = MenusFolder.CreditsMenuFrame
local DonateButtonMenuFrame = MenusFolder.DonateMenuFrame
--Table to store all the frames correlating to the buttons
local MenuFrames = {
PlayButton = PlayButtonMenuFrame,
SettingsButton = SettingsButtonMenuFrame,
CreditsButton = CreditsButtonMenuFrame,
DonateButton = DonateButtonMenuFrame,
}
--------------------
--=======================================
----- //< Functions >// -----
--None yet
-----------------------------
----- //< Main Code >// -----
-- [< Hover/Click Tween and sound Handler >] --
for buttonName, button in pairs(ButtonsTable) do
local originalSize
ButtonFunction.Style(button)
end
--------------------------------
-- [< GUI Functionality >] --
for buttonName, button in pairs(ButtonsTable) do
button.MouseButton1Click:Connect(function()
local menuFrame = MenuFrames[buttonName] -- Get the respective menu frame
if menuFrame then
menuFrame.Visible = true -- Show the clicked button's menu frame
--print("Opened " .. buttonName .. " Menu Frame") -- Debugging
else
--print("Error: Menu frame not found for " .. buttonName)
end
end)
end
-----------------------------
-----------------------------
Module Script:
-- // < Services > // --
local TweenService : TweenService = game:GetService("TweenService")
------------------------
local ButtonFunction = {}
--Settings
local SETTINGS = {
--Button Tween Settings
Direction = Enum.EasingDirection.InOut;
Style = Enum.EasingStyle.Quad;
Time = .2;
FadeTime = .45;
Offset_UDim_Factor = 3000;
Small_Offset_UDim_Factor = 4500;
}
-- // Sounds // --
local HoverSound = game.ReplicatedStorage.Resources.Sounds["Main Menu"].MenuButtonHover
local ClickSound = game.ReplicatedStorage.Resources.Sounds["Main Menu"].MenuButtonClick
------------------
function ButtonFunction.Style(button: GuiButton, container: GuiObject?, HoverSettings: {CanHover: boolean})
container = container or button
local IsInside = false --Indicates if Mouse is inside the button
local Background = button:FindFirstChild("Background") or button
local Background_Starting_Position = Background.Position
--Calculation for sizes
local Absolute_Size = container.AbsoluteSize
local Offset_UDim = UDim2.fromScale(Absolute_Size.X / SETTINGS.Offset_UDim_Factor, Absolute_Size.Y / SETTINGS.Offset_UDim_Factor)
local Small_Offset_UDim = UDim2.fromScale(Absolute_Size.X / SETTINGS.Small_Offset_UDim_Factor, Absolute_Size.Y / SETTINGS.Small_Offset_UDim_Factor)
local Base_Size : UDim2 = container.Size
local Bigger_Size : UDim2 = Base_Size + Offset_UDim
local Smaller_Size : UDim2 = Base_Size - Small_Offset_UDim
button.MouseEnter:Connect(function()
IsInside = true
container:TweenSize(Bigger_Size, SETTINGS.Direction, SETTINGS.Style, SETTINGS.Time, true)
Background:TweenPosition(UDim2.new(0,0,0,0), SETTINGS.Direction, SETTINGS.Style, SETTINGS.FadeTime, true)
if not HoverSound.Playing then --Stops sounds from overlapping
HoverSound:Play()
end
end)
button.MouseLeave:Connect(function()
IsInside = false
task.delay(SETTINGS.Time, function()
container:TweenSize(Base_Size, SETTINGS.Direction, SETTINGS.Style, 0.1, true)
Background:TweenPosition(UDim2.new(0,0,1,0), SETTINGS.Direction, SETTINGS.Style, SETTINGS.FadeTime, true)
end)
end)
button.MouseButton1Up:Connect(function()
if IsInside == true then
container:TweenSize(Smaller_Size, SETTINGS.Direction, SETTINGS.Style, SETTINGS.Time, true)
if not ClickSound.Playing then--Stops sounds from overlapping
ClickSound:Play()
end
task.delay(.1, function()
container:TweenSize(Bigger_Size, SETTINGS.Direction, SETTINGS.Style, SETTINGS.Time, true)
end)
else
container:TweenSize(Base_Size, SETTINGS.Direction, SETTINGS.Style, SETTINGS.Time, true)
end
end)
end
return ButtonFunction