Files
Documentation/content/ui-systems/ui-files.fr.md
2026-01-20 20:33:59 +01:00

4.3 KiB

title, type, weight
title type weight
Fichiers UI docs 10

Les fichiers UI (.ui) sont le langage de balisage déclaratif de Hytale pour définir les interfaces utilisateur. Ils décrivent la structure, la disposition et le style des éléments UI qui peuvent être chargés par les plugins via UICommandBuilder.append().

Emplacement des Fichiers

Les fichiers UI sont généralement stockés dans le répertoire Assets :

Assets/
  Common/UI/Custom/           # UI personnalisée côté serveur
    Pages/                    # Templates de pages personnalisées
    Hud/                      # Éléments HUD personnalisés
    Common.ui                 # Définitions partagées
    Sounds.ui                 # Définitions de sons
  Client/Interface/           # UI côté client
    InGame/Hud/               # Composants HUD
    Common/                   # Composants communs
    Common.ui                 # Définitions partagées client

Structure de Base

Un fichier .ui se compose de définitions de variables et de déclarations de widgets :

// Importer des définitions externes
$Common = "../Common.ui";

// Définir des variables locales
@ButtonHeight = 44;
@TextColor = #96a9be;

// Définir un arbre de widgets
Group #Container {
  Anchor: (Width: 400, Height: 300);
  Background: (Color: #000000(0.8));

  Label #Title {
    Text: "Bonjour le monde";
    Style: (FontSize: 24, TextColor: @TextColor);
  }
}

Charger des Fichiers UI depuis les Plugins

Utilisez UICommandBuilder.append() pour charger un fichier UI :

@Override
public void build(Ref<EntityStore> ref, UICommandBuilder builder,
                  UIEventBuilder events, Store<EntityStore> store) {
    // Charger le template UI (extension .ui OBLIGATOIRE)
    builder.append("Pages/MyPage.ui");

    // Ajouter à un élément spécifique
    builder.append("#ContentList", "Pages/ListItem.ui");

    // Définir des valeurs dynamiques avec des sélecteurs
    builder.set("#Title", "Bienvenue, " + playerRef.getUsername());
}

Résolution des Chemins

Le chemin est relatif à Common/UI/Custom/. L'extension .ui est obligatoire.

Chemin dans append() Emplacement Résolu
Pages/MyPage.ui Common/UI/Custom/Pages/MyPage.ui
Common.ui Common/UI/Custom/Common.ui

Pour les Plugins Java (Mods)

Lors de la création d'un plugin Java avec une UI personnalisée, placez vos fichiers .ui dans le dossier resources :

your-plugin/
  src/main/
    java/                           # Code source Java
    resources/
      Common/UI/Custom/             # Les fichiers UI vont ici
        Pages/
          MyPage.ui
          MyButton.ui
        Common.ui                   # Vos définitions partagées
      plugin.json                   # Manifeste du plugin

Définissez "IncludesAssetPack": true dans votre plugin.json pour activer le chargement des assets :

{
  "Group": "MyGroup",
  "Name": "MyPlugin",
  "Version": "1.0.0",
  "Main": "com.example.MyPlugin",
  "IncludesAssetPack": true
}

{{< callout type="info" >}} Le serveur cherche automatiquement les fichiers UI dans Common/UI/Custom/ au sein de l'asset pack de votre plugin. C'est pourquoi des chemins comme Pages/MyPage.ui fonctionnent sans spécifier le chemin complet. {{< /callout >}}

Concepts Clés

Variables

Les variables stockent des valeurs réutilisables :

@Height = 50;                           // Nombre
@Color = #ff5500;                       // Couleur
@Style = (FontSize: 16, RenderBold: true);  // Objet

Imports

Importer des définitions depuis d'autres fichiers :

$Common = "Common.ui";                  // Importer un fichier
$Common.@DefaultButtonStyle             // Référencer une variable importée

IDs de Widget

Utilisez # pour assigner des IDs ciblables depuis Java :

Label #PlayerName {
  Text: "Inconnu";
}
builder.set("#PlayerName", player.getUsername());

Localisation

Utilisez le préfixe % pour les clés de traduction :

Label {
  Text: %server.ui.welcome.title;
}

Étapes Suivantes