UIStroke - Studio Beta (UPDATE: re-enabled)

A lot of people don’t know how significant this is for UI Designers.

At last, we can finally have strokes on Rounded UI. A feature that has been needed since the first time UICorner came out.

I’m glad that we don’t need to use 2 Rounded UI’s to achieve this.

Also, more different kinds of borders? This’ll be fun to play around with.

Beautiful update for designers.

5 Likes

These are good points, thanks for the feedback.

  • The transparency overlap is a known issue and is actually a separate feature we are working on, for all UI systems
  • Drop Shadows is also a separate feature that we have plans to add down the road
19 Likes

Tiffblocks started by working on the stroke for the text (which is actually a harder problem to solve) and then realized that we can apply this to UI borders as well so we expanded the scope of the feature. Glad you like it!

7 Likes

I am opening Roblox studio. RIGHT NOW.

As a UI designer, this is AWESOME! This will allow for MUCH more flexibility in my UI, without having to do funny work-arounds. (Oh and no photoshop needed :smiley:)

P.S: Please add UI blurring :pleading_face:

8 Likes

This is such a great update, and I can’t wait to start experimenting with it!

I have 2 questions though:

  1. Will BorderColor3, BorderMode, and BorderSizePixel be deprecated?
  2. Will TextStrokeColor3 and TextStrokeTransparency be deprecated?

Edit: It seems we have been really good updates in 2021! Good job Roblox!

3 Likes

They will not be deprecated. UIStroke just offers additional controls when needed.

8 Likes

Hollow text is by far the best thing ever, but I still have one question (more related to rich text):

  • Any plan on changing the transpareny in rich text?

Basically it’s like format below:

<font transparency="0.5">Ghost</font> text

Anyways, this is UI designers’ best day!

2 Likes

Will there be an option to apply an offset? This could be useful for dropshadows.

5 Likes

I believe what he means is, if there will be a way to change the transparency of text with richtext. He gave an example of how he would have envisioned it.

2 Likes

Reasonable request, thank you for the feedback.

10 Likes

UIBlur could be graphics quality/hardware dependant, like other effects are. On a feature request, a Roblox engineer noted that disabling blur could make text unreadable in some cases. My solution to that is to add a property that represents whether the blur is active, and developers could connect a GetPropertyChangedSignal to it and update the BackgroundTransparency of the object (transparency = 0 if not active, 1, 0.5, etc. if active), essentially making the UI solid if the effect isn’t rendering. That would solve that problem, while still allowing UIBlur to be added.

About UITransparency, I’m not sure how it would be performance intensive because transparency already exists for UI objects. It might actually improve performance for animations because you could use just one tween for transparency instead of one for every single object.

wow that was a lot of writing

Also, could UIStroke.Size be changed to a UDim, like UICorner has? I mainly use Scale, and UIStroke size being Offset only means things will look different on different screen sizes.

6 Likes

This is a issue that was already pointed out
TXD
(note : it seems i can no longer post .GIF in the devforum)

But i’m surprised that it doesn’t own the same parameters as Corner,
which possess a UDim type of value instead of a Number

UICorner
image

UIStroke
image

1 Like

Ah, oh gosh, finally!

I’ve had to make custom images for my GUI all this time. I wanted a border surrounding a semi-transparent rectangle with UICorners enabled, but what was available earlier just couldn’t do that, but this is amazing!

No more photoshop for me.

So many uses I can think of. Soon photoshop will become unnecessary for proper gui development. Keep up the great work!

ROBLOX…
I…
…I can’t thank you guys enough.
This changes everything.
Everything I’ve had to do in order to get a rounded border around my UI frames (with no background)…
Gone, all gone. Good riddance. This makes navigation in my UIs, and creating them 5x easier.

Thank you.
This is the best update ROBLOX has, and ever will release.

Praise Andrew’s Beard. It has rewarded me for my unyielding loyalty, clearly. (Andrew’s beard is the beard I bear, I created a cult around it, lol)

Now all I require is a way to customise the border radii of specific corners, because that would be perfect. I would ask nothing more of you.

Observe:

27 Likes

Will it ever be possible to use this instance on a ViewportFrame’s render image?
Really, I’d like to be able to put one of these in a model in workspace. I’ve been hoping we’d get something like that for a long time. But, this is a really awesome update, I’m sure it will help us create great UI. I REALLY hope you guys eventually consider adding a ModelOutline instance or something, though! c:

3 Likes

Are you able to change the thickness of it unlike TextStroke?

I’m also having that same issue! I have no UIStroke in my gui objects and the stroke keeps getting larger as I zoom out. Any fixes soon?

2 Likes

I was just thinking the other day at how annoying borders were!

Nice QoL update :slight_smile:

Very cool! Now, we need a UIShadow!

8 Likes