Custom scrolling text in GTA V.

README.md

Scrolling text

Made by Vespura Note that this is not the best way to acchieve this effect. Rather it's a simple solution that works. You can view a preview of it here: (note that the numbers show above the scrolling text are just there for demonstration purposes, they won't be there if yo use the example code from the file above) If the link above doesn't work, copy it from here: https://www.devtesting.pizza/hi/i/01ed834.mp4

client.lua

-----[[  SCROLLING TEXT EXAMPLE BY VESPURA  ]]
-----[[ NOTE THIS IS NOT THE MOST EFFICIENT ]]
-----[[  WAY TO CREATE THIS EFFECT, BUT IT  ]]
-----[[    SEEMS TO WORK ALRIGHT FOR NOW.   ]]


--[[CONFIG PART]]
-- Enter your message here
local message = "Hello world this is a test message."
-- Enter the amount/length of characters to be shown at a time.
-- If the length is longer than the amount of characters in the message
-- then the actual lenght of the message will be used instead.
local length = 20
-- Set the scrolling delay. The delay is in ms.
-- Default of 300ms will update/scroll the visible area every 300ms.
local delay = 300


--[[CODE PART]]
-- Create a text variable to store the "visible" part of the message in.
local text = message

Citizen.CreateThread(function()
    -- The string will always start at 1.
    local start = 1
    -- Calculate the stopping position based on the length set above.
    local stop = start + length
    

    -- This is where the loop starts to calculate the "visible" message 
    -- every 300ms
    while true do
        -- Store the message length in a new variable.
        local msgLength = string.len(message)
        -- If the length above is the same or more than the message length
        -- then set the stop position to the message length instead.
        if length >= msgLength then stop = msgLength end

        -- Update the visible message with the new start/stop variables.
        text = string.sub(message, start, stop)
        -- Add 1 to both the start and stop variables (visible area moves to the right)
        -- thus creating a "movement" effect to the left.
        start = start + 1
        stop = stop + 1
        
        -- If the stop position has reached the end of the message, set it back to 1
        if stop > string.len(message) then
            stop = 1
        end
        -- Then if the stop position is before the start position, we need to
        -- change the visible area by getting 2 parts of the message separately.
        if stop < start then
            -- First we get the area from start-end of the message, after that we
            -- append the beginning of the original message and add a space in between.
            text = string.sub(message, start, string.len(message)) .. " " .. string.sub(message, 1, stop)
        end

        -- If the start value is greater than the message length,
        -- then set it back to 1.
        if start > string.len(message) then
            start = 1
        end

        -- Set the update delay
        Citizen.Wait(delay)
    end
end)

-- Text draw loop, you can replace this with your own code, just get the
-- global variable callled "text" and put that as your message.
-- If you want to update the original line simply change the "message" variable
-- to whatever you need it to be.
Citizen.CreateThread(function()
    while true do
        -- Draw every frame.
        Citizen.Wait(0)
        -- Color: white, 100% transparency.
        local color = {255, 255, 255, 255}
        SetTextColour(table.unpack(color))
        -- This font is nice
        SetTextFont(4)
        -- Size can be anything, around 0.38-0.50 seems good for most cases.
        local size = 0.45
        SetTextScale(1.0, size)
        -- Text justification set to 1 (left align)
        SetTextJustification(1)
        -- Add an outline to the text.
        SetTextOutline()
        -- Position to draw the text (draw origin is top left of the text)
        -- 0.5 and 0.5 for x and y draw the origin in the center of the screen.
        local posx = 0.5
        local posy = 0.5

        -- Setup the text, add it to be displayed and draw it at posx and posy.
        BeginTextCommandDisplayText("STRING")
        AddTextComponentSubstringPlayerName(text)
        EndTextCommandDisplayText(posx, posy)
    end
end)