Visuelle Anpassung

Dieser Leitfaden erklärt Ihnen, wie Sie das visuelle Erscheinungsbild des Dialog-HUDs anpassen können.

🎨 Übersicht

Das eigenständige Rendering-System ermöglicht Ihnen die Anpassung von:

• Hintergründen: Oberflächenhintergründe (Dialog, Antworten, NPC-Name)
• Avataren: NPC-Bildern
• Layout: X/Y-Positionen jedes Elements
• Skalierung: Größe der visuellen Elemente

📁 Ordnerstruktur

plugins/KGInfoServs-BQBetterHud/
├── avatars/          # NPC-Avatare (PNG)
├── backgrounds/      # Oberflächenhintergründe (PNG)
├── fonts/           # Benutzerdefinierte Schriftarten (TTF)
└── resourcepack/    # Generiertes Paket (Ordnermodus)

🖼️ Hintergründe (Oberflächenhintergründe)

Verfügbare Dateien

Die Hintergründe sind global (nicht an einen bestimmten NPC gebunden):

Datei	Verwendung	Empfohlene Abmessungen
dialogue.png	Hintergrund der Dialogbox	Variabel
answer.png	Hintergrund des Antwortbereichs	Variabel
hand.png	Auswahlanzeige (Hand)	8x8 Pixel
name_start.png	Anfang des NPC-Namenshintergrunds	Variabel
name_mid.png	Mitte des NPC-Namenshintergrunds	Variabel
name_end.png	Ende des NPC-Namenshintergrunds	Variabel

Anpassungsprozess

1. Erstellen Sie Ihre PNGs mit den gewünschten Abmessungen
2. Platzieren Sie die Dateien in plugins/KGInfoServs-BQBetterHud/backgrounds/
3. Neu laden mit /bqhud reload
4. Im Spiel testen

Tipp

Die Dateien name_start.png, name_mid.png, name_end.png bilden ein "9-Slice"-System, um die Breite des Hintergrunds an den Namen des NPC anzupassen.

Beispiel: Dunkles Thema

Um ein individuelles dunkles Thema zu erstellen:

# Struktur Ihrer Dateien
backgrounds/
├── dialogue.png      # Halbtransparenter schwarzer Hintergrund
├── answer.png        # Dunkelgrauer Hintergrund
├── hand.png          # Weiße Hand für Kontrast
├── name_start.png    # Schwarzer linker Rand
├── name_mid.png      # Wiederholbarer schwarzer Hintergrund
└── name_end.png      # Schwarzer rechter Rand

Nach dem Hinzufügen:

/bqhud reload

Ordnermodus vs. Self-Host

• Modus folder: Nach /bqhud reload müssen Sie Ihr Server-Resourcepack neu erstellen und erneut veröffentlichen
• Modus self-host: Nach /bqhud reload wird das Paket automatisch neu generiert und an die Spieler gesendet

🎭 NPC-Avatare

Siehe die Seite Avatare und Hintergründe für das Avatar-System.

📐 Layout: Elemente positionieren

Koordinatensystem

Das HUD verwendet ein Koordinatensystem in Pixeln:

• Ursprung (0, 0): Referenzpunkt der BossBar
• X positiv: nach rechts
• X negativ: nach links
• Y positiv: nach oben
• Y negativ: nach unten

Globale Offsets

Bevor Sie die einzelnen Elemente positionieren, können Sie das gesamte HUD verschieben:

standalone:
  x-offset: 0      # Verschiebt alles horizontal
  y-offset: -200   # Verschiebt alles vertikal

Beispiele:

• x-offset: 50 → HUD um 50 Pixel nach rechts verschoben
• y-offset: -250 → HUD weiter unten auf dem Bildschirm
• y-offset: -150 → HUD weiter oben auf dem Bildschirm

Konfigurierbare Elemente

Oberflächenhintergründe

standalone:
  layout:
    dialogue-bg:
      x: 0
      y: 20
      scale: 1.0    # Größe (1.0 = 100%, 1.5 = 150%)

    answer-bg:
      x: 180
      y: -30
      scale: 1.0

    name-bg:
      x: 0
      y: 14

Text und NPC-Name

standalone:
  layout:
    # NPC-Name (mit Optionen)
    npc-name:
      x: 10
      y: 19

    # NPC-Name (ohne Optionen, "spoken")
    npc-name-spoken:
      x: 6
      y: 23

    # Dialogtext (mit Optionen)
    dialogue-text:
      x: 10
      y: 32
      split-width: 166  # Breite vor dem Zeilenumbruch

    # Dialogtext (ohne Optionen, "spoken")
    dialogue-text-spoken:
      x: 10
      y: 36

    # Texthöhe
    text-height: 8

Antwortoptionen

Zwei verfügbare Modi: scroll und fixed

Modus scroll (Dropdown-Liste):

standalone:
  layout:
    options-scroll:
      x: 226
      y: -25
      line-height: 14  # Abstand zwischen den Zeilen

Modus fixed (feste Liste mit Anzeige):

standalone:
  layout:
    options-fixed:
      x: 190
      y: -25
      line-height: 8
      split-width: 160  # Maximale Breite vor dem Zeilenumbruch

    hand:  # Auswahlanzeige
      x: 175
      y: -26
      spacing: 8  # Vertikaler Abstand zwischen den Händen

NPC-Avatar

