[SOLVED]Left Part Of Outlined Text Is Cut Off? (Screenshot & Source Code)

UnknownUser

Hi,

Almost done with the Godot game shell. We have an issue with outlined text. Sometimes the left part of outlined text is cut off?

Please see below screenshot and script source code. Any help would be appreciated, thanks!

Game project is on GitHub below: https://github.com/FallenAngelSoftware/Godot-SpaceSwap2

Jesse www.FallenAngelSoftware.com

SOURCE CODE IS BELOW:

func DrawText(var index, var text, var x, var y, var horizontalJustification, var fontSize, var scaleX, var scaleY, var rotation, var red, var green, var blue, var alpha, var outlineRed, var outlineGreen, var outlineBlue):
	Texts.TextImage.append(RichTextLabel.new())

	add_child(Texts.TextImage[index])

	var fontToUseIndex = 0
	if fontSize == 25:
		fontToUseIndex = 0
	elif fontSize == 60:
		fontToUseIndex = 1

	Texts.TextImage[index].add_font_override("normal_font", FontTTF[fontToUseIndex])

	Texts.TextImage[index].modulate = Color(red, green, blue, alpha)
	
	FontTTF[fontToUseIndex].outline_size = 3
	FontTTF[fontToUseIndex].outline_color = Color(outlineRed, outlineGreen, outlineBlue, alpha)

	Texts.TextImage[index].text = text

	var textWidth = Texts.TextImage[index].get_font("normal_font").get_string_size(Texts.TextImage[index].text).x
	var textHeight = Texts.TextImage[index].get_font("normal_font").get_string_size(Texts.TextImage[index].text).y

	Texts.TextImage[index].rect_global_position.x = x
	Texts.TextImage[index].rect_global_position.y = (y - (textHeight / 2))

	Texts.TextImage[index].set_size(Vector2(ScreenWidth, ScreenHeight), false)

	Texts.TextImage[index].rect_pivot_offset = Vector2((textWidth / 2), (textHeight / 2))

	Texts.TextImage[index].rect_scale = Vector2(scaleX, scaleY)

	Texts.TextImage[index].rect_rotation = rotation

	if horizontalJustification == 0:
		Texts.TextImage[index].ALIGN_LEFT
	elif horizontalJustification == 1:
		Texts.TextImage[index].ALIGN_CENTER
		Texts.TextImage[index].rect_global_position.x = ((VisualsCore.ScreenWidth/2) - (textWidth / 2))
	elif horizontalJustification == 2:
		Texts.TextImage[index].ALIGN_LEFT
		Texts.TextImage[index].rect_global_position.x = (VisualsCore.ScreenWidth - x - (textWidth))
	elif horizontalJustification == 4:
		Texts.TextImage[index].ALIGN_LEFT
		Texts.TextImage[index].rect_global_position.x = (x - (textWidth / 2))
	else:  Texts.TextImage[index].ALIGN_FILL

	Texts.TextIndex.append(index)
	Texts.TextScreenX.append(x)
	Texts.TextScreenY.append(y)
	Texts.TextHorizontalJustification.append(horizontalJustification)
	Texts.TextSize.append(fontSize)
	Texts.TextScaleX.append(scaleX)
	Texts.TextScaleY.append(scaleY)
	Texts.TextRotation.append(rotation)
	Texts.TextColorRed.append(red)
	Texts.TextColorGreen.append(green)
	Texts.TextColorBlue.append(blue)
	Texts.TextColorAlpha.append(alpha)
	Texts.TextOutlineRed.append(outlineRed)
	Texts.TextOutlineGreen.append(outlineGreen)
	Texts.TextOutlineBlue.append(outlineBlue)

	TextCurrentIndex+=1

	pass

TwistedTwigleg

Looking at the screenshot, I'd say it is probably because the outline extends the main font size and because the font snugly fits into the rectangle of the Control node, it is being cut off. I'd increase the width of the RichTextLabel slightly to account for the increase in width that the font outline brings and see if that fixes it. You could also try lower the font size slightly and see if that makes it fit into the width when there is a font outline.

UnknownUser

thanks for the reply. I tried some things, but still have above issue. perhaps you could look at code above and make a suggestion?

EDIT #1: Just have this issue with text and then game's shell is 100% complete http://fallenangelsoftware.com/stuff/files/SpaceSwap2/HTML5/index.html

TwistedTwigleg

You could try adding a margin to the text and see if that helps. It would push the text more inward, which would give the outline some room. The issue ultimately appears to be that the outline isn't being taken into account by the RichTextLabel's clipping code, which is causing it to be cut off. In your case, you probably want to add some to the left margin (documentation).

Another thing to try is disabling rect_clip_content by setting it to false. It is overriden to true by default by the RichTextLabel (documentation), but setting it to false should resolve the issue of the text being clipped.

UnknownUser

Texts.TextImage[index].rect_clip_content = false

worked, many thanks!