UIStroke is Now Live!

It is indeed going to make a big difference! Especially building a store, I can make a cool board now :smiley:

1 Like

Most anticipated update for anybody who cares about UI Cleanliness.

Great work, the dedication the team showed is incredible, and I can’t wait to see the creations this’ll improve.

You did it, Tiffblocks! And we’re all very happy with it so far :D

1 Like

Hi Picture
Someone else brought up making it a UDim, because right now it’s a thickness in pixels and that won’t scale at all.

5 Likes

Thanks a lot for this! I’m going to use it a ton. Seems very cool so far!

1 Like

Amazing! Definitely going to use this a lot. Wonder what the next interface addition will be. :thinking:

1 Like

This update is so cool! Something that I wanted to do with this update was to make a cool but hacky way of making a drop shadow effect, and it works pretty well! (besides the fact that it takes like 90 objects to be spammed)
image


With this in mind though, I would love to see a blur radius property added to this UI element as this could make drop shadows a LOT easier to make. As a UI designer, drop shadows are something I always wanted to utilize in my UI but I just never had a good enough and optimized way of doing it. Other than that, probably one of the most game-changing UI updates in a while! Glad to see this finally released.

10 Likes

Does this utilize any forms of anti-aliasing on mobile versions?

1 Like

Lol same, I was able to make my UI look alot better with this.

Good news! This is possible using rich text, for more info see Rich Text Markup | Roblox Creator Documentation

I have been waiting for this moment for months

1 Like

5 Likes

The way it works for text involves making two images for each letter (one for the normal glyph, and one for its stroke/outline). The biggest issue is that every unique combination of (font, letter/glyph, text size, stroke thickness, join mode) in your game requires a unique image, which can start taking up a lot of space in the font atlas if you use a lot of them. In the worst case, the font atlas can run out of space and text will start flickering on mobile devices. This can be a problem with other features as well, like BillboardGuis. I’d suggest avoiding animating the Thickness property.

The way it works for UI borders is using the same shader as UICorner, and has similar performance. It should be safe to animate.

8 Likes

THANK YOUUUUU!! I can finally make good looking text without going in photoshop!

this is genuinley an amazing update saves a bit of time making images in photoshop

2 Likes

This is great, but any thoughts on a glow UI effect? or overall UI effects to help with the immersion of UI for our games/experiences?

This was mentioned by someone in the Beta post but I’d really like an “Offset” property as well, for drop shadows.

4 Likes

I also think they should add blur behind GUI’s so we can have glass morphism.

4 Likes

This is honestly pretty disappointing.
Sure, you can finally have transparent UI with a non-transparent border, but there is not enough use cases.

UIStroke doesnt work on ViewportFrames or even ImageLabels, which was what I wanted the most
The Thickness property also doesnt scale with different screen sizes, which is also very disappointing.

This is a great feature, just too many oversights

3 Likes

Thats what I was meaning, it would look great in many places

2 Likes

Awesome feature! But anyways, why not show what I can do with it:

image

Yeah, I played around with it a bit and made this, not really impressive but I was only playing around with it,

2 Likes