standalone:
  layout:
    avatar:
      x: -20
      y: 0
      scale: 0.75  # Größe des Avatars (0.5 = 50%, 1.0 = 100%)

Beispiele für individuelle Layouts

Zentriertes Layout

standalone:
  x-offset: 0
  y-offset: -180
  layout:
    dialogue-bg:
      x: 0
      y: 20
      scale: 1.2
    dialogue-text:
      x: 15
      y: 35
      split-width: 180
    avatar:
      x: -25
      y: 5
      scale: 1.0

Layout nach rechts verschoben

standalone:
  x-offset: 100
  y-offset: -200
  layout:
    dialogue-bg:
      x: 0
      y: 20
      scale: 1.0
    answer-bg:
      x: 200
      y: -30
      scale: 1.0

Kompaktes Layout (kleiner Bildschirm)

standalone:
  x-offset: 0
  y-offset: -220
  layout:
    dialogue-bg:
      x: 0
      y: 15
      scale: 0.8
    dialogue-text:
      x: 8
      y: 25
      split-width: 140
    avatar:
      x: -15
      y: 0
      scale: 0.6

🎨 Textausrichtung

Sie können die Ausrichtung für jeden Bereich wählen:

standalone:
  text-alignment:
    dialogue: center  # left, center, right
    speaker: left     # Name des NPC
    options: left     # Antwortoptionen

Anwendungsbeispiele:

• dialogue: center → Zentrierter Text für einen filmischen Stil
• dialogue: left → Linksbündiger Text für einen klassischen Stil
• options: right → Rechtsbündige Optionen

🔧 Workflow zur Anpassung

Schritt 1: Ihre Assets vorbereiten

1. Erstellen Sie Ihre PNGs in einer Bildbearbeitungssoftware (GIMP, Photoshop, Paint.NET)
2. Verwenden Sie Transparenz (Alphakanal) für leere Bereiche
3. Halten Sie die empfohlenen Abmessungen ein

Schritt 2: Lokal testen

1. Platzieren Sie Ihre Dateien in den entsprechenden Ordnern
2. Führen Sie /bqhud reload aus
3. Testen Sie mit einem BetonQuest-Dialog im Spiel
4. Passen Sie die Positionen in config.yml an

Schritt 3: Iteration

Wiederholen Sie dies, bis Sie das gewünschte Ergebnis erhalten:

# 1. config.yml ändern
# 2. Neu laden
/bqhud reload
# 3. Im Spiel testen
# 4. Anpassen und von vorne beginnen

Schritt 4: Bereitstellung

Modus folder:

1. Der Ordner plugins/KGInfoServs-BQBetterHud/resourcepack enthält die generierten Assets
2. Integrieren Sie diesen Inhalt in Ihr Server-Resourcepack
3. Erstellen Sie Ihr Paket neu und verteilen Sie es erneut

Modus self-host:

1. Das Paket wird automatisch neu generiert
2. Die Spieler erhalten das Update beim erneuten Verbinden

📊 Zusammenfassende Tabelle der Skalierungen

Element	Konfigurationsschlüssel	Standard-Skalierung	Effekt der Skalierung
Dialoghintergrund	dialogue-bg.scale	1.0	Vergrößert/verkleinert den Hintergrund
Antworthintergrund	answer-bg.scale	1.0	Vergrößert/verkleinert den Hintergrund
NPC-Avatar	avatar.scale	0.75	Vergrößert/verkleinert den Avatar

Empfohlene Werte:

• 0.5: Sehr klein (50%)
• 0.75: Klein (75%)
• 1.0: Normal (100%)
• 1.25: Groß (125%)
• 1.5: Sehr groß (150%)

🚀 Leistungstipps

Optimierung der PNGs

Für eine bessere Leistung:

1. Komprimieren Sie Ihre PNGs mit Tools wie TinyPNG oder pngquant
2. Verwenden Sie angemessene Abmessungen (max. 512x512 für Hintergründe)
3. Vermeiden Sie übergroße Bilder, die das Resourcepack unnötig belasten

Größe des Resourcepacks

Das Plugin generiert ein optimiertes Paket:

• Automatische ZIP-Komprimierung
• Keine unnötigen Dateien
• SHA-1-Cache, um erneute Downloads zu vermeiden

❓ Häufig gestellte Fragen

Das Layout wird nach /bqhud reload nicht angewendet

Lösung:

1. Überprüfen Sie die YAML-Syntax in config.yml
2. Schauen Sie in die Serverprotokolle, um Fehler zu erkennen
3. Im Modus folder müssen Sie Ihr Server-Resourcepack neu erstellen

Die Hintergründe werden nicht angezeigt

Mögliche Ursachen:

1. PNG-Dateien falsch benannt (beachten Sie die genaue Groß-/Kleinschreibung)
2. Beschädigte Dateien oder ungültiges Format
3. Resourcepack nicht vom Client geladen

Lösung:

/bqhud reload
# Überprüfen Sie die Protokolle, um zu sehen, ob die Hintergründe erkannt werden

Wie kann ich zum Standard-Layout zurückkehren?

Entfernen Sie Ihre Änderungen in config.yml und stellen Sie die Standardwerte wieder her, dann:

/bqhud reload

📖 Siehe auch

• Vollständige Konfiguration
• Avatare und Hintergründe
• Fehlerbehebung