UI Blur [AUTOMATIC]

OFFICIAL FULL GUIDE VIDEO

Example on how it would look like(old pics):



image

RECOMMENDED:

  • Direct Blur
  • Direct Blur + Blur Intensity Configuration
  • Remastered Direct Blurring + Blur Intensity & Atrribute Value

[NEWST UPDATE INFO]
The new update includes a setting for the blur intensity.

local START_INTENSITY	= 0.25

This is not supported on the module script and only for the
new direct blurring version.


[OLD UPDATE INFO]
The new update includes a setting for the blur intensity.

local BlurIntensity = 0.5

This is not supported on the module script and only for the
new direct blurring version.

Special thanks to @Scriptifi for the great idea!


So I saw this one topic and I wanted to re-make the module script basically to make everything simpler and automatic.

And well, I did that and here is how it turned out.

So first of all to actually make the blur frame all you need is one Script no local script just a script, You’ll need to place that script inside the frame that you want to be blurred.

When you did that all the code you’ll need to type in is this:

require(14724211362):ModifyFrame(script.Parent, "Blur")

OLD METHOD:

require(13699518434):BlurFrame(script.Parent)

After entering the provided code, it’s important to ensure that the background of your “main frames” are slightly transparent. This adjustment is essential to make the blur effect perceptible. By allowing some transparency in the background, you enable the blur to interact with the underlying elements, creating a noticeable visual distinction and enhancing the overall aesthetics of your design.

And I noticed that in the original post there was a bit of an outline blur, Which i also fixed by just setting the automatic generated frame’s size to Udmi2.new(0.95, 0, 0.95, 0)

The aim here is to streamline the process to the extent that you don’t need to take any additional actions. In other words, the goal is to make the entire system operate seamlessly and automatically, requiring minimal manual intervention or configuration on your part.


If you’re curious about the references DPT_3438751, DPT_51650037, and DPT_87511280, these identifiers represent specific depth of field settings for each frame. As previously mentioned, if you have three frames in your project, each frame has its dedicated and customized depth of field setting denoted by these unique identifiers. This individualization allows you to fine-tune and control the depth of field effect for each frame independently, ensuring precise and tailored visual results for your entire composition.


READ IF YOU RAN INTO ANY PROBLEMS [11/3/2024]

The script and pre-built script are fully functional unless you created an modded
version of the module script the scripts that i made should work 100% as intended.

If you still encounter problems try one of the options bellow.

  • Check if you are using a local script.
    This is a HUGE mistake people make when starting.
    in fact a lot of people contacted me just because of it.

  • Check if you are using the minimum required graphics quality
    The depth of field effect can only be seen on a certain level of quality

  • Check for additional problems.
    If the script worked but suddenly stopped make sure to check out this topic
    again to see if the script is outdated.

  • Always make your objects background a bit transparent.
    Honestly this is just common sense you’ll need to make the background
    transparent to actually see the blurring.

  • Check for the right module id.
    Sometimes i might forget to update the preview of the script so always
    check the Current Module Id.

  • if non of the above resolved the issue please contact me.

All of the blur effects will inherently produce reflections on various UI elements, such as frames and buttons. This is primarily because the parts responsible for these effects also influence the depth of field within the scene. Although these parts maintain transparency, comprehending the intricacies of how reflections function can be challenging. Reflections in this context occur as a result of the interplay between the blurred elements and their surrounding environment. The transparency of these elements allows light to interact with them, creating subtle visual reflections that enhance the overall aesthetic appeal and realism of the scene. Mastery of the nuances of such reflections often requires a deeper understanding of lighting, material properties, and shader programming to achieve the desired visual effects.

If you are unable to perceive the blur effect, please consider adjusting your graphics settings to a higher level. A minimum setting of 8 is typically necessary to fully experience the depth of field effect. Users with graphics settings below this threshold may encounter difficulties in discerning the blurring, as the lower settings may not adequately render the desired visual depth and realism.

In the event that none of the suggested solutions appear to resolve the issue, and you have confirmed that your graphics settings meet the minimum requirement, it is advisable to double-check whether you have utilized the correct Module ID. You can locate the precise Module ID within the provided post or documentation. Using the accurate Module ID is crucial for ensuring that the script or module functions as intended and can effectively apply the desired visual effects to your project.

Both the Old and The new version work perfectly fine.
It’s up to you which one to use.

Special thanks to TackleNevir for reaching out to me.


NEWEST MODULE/ SCRIPT


Old:
Direct Blurring + Blur Intensity Configuration

GET THE PRE-BUILT SCRIPTS HERE:

NEW VERSIONS:
Click here to get the pre-built version with all the newest available features.
Click here to get the module script

OLD VERSIONS:
Click here to get the pre-built version with all the newest available features.
Click here to get the module script

DIRECT BLUR VERSIONS:
Click here to get the pre-built direct blurring script.

If you have modified any of the scripts and want to publish it please add the origianl post inside.

156 Likes

Also you NEED to have the frame at least a bit transparent for the blur to be seen. you ofc can just make it fully transparency and only see the blur hehe. :slight_smile:

6 Likes

thanks! ill be using this in my gui it looks good. great work

4 Likes

Good stuff, not sure if I will use it tho.

3 Likes

Hey there! I’ve tried using your pre-built scripts and it instantiates the depthoffield object and creates the wedgeparts inside of the camera, but it doesn’t quite look like a blur. Any idea?

2 Likes

i think this topic would bring good use to people if it were to be put in #resources:community-resources

2 Likes

Can you provide more proper documentation of the module such as all methods, constructors, events, etc?

A demo place would also be useful.

3 Likes

I did not create the entire original module script. My contribution was limited to modifying the material used in each applicable section. Therefore, I am not fully aware of the module’s inner workings. The main topic likely contains the only information I am familiar with.

Regarding a demo, there is already one available, but it was not created by me.

If you’re interested in obtaining more information, you can reach out to AirpodSucker#2406. They were primarily responsible for modifying the functionality and should possess a better understanding of the actual module script.

2 Likes

Unfortunately this does not work well for me. It does not cover the frame accurately, so I’ll have to make my own script.

image

image

Also, why is it using wedges and not a part?

1 Like

I apologize for your dissatisfaction with the results. However, as I mentioned in the main topic this is a not so solid solution to the problem.

as for the wedge problem I did mentioned previously, I am not the original author of the script, so I cannot provide an explanation for the reason behind it.

2 Likes

It’s alright, I figured out how it works and might try making it myself.

2 Likes

im currently working on a new version but im not sure if im actualy going to finish it

3 Likes

I made my own script using the methods here. I ended up making a test with it, and also a real use in my game. I have to make it modular, at the moment it’s hardcoded for one frame!

Test video: https://gyazo.com/e66a4fe7cfa69b0fba09d700da091858
Real use video: https://gyazo.com/049d1934c68b3108c225ffbac23cafc7

Very nice. Why doesn’t roblox have this officially??

18 Likes

Not sure what’s different but still look nice.
And I agree roblox should make more ui elements like UIBlur, UIShadow, UIGlow etc…

It would help ui/ux development by alot.

12 Likes

the module doesn’t really work now, it doesn’t work for me, atleast

1 Like

Did you follow all of the instructions and requirements?

1 Like

There isnt anything wrong with the module nor the pre bulit script… so i do not know whats wrong but the script works as intended

2 Likes

hmmm i’ll see if i can do something about my own script

1 Like

cool stuff. will have to play around with it.

1 Like

it isn’t working, help please. i’m trying to message you on discord

2 Likes