Improvements to UI for borders, shadows and fonts

I think we are very overdue for an update to GUIs. There are many properties that would eliminate the need for uploading images and loading images into games.These changes could also make games look a lot more professional and polished. I have listed them below:

Border Radius - Allows curved corners. Also create sub-properties to modify individual borders segments such as TopLeft, TopRight, BottomLeft, and BottomRight.

Drop Shadow - Allows a shadow to appear under GUI elements. Should take the shape of the GUI like GUIs with border radiuses. Also include sub-properties such as distance, strength, and possibly even angle.

Font - Allow upload of custom fonts. This is a big one because the current fonts can look cheap a lot of the time.

More Sub-Properties for Text-Shadow - We cannot currently edit text shadow properties. Would really be nice to be able to edit shadow strength and size. (distance)

These features would really benefit me personally as a developer and many other developers who are willing to utilize these features. Currently, I find myself uploading a lot of images to work around the lack of GUI features and it just means that players have to load more images into the game. I really hope the team at Roblox will take these ideas into consideration. I do a lot of UI design, so these added properties would save me a lot of time on making my UI look great. The current state of GUI elements has a lot of limitations and it makes things difficult. Thanks to anyone who supports!

57 Likes

Support :slight_smile:

A number of these things you have suggested, and the ones I have, have already been requested, though.


My additions:

Image/Shape Masking – Let us show/hide specific parts of GUI elements using images/predefined shapes.

Rotation Support for ClipsDescendants – Currently any rotated element will not be clipped, this is obviously not desirable behavior.

Vector Support – Because I hate low quality images.

Basic Shapes – Triangles, circles, etc, should not require us to upload images.

22 Likes

Well, doesn’t hurt to remind them :slight_smile:

Also, I really like your ideas! These would be awesome.

2 Likes

This may sound far fetched, but maybe html UI rendering?

  • css of course
3 Likes

:+1:

Yeah masking is the most important one imo

5 Likes

This is heavily needed. Been wanting these for a while now.

1 Like

I definitely support this as a UI designer. :+1:

3 Likes

These would all be great. Font is especially needed right now with localisation as just uploading everything as decals isn’t really an option anymore.

3 Likes

DEFINITELY. I should include this in my original post. Not having custom fonts reduces the consistency in the design because we are restricted to Roblox’s fonts, while our static images have our desired custom fonts. It makes the game look more cheap and unpolished.

3 Likes

I’d LOVE Roblox to incorporate UI templates and samples, as well as some Google material design features, like colours, buttons, sliders, etc.

5 Likes

Support. :slight_smile:

These additions would make UI designing and creation so much more efficient, quick, and better overall. I hate uploading images to get a circle, triangle, and other basic shapes, and image masking is also a big feature that makes good UI that is missing from the current UI tools.

3 Likes

That’s actually a pretty cool idea! Creating sliders is possible but takes a considerate amount of work to make them work fluidly.

1 Like
Border Radius & drop shadows

This is on our roadmap, currently planned for late this year.

Custom Fonts

This is not currently on the roadmap. There are a number of issues here and we can’t un-ship a feature once we ship it.

  • We can’t guarantee that these fonts will support characters from non-English languages. Additionally, having incomplete support for a script is significantly worse than not supporting that script at all, and most fonts I’ve seen have incomplete support for Latin script. This means that text in e.g. Spanish will have single letters like accented e fall back to a different font, producing a ransom note type effect.
  • Font licensing is significantly more commercialized than textures/sounds/etc. because creating fonts requires an immense amount of work from a skilled and highly specialized type of designer. Even “free” fonts often have license clauses that only allow them to be used for personal use, or in specific ways such as web typography or videos/illustrations, which wouldn’t apply to Roblox games.
  • They would have to be downloaded on the fly as the game loads, which could mean that the text flashes as fonts load in.
Text shadows

We’re thinking about this, but it’s not currently on the roadmap. Drop shadows and multi-pixel text outlines are both possible, but will involve more memory usage of the font atlas, which increases the risk of running out of space in it and causing glyphs to flicker.

Image masking

Currently on the roadmap.

Rotated ClipsDescendants

We’ll either implement masking (above) or allow increments of 90 degrees, in the future.

Vector images

Not currently planned, because SVG is an absolutely insane file format. It’s possible we could support some subset that image editors export, but there’s still issues like memory usage, rasterization time, etc. It’s all the same problems we have with text rendering, but with even less control over it engine side.

HTML/CSS

No.

UI templates/samples

We have some stuff in progress which should help with this. There’s also a great deal of cool community work, such as Roact Material ( GitHub - AmaranthineCodices/roact-material: Material design in Roblox w/ Roact! ).

18 Likes

Custom fonts not being on the roadmap is extremely disappointing to hear. Does Roblox plan on greatly expanding the current font library at the very least? Choices are extremely limited right now and don’t mix together at all. Every game theme will only end up using a few of the fonts.

1 Like

Any new fonts we add will have to be downloaded on-demand because of space usage concerns on mobile devices. This is something I’d like to do though. Not only to improve the selection, but to improve language support.

Right now, only one font we have supports CJK languages (Noto Sans CJK), so no matter which font you pick, Chinese/Japanese/Korean will always render in that one font. We only have one font that supports Arabic as well (Arial), and only two that support Cyrillic (Source Sans, Arial). We have no fonts that support Devanagari script (as used in Hindi), etc.

Most or all of the current fonts support Spanish and other languages that only use very basic accented Latin letters. However, several fonts have incomplete Latin coverage, and will render like ransom note text in languages like Vietnamese.

There are future improvements for the typesetter planned. Many of them are waiting on the new typesetter to ship for good. Some of them are already in production, but require the new typesetter to be enabled.

Update (March 2023)

8 Likes

If we can get cleaner and thinner fonts, such as Source Sans Light, mixed in with the same kind of lower-case G that Arial has, that would be awesome. Also having support for having a dedicated bold/italic/underline button would be a great addition as well, instead of having a seperate font for bold and italics. :slight_smile:

We really need progress bars as an asset that can be maneuvered with a value :stuck_out_tongue: think of an int contrained value but it controls the amount of progress on a progress bar.

2 Likes

We also really, really need dedicated rounded frames and buttons.

Hopefully the progress bars also include things like start / middle / end textures like the scroll bar.

1 Like

Any update on this? We are almost half way through the next year and still no border-radius :frowning: would love to hear the current plans!

3 Likes