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... :oku2:
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:
npm install -g @vue/cli
vue create uiproje
3. Projeyi başlat:
cd uiproje
npm run serve
mp.trigger Kullanımı (Vue den Client a veri göndermek):
methods: {
buyItem(itemId) {
mp.trigger("client:buyItem", itemId);
}
}
mp.browsers.new().execute (Client den Vue UI ye veri göndermek):
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:
<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:
let browser = mp.browsers.new("package://ui/index.html");
UI den Cliente Veri Göndermek:
// script.js içinde
function buyItem(itemId) {
mp.trigger("client:buyItem", itemId);
}
Client den UI ye Veri Göndermek:
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:
npm run build
/dist klasörü oluşur, bunu RageMP client_packages altına at.
UI yi açarken:
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ç:
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:
// ui/script.js
function buyCar(carId) {
mp.trigger("client:buyCar", carId);
}
// 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. :serefe:
Anlatım için teşekkürler Krips :)
Alıntı yapılan: Backup - 20 Nisan 2025, 22:46:21Anlatı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.