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
- Syntaxe UI - Référence de syntaxe détaillée
- Widgets UI - Types de widgets disponibles
- Propriétés UI - Propriétés communes
- Styles UI - Système de styles