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:
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
andTextButtons
) 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:
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!