ब्लॉग पर वापस
Tutorial8 मिनट पढ़ें

FiveM कैरेक्टर क्रिएशन स्क्रीन: UI और स्क्रिप्टिंग गाइड

एक शानदार FiveM चरित्र निर्माण स्क्रीन डिजाइन करें। चेहरे के नियंत्रण, कपड़े, पृष्ठभूमि दृश्य और सर्वश्रेष्ठ मुफ्त और प्रीमियम चरित्र निर्माता।

Agency Scripts

Agency Scripts के संस्थापक और प्रमुख डेवलपर

रोलप्ले में कैरेक्टर क्रिएशन क्यों महत्वपूर्ण है

चरित्र निर्माण वह पहला इंटरैक्टिव क्षण है जो कोई खिलाड़ी आपके FiveM रोलप्ले सर्वर पर अनुभव करता है। यह आगे आने वाली हर चीज़ के लिए टोन सेट करता है। एक परिष्कृत, इमर्सिव चरित्र निर्माता नए खिलाड़ियों को बताता है कि आपका सर्वर पेशेवर तरीके से बनाया गया है और उनके समय में निवेश के लायक है। एक बेसिक या बग्गी चरित्र निर्माता उन्हें सीधे सर्वर ब्राउज़र की ओर भेजता है जो विकल्प खोज रहे होते हैं। पहली छाप से आगे, चरित्र निर्माता उस दृश्य पहचान को परिभाषित करता है जो प्रत्येक खिलाड़ी अपने पूरे रोलप्ले अनुभव के दौरान रखता है। यह विरासत मिश्रण, चेहरे की विशेषताएं, बालों की शैली, कपड़े, और नाम और जन्म तिथि जैसे जीवनी विवरण निर्धारित करता है। इसे सही बनाने का मतलब है एक ऐसा सिस्टम बनाना जो GTA V के मूल उपस्थिति सिस्टम के साथ संवाद करता है, विकल्पों को एक सहज NUI इंटरफ़ेस के माध्यम से प्रस्तुत करता है, चयन को डेटाबेस में स्थायी बनाता है, और हर बार खिलाड़ी के स्पॉन होने पर उन्हें विश्वसनीय रूप से लोड करता है।

GTA V के पेड अपीयरेंस सिस्टम को समझना

GTA V एक हेरिटेज-आधारित उपस्थिति प्रणाली का उपयोग करता है जहाँ एक कैरेक्टर का चेहरा दो माता-पिता के मॉडलों से मिश्रित होता है। 46 संभावित माताएं और पिता होते हैं, जिनमें से प्रत्येक के चेहरे की संरचना अलग होती है। SetPedHeadBlendData native इस मिश्रण को नियंत्रित करता है, 0.0 से 1.0 के बीच आकार और त्वचा मिश्रण मान स्वीकार करता है जो निर्धारित करते हैं कि चरित्र प्रत्येक माता-पिता से कितना मिलता-जुलता है। विरासत से परे, खेल 20 ओवरले श्रेणियां प्रदान करता है SetPedHeadOverlay दाग, चेहरे के बाल, भौंहें, उम्र बढ़ना, मेकअप, और त्वचा क्षति जैसी विशेषताओं को कवर करता है। प्रत्येक ओवरले का अपना अपारदर्शिता मान होता है और इसे स्वतंत्र रूप से रंगीन किया जा सकता है SetPedHeadOverlayColor। बाल अलग से संभाले जाते हैं SetPedComponentVariation मॉडल के लिए और SetPedHairColor रंग और हाइलाइट्स के लिए। आंखों का रंग उपयोग करता है SetPedEyeColor 0 से 31 तक मानों के साथ। इन नेटिव्स को समझना आवश्यक है क्योंकि आपकी NUI इंटरफ़ेस को उपयोगकर्ता-अनुकूल स्लाइडर और चयनकर्ताओं को इन विशिष्ट फ़ंक्शन कॉल्स से मैप करना होता है।

