[RAGE-MP] A'dan Z'ye UI Rehberi

[Krips Je]

Merhaba, ben Krips.

Bu konuda sizlerle RageMP üzerinde uzun süredir aktif kullandığım ve defalarca test ettiğim UI (Kullanıcı Arayüzü) geliştirme ve mevcut UI'leri başka projelere aktarma süreçlerini en ince ayrıntısına kadar anlatacağım.

Bu konuyu yazarken sadece "şunu şuraya at, bu böyle olur" değil, neden öyle yapılmalı, hangi hatalar yapılırsa sistem patlar gibi en ince detayına kadar yazacağımı düşünüyorum.

İçerik iki yöntem üzerinden ilerleyecek:
- Vue.js tabanlı UI geliştirme
- Düz HTML + CSS + JS ile UI geliştirme

Ve bunların RageMP ye doğru ve sorunsuz entegrasyon süreci.

Hazırsanız başlayalım...


1. UI Mantığı ve RageMP İletişimi

Öncelikle bilmeyenler için tekrar edeyim:
RageMP'de UI aslında oyun içinde açılan gömülü bir tarayıcı sayfasıdır.
Yani sizin HTML, CSS, JS dosyalarınız tarayıcıda renderlanıyor, RageMP clientiyle veri alışverişini ise mp.trigger ve mp.events.add ile yapıyorsunuz.

İki yönlü veri akışı vardır:
- Client > UI: mp.browsers.new().execute()
- UI > Client: mp.trigger()

Veri taşırken dikkat edilmesi gereken şey:
Her veri string tipinde taşınır. Eğer nesne göndermek istersen JSON.stringify ile string yap, karşıda JSON.parse ile tekrar nesneye çevir.


2. Vue.js İle UI Geliştirme

Vue.js modern bir framework. RageMP UI işlerinde kullanmamızın sebebi:

- Dinamik sayfa yönetimi
- Modüler component yapısı
- Daha okunabilir kodlar
- Kolay güncellenebilir sistem

Kurulum:
1. Node.js kurulu olmalı.
2. Konsola Gir:

PAWN Kodu: Seç

npm install -g @vue/cli
vue create uiproje
3. Projeyi başlat:

PAWN Kodu: Seç

cd uiproje
npm run serve

mp.trigger Kullanımı (Vue den Client a veri göndermek):

PAWN Kodu: Seç

methods: {
buyItem(itemId) {
mp.trigger("client:buyItem", itemId);
}
}

mp.browsers.new().execute (Client den Vue UI ye veri göndermek):

PAWN Kodu: Seç

browser.execute(updatePlayerHealth(${player.health}));

Dikkat Edilmesi Gerekenler:
- mp.trigger ile gönderilen tüm parametreler string veya sayı olmalı.
- execute içindeki kod string formatında JS komutudur.
- Verileri JSON ile taşımayı ihmal etme.

Örnek - Vue Component Üzerinde Buton:

PAWN Kodu: Seç


<button @click="buyItem(5)">Satın Al



3. Düz HTML + CSS + JS İle UI Geliştirme

Vue kullanmadan sade sistem isteyenler için.

Client Üzerinde Browser Açmak:

PAWN Kodu: Seç

let browser = mp.browsers.new("package://ui/index.html");

UI den Cliente Veri Göndermek:

PAWN Kodu: Seç

// script.js içinde
function buyItem(itemId) {
mp.trigger("client:buyItem", itemId);
}

Client den UI ye Veri Göndermek:

PAWN Kodu: Seç

browser.execute(document.getElementById("health").innerText = ${player.health});

Dikkat Edilmesi Gerekenler:
- execute fonksiyonu string JS komutudur, tırnaklara dikkat et.
- Verileri JSON ile paketlersen hatasız taşırsın.
- Browserı destroy etmeden yeni browser açma, yoksa FPS düşer.


4. Vue Projesini RageMP ye Aktarma

Build Alma:

PAWN Kodu: Seç

npm run build

/dist klasörü oluşur, bunu RageMP client_packages altına at.
UI yi açarken:

PAWN Kodu: Seç

let browser = mp.browsers.new("package://client_packages/ui/index.html");

Önemli Noktalar:
- Path hatası almamak için dosya yolları ./ olmalı.
- Vue Router kullanıyorsan history mod kapalı olacak.
- CSS ve JS yolları otomatik olmalı.


5. HTML + CSS + JS Projesini RageMP ye Aktarma
1. UI klasörünü client_packages içine at.
2. Browserı şu şekilde aç:

PAWN Kodu: Seç

let browser = mp.browsers.new("package://client_packages/ui/index.html");
3. mp.trigger ve mp.events.add ile veri aktar.

Örnek Olarak, Arayüzden Araba Satın Alma:

PAWN Kodu: Seç

// ui/script.js
function buyCar(carId) {
mp.trigger("client:buyCar", carId);
}


PAWN Kodu: Seç

// client-side
mp.events.add("client:buyCar", (carId) => {
mp.events.callRemote("server:buyCar", carId);
});


6. Dikkat Edilmesi Gerekenler ve Tavsiyeler
- Browserı her kapamada destroy et, FPS kaybı yaşamazsın.
- execute ile tetiklenen kodun doğru olduğundan emin ol.
- Gereksiz veri göndermemeye dikkat et.
- Clientde UI açıkken kontrolleri kapat (chat, ESC, yön tuşları)
- mp.gui.cursor.visible = true/false ile mouse kontrolünü sağla.
- Çok sayıda browser açmak oyunu kasabilir, tek browser ile iş hallet.
- mp.trigger ile yalnızca gerekli event ve verileri gönder.


Final.

UI geliştirmek RageMP de aslında tarayıcı sayfası çalıştırmaktan ibaret ama sistemin sağlam ve stabil olması için:

- Kodu temiz ve okunabilir yaz.
- Vue kullanacaksan component ve modüler sistemle çalış.
- HTML/JS kullanacaksan verileri düzgün aktar.
- FPS ve performansı düşüren yapılar kurmaktan kaçın.
- Sunucu tarafında gelen UI verilerini doğrula.

Bu konu zamanla güncellenmeye devam edecek. Vue.js ve klasik HTML/CSS sistemleri için yeni örnek projeler, modül yapıları ve hazır dosya paketleri paylaşacağım. Siz de görüş ve önerilerinizi yorum olarak iletebilirsiniz.

RageMP'de kaliteli sistem kuran geliştiriciler çoğalsın diye bu içerikler burada.

[Backup]

Anlatım için teşekkürler Krips

[Krips Je]

Anlatım için teşekkürler Krips

Bir katkım oluyorsa ne mutlu bana Yakın zamanda aklıma geldikçe daha iyi anlatım konuları açacağım.