UIStroke - Studio Beta (UPDATE: re-enabled)

What is UIStroke?

UIStroke is a new instance that can be parented to other GuiObjects to apply an outline around them. You can think of it like a more customizable version of the existing BorderColor3 and TextStrokeColor3 APIs available today.

Key features of the new UIStroke include:

  • Add a stroke to text or UI object borders
  • Adjust the color and thickness of the stroke outline
  • Change the transparency independently from the text or UI object
  • Choose the corner style of the stroke including Round (default), Bevel and Miter
  • Add a gradient to the stroke (using the UIGradient component)
  • Full support for adding a stroke using rich text tags

How do I use it?

First, you must enable the UIStroke beta feature in studio.

Enable the Beta Feature

To enable the beta feature:

  • Go to File - Beta Features in studio
  • Check the box before UIStroke Beta
  • Restart studio

Next, parent the UIStroke to the UI object you would like to add the stroke to and adjust the properties.

  • Color: Color of the stroke
  • Thickness: Thickness of the stroke
  • Transparency: Transparency of the stroke
  • LineJoinMode: Change the corner style (Round - default, Bevel, Miter)
  • ApplyStrokeMode: Only needed when applying stroke to the border of a text object instead of the text

Alternatively, you can add rich text tags to any text, if you would like to use the stroke on specific words within a string.

Rich Text

With this beta enabled, you will also be able to use the <stroke> Rich Text tag. The following properties can be set within a single <stroke> tag:

Property Default Description
color rgb(0, 0, 0) Controls the color.
joins round Can be set to round, bevel, or miter.
thickness 1.0 Controls the thickness.
transparency 0.0 Controls transparency.

You can combine the tags like this:

The 
<font color="#985707">
  <stroke color="#f5af09" thickness="5">
    dog
  </stroke>
</font>
is happy.

Text and UI Borders

UIStroke can operate in two different ways. When parented to a text object, it applies to the text’s outline, and when parented to other GuiObjects it applies to the UI border. This behavior can be overridden using the ApplyStrokeMode property, which allows you to apply the stroke to the border of a text object, instead of the text itself.

Transparency

The Transparency property of UIStroke is independent from the BackgroundTransparency or TextTransparency of the parent object. This allows you to render text and borders that are “hollow” - consisting of only an outline.

Corner Style

There’s also an extra property, LineJoinMode, which lets you control how corners are interpreted. It has three values, Round, Bevel, and Miter.

Gradients

UIGradient interacts with UIStroke in a special way. The parent object and the UIStroke can both separately have UIGradients parented to them, allowing for interesting effects.

UICorner

UIStroke can be also used with objects that have a UICorner instance.

ApplyStrokeMode

ApplyStrokeMode is only useful when the UIStroke is parented to a text object. It allows you to decide whether the stroke will be applied to the border, or to the text. By default it’s set to Contextual, which will apply to text.

It’s possible to have two UIStrokes parented, one set to Contextual, one set to Border. When you do this, you can control both the UI border and the text outline using two different sets of properties.

Animation & Performance

All of the properties of UIStroke can be smoothly tweened and most of the properties are very efficient to update when tweened.

However, you should be careful when tweening the Thickness property when the UIStroke is applied to text. This results in many glyph sizes being rendered and stored each frame. This could cause performance issues or even cause text to start flickering due to running out of space for glyph textures.

Behavior change to TextStrokeTransparency

This feature changes the behavior of TextStrokeTransparency. Previously, strokes were achieved by rendering the same-sized glyph 4 times at different offsets. This is being changed to use the same rendering logic as UIStroke, which only needs to render the glyph once. If you only use a TextStrokeTransparency of 0 or 1, you likely won’t notice, but intermediate values like 0.5 may appear more transparent than they used to.

Let us know if any of your games are significantly impacted by this.

Known Issues

These are issues you may run into that will be fixed before release.

  • BillboardGuis that have text with TextScaled enabled and TextStroke enabled have broken rendering. Should be fixed as of March 30th.
  • There’s no way to make Thickness scale with size inside of a BillboardGui with TextScaled enabled.
  • Semi-transparent stroke lines that overlap, will be seen underneath each other; this is more of a limitation that requires a separate feature, currently working on this for all UI elements (not just stroke lines)