-- client/appearance.lua
function ApplyAppearance(ped, data)
    -- Heritage blend (mother, father, shape mix, skin mix)
    SetPedHeadBlendData(ped,
        data.mother, data.father, 0,
        data.mother, data.father, 0,
        data.shapeMix, data.skinMix, 0.0,
        false
    )

    -- Face features (-1.0 to 1.0 for each of 20 features)
    for i = 0, 19 do
        SetPedFaceFeature(ped, i, data.features[i] or 0.0)
    end

    -- Overlays (blemishes, beard, eyebrows, aging, makeup, etc.)
    for i = 0, 12 do
        local overlay = data.overlays[i] or {style = 0, opacity = 0.0}
        SetPedHeadOverlay(ped, i, overlay.style, overlay.opacity)
        if overlay.color then
            SetPedHeadOverlayColor(ped, i, overlay.colorType or 1,
                overlay.color, overlay.secondColor or overlay.color)
        end
    end

    -- Hair
    SetPedComponentVariation(ped, 2, data.hair or 0, 0, 2)
    SetPedHairColor(ped, data.hairColor or 0, data.hairHighlight or 0)

    -- Eye color
    SetPedEyeColor(ped, data.eyeColor or 0)
end

NUI इंटरफ़ेस बनाना

NUI (Natural User Interface) वह HTML, CSS, और JavaScript ओवरले है जिसके साथ खिलाड़ी अपने चरित्र का निर्माण करते समय इंटरैक्ट करते हैं। एक अच्छी डिज़ाइन किया गया चरित्र निर्माता प्रक्रिया को तार्किक चरणों में विभाजित करता है: पहले जीवनी संबंधी जानकारी, फिर विरासत चयन, चेहरे की विशेषताएं, चेहरे के बाल और मेकअप जैसे ओवरले, बालों की स्टाइलिंग, और अंत में कपड़े। प्रत्येक चरण को चरित्र मॉडल पर वास्तविक समय पूर्वावलोकन अपडेट दिखाना चाहिए ताकि खिलाड़ी देख सकें कि उनके विकल्प कैसे दिखते हैं। टैब्ड या विज़ार्ड-शैली लेआउट का उपयोग करें ताकि खिलाड़ी एक बार में दर्जनों विकल्पों से अभिभूत न हों। रेंज स्लाइडर निरंतर मानों जैसे आकार मिश्रण और चेहरे की विशेषताओं के लिए अच्छा काम करते हैं, जबकि ग्रिड चयनकर्ता थंबनेल पूर्वावलोकन के साथ बेहतर काम करते हैं जैसे हेयरस्टाइल और कपड़ों के आइटम के लिए। प्रत्येक परिवर्तन को क्लाइंट स्क्रिप्ट को भेजें fetch या NUI संदेश प्रणाली ताकि ped तुरंत अपडेट हो जाए।

<!-- nui/index.html (simplified structure) -->
<div id="creator" class="creator-wrapper">
  <div class="steps-nav">
    <button data-step="bio" class="active">Identity</button>
    <button data-step="heritage">Heritage</button>
    <button data-step="features">Features</button>
    <button data-step="overlays">Appearance</button>
    <button data-step="hair">Hair</button>
    <button data-step="clothing">Clothing</button>
  </div>

  <div class="step-content" id="step-heritage">
    <label>Mother</label>
    <input type="range" id="mother" min="0" max="45" value="0">
    <label>Father</label>
    <input type="range" id="father" min="0" max="45" value="0">
    <label>Resemblance (Shape Mix)</label>
    <input type="range" id="shapeMix" min="0" max="100" value="50">
    <label>Skin Tone (Skin Mix)</label>
    <input type="range" id="skinMix" min="0" max="100" value="50">
  </div>
</div>

<script>
document.querySelectorAll('input[type="range"]').forEach(slider => {
  slider.addEventListener('input', () => {
    fetch('https://myresource/updateAppearance', {
      method: 'POST',
      body: JSON.stringify({
        type: slider.id,
        value: parseFloat(slider.value)
      })
    });
  });
});
</script>

चरित्र पूर्वावलोकन के लिए कैमरा सिस्टम

