Draw Text Colors

Draw Text Colors lets you type a string with GTA V formatting codes (~r~, ~h~, ~n~, ~INPUT_CONTEXT~ and friends) and see how it looks as on-screen text, a feed notification or a help text box. A second section does the same for the caret codes (^1, ^*) of the FiveM chat. Every preview comes with a Lua snippet.

What it is for

Testing text formatting in game means a restart or a resource reload for every tweak. Here you see the colours, bold parts, line breaks and key prompts as you type, then copy code that draws the same thing with the right natives.

Quick start

1. Type in the Text box. The page starts with a sample that uses colours, a key prompt, a ~a~ name and a ~1~ number.
2. Click the colour buttons under the box (or any card in Reference) to insert a code at the cursor.
3. Pick the output style with the tabs above the preview: DrawText, Notification or Help text.
4. If your text has ~a~ or ~1~, fill the value fields that appear under the text box.
5. Copy drawtext.lua, notify.lua or helptext.lua.

The preview uses system fonts in place of the game fonts, so it is close but not pixel exact.

Tilde codes

A colour stays active until the next colour code. The HUD colours tab lists 32 ~HUD_COLOUR_NAME~ tokens (for example ~HUD_COLOUR_FREEMODE~, ~HUD_COLOUR_REDLIGHT~) with their RGB values, and they work inline the same way.

The Buttons tab lists ~INPUT_*~ tokens such as ~INPUT_CONTEXT~, ~INPUT_ENTER~, ~INPUT_DETONATE~ and ~INPUTGROUP_MOVE~. In game they render the key the player has bound (or the pad button), so a prompt stays correct on custom bindings. The preview shows the default keyboard key.

DrawText options

Shown only on the DrawText tab:

Snippets

DrawText is drawn every frame inside a thread:

CreateThread(function()
    while true do
        Wait(0)
        SetTextFont(4)
        SetTextScale(0.0, 0.5)
        SetTextColour(255, 255, 255, 255)
        SetTextOutline()
        SetTextCentre(true)
        BeginTextCommandDisplayText("STRING")
        AddTextComponentSubstringPlayerName("~b~Mission~s~ started.")
        EndTextCommandDisplayText(0.5, 0.8)
    end
end)

A notification is a single call:

BeginTextCommandThefeedPost("STRING")
AddTextComponentSubstringPlayerName("~g~Saved~s~ your outfit.")
EndTextCommandThefeedPostTicker(false, true)

Help text has to be called every frame while it should stay up:

BeginTextCommandDisplayHelp("STRING")
AddTextComponentSubstringPlayerName("Press ~INPUT_CONTEXT~ to open the shop")
EndTextCommandDisplayHelp(0, false, true, -1)

When the text contains ~a~ or ~1~, the snippet registers it with AddTextEntry("FIVEMAD_TEXT", ...) and adds one component per placeholder, in order, with the values you typed.

FiveM chat colours

The default chat resource does not read tilde codes. It uses caret codes:

Type an Author and Text, click the colour swatches (which also copy the code) or format buttons, and copy chat.lua:

TriggerEvent("chat:addMessage", {
    color = { 255, 255, 255 },
    multiline = true,
    args = { "Dispatch", "^1[Police]^0 Suspect spotted near ^3Legion Square^0." }
})

The colours shown are the stock chat stylesheet defaults. A custom chat theme can change them.

Common mistakes

• Using ~r~ in chat messages or ^1 in DrawText. They do not mix.
• Forgetting ~s~ after a coloured word, so the rest of the line stays coloured.
• Showing help text once. It disappears the next frame unless you call it in a loop.

Related tools

• Controls Reference
• Warning Screen Buttons
• Blip, Marker & Checkpoint Browser
• Scaleform Functions