455 Likes

This topic was automatically opened after 16 minutes.

Wait, you can do what?? That’s so amazing!

This will allow for so, SO much more customizability for UI Design,
This seems like will be way better than the current TextStrokeTransparency that we have. It has been having a lot of problems with smaller, or just different fonts and sizes.

This will also make it so that we don’t need some already existing plugins, I believe @xsticcy made a plugin which allows you to add a stroke to a decal. I guess that is no longer needed.

The most interesting thing to me is the fact you have have a UIGradient for the UIStroke itself. I will be 100% using this.
I really like how there are different corner styles.

For the longest time I have stopped using Strokes in Text because of how glitchy it was. It seems like this will fix my issues!

Thanks to the Roblox Developers for releasing this.

Edit: I was kind of dumb, I thought this was already released, since I could just add it into my explorer and such, I didn’t know why it woudn’t work lol. At least now we’re getting it.

me patiently waiting with the notepad open so that i can be the first to post lol

50 Likes

There is something I am a bit confused with, will the TextStroke tweening eventually cause animation jank? (Frame skipping etc)

4 Likes

When I am far away from this billboard gui is messed up
image

18 Likes

What are the performance implications for excessive use of this? Might go abuse them once on prod. Thanks

7 Likes

Nice! I have a somewhat related question regarding UI[EffectName] objects:
Can we ever expect something akin to a UIBlur or UITransparency object being implemented in the near-ish future?

UIBlur being an effect that blurs world space content behind the GuiBase2d the object is in; and UITransparency being a recursive modifier for all transparency properties of the parent and its descendants.

26 Likes

UIBlur is extremely GPU-intensive. It isn’t really ideal for low-end device users.

I believe they’ve mentioned that UITransparency will be performance intensive in a thread in the Feedback category, not sure though.

4 Likes

I would love to see roblox adding UIblur in roblox. But I think it will take a long time before they will add it.

8 Likes

This is something we’re looking into and understand the desire for, but I can’t promise any sort of timeline for when it will happen.

19 Likes

What about trying to optimize it in a way? Maybe if… I don’t know; Blurs don’t cause much lag, I guess they can use that and then only manage a slower changing frame for the actual UI. I don’t know how to explain but um…

4 Likes

Yas! Perfecto.

UITransparency would be personally so useful to me, fading entire UI’s in and out is extremely unefficient at the moment. I hope something that does release.

5 Likes

Can you provide more information about what’s going wrong?

5 Likes

My OCD
image

Anyways, I think this is an amazing update that we all were anticipating to come out!

9 Likes

By the way, I either ask now or never.

If I enable the beta, will it work on live games?

2 Likes

I noticed it too, don’t worry. I’m not sure what’s causing the rounding error there but I’ll look into it.

10 Likes

It’s great to see GUIs getting more love. All the recent updates and improvements are great, and I can’t see what’s to come next!

Are there any plans to expand the UIStroke to support images (and possibly ViewportFrames), so that images with transparent backgrounds (e.g. avatar thumbnails, icons, etc.) can have a border stroke applied to them?

6 Likes

I’m pretty sure he means this:

5 Likes

It won’t work currently in live games. I’ll post an update once it can be enabled everywhere.

6 Likes

I can’t foresee how UITransparency would be performance intensive. Currently, I use a workaround when animating (in this case, fading) upwards of 100 individual on-screen elements in a RenderStepped loop using springs. My frame times are virtually non-existent. There is absolutely no way a C-side implementation would be slower.

As for UIBlur, it once-again depends on how they implement it. Speculating of course: but if they treated the parent frame as a stencil and simply copied the rendered image from the buffer, cut it to the shape said parent frame, and then applied the blur effect it might not actually be that bad.

Again, that is purely speculation (as well as a gross oversimplification) since I personally do not know the internal workflow of Roblox’s rendering codebase.

4 Likes