एक समर्पित कैमरा सिस्टम एक परिष्कृत किरदार निर्माण अनुभव के लिए महत्वपूर्ण है। खिलाड़ियों को विरासत मिश्रण और ओवरले समायोजित करते समय चेहरे की विशेषताओं के क्लोज़-अप दृश्य, बाल और ऊपरी शरीर के कपड़ों के लिए मध्यम शॉट, और पैंट और जूतों के लिए पूर्ण शरीर दृश्य देखने की आवश्यकता होती है। एक कैमरा नियंत्रक लागू करें जो सक्रिय निर्माण चरण के आधार पर पूर्वनिर्धारित स्थानों के बीच चिकनी इंटरपोलेशन करता है। उपयोग करें CreateCam के साथ DEFAULT_SCRIPTED_CAMERA टाइप और RenderScriptCams गेम कैमरा से नियंत्रण लेने के लिए। रोटेशन के लिए, खिलाड़ियों को माउस को खींचकर अपने चरित्र के चारों ओर ऑर्बिट करने की अनुमति दें, कैमरा हेडिंग को समायोजित करते हुए इसे पेड की ओर इंगित रखें। पेड पर एक सूक्ष्म निष्क्रिय एनिमेशन, जैसे WORLD_HUMAN_STAND_IMPATIENT परिदृश्य, निर्माण प्रक्रिया के दौरान पात्र को प्राकृतिक दिखने में मदद करता है बजाय कठोर T-पोज़ में खड़े होने के।

-- client/camera.lua
local creatorCam = nil
local camAngle = 0.0

local CamPositions = {
    bio      = {offset = vector3(0.0, 0.9, 0.65), fov = 35.0},
    heritage = {offset = vector3(0.0, 0.7, 0.65), fov = 30.0},
    features = {offset = vector3(0.0, 0.5, 0.68), fov = 22.0},
    overlays = {offset = vector3(0.0, 0.5, 0.68), fov = 22.0},
    hair     = {offset = vector3(0.0, 0.6, 0.72), fov = 25.0},
    clothing = {offset = vector3(0.0, 2.2, 0.30), fov = 45.0},
}

function SetupCreatorCam(ped, step)
    local pos = CamPositions[step] or CamPositions.bio
    local pedCoords = GetEntityCoords(ped)
    local target = pedCoords + vector3(0.0, 0.0, pos.offset.z)

    if not creatorCam then
        creatorCam = CreateCam('DEFAULT_SCRIPTED_CAMERA', true)
        RenderScriptCams(true, true, 500, true, false)
    end

    local rad = math.rad(camAngle)
    local camPos = pedCoords + vector3(
        math.sin(rad) * pos.offset.y,
        math.cos(rad) * pos.offset.y,
        pos.offset.z
    )

    SetCamCoord(creatorCam, camPos.x, camPos.y, camPos.z)
    PointCamAtCoord(creatorCam, target.x, target.y, target.z)
    SetCamFov(creatorCam, pos.fov)
    SetCamActive(creatorCam, true)
end

कैरेक्टर डेटा सहेजना और लोड करना

सभी चरित्र उपस्थिति डेटा को एक डेटाबेस में संरक्षित करना आवश्यक है ताकि यह सर्वर पुनः आरंभ होने पर भी बना रहे और हर बार खिलाड़ी के स्पॉन होने पर लोड किया जा सके। अपने डेटाबेस टेबल को इस प्रकार संरचित करें कि पूरा उपस्थिति JSON ब्लॉब के रूप में बायोग्राफिकल फ़ील्ड्स जैसे पहला नाम, अंतिम नाम, जन्म तिथि, लिंग, और राष्ट्रीयता के साथ संग्रहीत हो। जब खिलाड़ी निर्माण पूरा करता है और अपने चरित्र की पुष्टि करता है, तो क्लाइंट पूरा डेटा ऑब्जेक्ट सर्वर को भेजता है, जो इनपुट रेंज की पुष्टि करता है और इसे डेटाबेस में डालता है। बाद के लॉगिन पर, सर्वर स्पॉन फ्लो के दौरान चरित्र डेटा प्राप्त करता है और इसे क्लाइंट को वापस भेजता है, जो उसी को कॉल करता है। ApplyAppearance function निर्माण के दौरान उपयोग किया जाता है। मल्टीकरेक्टर सर्वरों के लिए, एक कैरेक्टर स्लॉट पहचानकर्ता स्टोर करें ताकि प्रत्येक खिलाड़ी के पास स्वतंत्र दिखावट वाले कई कैरेक्टर हो सकें।

-- server/database.lua
-- Using oxmysql for database operations
function SaveCharacter(playerId, charData)
    local identifier = GetPlayerIdentifier(playerId, 0)
    local appearance = json.encode(charData.appearance)

    MySQL.insert([[
        INSERT INTO characters
            (identifier, slot, firstname, lastname,
             dateofbirth, gender, nationality, appearance)
        VALUES (?, ?, ?, ?, ?, ?, ?, ?)
    ]], {
        identifier,
        charData.slot or 1,
        charData.firstname,
        charData.lastname,
        charData.dob,
        charData.gender,
        charData.nationality,
        appearance
    })
