Greetings,
As a Roblox UI designer, it is currently very difficult to adequately integrate text and images together. As we all know, since ImageLabels are objects themselves, they overlap TextLabels. That’s alright, but there is also no straightforward way to have the text be displaced by images so no overlap occurs. For example:
The only way to have that ImageLabel break the text is by splitting the paragraph into 2 TextLabels and positioning the ImageLabel within. When you compare this to scripting, it’s like hard-coding something–it’s not dynamic or efficient.
Feature
Websites have an elegant solution via HTML and Markdown. For example, on the DevForum, you can have in-line images simply by placing the info within the text:
This is the play button. As you can see, it's a blue triangle with a rather blocky man on top of it. It is found in the top left corner of Studio.
This is the play button
. As you can see, it’s a blue triangle with a rather blocky man on top of it. It is found in the top left corner of Studio.
. As you can see, it’s a blue triangle with a rather blocky man on top of it. It is found in the top left corner of Studio.The image sits nicely within the text, and if I manipulate the text, then the image positions accordingly.
Furthermore, some text editors such as Google Docs allows for various types of image-text integration.
| In-line | Wrap text | Break text |
|---|---|---|
 |
 |
 |
- In-line would be more useful when the image is small, like the above play button example.
- Wrap text is good when you have an image at the side with a paragraph.
- Break text is better to use when the image is very wide.
All three bullets have their own uses on Roblox, as will be seen in the use cases.
I believe the best way to have in-line and break text accomplished is via RichText <img> tags that take an image’s content ID (e.g. rbxassetid) along with some properties (e.g. size). For break text, the last “word” before the tag is the last word of that previous “paragraph” before the image.
But for wrap text, the best method would be to have a property for TextLabels themselves. If it is checked, then wherever an ImageLabel overlaps the TextLabel, the text there will shift in those lines to make room.
Of course, there may be better methods than what was proposed above. Here’s a better way:
I know that this is rather very far-fetched for Roblox, but its uses are too common and currently inconvenient to create. Here are those use cases:
Use Cases
-
Suppose you have a building game that is heavily involved with the UI buttons that perform various actions. In the tutorial explaining the mechanics, it is essential to show the images of the buttons as you’re explaining them. For example, “to delete your build, press [image]” (look at the mockup of this below). This would use the in-line RichText method since the button image would be quite small.
-
Imagine that you have a help button with a UI that comes up. It has text explaining the basics of the game, but with a horizontal banner-type image in the middle, perhaps of some aspect of the game. Since it’s quite wide, it makes sense to have it break the text instead of wrapping too few letters. Here’s a model (the gray represents the text structure):
-
Picture a mining game with an instructions manual that explains the whole mining-selling-shopping process in a paragraph. Furthermore, there is a cartoon image of a gem at the right that needs to blend appropriately with the text. It’d be best to use wrap text for this since the image isn’t too large, and the wrapping of the text isn’t redundant as well. Mockup:
Note: These text-image integration was were made using Google Docs.
If this was added, then it’d improve my development experience because using images with chunks of text would be more streamlined and efficient. Just like the above use cases, developers can easily create elegant and dynamic UI with visual aid that suits the gaming experience. Again, I understand the complexity in relation to the current text system, however, just like RichText itself, this would be a well-appreciated breakthrough.
Thank you for reading,
And have an awesome day!
. Please implement.