• 🏆 Texturing Contest #33 is OPEN! Contestants must re-texture a SD unit model found in-game (Warcraft 3 Classic), recreating the unit into a peaceful NPC version. 🔗Click here to enter!
  • It's time for the first HD Modeling Contest of 2024. Join the theme discussion for Hive's HD Modeling Contest #6! Click here to post your idea!

UI: TEXT, STRING and Font

Frames of Type TEXT are used in 2 cases: Case 1 display Text on the screen. Case 2: Style the displayed Text of a more advanced FrameType like a TEXTBUTTON or a EDITBOX. In case 2 the TEXT-Frame is strong binded Frame child. (except for TEXTAREA).

Such a styling is done in fdf and each FrameType supporting this behaviour has a keyword to setup such a styling TEXT-Frame:
ButtonText
PopupTitleFrame

FrameFont
Text sets

The SimpleFrame world displays text over String-children.
Font
TextLength
NormalText
DisabledText
HighlightText

Alignment

TextAlignment is only important when an text is given a rect. By giving a TEXT-Frame a rect the text will be splitted in multiple lines if the text can not be displayed in one line. A TEXT-Frame uses a rect either by Setting 2 diagonal arranged Points or 1 Point + size. TEXT can be given a TextAlignment either by fdf or by Code. Using Alignment text can be positionated in a given rect. The default is TOP LEFT. inside Fdf the Horzion and vertical alignment is seperated:
FontJustificationH JUSTIFYCENTER,
FontJustificationV JUSTIFYMIDDLE,

in Code it is one native:
BlzFrameSetTextAlignment takes framehandle frame, textaligntype vert, textaligntype horz

vertical

TEXT_JUSTIFY_TOP
TEXT_JUSTIFY_MIDDLE
TEXT_JUSTIFY_BOTTOM

horizontal

TEXT_JUSTIFY_LEFT
TEXT_JUSTIFY_CENTER
TEXT_JUSTIFY_RIGHT

When an text is given only a Point, it will be a single line text. In such a case the type of point used can defines the direction the text will extend to with having more text chars.
With TOP, CENTER and BOTTOM the text will extend equal to both sides, the given point is the center.<|>
With TOPLEFT, LEFT and BOTTOMLEFT the text will extend to the right. |>
With RIGHT, TOPRIGHT and RIGHT the text will extend to the left. <|
This can be important when having a TEXT-Frame near the 4:3 border, when the text expands into the 16:9 area a part of the text of the TEXT-Frame is not displayed.

In the Image the BACKDROP has an bigger size then the TEXT-Frames so one can see the rects border and text clearly.
Text Justify.jpg
This code creates the shown image
Lua:
TimerStart(CreateTimer(),0,false, function()
    --the displayed texts
    local texts = {
        "TOP LEFT",
        "TOP Center",
        "TOP RIGHT",
        "Middle LEFT",
        "Middle Center",
        "Middle RIGHT",
        "Bottom LEFT",
        "Bottom Center",
        "Bottom RIGHT"
    }
    --the text justifiers
    local justify = {
        {TEXT_JUSTIFY_TOP, TEXT_JUSTIFY_LEFT},
        {TEXT_JUSTIFY_TOP, TEXT_JUSTIFY_CENTER},
        {TEXT_JUSTIFY_TOP, TEXT_JUSTIFY_RIGHT},
        {TEXT_JUSTIFY_MIDDLE, TEXT_JUSTIFY_LEFT},
        {TEXT_JUSTIFY_MIDDLE, TEXT_JUSTIFY_CENTER},
        {TEXT_JUSTIFY_MIDDLE, TEXT_JUSTIFY_RIGHT},
        {TEXT_JUSTIFY_BOTTOM , TEXT_JUSTIFY_LEFT},
        {TEXT_JUSTIFY_BOTTOM , TEXT_JUSTIFY_CENTER},
        {TEXT_JUSTIFY_BOTTOM , TEXT_JUSTIFY_RIGHT}
    }
 
    local back = BlzCreateFrame("QuestButtonBaseTemplate",BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0),0, 0)
    BlzFrameSetSize(back, 0.28, 0.28)
    BlzFrameSetAbsPoint(back, FRAMEPOINT_CENTER, 0.4, 0.3)

    for index = 1, 9 do
        local textFrame = BlzCreateFrameByType("TEXT", "", back,"",0)
        BlzFrameSetAbsPoint(textFrame, FRAMEPOINT_CENTER, 0.4, 0.3)
        BlzFrameSetSize(textFrame, 0.25, 0.25)
        BlzFrameSetTextAlignment(textFrame, justify[index][1], justify[index][2])
        BlzFrameSetText(textFrame, texts[index])
    end