end

function LoadCharacter(playerId, slot)
    local identifier = GetPlayerIdentifier(playerId, 0)
    local result = MySQL.single.await([[
        SELECT * FROM characters
        WHERE identifier = ? AND slot = ?
    ]], {identifier, slot})

    if result then
        result.appearance = json.decode(result.appearance)
    end
    return result
end

-- Spawn handler
RegisterNetEvent('character:loaded', function(slot)
    local src = source
    local char = LoadCharacter(src, slot)
    if char then
        TriggerClientEvent('character:applyAppearance', src, char.appearance)
    end
end)

क्लोदिंग इंटीग्रेशन और कंपोनेंट वेरिएशंस

GTA V में क्लोदिंग कंपोनेंट वेरिएशंस और प्रॉप वेरिएशंस के माध्यम से प्रबंधित की जाती है। कंपोनेंट्स शरीर के हिस्सों को कवर करते हैं जैसे टॉर्सो, पैर, पैर के जूते, एक्सेसरीज़, और अंडरशर्ट्स, जबकि प्रॉप्स चिपकाने योग्य आइटम जैसे हैट्स, ग्लासेस, इयररिंग्स, और वॉचेस को संभालते हैं। SetPedComponentVariation native एक घटक आईडी, ड्रॉएबल आईडी, टेक्सचर आईडी, और पैलेट आईडी लेता है। चुनौती यह है कि उपलब्ध ड्रॉएबल पुरुष और महिला पेड मॉडलों के बीच भिन्न होते हैं, और कुछ ड्रॉएबल और टेक्सचर संयोजन अमान्य होते हैं। आपका NUI प्रत्येक घटक के लिए अधिकतम ड्रॉएबल की संख्या क्वेरी करने की आवश्यकता है GetNumberOfPedDrawableVariations और प्रत्येक drawable के लिए अधिकतम टेक्सचर के साथ GetNumberOfPedTextureVariations. अपने कपड़ों के चयनकर्ता को इस तरह बनाएं कि वह चयनित लिंग के आधार पर विकल्पों को गतिशील रूप से भर सके ताकि खिलाड़ी केवल मान्य संयोजन ही देखें। कपड़ों के डेटा को उपस्थिति डेटा के साथ संग्रहीत करें और स्पॉन फ्लो के दौरान इसे उसी कंपोनेंट वेरिएशन नेटिव्स का उपयोग करके लागू करें।

Validation and Anti-Abuse Measures

क्लाइंट से आने वाले डेटा पर बिना सत्यापन के कभी भरोसा न करें। संशोधित क्लाइंट वाले खिलाड़ी सामान्य सीमा से बाहर दिखावट मान भेज सकते हैं, जिससे अन्य क्लाइंट क्रैश हो सकते हैं या दृश्य गड़बड़ी का फायदा उठाया जा सकता है। डेटाबेस में सहेजने से पहले सर्वर साइड पर हर फ़ील्ड का सत्यापन करें। हेरिटेज इंडेक्स 0 से 45 के बीच होना चाहिए, मिक्स मान 0.0 से 1.0 के बीच, फेस फीचर मान -1.0 से 1.0 के बीच, और ओवरले इंडेक्स प्रत्येक ओवरले प्रकार के लिए वैध सीमा के भीतर। किसी भी सीमा से बाहर के मानों को अस्वीकार या क्लैंप करें। इसके अतिरिक्त, निर्माण के दौरान उपस्थिति अपडेट इवेंट्स पर रेट लिमिटिंग लागू करें ताकि दुर्भावनापूर्ण क्लाइंट तेज़ी से उपस्थिति परिवर्तन भेजकर सर्वर को स्पैम न कर सकें। अपडेट्स के बीच 100 मिलीसेकंड का कूलडाउन वैध खिलाड़ियों के लिए अप्रत्याशित है लेकिन स्वचालित स्पैम को रोकता है। अंत में, चरित्र निर्माण प्रवाह को उचित सेशन प्रबंधन के पीछे लॉक करें ताकि खिलाड़ी इच्छित प्रवाह के बाहर निर्माण इवेंट्स ट्रिगर न कर सकें।

शुरू करने के लिए तैयार?

हमारी शॉप से स्क्रिप्ट लें, या सपोर्ट, अपडेट और आगे आने वाली चीज़ों की झलक के लिए Discord से जुड़ें।