Customisation Visuelle

Ce guide vous explique comment personnaliser l'apparence visuelle du HUD de dialogue.

🎨 Vue d'ensemble

Le système de rendu standalone vous permet de personnaliser :

• Backgrounds : fonds d'interface (dialogue, réponses, nom NPC)
• Avatars : images des NPC
• Layout : positions X/Y de chaque élément
• Scale : taille des éléments visuels

📁 Structure des dossiers

plugins/KGInfoServs-BQBetterHud/
├── avatars/          # Avatars des NPC (PNG)
├── backgrounds/      # Fonds d'interface (PNG)
├── fonts/           # Polices personnalisées (TTF)
└── resourcepack/    # Pack généré (mode folder)

🖼️ Backgrounds (fonds d'interface)

Fichiers disponibles

Les backgrounds sont globaux (pas liés à un NPC spécifique) :

Fichier	Utilisation	Dimensions recommandées
dialogue.png	Fond de la boîte de dialogue	Variable
answer.png	Fond de la zone des réponses	Variable
hand.png	Indicateur de sélection (main)	8x8 pixels
name_start.png	Début du fond du nom NPC	Variable
name_mid.png	Milieu du fond du nom NPC	Variable
name_end.png	Fin du fond du nom NPC	Variable

Processus de customisation

1. Créer vos PNG avec les dimensions souhaitées
2. Placer les fichiers dans plugins/KGInfoServs-BQBetterHud/backgrounds/
3. Recharger avec /bqhud reload
4. Tester en jeu

Astuce

Les fichiers name_start.png, name_mid.png, name_end.png forment un système de "9-slice" pour adapter la largeur du fond au nom du NPC.

Exemple : Thème sombre

Pour créer un thème sombre personnalisé :

# Structure de vos fichiers
backgrounds/
├── dialogue.png      # Fond noir semi-transparent
├── answer.png        # Fond gris foncé
├── hand.png          # Main blanche pour contraste
├── name_start.png    # Bordure gauche noire
├── name_mid.png      # Fond noir répétable
└── name_end.png      # Bordure droite noire

Après ajout :

/bqhud reload

Mode folder vs self-host

• Mode folder : après /bqhud reload, vous devez reconstruire et republier votre resource pack serveur
• Mode self-host : après /bqhud reload, le pack est automatiquement régénéré et renvoyé aux joueurs

🎭 Avatars NPC

Voir la page Avatars et Backgrounds pour le système d'avatars.

📐 Layout : Positionner les éléments

Système de coordonnées

Le HUD utilise un système de coordonnées en pixels :

• Origine (0, 0) : point de référence du BossBar
• X positif : vers la droite
• X négatif : vers la gauche
• Y positif : vers le haut
• Y négatif : vers le bas

Offsets globaux

Avant de positionner les éléments individuels, vous pouvez déplacer tout le HUD :

standalone:
  x-offset: 0      # Déplace tout horizontalement
  y-offset: -200   # Déplace tout verticalement

Exemples :

• x-offset: 50 → HUD décalé de 50 pixels vers la droite
• y-offset: -250 → HUD plus bas sur l'écran
• y-offset: -150 → HUD plus haut sur l'écran

Éléments configurables

Fonds d'interface

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

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

    name-bg:
      x: 0
      y: 14

Texte et nom NPC

standalone:
  layout:
    # Nom NPC (avec options)
    npc-name:
      x: 10
      y: 19

    # Nom NPC (sans options, "spoken")
    npc-name-spoken:
      x: 6
      y: 23

    # Texte dialogue (avec options)
    dialogue-text:
      x: 10
      y: 32
      split-width: 166  # Largeur avant retour à la ligne

    # Texte dialogue (sans options, "spoken")
    dialogue-text-spoken:
      x: 10
      y: 36

    # Hauteur du texte
    text-height: 8

Options de réponse

Deux modes disponibles : scroll et fixed

Mode scroll (liste déroulante) :

standalone:
  layout:
    options-scroll:
      x: 226
      y: -25
      line-height: 14  # Espacement entre les lignes

Mode fixed (liste fixe avec indicateur) :

standalone:
  layout:
    options-fixed:
      x: 190
      y: -25
      line-height: 8
      split-width: 160  # Largeur max avant retour ligne

    hand:  # Indicateur de sélection
      x: 175
      y: -26
      spacing: 8  # Espacement vertical entre mains

Avatar NPC

standalone:
  layout:
    avatar:
      x: -20
      y: 0
      scale: 0.75  # Taille de l'avatar (0.5 = 50%, 1.0 = 100%)

Exemples de layouts personnalisés

Layout centré

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 décalé à droite

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

Layout compact (petit écran)

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

🎨 Alignement du texte

Vous pouvez choisir l'alignement pour chaque section :

standalone:
  text-alignment:
    dialogue: center  # left, center, right
    speaker: left     # Nom du NPC
    options: left     # Options de réponse

Exemples d'utilisation :

• dialogue: center → Texte centré pour un style cinématique
• dialogue: left → Texte aligné à gauche pour un style classique
• options: right → Options alignées à droite

🔧 Workflow de customisation

Étape 1 : Préparer vos assets

1. Créez vos PNG dans un logiciel d'édition d'image (GIMP, Photoshop, Paint.NET)
2. Utilisez la transparence (canal alpha) pour les zones vides
3. Respectez les dimensions recommandées

Étape 2 : Tester en local

1. Placez vos fichiers dans les dossiers appropriés
2. Exécutez /bqhud reload
3. Testez avec un dialogue BetonQuest en jeu
4. Ajustez les positions dans config.yml

Étape 3 : Itération

Répétez jusqu'à obtenir le résultat souhaité :

# 1. Modifier config.yml
# 2. Recharger
/bqhud reload
# 3. Tester en jeu
# 4. Ajuster et recommencer

Étape 4 : Déploiement

Mode folder :

1. Le dossier plugins/KGInfoServs-BQBetterHud/resourcepack contient les assets générés
2. Intégrez ce contenu dans votre resource pack serveur
3. Rebuild et redistribuez votre pack

Mode self-host :

1. Le pack est automatiquement régénéré
2. Les joueurs reçoivent la mise à jour à la reconnexion

📊 Tableau récapitulatif des scales

Élément	Clé config	Scale par défaut	Effet du scale
Fond dialogue	dialogue-bg.scale	1.0	Agrandit/réduit le fond
Fond réponses	answer-bg.scale	1.0	Agrandit/réduit le fond
Avatar NPC	avatar.scale	0.75	Agrandit/réduit l'avatar

Valeurs recommandées :

• 0.5 : Très petit (50%)
• 0.75 : Petit (75%)
• 1.0 : Normal (100%)
• 1.25 : Grand (125%)
• 1.5 : Très grand (150%)

🚀 Conseils de performance

Optimisation des PNG

Pour de meilleures performances :

1. Compressez vos PNG avec des outils comme TinyPNG ou pngquant
2. Utilisez des dimensions raisonnables (max 512x512 pour les backgrounds)
3. Évitez les images énormes qui alourdissent le resource pack

Taille du resource pack

Le plugin génère un pack optimisé :

• Compression automatique en ZIP
• Pas de fichiers inutiles
• Cache SHA-1 pour éviter les retéléchargements

❓ Questions fréquentes

Le layout ne s'applique pas après /bqhud reload

Solution :

1. Vérifiez la syntaxe YAML dans config.yml
2. Regardez les logs serveur pour détecter les erreurs
3. En mode folder, vous devez rebuild votre pack serveur

Les backgrounds ne s'affichent pas

Causes possibles :

1. Fichiers PNG mal nommés (respectez la casse exacte)
2. Fichiers corrompus ou format invalide
3. Resource pack non chargé par le client

Solution :

/bqhud reload
# Vérifiez les logs pour voir si les backgrounds sont détectés

Comment revenir au layout par défaut ?

Supprimez vos modifications dans config.yml et restaurez les valeurs par défaut, puis :

/bqhud reload

📖 Voir aussi

• Configuration complète
• Avatars et Backgrounds
• Troubleshooting