So I made a working UI Blur for my latest project. Is it really looking like a real Background Blur? Let me know so I can improve it!
Of course it’s looking like a real background blur ! if you are trying to replica windows 11, make it less transparent. but i believe you are making a sort of windows 12 if I’m not mistaken
5 Likes
Are you using SurfaceGui and the lighting Blur? If so, how did you match the aspect ratio with a physical part? Looks clean either way.
I was able to get pretty close by dividing screen resolution (X/Y) to get the aspect ration for the X axis, then set Y to 1 (Z was set to the smallest value of 0.001). Then I set the part’s CFrame to the camera’s, offset by -0.714. That offset was done with trial and error, so I’m not exactly sure how that should be calculated properly…
2 Likes
it’s completely easy! I just created 2 different wallpaper; Main Wallpaper and Blurred Wallpaper.
I created a frame the covers up entirely the Window and fetched it through the extreme back. I add the Blurred Wallpaper and let it copy the Absolute Size and Position every frame, resulting the Blurred Wallpaper to copy the Main Wallpaper Absolute Properties even when the Window is moving or being resized!
This applies also in the Blurred Window but I patiently Blurred all of the pages so there’s different blurred images when shown in the Start Menu.
4 Likes
Wow… very cool. The blur looks amazing.
Is that the Hind, Noto Sans, or another font?
First of all, Windows doesn’t like to use such large blurs. Some windows apps use a Mica material, which is basically a very small blur, helping some accessibility issues with the current project you showed. Along with Google Chrome doesn’t use a blur at all. Second, the opening animation for the start menu was way too long, along with the staggered animation. Windows, only when content needs to be loaded animates the content, to represent the loading is finished. And all of the items, after being loaded, animate all at once (in a short animation). Another issue is that the start menu goes over the navigation bar.
A reccomendation would be to instead of making the wallpaper larger when the start menu is active, make the wallpaper smaller in order to give more attention to the start menu (because smaller to users means less important most of the time). Another reccomendation would be to reduce corner radius where sections of the taskbar touch, to give a more connected yet seperate feeling. The way it feels currently to the user, is that there are multiple taskbars, instead of one taskbar and multiple sections.
Overall, very cool project and cool concept.
1 Like
(Noto Sans)
Thank you so much for the feedback this is what I need honestly. I use the blur on the Chrome since I don’t have enough materials yet to show it off so I just integrated it to my existing program.
I made the Start Menu animation much quicker and it feels so smooth and enhanced now, the extra animations inspire from the Windows 10’s Start Menu and I’m not really sure what is the navigation bar however I made the taskbar centric.
The Wallpaper Scaling is scrapped since it’s too huge of an interaction result.
Thanks for the Idea of the taskbar but I’m planning that the taskbar will scale and sometimes divide itself to display different information so I can’t really just go on and execute the different corner radius since it’s very complex and it’s not a core feature either.
The UI Material I used is Acrylic (Hard blur but distinguishable back)
3 Likes
I meant the taskbar, sorry. Usually it feels annoying when something goes over a UI meant for navigation.
Even acrylic doesn’t use that large of a blur. However, if you want to keep the blurs large on the apps, I’d suggest using something like a small UIStroke, as I fear it may blend into the background too much for someone with low vision. It would also fit in with Windows 10 & 11 better.
Love it, at first, I didn’t realize this was Roblox.
I’m working on a very similar project and want to do something similar to what Windows 7 did, where it blurs every window. The method you used seems to only work if you’re looking at the wallpaper, but not the backing windows; did you manage to figure something like that in the past year?
So far you’re the only instance of a working blur over UI elements that I’ve seen; everything else is world-space objects behind a UI using the Neon block, which won’t work since our projects are all UI.