FiveM Karakter Oluşturma Ekranı: UI ve Scripting Rehberi

Roleplay'de Karakter Oluşturma Neden Önemlidir?

Karakter oluşturma, bir oyuncunun FiveM roleplay sunucunuzda deneyimlediği ilk etkileşim anıdır. Sonrasında gelecek her şeyin tonunu bu belirler. Özenle hazırlanmış, sürükleyici bir karakter oluşturucu, yeni oyunculara sunucunuzun profesyonelce inşa edildiğini ve zaman ayırmaya değer olduğunu gösterir. Yetersiz veya hatalı bir sistem ise onları doğrudan alternatif aramak üzere sunucu tarayıcısına yönlendirir. İlk izlenimlerin ötesinde, karakter oluşturucu her oyuncunun tüm roleplay deneyimi boyunca taşıyacağı görsel kimliği tanımlar. Genetik karışımları, yüz özelliklerini, saç stillerini, kıyafetleri ve isim ile doğum tarihi gibi biyografik detayları belirler. Bunu doğru şekilde yapmak: GTA V'in yerel görünüm sistemiyle iletişim kuran, seçenekleri sezgisel bir NUI arayüzü üzerinden sunan, seçimleri bir veritabanına kaydeden ve oyuncu her doğduğunda bunları sorunsuzca geri yükleyen bir sistem kurmak anlamına gelir.

GTA V Ped Görünüm Sistemini Anlamak

GTA V, bir karakterin yüzünün iki ebeveyn modelinden harmanlandığı kalıtım tabanlı bir görünüm sistemi kullanır. Her biri farklı yüz yapılarına sahip 46 olası anne ve baba vardır. Bu SetPedHeadBlendData native, karakterin ebeveynlerinin her birine ne kadar benzediğini belirleyen 0.0 ile 1.0 arasındaki şekil ve ten karışım değerlerini kabul ederek bu harmanlamayı kontrol eder. Oyun, soyaçekimin ötesinde şu yolla 20 kaplama kategorisi sunar: SetPedHeadOverlay leke, sakal, kaş, yaşlanma, makyaj ve cilt hasarı gibi özellikleri kapsar. Her overlay'in kendi opaklık değeri vardır ve şu fonksiyon kullanılarak bağımsız olarak renklendirilebilir: SetPedHeadOverlayColor. Saç, ayrı olarak şunun üzerinden işlenir: SetPedComponentVariation model için ve SetPedHairColor renk ve vurgular içindir. Göz rengi şunu kullanır: SetPedEyeColor 0 ile 31 arasında değişen değerlerle. Bu native'leri anlamak önemlidir, çünkü NUI arayüzünüzün kullanıcı dostu kaydırıcıları ve seçicileri bu belirli fonksiyon çağrılarıyla eşleştirmesi gerekir.

-- 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 Arayüzünü Geliştirme

NUI (Natural User Interface), oyuncuların karakterlerini oluştururken etkileşime girdiği HTML, CSS ve JavaScript arayüz katmanıdır. İyi tasarlanmış bir karakter oluşturucu süreci mantıksal adımlara böler: önce biyografik bilgiler, ardından köken seçimi, yüz hatları, sakal ve makyaj gibi kaplamalar, saç şekillendirme ve son olarak kıyafetler. Oyuncuların seçimlerinin tam olarak nasıl göründüğünü görebilmeleri için her adım karakter modelinde gerçek zamanlı önizleme güncellemeleri göstermelidir. Oyuncuların aynı anda onlarca seçenek arasında boğulmaması için sekmeli veya sihirbaz tarzı bir düzen kullanın. Kaydırıcılar yüz karışımı ve yüz hatları gibi sürekli değerler için uygunken, küçük resim önizlemeli ızgara seçiciler saç stilleri ve kıyafet öğeleri gibi ayrık seçenekler için daha iyi çalışır. Her değişikliği şu yolla istemci scriptine gönderin: fetch veya ped'in anında güncellenmesi için NUI mesaj sistemi.

<!-- 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>

Karakter Önizlemesi İçin Kamera Sistemi