end)

Code:
Frame "TEXT" "EscMenuButtonTextTemplate" {
    DecorateFileNames, //Lookup Files in a StringList here "EscMenuTextFont"
    FrameFont "EscMenuTextFont", 0.013, "",
    FontJustificationH JUSTIFYCENTER,
    FontJustificationV JUSTIFYMIDDLE,
    FontJustificationOffset 0.0 -0.002,
    FontFlags "FIXEDSIZE",
    FontColor 0.99 0.827 0.0705 1.0,
    FontHighlightColor 1.0 1.0 1.0 1.0,
    FontDisabledColor 0.5 0.5 0.5 1.0,
    FontShadowColor 0.0 0.0 0.0 0.9,
    FontShadowOffset 0.002 -0.002,
}
FontColor
Red Green Blue Alpha. It is the Color used when the TextFrame is not highlighted nor disabled.
FontHighlightColor Displayed when in currenc Focus or hovered whne beeing text of a button.
FontDisabledColor when disalbed, having None will Display normal one even when disabled.

FontShadow
FontShadowColor 0.0 0.0 0.0 0.9,
FontShadowOffset 0.002 -0.002,
The last argument Alpha can be skiped in fdf.

One can also just create a TEXT-Frame without any FDF using BlzCreateFrameByType
Lua:
TimerStart(CreateTimer(),0,false, function()
    local textFrame = BlzCreateFrameByType("TEXT", "", BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0), "", 0)
    BlzFrameSetAbsPoint(textFrame, FRAMEPOINT_CENTER, 0.4, 0.3)
    BlzFrameSetText(textFrame, "Test Text")
end)


Creates an TEXT Frame and loops all Alignments, for some reason only updates when the mouse enters/Leaves the space taken by the TEXT
Lua:
TimerStart(CreateTimer(),0,false, function()
    print("Start")
local justify = {
        {TEXT_JUSTIFY_TOP, TEXT_JUSTIFY_LEFT},
        {TEXT_JUSTIFY_TOP, TEXT_JUSTIFY_CENTER},
        {TEXT_JUSTIFY_TOP, TEXT_JUSTIFY_RIGHT},
        {TEXT_JUSTIFY_MIDDLE, TEXT_JUSTIFY_LEFT},
        {TEXT_JUSTIFY_MIDDLE, TEXT_JUSTIFY_CENTER},
        {TEXT_JUSTIFY_MIDDLE, TEXT_JUSTIFY_RIGHT},
        {TEXT_JUSTIFY_BOTTOM , TEXT_JUSTIFY_LEFT},
        {TEXT_JUSTIFY_BOTTOM , TEXT_JUSTIFY_CENTER},
        {TEXT_JUSTIFY_BOTTOM , TEXT_JUSTIFY_RIGHT}
    }
    BlzLoadTOCFile("war3mapImported\\MySimpleButton.toc")
    
    local parent = BlzGetOriginFrame(ORIGIN_FRAME_GAME_UI, 0)
    local frame = BlzCreateFrameByType("TEXT", "", parent, "", 0)
    BlzFrameSetAbsPoint(frame, FRAMEPOINT_TOPLEFT, 0.05, 0.55)
    local text = "Warcraft III: Reign of Chaos is a computer game released by Blizzard Entertainment in 3 July 2002.[1] It is a real-time strategy computer game,[1] the second sequel to Warcraft: Orcs & Humans and the third game set in the Warcraft universe."
    text = text .." As such, it is usually referred to as Warcraft III, often abbreviated to WC3 or WCIII. Warcraft III is also considered to be one of Canada's national sports (along with hockey and lacrosse), due to the high level of top WCIII gamers that come from Canada and due to the occasional televised broadcast of the game, especially in British Columbia. The demo that was once available on Blizzard's website is no more; although the demo can still be downloaded from available third parties such as the Internet Archive.[2]"
    BlzFrameSetSize(frame, 0.4, 0.4)
    BlzFrameSetText(frame, text)
 local int = 0
 TimerStart(CreateTimer(), 1, true, function()
  int = int + 1
  if int > #justify then int = 1 end
         BlzFrameSetTextAlignment(frame, justify[int][1], justify[int][2])
  BlzFrameSetVisible(frame, false)
  BlzFrameSetVisible(frame, true)
 end)
    print("Done")
end)

Attachments

  • Text Justify.jpg
    Text Justify.jpg
    58.2 KB · Views: 5,714
Last edited:
Top