ezVisualz - UIGradient and UIStroke effects made easy!

ezVisualz

UIGradient and UIStroke effects made easy!

Click for the uncopylocked preset place!

Install with Wally:

About :information_source:


ezVisualz is a powerful library designed to enhance the animation of UI elements using UIGradients. It provides a wide range of presets out of the box and offers an easy-to-use experience for creating captivating visual effects.

With ezVisualz, you can effortlessly animate UI elements and strokes by modifying UIGradients, which smoothly transition between multiple colors. This allows you to achieve eye-catching visual effects without having to manually configure the gradients themselves.

Features :chart_with_upwards_trend:


  • Type safe :safety_vest:
    Strictly typed.

  • Optimized :zap:
    Don’t worry about your Founders Edition RTX 4070 Ti overheating.

  • Customizable animations :cold_face:
    There are customizable animations for Strokes, Gradients and Drop shadows!

  • Easy :fast_forward:
    VERY easy to setup and mix with your own game!

  • 17+ Presets :gift:
    There’s 17+ presets available for both regular Gradients and Strokes. (soon more)

Usage/API :open_book:


How to use the main Effect class:

-- uiObject: GuiObject, presetName: string, time: number, size: number
-- Initializing an effect on an object
local Label = ...
local Effect = EasyVisuals.new(Label, "RainbowStroke", 0.01, 6)

-- Destroying the Effect
Effect:Destroy()

-- Pausing
Effect:Pause()

-- Resuming
Effect:Resume()

How to use the Gradient class:

Open
local EasyVisuals = require(...)
local Gradient = EasyVisuals.Gradient.new(instance, color, transparency);

-- Then we can use the gradient to apply it to an object
Gradient:SetOffsetSpeed(number)
Gradient:SetTransparencyOffsetSpeed(number)
Gradient:SetColor(color)
Gradient:SetTransparencySequence(number or NumberSequence, acceleration)
Gradient:SetRotation(number, acceleration)
Gradient:SetRotationSpeed(number, acceleration)

How to use the Stroke class:

Open
local EasyVisuals = require(...)
local Stroke = EasyVisuals.Stroke.new(instance, size);

-- Then we can use the stroke to apply it to an object
local StrokeGradient = EasyVisuals.Gradient.new(Stroke.Instance, color, transparency);
StrokeGradient:SetOffsetSpeed(number)
StrokeGradient:SetTransparencyOffsetSpeed(number)
StrokeGradient:SetTransparency(number, acceleration)
StrokeGradient:SetSize(number, acceleration)
StrokeGradient:SetColor(color, acceleration)

Examples :camera:


Here's examples of it setup with different objects and different presets.

Tutorials/Videos:

Known issues :beetle:


There is no known issues. (Will update if there is)

Conclusion


That's all there really is! I really hope you find some cool uses for this library, and do make sure to send examples of what you've managed to make out of it.

Credits


Brought to you by @RhodesDigital and @Arxk

  • @RhodesDigital - Originally designing the library and his creative efforts for the presets.
  • @Proxus - Helping with typing/optimizations.

— Made with :heart: by The Wizards

*Would

Will you use this library?
  • Yea I think it’s cool!
  • Eh. Probably not

0 voters

191 Likes

WOW This is so cool, great work! Will defo be using this in my games :smiley:

19 Likes

Added an effect for RainbowOutline. Looks a little something like this:

More presets to come!

11 Likes

Seems interesting and would save me from a lot of Scripting.

Will keep this Plugin in mind when trying to recreate this gradient effects!

8 Likes

Added a Scary horror type of effect. Looks a little something like this:

14 Likes

could you create uncopylocked for me to see all the presets from the examples shown above

7 Likes

Sure! Just updated the post to include the uncopylocked place for the presets! Thanks for bringing that to my attention!

6 Likes

Never seen alike before, certainly going to be vividly used. Impeccable.

4 Likes

Looks amazing, very well done. Seems very useful and will 100% use it in the future.

4 Likes
  • Fixed a bug with the transparency sequence calculation
  • Added a green outline transparency preset

Available on GitHub: Release ezVisualz-0.0.1 · arxkdev/ezVisualz · GitHub

11 Likes

I am absolutely in love with your chrome stroke gradient effect. Great work!

1 Like

This module is very true to its name. In less than 3 lines I was able to set up this super satisfying shine effect for a text label in my game. Small detail but great for engagement!

8 Likes

Absolutely amazing!

with a little bit of coding and following the provided information about the module i was able to create a simple shine effect on a button!

RobloxStudioBeta_qR6rPmzS25

Amazing module! :+1: :+1:

4 Likes

Honestly, this is remarkable.

I’ve always wanted to make my game pop out more. This would be perfect for my new upcoming game.

1 Like
  • Added 2 parameters to the Effects class allowing you to define a custom color/colorsequence and transparency number/numbersequence rather than using GradientTemplates.
  • Added a Shine preset which has universal use depending on the Color you provide the Effects class!
  • Wavey preset!
3 Likes

awesome work here, I was just playing around with this. Maybe a stupid question, but if the parent frame is not visible would there be any performance impact of these gradient/stroke styles still ‘running’ on hidden frames?

2 Likes

Technically it could have an impact on the performance if you were continuously creating effects & hiding frames/labels without calling the Destroy method (you’d probably skyrocket your memory without tracking any of the effects and destroying when appropriate). Really does depends on how you use it. If you are going to hide the parent or hide the UI instance, you’d want to destroy the effect, and once it’s visible - you can reapply the effect.

Edit: Working on something to automatically pause/resume effects when (parents/ancestors) hidden and visible.

suggestion for the shine effect, since if you don’t manually specify a color when selecting that style it will cause an error, i.e. “ReplicatedStorage.EasyVisuals.Presets.Shine:5: attempt to index nil with ‘R’”

If color not manually specified should it default to try to use a lighter version of the color of the gui object as the default base color of the shine?

The most common use case I believe will be to simply add a shine effect to the existing frame/text color

Edit: From playing around with this I guess the best looking “auto shine” result of a colored frame is only possible if it samples the current color of the frame/text, changes basecolor of the frame/text to white and then applies the lightened shine gradient…maybe i’ll just make my own preset for this one :stuck_out_tongue:

1 Like

Good idea. I’ll adjust it to use the base color of the actual UIInstance, and if not, use (255, 255, 255) (White). But yeah, it’ll yield better results if it can actually sample the current color and apply a lightened effect.

Edit: Updated the library to include those changes, but also it now automatically pauses and resumes based on the ancestors of the ui object’s visibility.

Very useful library for easy effects! Adds a lot of detail with very minimal effort

1 Like