[ UPDATE ] Open Sourced Clean Template UI
Hello! Im XQII46 i just updated the UI!
Dont forget to check my old post! 
Updates
- Added changelog/updates UI
- New exit button
- Fixed the UI gap Feedback by Eli
Update 05 February 2022
- Added Icons; Added Icon, Changes Icon, and Fixed Icon
- Added ContentText Learn more
Tutorial
How to setup the UI for huge updates
How to setup for update list
Go to UpdatesTest > MainFrame > ScrollingFrame > Updates
Duplicate the frame called "Updates"
How to setup ContentText
To use this you must see the first tutorial to make more space. Because this is will take up quite a lot of space
Example:
<b><i>Fixed</i><br/> - Added changelog <br/> - Auto sizing scrolling frame <br/> - Fixed amogus </b>
Use <b> to start
Use <br/> for new line
Use </b> to end
Video: ContentText
Another video: ContentText2
Sample Screenshots
Main Buttons
Features (For this update)
- Clean design gradient UI
- Fully customizing
- Drop Shadows
- Open-Sourced
Download: Here
Uncopylocked Game: Here
You can change the UI appearance with your own game theme.
The scripts that I use
Button Rotation Effect Code
script.Parent.MouseEnter:Connect(function()
for i = 0,-5,-5 do
wait()
script.Parent.Rotation = i
end
end)
script.Parent.MouseLeave:Connect(function()
for i = -5,0,5 do
wait()
script.Parent.Rotation = i
end
end)
Auto Sizing Code
local function UpdateCanvasSize(Canvas, Constraint)
Canvas.CanvasSize = UDim2.new(0, Constraint.AbsoluteContentSize.X, 0, Constraint.AbsoluteContentSize.Y+20)
end
task.wait(2) -- I have this wait because I use scripts to import items, so it needs time to wait for all items to come in.
UpdateCanvasSize(script.Parent, script.Parent.UIGridLayout)
--// Source: https://devforum.roblox.com/t/how-to-create-scrolling-frames-that-automatically-size-correctly/1599960
Button Hover Effect Code
script.Parent.MouseEnter:Connect(function()
script.Parent:TweenSize(UDim2.new(0.093, 0,0.068, 0),"Out","Quart",.5,true) -- Mouse Enter
end)
script.Parent.MouseLeave:Connect(function()
script.Parent:TweenSize(UDim2.new(0.107, 0,0.079, 0),"Out","Quart",.5,true) -- Mouse Leave
end)
Button Open Code
local b = script.Parent
b.MouseButton1Click:Connect(function()
script.Parent.Parent.MainFrame:TweenPosition(UDim2.new(0.5, 0,0.5, 0), "Out", "Elastic", 1)
end)
Close Button Code
local b = script.Parent
b.MouseButton1Click:Connect(function()
script.Parent.Parent:TweenPosition(UDim2.new(0.5, 0,1.5, 0), "Out", "Elastic", 1)
end)
Notes Default (In) Frame Position is 0.5, 0,1.5, 0
Default (Out) Frame Position is 0.5, 0,0.5, 0
https://developer.roblox.com/en-us/api-reference/enum/EasingStyle
Credit:
Support me! Here
That’s all the message I can convey, I’m sorry if there are any wrong words.
Thanks for Reading!
Have a great day!