Fix size of label to maintain centralized

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By FSampaio

Hi, first of all, I am sorry if this is already taken care of in another discussion, but I have searched with no success for the answer to my problem.

I have a label where I insert text via code.
The text comes from an array of strings with each string varying its size.
If the player presses a next button, it replaces the string displayed in the label for another string from the array.

My problem is that the first string is displayed centralized, but, when the next string is of a different, it is displayed a little to the right (not centralized anymore).
And then, if the string after that is smaller, it is not displayed in the center anymore like the first one. Its as if it’s displayed a few inches to the right. So, the position of the strings doesn’t seem to start off from the center of the label. It varies depending on the string that came before it.

How do I fix this? I want to display the strings as the label’s text always starting off from the center and filling the spaces in both directions if its bigger, so that it remains centered.

Hope I could make myself clear.

:bust_in_silhouette: Reply From: Oberon

Possibly I found a better way to achieve this, that is:

  1. Put the Label into a CenterContainer
  2. Set the container growing in both direction

Original reply

I’ve got the same problem in Label node usage.

I attempted to make a label that holds an integer and is set to NOT clip or autowrap the text (since I insist to display the integer in one line).

Also this Labelis set to be:

  • Horizontal grow direction is both.
  • Margins are all 0
  • Pivot has NO offset and just remained (0,0)
  • HAlign & VAlign are both center

I found that whenever the text is getting longer, the rect will be expand to fit the max length of the new text, in which the expansion obeys the grow direction, that is, the Label expands in both direction.

However, it’s not vice versa when the text is getting shorter, whence the Label just kept its dimension without any shrinkage.

The reason is that Label’s position and dimension is actually determined by rect_position and rect_size (they both are Vector2s in fact, named rect_* though). The expansion did fixed both value - left pushed the rect_position and right pushed the rect_size.

There’s a way to let the expanded rect_size to fit the shorter text, just reset it to zero:

rect_size = Vector2.ZERO

But that does NOT affect the rect_position(this vector is always the top-left corner of the rect), so after that you’ll find the rect shrinked from the end with the left side not moved.

In that case we need to fix the position too:

# call this whenever you would like to change the text
func set_text(text:String):
		var center:Vector2 = rect_position - rect_size/2
		self.text = text
		rect_size = Vector2.ZERO
		rect_position = center - rect_size/2 # no need to worry Vector2.ZERO, the rect_size will be clamped to the minimal size

That did work. But I also wonder if there’s a better or more convenient way to achieve this more easily.

1 Like