Hey Creators!
We’re thrilled to announce exciting upgrades for UIStroke are now available as a Studio Beta! UIStroke is our Engine’s capability for adding crisp outlines to any UI element. We’ve seen all your creative use cases over the years and are now introducing a series of improvements based on your feedback to take your strokes to the next level.
We’re launching:
Scaling Thickness: UIStroke thickness can now be set relative to its parent’s size, not just in static pixels.
Custom Border Alignment: Strokes can be aligned to the inside, center, or outside of a border, and offset by custom amounts.
Unlimited Border Strokes: We’ve removed the limit of one border UIStroke per object, so you can now add multiple!
Keep reading to learn more, and check out our sample place to explore these new improvements in action!
Note: During this Studio beta period, you can’t publish live experiences with these UIStroke improvements. Once we release these improvements to the client, they will be available to use in-experience. Let us know if you have any feedback during this period that we can incorporate into our client release.
How to Enable the Beta
-
Navigate to File > Beta Features.
-
Find and check the box for Improved UIStrokes.
-
Restart Roblox Studio when prompted.
Scaling Thickness
We’ve introduced a new enum property, StrokeSizingMode, to the UIStroke instance, that helps your stroke scale seamlessly with its parent object.
StrokeSizingMode.FixedSize(Default): This maintains the original behavior, where Thickness is a specific pixel value.StrokeSizingMode.ScaledSize: This makes the Thickness property act as a percentage of the parent GuiObject’s shortest axis.- For example, a Thickness of 0.1 on a 200x300 Frame would result in a 20-pixel stroke.
Note: If you’re using ScaledSize, we suggest using values between 0 and 1 for most intended use cases.
This allows outlines to grow and shrink proportionally as their parent element resizes, perfect for dynamic layouts and screen-size adjustments.
Scaling Thickness of UI boxes using `StrokeSizingMode.ScaledSize`
Custom Border Alignment
We’ve introduced additional enum options for BorderStrokePosition to position UIStroke instances in different places relative to a parent object’s border. You no longer need to create invisible Frame instances for layered stroke effects – instead, you can simply control each stroke!
BorderStrokePosition.Outer (Default): The stroke is drawn entirely outside the parent’s bounding box. |
|
BorderStrokePosition.Center:The stroke is centered on the edge, with half drawn inside and half drawn outside the parent’s bounding box. |
|
BorderStrokePosition.Inner:The stroke is drawn entirely inside the parent’s bounding box. |
You can also adjust the offset of the border stroke using a new property, BorderOffset. This is a UDim that adds an additional offset on top of BorderStrokePosition, allowing you to position your strokes anywhere!
If setting BorderOffset with scaled values, it will be sized relative to the parent’s shortest axis. |
BorderOffset = {0.15, 0} |
If setting BorderOffset using offset values, it will simply be in pixels. |
BorderOffset = {0, -16} |
Note: Custom positioning is only supported for border strokes. Contextual strokes can only be placed on the outer border of text.
Unlimited Strokes
We’ve removed the previous limitation of one border stroke per GuiObject! Now, you can parent multiple border strokes to a single object to create layered, composite outline effects.
Note that:
- This only applies to border strokes. You can still only have one contextual stroke per object.
- The rendering order for UIStrokes with the same ZIndex is undefined, so do not have UIStrokes with the same ZIndex if their rendering order matters.
Release Notes
- Right now, you can only style one border UIStroke and one contextual UIStroke as a pseudoinstance using our Styling system. We plan on supporting multiple UIStroke pseudoinstances in Styling in the future.
- We recommend having less than 300 total UIStrokes on screen to maintain performance quality on low-end devices.
- As a reminder, UIStrokes do not affect layout, meaning that the space taken up by the stroke is ignored by layout objects and may visually overlap adjacent elements or extend beyond its parent’s bounds.
Made with love
Our new and improved UIStrokes were made possible thanks to @TangyTrout, @0xabcdef1234, @Tiffblocks, @designerwithlonghair, @subcritical, @uiuxartist, @DrRanchDressing and our intern!
We can’t wait to see the UI you create! Let us know if you have any feedback or questions.
