💬rep-talkNPC

A versatile and customizable NPC Dialogue system for FiveM servers, offering fresh UI designs and highly configurable elements for a richer gaming experience. Built for the QBCore and ESX frameworks.

INSTALLATION

Download a release HERE or build the source code.

git clone https://github.com/BahnMiFPS/rep-talkNPC.git
cd rep-talkNPC/web
pnpm i
pnpm build

Drag and drop the folder into your project and ensure it in your FiveM server.cfg.

If your scripts is dependant of this resource, make sure you ensure rep-talkNPC BEFORE them!

UI Changes

• Navigate to the /web folder to start modifying the UI.

• Run pnpm start in your terminal to launch the UI in your local web environment.

• Post modifications, execute pnpm build followed by a script restart in-game to see your changes.

Script Usage

Examples

• Refer to cl_ex.lua where we've set up a /testnpc command enabling you to spawn a sample NPC on your server.

• We have also included the code snippet that we used in the feature video for your future reference.

Exports (Client Side)

exports['rep-talkNPC']:CreateNPC(npc, elements)

• npc: table (object)

  • npc: string

    • Npc name. Example: 'Messy Robaldo'

  • coords: vector4

    • NPC's coords

  • animName, animDist / animScenario: string

  • tag: string

    • Tag Name. Example: 'Construction Worker'

  • colorr?: string

    • Color for the NPC's name tag, in hex code

  • startMSG: string

    • First dialogue from NPC

• elements: table (object)

  • label: string

    • Option label display. Example: "I want to sign in"

  • shouldClose: boolean

    • Should the UI close after player choose this option?

  • action: function

    • A function to execute after this option was chosen.

---

exports['rep-talkNPC']:changeDialog(label, elements)

• label: string

  • The dialogue that should be updated

• elements: table (object)

  • label: string

    • Option label display. Example: "I want to sign in"

  • shouldClose: boolean

    • Should the UI close after player choose this option?

  • action: function

    • A function to execute after this option was chosen.

---

exports['rep-talkNPC']:updateMessage(label)

• label: string

  • Update the npc dialogue only.

TRIGGERS

From Client Side :

TriggerEvent('rep-talkNPC:client:close')

From Server Side :

TriggerClientEvent('rep-talkNPC:client:close', source)

• This event is used to shut down the dialogue.

EXAMPLE : rep-sanitation

-- below is what we used in the featured video for our sanitation job
function CreatePeds()
        Boss = exports['rep-talkNPC']:CreateNPC({
            npc = 's_m_y_garbage',
            coords = vector3(Config.BossLocation.x, Config.BossLocation.y, Config.BossLocation.z - 1.0),
            heading = Config.BossLocation.w,
            name = 'Brook Stream',
            animScenario = 'WORLD_HUMAN_CLIPBOARD',
            position = "Environmental Worker",
            color = "#00736F",
            startMSG = 'Hello, how can I assist you?'
        }, {
            [1] = {
                label = "How does this job work?",
                shouldClose = false,
                action = function()
                    exports['rep-talkNPC']:changeDialog({
                        label = "Hello, are you new here? I will guide you! \n \n First, you need to have a tablet. Then take the job here. \n \n You can work faster with your homies. You guys can go up to 4 people and will have to go to 2 districts in the city in one trip. \n \n Oh, a tip is that the food from Cafe Meow Uwu will help you stay alert to achieve better work efficiency.",
                        shouldClose = false,
                        elements = {
                            [1] = {
                                label = "I want to start working",
                                shouldClose = false,
                                action = function()
                                    if onDuty == false then
                                        if LocalPlayer.state.nghe == nil or LocalPlayer.state.nghe == "sani" then
                                            exports['rep-talkNPC']:updateMessage(
                                                "Now turn on your tablet to find or create a group for yourself!")
                                            Wait(1000)
                                            TriggerEvent('rep-talkNPC:client:close')
                                            TriggerEvent('rep-sanitation:client:duty')
                                        else
                                            Notification(Config.Lang['error_ownjob'].label,
                                                Config.Lang['error_ownjob'].type, Config.Lang['error_ownjob'].time)
                                        end
                                    else
                                        exports['rep-talkNPC']:updateMessage("You already have this job")
                                    end
                                end
                            },
                            [2] = {
                                label = "Oh, it doesn't seem to suit me",
                                shouldClose = true,
                                action = function()
                                end
                            }
                        }
                    })
                end
            },
            [2] = {
                label = "I want to take/quit the job",
                shouldClose = false,
                action = function()
                    if onDuty == true then
                        exports['rep-talkNPC']:updateMessage("It's sad to say goodbye to you")
                        Wait(2000)
                        TriggerEvent('rep-sanitation:client:offduty')
                        TriggerEvent('rep-talkNPC:client:close')
                    else
                        if LocalPlayer.state.nghe == nil or LocalPlayer.state.nghe == "sani" then
                            exports['rep-talkNPC']:updateMessage(
                                "Now turn on your tablet to find or create a group for yourself!")
                            Wait(2000)
                            TriggerEvent('rep-talkNPC:client:close')
                            TriggerEvent('rep-sanitation:client:duty')
                        else
                            Notification(Config.Lang['error_ownjob'].label, Config.Lang['error_ownjob'].type,
                                Config.Lang['error_ownjob'].time)
                        end
                    end
                end
            },
            [3] = {
                label = "I want to exchange recyclable materials",
                shouldClose = true,
                action = function()
                    TriggerEvent('rep-sanitation:client:tranfer')
                end
            },
            [4] = {
                label = "I'm just passing by",
                shouldClose = true,
                action = function()
                end
            }
        })
end