Kusursuz bir karakter oluşturma deneyimi için özel bir kamera sistemi şarttır. Oyuncular akrabalık karışımlarını ve katmanları ayarlarken yüz özelliklerini yakından, saç ve üst vücut kıyafetleri için orta plandan, pantolon ve ayakkabılar için ise tam boydan görmelidir. Hangi oluşturma adımının aktif olduğuna bağlı olarak önceden tanımlanmış konumlar arasında akıcı geçiş yapan bir kamera kontrolcüsü uygulayın. Şunu kullanın: CreateCam ile DEFAULT_SCRIPTED_CAMERA tür ve RenderScriptCams oyun kamerasından kontrolü devralmak için. Döndürme işlemi için, kameranın yönünü ped üzerinde sabit tutarken camera heading değerini ayarlayarak oyuncuların fareyi sürükleyip karakterleri etrafında dönmelerine izin verin. Ped üzerinde şu gibi hafif bir bekleme animasyonu: WORLD_HUMAN_STAND_IMPATIENT senaryosu, karakterin kaskatı bir T-pose duruşunda durması yerine oluşturma sürecinde doğal görünmesini sağlar.

-- 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

Karakter Verilerini Kaydetme ve Yükleme

Sunucu yeniden başlatmalarında kaybolmaması ve oyuncu her spawn olduğunda yüklenebilmesi için tüm karakter görünüm verilerinin bir veritabanında saklanması gerekir. Veritabanı tablonuzu ad, soyad, doğum tarihi, cinsiyet ve uyruk gibi biyografik alanların yanı sıra tam görünümü bir JSON blob olarak depolayacak şekilde yapılandırın. Oyuncu karakter oluşturmayı tamamlayıp onayladığında, istemci tüm veri nesnesini sunucuya gönderir; sunucu girdi aralıklarını doğrular ve veritabanına ekler. Sonraki girişlerde sunucu, spawn akışı sırasında karakter verilerini çeker ve bunu istemciye geri gönderir; istemci de aynı şunu çağırır: ApplyAppearance oluşturma sırasında kullanılan function. Çoklu karakter (multicharacter) sunucuları için bir karakter slot tanımlayıcısı saklayın, böylece her oyuncu bağımsız görünümlere sahip birden fazla karaktere sahip olabilir.

-- 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)

Kıyafet Entegrasyonu ve Bileşen Varyasyonları

GTA V'te kıyafetler bileşen varyasyonları ve prop varyasyonları üzerinden yönetilir. Bileşenler gövde, bacaklar, ayaklar, aksesuarlar ve içlikler gibi vücut bölümlerini kapsarken, proplar şapka, gözlük, küpe ve saat gibi takılabilir eşyaları yönetir. SetPedComponentVariation native bir bileşen kimliği, drawable kimliği, doku kimliği ve palet kimliği alır. Buradaki zorluk, kullanılabilir drawable'ların erkek ve kadın ped modelleri arasında farklılık göstermesi ve bazı drawable ile doku kombinasyonlarının geçersiz olmasıdır. NUI'nizin şunu kullanarak her bileşen için maksimum drawable sayısını sorgulaması gerekir: GetNumberOfPedDrawableVariations ve her bir drawable için maksimum dokuları şununla: GetNumberOfPedTextureVariations. Kıyafet seçicinizi, oyuncuların yalnızca geçerli kombinasyonları görmesi için seçilen cinsiyete göre seçenekleri dinamik olarak dolduracak şekilde oluşturun. Kıyafet verilerini görünüm verileriyle birlikte saklayın ve aynı component variation native'lerini kullanarak spawn akışı sırasında uygulayın.

Doğrulama ve Kötüye Kullanımı Önleme Tedbirleri

Doğrulama yapmadan istemciden gelen verilere asla güvenmeyin. Değiştirilmiş istemcilere sahip oyuncular, normal aralıkların dışındaki görünüm değerleri göndererek diğer istemcileri çökertebilir veya görsel hataları kötüye kullanabilir. Veritabanına kaydetmeden önce sunucu tarafında her alanı doğrulayın. Kalıtım dizinleri 0 ile 45 arasında, karışım değerleri 0.0 ile 1.0 arasında, yüz özelliği değerleri -1.0 ile 1.0 arasında ve bindirme dizinleri her bindirme türü için geçerli aralıkta olmalıdır. Aralık dışındaki tüm değerleri reddedin veya sınırlandırın. Ayrıca, kötü niyetli istemcilerin seri görünüm değişiklikleriyle sunucuyu boğmasını önlemek için oluşturma sırasındaki görünüm güncelleme etkinliklerine hız sınırlaması uygulayın. Güncellemeler arasındaki 100 milisaniyelik bekleme süresi meşru oyuncular tarafından fark edilmez ancak otomatik spamı durdurur. Son olarak, oyuncuların belirlenen akışın dışındaki oluşturma etkinliklerini tetikleyememesi için karakter oluşturma akışını uygun oturum yönetimi arkasında kilitleyin.