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

JeZxLeeJeZxLee Posts: 67Member
edited July 30 in Programming

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

Comments

  • TwistedTwiglegTwistedTwigleg Posts: 2,814Admin

    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.

  • JeZxLeeJeZxLee Posts: 67Member
    edited July 30

    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

  • TwistedTwiglegTwistedTwigleg Posts: 2,814Admin

    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.

  • JeZxLeeJeZxLee Posts: 67Member

    Texts.TextImage[index].rect_clip_content = false

    worked, many thanks!

Leave a Comment

BoldItalicStrikethroughOrdered listUnordered list
Emoji
Image
Align leftAlign centerAlign rightToggle HTML viewToggle full pageToggle lights
Drop image/file