Beyond the Limit: Scaling UIStroke Beyond 25 for Unique UI Effects in Roblox

Resources Community Tutorials
, ,
#1

Hello everyone,

I’m excited to share a discovery I made while working on some UI elements. Many of us have probably run into the limitation where UIStroke is capped at a thickness of 25. When adjusting the UIStroke thickness using the drag bar, you’ll notice it only goes up to 25. While this usually suffices, there are times when a thicker stroke could be incredibly useful like when you’re aiming to create dramatic transitions or bold UI effects.

image

Through some experimentation, I discovered that you can actually scale UIStroke well beyond the 25 limit! This can be a game-changer for developers seeking more control over their UI designs, allowing for smooth, single-frame transitions or other standout elements without needing multiple frames or additional layers.

Here’s an example of what I’m talking about:

image
image1382×685 60 KB

In this example, I scaled the UIStroke much thicker than usual, creating an effect that opens up a range of creative possibilities.

Step by step video guide

Steps Taken

  1. Create a Frame: Start by adding a Frame to your UI in Roblox Studio.
  2. Insert a UICorner: To give your frame rounded edges, insert a UICorner into the Frame.
  3. Insert a UIStroke: Add a UIStroke to the Frame to outline it.
  4. Adjust the Stroke Thickness: In the UIStroke properties, manually enter a large number for the thickness. This allows you to exceed the usual limit of 25 and achieve a much thicker stroke.

Use Cases

There are plenty of potential uses for this technique:

  • Single-Frame Transitions: Create a transition screen by scaling the stroke to fill the entire frame, then animating it in and out.
  • Bold UI Elements: Make certain UI elements stand out with an unusually thick stroke.

Conclusion

This simple tweak has opened up a lot of creative possibilities for me, and I’m sure it will do the same for you. I encourage you to experiment with this and see what cool effects you can come up with!

One can also create some strange effects when scaled huge!

image
image1048×522 62 KB

Warning
:warning: Please note: I’m not entirely sure if this is a bug on Roblox’s end, where the input range isn’t being properly checked. Use this technique carefully, as it may not be officially supported or could lead to unexpected behavior in future updates. Proceed with caution!

Looking forward to seeing what you create!

Happy developing!

8 Likes
#2

Very useful trick, especially if you want to highlight certain aspects of your gui. For example in a tutorial

2 Likes
#3

I don’t even get it why people use the roblox property dragger at all? It’s so worthless. And I already knew this trick and you could do this exact trick on so many other things. Seems like the newbies just don’t care using the text box. :woman_shrugging:

Good tutorial nonetheless! Good for the newbies!

4 Likes