This is a Advanced GUI Guide with basic Roblox Studio Knowledge needed to proceed.
Create the Roblox game you want the UI to be in. After the game being created, insert a ScreenGUI Object into "StarterGUI". You can rename the ScreenGUI Object if you want, as well as enabling some features inside the property. I recommend enabling "IgnoreGUIInset". By enabling that you will be able to put the gui on the top of the game without it being below the Roblox Top UI Frame. After that, you can put the frame into the ScreenGUI we made. It is recommended to disable Border Pixel / put the value to 0.
Insert a UICorner Object into the frame object. If you can't do that, click the 3-dot icon, and disable "Show only recommended objects." You can mess around with the radius and find the one that fits your game the most. You can also insert a UIStroke Object, which will give you a outline, that looks better then the BorderPixel Roblox uses. As always, you can change the colors and thickness of it, as well as the joint mode, which will make it round, static or beveled. Of course, if you are making some sort of list, you can also use UIListLayout Object while messing around with the padding to fit your preference.
You can change the color of the frame to a color to our liking. For this guide, we will use standard rgb(15, 15, 15). You can also use the UIGradient Object to customize the color in a gradientway. *There is a lot more you can do with gui's.
You can start with adding a button to the gui. After the button, you can customize it's colors to your liking. After the customization, add a Local Script into your button. You can make the effect start happening when you hover over, or when you click. Start with getting the TweenService by adding:
local TweenService = game:GetService("TweenService")
To the script.
Then the easiest way of getting the Button frame is script.Parent, but we will use a variable to say minimalistic.
local TweenService = game:GetService("TweenService")
local GuiButton = script.Parent
Now, we will write our function, to check if the player has clicked the mouse.
local TweenService = game:GetService("TweenService")
local GuiButton = script.Parent
GuiButton.MouseButton1Down:connect(function() -- checks if we have clicked our mouse.
end)
Now here, we will go little in depth, as this is about gui design. Here comes the hard part, the tween itself.
local TweenService = game:GetService("TweenService")
local GuiButton = script.Parent
GuiButton.MouseButton1Down:connect(function() -- checks if we have clicked our mouse.
local TweenGuide = TweenService:Create(GuiButton, TweenInfo.new(0.65, Enum.EasingStyle.Quint), {BackgroundColor3 = Color3.fromRGB(255,255,255)})
TweenGuide:Play()
end)
This is how the tween looks like in the simplest way possible. 0.65 is the time for the tween, Eeasing Style is the style its going to tween at https://roblox.com/docs/reference/engine/enums/EasingStyle BackgroundColor is optional. You can change any property by typing its name and the value it needs.
When you would run this script, the background color would change to the color white.
Now, this is the end of this guide. I myself are a newbie, but I know a lot about this, so I wanted to share my knowledge and potentially help some people.
written by notscripter / utkn0w