UIAttributes+ | A no code solution to UI effects handling!

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?
  1. Grab the RBXM containing the ‘UIAttributes’ localscript and accompanying module(s) and place it in ‘StarterGui’
  • Image
  1. 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.

  1. 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'))

  2. 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…’

  3. 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

7 Likes

So uh… how to use? In fact, why to use? When to use?

Ok this is pretty cool, however one feature I would suggest is chaining multiple tweens together, as this is personally the least fun thing I need to code alot (I have a module called UISequence which makes it less not fun but still not fun :frowning: )

3 Likes

OOF, that sounds difficult and probably not super elegant to do with attributes, i also haven’t really found a use for that but i can understand conceptually how its useful for more advanced workloads.

i look into it, my biggest thing is documentation and fixing the module so it isnt so spaghetti🗣️

1 Like

Nice, a Attribute version of my UiEffects (private) module
I’ll def check this out!