Mmo Forum

Gönderilme zamanı: **Sal Haz 24, 2025 5:40 pm**

[TASARIM] HTML5 Launcher UI Hazırlama (Responsive, Temiz Tasarım)[/b][/size]

Haziran 2025 | MMO.net.tr Geliştirici Alanı Tasarım Rehberi

Açıklama yazdı: Sunucunuza modern, mobil uyumlu ve kullanıcı dostu bir launcher görünümü kazandırmak ister misiniz? Bu rehberde HTML5 tabanlı bir oyun launcher UI arayüzünün temel yapısını kuruyoruz. Özelleştirilebilir, kolay entegre edilebilir ve çok düşük sistem yükü ile çalışır.

[hr]
Yapı Hakkında

HTML5 + CSS3 + JS: Kodlar modern web tarayıcılarıyla uyumludur.
Responsive (mobil uyumlu): Oyuncular mobilde bile haberleri görebilir.
JSON destekli duyuru çekme: Güncellemeleri panelden kolayca düzenleyebilirsin.
Kolay entegre edilebilir: Mevcut launcher içine gömülebilir veya dış sayfa olarak açılabilir.

[hr]
Örnek HTML Yapısı

Kod: Tümünü seç

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Sunucu Launcheri</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="launcher">
    <h1>Sunucu Adı</h1>
    <div id="news">Güncellemeler buraya yükleniyor...</div>
    <button onclick="startGame()">Oyunu Başlat</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

[hr]
Basit CSS Dosyası (style.css)

Kod: Tümünü seç

body {
  font-family: Arial, sans-serif;
  background: #121212;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.launcher {
  text-align: center;
  background: #1e1e1e;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(255,255,255,0.1);
}
button {
  padding: 10px 20px;
  background: #00aaff;
  border: none;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

[hr]
Basit JS Mantığı (script.js)

Kod: Tümünü seç

function startGame() {
  // Exe dosyasını başlatan özel launcher içine gömülmeli
  alert("Launcher oyunu başlatıyor...");
}

// Güncellemeleri JSON'dan çek
fetch("updates.json")
  .then(res => res.json())
  .then(data => {
    document.getElementById("news").innerHTML = data.updates.join("<br>");
  });

[hr]
updates.json Dosyası (Haber Paneli için)

Kod: Tümünü seç

{
  "updates": [
    "23 Haziran: Yeni boss sistemi eklendi.",
    "22 Haziran: Oyuna +10 setler eklendi.",
    "21 Haziran: Launcher güncellendi."
  ]
}

[hr]
İndirilebilir Tasarım Paketi (Yüklenince eklenecek)
Tüm bu dosyaları içeren bir zip arşivi aşağıdaki bağlantıdan paylaşılacaktır:

index.html
style.css
script.js
updates.json
PNG formatlı logo örneği

[hr]
İpuçları:

Launcher arayüzünü Windows uygulamasına dönüştürmek için Electron.js kullanılabilir
Sunucu durum kontrolü eklemek için API endpoint oluşturulabilir
Dark/Light tema geçişi ekleyerek kullanıcı dostu yapıya kavuşursun

[hr]
Sonraki Rehberler:

[PAYLAŞIM] Ücretsiz Metin2 Lua Script Arşivi
[REHBER] MySQL Otomatik Yedekleme & Geri Yükleme
[REHBER] Oyun Dosyalarını CRC İle Koruma (Anti-Modlama)

MMO.net.tr Geliştirici Ekibi olarak başarılar dileriz!
Her türlü soru, fikir ve görsel paylaşımınızı bekliyoruz.

Mmo Forum

Otomatik Etkinlik Botu Yazımı (Metin2 & Knight Online PvP)

Otomatik Etkinlik Botu Yazımı (Metin2 & Knight Online PvP)