Arayüz, dil ve önizleme

Dövme arayüzü, oluşturulmuş ui/dist/ dosyalarından yüklenir. Paket bu derlemeyi ve ui/public/ImagenesVanilla/ içindeki vanilla küçük resimleri içerir; React kaynak kodunun veya ui/ geliştirme dosyalarının pakette olduğunu varsaymayın.

Teslim edilen dosyaları düzenleme

Küçük özelleştirmeler için kaynakla birlikte gelen dosyaları düzenleyebilirsiniz:

Renkler ve yazı tipi: ui/dist/assets/index-*.css dosyasını açın ve --tat-* ile --cxg-* değişkenlerinin değerlerini değiştirin. NUI sayfası bu dosyaya başvurduğundan mevcut CSS dosya adını koruyun. Bu CSS derlenmiştir ve yeni bir build alındığında değişebilir; yaptığınız ayarların bir kopyasını saklayın.
Logo: Üretilen JavaScript içindeki başvurunun parçası olan ad ve yolu aynen koruyarak ui/dist/assets/cxg-logo-CmIGK6Fh.png dosyasını değiştirin. Görüntülendiği alanla uyumlu en-boy oranını ve saydamlığı koruyun.
Vanilla küçük resimleri: Değişikliğin çalışan sürümde görünmesi için ui/dist/ImagenesVanilla/ içindeki dosyayı aynı adla değiştirin. Elinizde varsa dosyanın ui/public/ImagenesVanilla/ içindeki karşılık gelen kopyasını da değiştirin; yeni bir derleme bu klasördeki dosyaları dist/ içine kopyalar.

Build dosyalarını düzenlemeden önce yedek alın ve değişiklikleri FiveM içinde kontrol edin. Kapsamlı tasarım değişiklikleri, yeni bileşenler veya React çevirileri için UI kaynak kodunu isteyin ve yeni bir build oluşturun; burada açıklanan teslimata bu kaynak dosyalar dahil değildir.

Görünümü özelleştirme

Sayfa düzeni, bileşen veya React metinlerinde kapsamlı değişiklikler için ayrıca teslim edilmişse UI kaynak kodunu kullanın. Başlıca giriş noktaları şunlardır:

ui/src/index.css: renkler, yazı tipi, boyutlar ve gölgeler için genel --tat-* değişkenleri.
ui/src/studio-theme.css: --cxg-* değişkenleri ve stüdyo görünümü.
ui/src/components/: React bileşenleri ve her bileşene özel stiller.
ui/src/main.tsx: Outfit Variable ve Geist Mono Variable içe aktarımları.

Tema değişkenlerini düzenleyerek başlayın. Bileşen kurallarında doğrudan değişiklik yaparken odak, hata, yükleniyor ve devre dışı durumları koruyun. Farklı bir yazı tipi kullanacaksanız main.tsx içindeki yazı tipini de değiştirin; bu yazı tipini kullanan stiller tipografi değişkenlerinde tanımlıdır.

Küçük resimler ve görseller

Dahil edilen vanilla küçük resimleri ui/public/ImagenesVanilla/ içindedir ve üretim derlemesine kopyalanır. Kataloğun beklediği adları ve yolları koruyun. Harici paketlerin sağladığı görseller kendi kaynaklarında kalır; UI'a otomatik olarak kopyalanmaz.

FiveM, NUI'ı göstermek için ui/dist/index.html dosyasını ve ui/dist/ içindeki dosyaları yükler. ui/dist/ oluşturulmuş bir çıktıdır; kaynak kodu da teslim aldıysanız küçültülmüş build dosyalarını elle düzenlemek yerine kaynakta değişiklik yapıp yeniden derleyin.

Dil

config.lua içindeki Config.Locale ve Config.LocaleFallback, Lua mesajlarıyla NUI için tüm oyuncuların varsayılan dilini belirler. Değer cxg-tattoos yeniden başlatıldıktan sonra uygulanır; oyuncuya özel bir ayar veya NUI içindeki bir seçici değildir. Desteklenen kodlar en, es, pt-BR, fr, de, it, pl, ru, tr, th ve ar şeklindedir.

React'e özgü etiketlerin sözlükleri, kaynak kodu teslim edildiyse ui/src/i18n.tsx içindedir. İngilizce temel dili sağlar ve çevirisi olmayan anahtarları karşılar; Arapça okuma yönü olarak RTL'yi etkinleştirir. Config.Locale değiştirmek kullanılabilir bir dili seçer; sözlükleri değiştirmek ise UI metinlerinin çevirilerini düzenler. Bunlar ayrı ayarlardır.

UI kaynaklarını derleme

Bu adımlar yalnızca package.json ve package-lock.json içeren ui/ kaynak klasörü size teslim edildiyse geçerlidir. Node.js ve npm gerekir. ui/ klasöründen çalıştırın:

Kod

npm ci
npm run lint
npm run build

npm run lint, TypeScript türlerini denetler; npm run build, FiveM'in kullandığı içerik olan ui/dist/ klasörünü oluşturur. Güncellenen build'i kaynakla birlikte dağıtın.

Kamera ve önizleme kıyafeti

config.lua, stüdyo açıkken uygulanan kamera ve kıyafeti ayarlamaya olanak tanır: Config.CameraOffsets, Config.CameraFraming, Config.CameraFramingBySide, Config.CameraManualControls ve Config.PreviewOutfit. Bu parametrelerin ayrıntıları için Yapılandırma bölümüne bakın.