Add the Ability to Create Curved TextLabels for UI

, ,

Introduction

Hello everyone,

As a Roblox developer, it is currently very hard to have curved text. It is quite hard to explain in words of what I am trying to say so instead of first explaining this, I will put forth an example:

Suppose I have text like below:


Normal text spans horizontally, which does the job but can eventually make our UI look somewhat humdrum. That is why I put forth the idea of curved text. This is text that spans in a circular manner.

Example of what I am trying to say:
CurvedText
This is a lot more appealing for certain cases. (See “Use Case”)

Currently, if we would like to create this on Roblox, we have to upload this as an image. The problem with this is that the image is static. If we wanted to update the text, we would need another image for the new text. This especially gets out of hand when making a typewriter effect with this curved text. Normally with the horizontal text, this is simple. But with this, we would need a new image for every new letter added/removed. This is extremely redundant and would require hundreds of image assets.

Advantage of Actual Text over Images of Text:

  • Text is always vector, meaning no matter how much it is enlarged, it will never lose resolution quality. Images, on the other hand, are raster. They have a set number of pixels and when enlarged, they lose their sharp and HD quality. If the curved text gets added, it should behave just like the text we have now (in TextLabels and TextButtons) so they are vector. Then, there would be no need to upload images that will lose quality if need to be scaled up.

Properties to Customize

It would be nice if we also have some control over this “curved text”. Some properties I came up with that would be useful are:

Start / End
This will set boundaries of where the text starts and ends (in degrees).

CurveSize
The size of the curve that the text wraps around, not the size of the text characters.

CurveWidth / CurveHeight
This will control how horizontally/vertically stretched the curve is, this does not affect the size of the text, this only effects the position of each of the text characters.

CustomCurve
This property will take an quadratic expression so developers can create custom curves.


Use Case

Why is this going to be that useful? Well, there are many instances where this curved text can be handy.

Here is one sample UI where this fits in perfectly:

UseCaseCurvedText
This cartoon styled UI shows how the curved text “Object” and “Click to select” go perfectly with the circular buttons.


How Would This Improve Our Development Experience?

If this issue is addressed, it would improve my development experience because we, can make this curved text easily and efficiently. As I have said before, having curved text element means that it is editable and vector.

This addition will allow us to create stylish, functional, and polished UI that will yield an outstanding user experience.

If anyone has more ideas for the custom properties and/or more use cases, then feel free to post them down below!

Thank you for reading this,
and have a wonderful day!

25 Likes

Yes. Also curved frames, alpha masks, and better UI support in general.

4 Likes

There’s two issues with adding this that are very difficult to solve:

  • Terrible kerning when done automatically. Fonts only contain kerning information for being laid out linearly. Your first example has terrible kerning, while your second example is hand-crafted by a human.
  • Support for other languages. Some languages, such as Hindi, have characters that are connected together (e.g. नमस्ते दुनिया). The tool you linked doesn’t even consider this and breaks horribly when you input such text. Additionally, different languages can have wildly varying lengths to express the same concept, which would be incompatible with a Start and End angle.

While we’re looking to implement new text features so that developers can rely less on images, the goal is to make authoring UI require fewer baked images and be easier to localize, making this one fairly low priority.

10 Likes

I wanna bump this topic as it seems very crucial and important to developing UI and for the future of Curved TextLabels inside studio.

Curved TextLabels is something that I wanted for many years now and they are easy to create and modify inside studio, but most games that have curved text is an ImageLabel used as a loading screen or maybe an example of what TheCarbyneUniverse used as an example which I think should be very important for most UI designers like me.

The support for other languages might be a bit difficult but could have something where you can’t curve the text due to a certain language or modify something for this feature that can support other languages like Chinese or Punjabi. It’s very crucial for me because I rather not use an external app like PaintNet or Photoshop to create some sort of text that can take up half an hour adding textures, font, and colors into it rather than typing down the text and then put in a setting that will take up to 5 minutes, which is better?

By the way, I don’t know if this is a low priority as this is something that most developers want an inside studio. Yes, we can rely upon less about images and stuff but if this was rejected as an idea (I hope not), then we would have to create many images to put into an ImageLabel which making a curved text in an external app for like an hour or two, and thanks for TheCarbyneUniverse for pointing this out as well:

In the end, I would love this to be a feature for Roblox studio for future UI designers and not having to upload many images of a curved text.

1 Like

How would you add support for different languages, when one is curved while the other isn’t. You would effectively have to make two separate UI’s for languages which can be curved, and languages which cannot. Also, different languages would have different lengths of text for things that mean the same thing, so this would cause further issues.

While this would be an amazing feature, it’s just not feasible.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.