Showing multiple text colors for TextLabels?

I am trying to create a Kill Log for my game that would look like the following:KillLog
As you can see, the text is all in one line and the two names have different text colors. The only problem is, I have no idea how I would achieve this.

Centering everything is the only way I see this being done, but as you can see in the picture below this is much different from the picture above and not at all what I am trying to accomplish:
KillLogBad

I am trying to make it seem as if it were one line of text, pushed to the right, with different colors for each of the three parts. I can’t figure out how I would properly space the TextLabels in order to make it show so seamlessly. If you have any ideas to achieve this, please let me know!

1 Like

You can use multiple TextLabels and position them accordingly basing on their TextBounds property.

2 Likes

Personally, I prefer the second version. Having them set like that actually improves UX since names and weapons are always going to be found in the same place.

Regardless, that’s not what you asked.

The simplest way to accomplish what you’re asking:

Frame with a UIListLayout in it, then 3 TextLabels each sized to fit the text inside them. The layout object will put the labels where you want.

Make sure to set it to horizontal, and make sure you set LayoutOrders for each label.

3 Likes

I was already using UIListLayout in the way you specified, all I needed to know how to do was properly size the text labels. Thank you for the help! @Amiaa16 @boatbomber

You’ll want to use this:
https://developer.roblox.com/en-us/api-reference/function/TextService/GetTextSize

Computes the Vector2 dimensions (in pixels) that will be taken up with text when using the specified formatting parameters and size constraints

Use the resulting Vector2 to determine the size of the TextLabel!

1 Like

@Defaultio actually made a module that allows you to do this. Quite sure it incoroporates the method that @Amiaa16 mentioned.

1 Like