Documentation/content/ui-systems/ui-syntax.fr.md

title, type, weight

title	type	weight
Syntaxe UI	docs	11

Cette page couvre la syntaxe complète du langage de balisage UI de Hytale.

Commentaires

// Commentaire sur une ligne

/* Commentaire
   multi-lignes */

Variables

Variables Locales

Définissez les variables avec le préfixe @ :

@MyNumber = 50;
@MyString = "Bonjour";
@MyColor = #ff5500;
@MyObject = (Key: value, Other: 123);

Types de Variables

Type	Exemple
Nombre	@Size = 50;
Chaîne	@Text = "Bonjour";
Couleur	@Color = #ff5500;
Objet	@Obj = (Width: 100, Height: 50);
Tableau	@List = [item1, item2, item3];
Booléen	@Visible = true;

Utiliser les Variables

Référencez les variables avec @ :

Group {
  Anchor: (Height: @MyNumber);
  Background: (Color: @MyColor);
}

Imports

Importer des Fichiers

Utilisez le préfixe $ pour importer des fichiers externes :

$Common = "Common.ui";
$Sounds = "../Sounds.ui";
$ClientCommon = "../../Common.ui";

Référencer les Variables Importées

Accédez aux variables importées avec la notation pointée :

$Common.@DefaultButtonStyle
$Sounds.@ButtonsLight

Utiliser les Templates Importés

Instanciez les templates depuis les imports :

$Common.@TextButton {
  @Text = "Cliquez-moi";
}

Couleurs

Hexadécimal

@Color1 = #ff5500;          // RGB
@Color2 = #ff5500ff;        // RGBA

Avec Opacité

@Color3 = #ff5500(0.5);     // 50% d'opacité
@Color4 = #000000(0.8);     // 80% d'opacité

Objets

Objet Simple

@Style = (
  FontSize: 16,
  TextColor: #ffffff,
  RenderBold: true
);

Objets Imbriqués

@ButtonStyle = (
  Default: (
    Background: (TexturePath: "Button.png", Border: 12)
  ),
  Hovered: (
    Background: (TexturePath: "ButtonHovered.png", Border: 12)
  )
);

Opérateur Spread

Utilisez ... pour étendre/fusionner des objets :

@BaseStyle = (
  FontSize: 16,
  TextColor: #ffffff
);

@ExtendedStyle = (
  ...@BaseStyle,          // Hérite de toutes les propriétés de @BaseStyle
  RenderBold: true        // Ajoute/remplace des propriétés
);

Le spread fonctionne dans tout contexte d'objet :

Style: (
  ...$Common.@DefaultButtonStyle,
  Sounds: (
    ...$Sounds.@ButtonsLight,
    Activate: (Volume: 10)
  )
);

Templates (Macros)

Définir un Template

Les templates sont des définitions de widgets réutilisables avec paramètres :

@MyButton = TextButton {
  @Text = "";                    // Paramètre avec défaut
  @Anchor = Anchor();            // Paramètre avec défaut
  @Sounds = ();                  // Défaut vide

  Style: @DefaultTextButtonStyle;
  Anchor: (...@Anchor, Height: 44);
  Text: @Text;
};

Instancier un Template

// Utiliser avec les défauts
@MyButton {}

// Remplacer les paramètres
@MyButton {
  @Text = "Valider";
  @Anchor = (Width: 200);
}

// Depuis un import
$Common.@TextButton {
  @Text = %ui.button.confirm;
}

Déclarations de Widgets

Widget Simple

WidgetType {
  Property: value;
}

Widget avec ID

Les IDs commencent par # et permettent le ciblage depuis Java. Les IDs doivent être en format UpperCamelCase (pas de tirets ni underscores) :

Label #PlayerName {
  Text: "Inconnu";
}

// IDs valides
#MainPanel
#ConfirmButton
#PlayerHealthBar

// IDs invalides (causeront des erreurs)
#main-panel      // Pas de tirets
#confirm_button  // Pas d'underscores
#playerhealthbar // Doit être en UpperCamelCase

Widgets Imbriqués

Group #Container {
  Label #Title {
    Text: "En-tête";
  }

  Group #Content {
    Label {
      Text: "Corps du texte";
    }
  }
}

Widgets Anonymes

Les widgets sans ID sont anonymes :

Group {
  Label { Text: "Pas d'ID"; }
}

Sélecteurs

Les sélecteurs sont des chaînes commençant par # utilisées pour cibler des éléments :

// Dans le code Java
builder.set("#PlayerName", "Steve");
builder.append("#Container", "ui/child_template");
builder.clear("#Content");

Clés de Traduction

Utilisez le préfixe % pour les chaînes localisées :

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

TextButton {
  Text: %client.button.confirm;
}

Constructeurs Typés

Certains types complexes utilisent des constructeurs de style fonction :

// Constructeurs de styles
@Style = LabelStyle(FontSize: 16, TextColor: #fff);
@BtnStyle = ButtonStyle(Default: (...), Hovered: (...));

// Constructeurs de layout
@Pad = Padding(Full: 10);
@Anch = Anchor(Width: 100, Height: 50);

// Constructeurs visuels
@Bg = PatchStyle(TexturePath: "bg.png", Border: 12);
@Scroll = ScrollbarStyle(Size: 6, Spacing: 8);

Exemple Complet

$Common = "Common.ui";
$Sounds = "Sounds.ui";

@PanelWidth = 400;
@PanelHeight = 300;
@TitleColor = #b4c8c9;

@PanelTitle = Label {
  @Text = "";

  Style: (
    FontSize: 20,
    TextColor: @TitleColor,
    RenderBold: true,
    HorizontalAlignment: Center
  );
  Text: @Text;
};

Group #MainPanel {
  Anchor: (Width: @PanelWidth, Height: @PanelHeight);
  Background: (TexturePath: "Panel.png", Border: 20);
  LayoutMode: Top;
  Padding: (Full: 16);

  @PanelTitle {
    @Text = %ui.panel.title;
  }

  Group #Content {
    FlexWeight: 1;
    LayoutMode: TopScrolling;
    ScrollbarStyle: $Common.@DefaultScrollbarStyle;
  }

  $Common.@TextButton #ConfirmButton {
    @Text = %ui.button.confirm;
    @Sounds = $Sounds.@ButtonsLight;
  }
}