🧑SLEEK CHAR CREATOR

Here check the installation guide

To use this script, you also need the FORGE-MULTICHARACTER, both are purchased together so you should have no problem installing them together.

This script is compatible with ESX, QB, QBOX and Illenium.

This script is compatible with Quasar Inventory, QB Inventory and OX Inventory.

INSTALLATION GUIDE

ESX

1. Download from KEYMASTER and Unzip the forge-charcreator.pack.zip and place this folder in your server's resource folder.

2. Add the resource to your server start config: ensure forge-charcreator,the name of the folder must not be changed or the resource will not function correctly. It should be located just below your core.

3. Delete or remove from your resources folder any other CharCreator you have, such as esx_identity .

4. If you are ESX + Illenium you will also need to remove the following scripts: esx_skin, skinchanger. If you're using ESX + Default, do not delete this.

5. Clear the cache of your server and also of your own FiveM.

6. Reboot the entire server with the forge script well ensured in your server.cfg.

QB

1. Download from KEYMASTER and Unzip the forge-charcreator.pack.zip and place this folder in your server's resource folder.

2. Add the resource to your server start config: ensure forge-charcreator,the name of the folder must not be changed or the resource will not function correctly. It should be located just below your core.

3. Delete or remove from your resources folder any other CharCreator you have, such as qb_multicharacter.

4. If you want to use QB-Apartments: You must delete from qb-interior the line:

