UIAttributes is a no code solution to handling UI effects. It uses attributes applied to GUI objects in order to do thing like set display Groups, tween, and even handle sound effects for events.
Pardon my dust. This is version 1.0
Hello everyone, recently i found that doing UI work is incredibly time consuming, monotonous & frustrating. Im sick and tired of it! This is my first community resource I’ve ever posted and just spent a few hours making my system for handling UI effects more user-friendly and cohesive.
ALOT will change in the coming month, the code is ‘mucho espagueti’ and documentation and error correction in the code itself will get much better very quickly, I’m just excited to get this out in a usable state.
I solemnly swear to keep this module as backwards compatible as humanly possible; as long as you don’t implement your own functions, it should be as simple as a drag and drop for future updates.
Setup Process.
How To Setup UIAttributes?
- Grab the RBXM containing the ‘UIAttributes’ localscript and accompanying module(s) and place it in ‘StarterGui’
- Then… Well, thats really it.
How to use.
>Lets start with the basics🗣️How to hide and unhide GUIObjects?
I said no code, but there is ONE peice of code you should know. When using this ui module whenever you hide frames or unhide frame you should ALWAYS do it by setting the visible attribute instead of
Button.Visible = true or false
this rule applies even when your gui object is not a ‘Special Element’.
local Button = script.Parent
Button.Activated:Connect(function()
Button:SetAttribute('Visible', true)
end)
What are display groups?
A display group is a a collection of frames that cannot be visible while a element with the same group is also visible. You set display groups with attributes of type ‘string’
In the video there are 2 display groups called ‘A’ and ‘B’ Notice how using the button to display ‘B1’ Only effects ‘B2’ as they are in the same display group.
The next video shows exactly why an attribute based approach is so powerful The previous GuiObjects had no attributes except for their display group. But these, combine the functionality of the display group and the ability to tween positions without touching any code!
Those 3 frames were in the same display group meaning only one was allowed to be displayed at a time. 2 of the frames had attributes set for determining how to handle tweening, while the red frame did not so it simply disappeared!
How to set open and closing tweens for my GUIObjects?
Like this! Create 2 attributes 'TweenOpen, ‘TweenClose’. These two attributes must be of type ‘Udim2’ and you CANNOT have one without the other. The udim2 values are set for where the frame will be when it is opened and closed respectively.
Next you can create a tweenInfo attribute in 1 of 3 ways.
-
As shown, create an attribute called ‘TweenInfo’ and fill it in in the order you would a normal tweeninfo.new() variable capitulation or whitespace does not matter. By using ‘TweenInfo’ as your attribute name, you are declaring the default tweeninfo for all other attributes that use tweeninfo in that gui object. The code can better explain -
local tweenInfoAttribute = (uiElement:GetAttribute('TweenInfo_TweenOpen') or uiElement:GetAttribute('TweenInfo')) -
However, you explicitly declare a tweeninfo for each attribute that requires it! simply name your attribute ‘TweenInfo_AttributeName’ Examples: ‘TweenInfo_TweenOpen, TweenInfo_TweenClose, TweenInfo_MouseEnter, etc…’
-
Literally just don’t bruh. It will default to tween info set inside the UIFunctions module for that specific attribute handler.
MouserEnter, ButtonPressed, PlaySound Attributes
The video below shows a combination Of these attributes.
Watch Example Video
)