qb-interior/client/main.lua -> line 71 (This can vary depending on the version you have, so, it's better to directly search for these functions and comment them out):

TriggerEvent('qb-clothes:client:CreateFirstCharacter')

1. Clear the cache of your server and also of your own FiveM.

2. Reboot the entire server with the forge script well ensured in your server.cfg.

CONFIG

The following will explain all the settings, one of the most important things that I recommend you spend a few minutes to understand in order to offer your users the best possible experience.

In addition, inside CLIENT and SERVER you will have the files related to the frameworks, where you will have many open ESX and QB functions for you to adapt them to your framework needs.

If you use Illenium, remember to make sure that the illenium fxmanifest contains:

provides { "esx_skin", "skinchanger" }

CONFIG

If you use the latest update of the script it will automatically detect everything regarding Framework, Skin Manager and Identifier. Don't touch anything where it says "You don't need to touch this".

Config = {}
Config.Game = {}
Config.Game.database = {}
Config.UI = {}
Config.Game.Start = {}
Config.CC = {}
Config.CC.Camera = {}

--  ██████╗ ██████╗ ███╗   ██╗███████╗██╗ ██████╗ ██╗   ██╗██████╗  █████╗ ████████╗██╗ ██████╗ ███╗   ██╗
-- ██╔════╝██╔═══██╗████╗  ██║██╔════╝██║██╔════╝ ██║   ██║██╔══██╗██╔══██╗╚══██╔══╝██║██╔═══██╗████╗  ██║
-- ██║     ██║   ██║██╔██╗ ██║█████╗  ██║██║  ███╗██║   ██║██████╔╝███████║   ██║   ██║██║   ██║██╔██╗ ██║
-- ██║     ██║   ██║██║╚██╗██║██╔══╝  ██║██║   ██║██║   ██║██╔══██╗██╔══██║   ██║   ██║██║   ██║██║╚██╗██║
-- ╚██████╗╚██████╔╝██║ ╚████║██║     ██║╚██████╔╝╚██████╔╝██║  ██║██║  ██║   ██║   ██║╚██████╔╝██║ ╚████║
--  ╚═════╝ ╚═════╝ ╚═╝  ╚═══╝╚═╝     ╚═╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚═══╝                                                                                                 

Config.DEBUG = true -- This will activate debug mode, with a bunch of LOGs on F8 that will corroborate the script's operation. Enable it only in necessary cases

-- GENERAL:
Config.framework = GetResourceState('es_extended') == "started" and "ESX" or GetResourceState('qb-core') == "started" and "QB" or "CUSTOM" -- You don't need to touch this
Config.resource = nil -- Change this if your esx or qb has a custom resource name
Config.appearance = (GetResourceState("illenium-appearance") == "started" and "illenium" or "default") -- You don't need to touch this
Config.noClothing = false -- If you set this to true, players won't see the CLOTHES button when creating characters
Config.dateFormat = 'DD MMMM YYYY' -- Date format for the date of birth field
--[[
    ~id~        = character id (ESX) / citizenid (QBCore)
    ~license~   = license identifier
    ~steam~     = steam identifier
    ~discord~   = discord identifier 

    default:
        ESX: 'char~id~:~license~'
        QB:  '~id~'
]]
Config.identifier = Config.framework == 'ESX' and 'char~id~:~license~' or '~id~' -- You don't need to touch this
Config.Game.database.tool = "oxmysql" -- mysql-async / oxmysql
-- INTERFACE:
Config.UI.volume = 30 -- 0 - 100 
Config.lowPerformanceMode = false -- If you put true here. All UI animations will be removed, so there's no possible LAG. This lowers the aesthetics and beauty of the system.
Config.particles = true -- If you put false here, it means there will be no particles or dark background. If you think it looks too dark when creating a character, set it to false here. This lowers the aesthetics and beauty of the system.
Config.UI.color = { -- Here you can change the primary colour, which is blue, to the colour of your choice
    r = 0,
    g = 224,
    b = 255,
} 
-- GAME START
Config.Game.Start.Accounts = {
    money = 5000,               -- IMPORTANT!: Change to "cash" for QBCore or "money" for ESX
    bank = 0,
    black_money = 0
}
Config.Game.Start.Items = {
    ['phone'] = 1,              -- ['itemName'] = amount
    ['id_card'] = 1,            -- ['itemName'] = amount
    ['tosti'] = 3               -- ['itemName'] = amount
}
Config.Game.Start.Coords = vector4(-284.2856, 562.4627, 172.9182, 19.9895) -- The position where the player will spawn after the creation
Config.CC.spawn = vector4(-1037.6056, -2737.6169, 20.1693, 329.7833) -- The position where the player is during the char creation
-- CAMERAS 
Config.CC.Camera.offset = vector3(0, 2.5, 0.4) -- The offset the camera will have from Config.CC.spawn
Config.CC.Camera.settings = {}
Config.CC.Camera.settings = {
    head = {
        focus = 0.6, -- the z offset of the player position the camera will focus on
        fov = 30.0
    },
    ['upper-body'] = {
        focus = 0.5, -- the z offset of the player position the camera will focus on
        fov = 40.0
    },
    ['lower-body'] = {
        focus = -0.5, -- the z offset of the player position the camera will focus on
        fov = 30.0
    },
}

-- NATIONALITIES
Config.nationalities = { -- You can add or change the nationalities as you like, just add the flag SVG to ui / assets / svgs
    ['germany']         = "germany.svg",
    ['metherlands']     = "netherlands.svg",
    ['uk']              = "uk.svg",
    ['ukraine']         = "ukraine.svg",
    ['usa']             = "usa.svg",
    ['spain']           = "spain.svg",
    ['russia']          = "russia.svg",
    ['mexico']          = "mexico.svg",
    ['colombia']        = "colombia.svg",
    ['italy']           = "italy.svg",
    ['sweden']          = "sweden.svg",
    ['cuba']            = "cuba.svg",
    ['portugal']        = "portugal.svg",
    ['france']          = "france.svg",
    ['china']           = "china.svg",
    ['australia']       = "australia.svg",
    ['arabian']         = "arabian.svg",
    ['india']           = "india.svg",
    ['pakistan']        = "pakistan.svg",
}

Config.language = 'en'
Language = {}
Language.en = {
    ['gender']                  = "Gender",
    ['choose_gender']           = "Choose your Gender",
    ['parent_mother']           = "Mother",
    ['parent_father']           = "Father",
    ['dad']                     = "dad",
    ['mum']                     = "mum",
    ['similarity']              = "similarity",
    ['skin_tone']               = "Skin Tone",
    ['eye_color']               = "Eye Color",
    ['save_character']          = "Save Character",
    ['nationality']             = "Nationality",
    ['cant_leave_empty']        = "You cannot leave this step empty",
    ['name']                    = "Name",
    ['more_info']               = "More information",
    ['more_info_description']   = "Give us a little more information about your height and your date of birth",
    ['where_from']              = "Where are you from?",
    ['where_from_description']  = "This will greatly condition the attitude of your character",
    ['whats_your_name']         = "What's your name?",
    ['whats_your_name_desc']    = "In the name, only add characters and no more than 10. In the last name, only one last name.",
    ['first_name']              = "First Name",
    ['last_name']               = "Last Name",
    ['birthday']                = "Birthday",
    ['height']                  = "Height",
    ['final_step']              = "Final step",
    ['final_step_description']  = "Everything is ready. Check that you have not had any errors when filling in.",
    ['create_character']        = "CREATE NEW CHARACTER",
    ['age']                  = "Ageing",
    ['makeup']                  = "Makeup",
    ['makeup_color']            = "Makeup Color",
    ['blush']                   = "Blush",
    ['blush_color']             = "Blush Color",
    ['lipstick']                = "Lipstick",
    ['lipstick_color']          = "Lipstick Color",
    ['moles']                   = "Moles/Freckles",
    ['eyebrows']                = "Eyebrows",
    ['eyebrows_color']          = "Eyebrows Color",
    ['beard']                   = "Beard",
    ['beard_color']             = "Beard Color",
    ['mask']                    = "Mask",
    ['ears']                    = "Ears",
    ['hair']                    = "Hair",
    ['hair_color']              = "Hair Color",
    ['hair_color_2']            = "Secondary Hair Color",
    ['torso']                   = "Torso",
    ['tshirt']                  = "T-Shirt",
    ['decals']                  = "Decals",
    ['arms']                    = "Arms",
    ['pants']                   = "Pants",
    ['shoes']                   = "Shoes",
    ['bproof']                  = "Bullet Proof",
    ['chain']                   = "Chain",
    ['bags']                    = "Bag",
    ['helmet']                  = "Helmet",
    ['glasses']                 = "Glasses",
    ['watches']                 = "Watch",
    ['bracelets']               = "Bracelet",
    ['all_right']               = "All Right!",
    ['one_word_only']           = "Your name can only have 1 word",
    ['max_characters']          = "Maximum 20 characters are allowed",
    ['no_numbers']              = "You have added a number to your name",
    ['wrong_input']             = "Wrong Input",
    ['min_age']                 = "You must bbe at least 18 years old",
    ['min_size']                = "You cannot put measure less than 1 meter",
    ['max_size']                = "You cannot put measure more than 2 meter",
    ['nav_dna']                 = "DNA",
    ['nav_face']                = "FACE",
    ['nav_hair']                = "HAIR",
    ['nav_clothes']             = "CLOTHES"
}

Language.de = {
    ['gender']                  = "Geschlecht",
    ['choose_gender']           = "Wähle dein Geschlecht",
    ['parent_mother']           = "Mutter",
    ['parent_father']           = "Vater",
    ['dad']                     = "Mutter",
    ['mum']                     = "Vater",
    ['similarity']              = "gemeinsamkeit",
    ['skin_tone']               = "Hautfarbe",
    ['eye_color']               = "Augenfarbe",
    ['save_character']          = "Character speichern",
    ['nationality']             = "Nationalität",
    ['cant_leave_empty']        = "Du kannst diesen schritt nicht auslassen.",
    ['name']                    = "Name",
    ['more_info']               = "Weitere informationen",
    ['more_info_description']   = "Gib uns etwas mehr informationen über deine größe und dein Geburtsdatum",
    ['where_from']              = "Von wo kommst du?",
    ['where_from_description']  = "Dies soll das verhalten deinen Characters beeinflussen.",
    ['whats_your_name']         = "Wie lautet dein Name?",
    ['whats_your_name_desc']    = "Dein Name darf nur aus Buchstaben bestehen und nicht länger als 10 Zeichen sein. Dein Nachname sollte aus nicht mehr als 1 Namen bestehen.",
    ['first_name']              = "Vorname",
    ['last_name']               = "Nachname",
    ['birthday']                = "Geburtstag",
    ['height']                  = "Größe",
    ['final_step']              = "Letzer schritt",
    ['final_step_description']  = "Alles ist fertig. Überprüfe deine Angaben.",
    ['create_character']        = "CHARCTER ERSTELLEN",
    ['age']                     = "Alterung",
    ['makeup']                  = "Makeup",
    ['makeup_color']            = "Makeup Farbe",
    ['blush']                   = "Blush",
    ['blush_color']             = "Blush Color",
    ['lipstick']                = "Lipenstift",
    ['lipstick_color']          = "Lipenstift Farbe",
    ['moles']                   = "Muttermale/Sommersprossen",
    ['eyebrows']                = "Augenbrauen",
    ['eyebrows_color']          = "Augenbrauen Farbe",
    ['beard']                   = "Bart",
    ['beard_color']             = "Bart Farbe",
    ['mask']                    = "Maske",
    ['ears']                    = "Ohren",
    ['hair']                    = "Haare",
    ['hair_color']              = "Haar Farbe",
    ['hair_color_2']            = "Sekundäre Haar Farbe",
    ['torso']                   = "Torso",
    ['tshirt']                  = "T-Shirt",
    ['decals']                  = "Decals",
    ['arms']                    = "Arme",
    ['pants']                   = "Hose",
    ['shoes']                   = "Schuhe",
    ['bproof']                  = "Schussichere Weste",
    ['chain']                   = "Ketten",
    ['bags']                    = "Rucksack",
    ['helmet']                  = "Helm",
    ['glasses']                 = "Brille",
    ['watches']                 = "Uhr",
    ['bracelets']               = "Armband",
    ['all_right']               = "ok!",
    ['one_word_only']           = "Dein Name darf nur aus 1 Wort bestehen.",
    ['max_characters']          = "Dein Name darf nicht mehr als 20 Zeichen lang sein.",
    ['no_numbers']              = "Dein Name darf keine Zahlen enthalten.",
    ['wrong_input']             = "Falsche Eingabe.",
    ['min_age']                 = "Du musst mindestens 18 Jahre alt sein.",
    ['min_size']                = "Du kannst nicht kleiner als 1 meter sein.",
    ['max_size']                = "Du kannst nicht größer als 2 meter sein.",
    ['nav_dna']                 = "DNA",
    ['nav_face']                = "GESICHT",
    ['nav_hair']                = "HAARE",
    ['nav_clothes']             = "KLEIDUNG"
}

OPEN

Open = {}

---called when a player first joins and should get his start items.
---@param serverId integer the serverId of the player who should get the start items
---@param items table a key-value table, containing itemname as key and amount as value (e.g. {"water"=2} => should give the player two water)
---@return boolean used true if this function is used
function Open:giveStartItems(serverId, items)
    -- QUASAR:
    --for item, count in pairs(items) do
    --    exports['qs-inventory']:AddItem(serverId, item, count)
    --end

    -- OX:
    -- for item, count in pairs(items) do
    --     exports.ox_inventory:AddItem(serverId, item, count)
    -- end

    return false -- IMPORTANT: change to 'true' if you are using this function
end

---called when a player created a new character
---@param serverId integer the players serverId
function Open:onCharacterCreated(serverId)
    return false -- IMPORTANT: change to 'true' if you are using this function
end

---Should call an export on the hud to hide the hud
---@param bool boolean if set to true, the hud should be hidden, if not the hud should be visible
function Open:hideHud(bool) end

---Forces the UI to stay hidden or not<br>
---can be used with `exports["forge-charcreator"]:forceHide(true)` or `exports["forge-charcreator"]:forceHide(false)`
---@param hide boolean if set to true the UI will be hidden, if not the UI will be visible, IF the UI would be visibile in the current situation
exports("forceHide", function(hide)
    UI.forceHide(hide)
end)

If you want to edit the aesthetics or design. You have the HTML open so you can modify the style and everything as you want.

The script is RESPONSIVE for all resolutions as well.