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

title, type, weight

title	type	weight
Widgets UI	docs	12

Cette page documente tous les types de widgets disponibles dans le système UI de Hytale.

Widgets Conteneurs

Group

Conteneur de base pour organiser d'autres widgets.

Group #Container {
  Anchor: (Width: 400, Height: 300);
  Background: (Color: #000000(0.5));
  LayoutMode: Top;
  Padding: (Full: 16);

  // Widgets enfants...
}

Propriétés Clés :

• Anchor - Position et taille
• Background - Couleur ou texture de fond
• LayoutMode - Mode d'arrangement des enfants
• Padding - Espacement intérieur
• Visible - Afficher/masquer
• FlexWeight - Poids de dimensionnement flexible

Widgets Texte

Label

Affiche du texte statique ou dynamique.

Label #Title {
  Text: "Bonjour le monde";
  Style: (
    FontSize: 24,
    TextColor: #ffffff,
    RenderBold: true,
    HorizontalAlignment: Center,
    VerticalAlignment: Center
  );
  Anchor: (Height: 40);
}

Propriétés Clés :

• Text - Contenu texte (chaîne ou %translation.key)
• Style - Objet LabelStyle
• Anchor - Position et taille
• Padding - Marge du texte

Widgets Boutons

Button

Bouton cliquable sans label texte.

Button #CloseButton {
  Anchor: (Width: 32, Height: 32);
  Style: (
    Default: (Background: "CloseButton.png"),
    Hovered: (Background: "CloseButtonHovered.png"),
    Pressed: (Background: "CloseButtonPressed.png"),
    Disabled: (Background: "CloseButtonDisabled.png"),
    Sounds: @ButtonSounds
  );
}

TextButton

Bouton avec label texte.

TextButton #SubmitButton {
  Text: %ui.button.submit;
  Style: (
    Default: (
      Background: (TexturePath: "Button.png", Border: 12),
      LabelStyle: (FontSize: 16, TextColor: #ffffff)
    ),
    Hovered: (
      Background: (TexturePath: "ButtonHovered.png", Border: 12),
      LabelStyle: (FontSize: 16, TextColor: #ffffff)
    ),
    Pressed: (
      Background: (TexturePath: "ButtonPressed.png", Border: 12),
      LabelStyle: (FontSize: 16, TextColor: #cccccc)
    ),
    Sounds: @ButtonSounds
  );
  Anchor: (Height: 44);
  Padding: (Horizontal: 24);
}

BackButton

Bouton retour/fermer pré-stylisé.

BackButton {}

ActionButton

Bouton qui affiche un nom d'action avec sa touche associée.

ActionButton #BindingInventory {
  Disabled: true;
  LayoutMode: Right;
  Alignment: Right;
  ActionName: %client.hud.inputBindings.inventory;
  Anchor: (Top: 15);
}

Widgets de Saisie

TextField

Champ de saisie texte mono-ligne.

TextField #NameInput {
  Anchor: (Height: 38);
  Style: @DefaultInputFieldStyle;
  PlaceholderStyle: @DefaultInputFieldPlaceholderStyle;
  Background: (TexturePath: "InputBox.png", Border: 16);
  Padding: (Horizontal: 10);
  PlaceholderText: %ui.placeholder.enterName;
}

NumberField

Champ de saisie numérique.

NumberField #QuantityInput {
  Anchor: (Width: 100, Height: 38);
  Style: @DefaultInputFieldStyle;
  Background: (TexturePath: "InputBox.png", Border: 16);
  Padding: (Horizontal: 10);
  Min: 1;
  Max: 100;
}

CompactTextField

Champ de texte extensible style recherche.

CompactTextField #SearchInput {
  Anchor: (Height: 30);
  CollapsedWidth: 34;
  ExpandedWidth: 200;
  PlaceholderText: %ui.search.placeholder;
  Style: (FontSize: 16);
  PlaceholderStyle: (TextColor: #3d5a85, RenderUppercase: true, FontSize: 14);
  Padding: (Horizontal: 12, Left: 34);
  Decoration: (
    Default: (
      Icon: (Texture: "SearchIcon.png", Width: 16, Height: 16, Offset: 9),
      ClearButtonStyle: @ClearButtonStyle
    )
  );
  ExpandSound: (SoundPath: "Sounds/Expand.ogg", Volume: 6);
  CollapseSound: (SoundPath: "Sounds/Collapse.ogg", Volume: 5);
}

Slider

Contrôle curseur horizontal.

Slider #VolumeSlider {
  Anchor: (Width: 200, Height: 16);
  Style: (
    Background: (TexturePath: "SliderBackground.png", Border: 2),
    Handle: "SliderHandle.png",
    HandleWidth: 16,
    HandleHeight: 16,
    Sounds: (
      Activate: (SoundPath: "Tick.ogg", Volume: 10),
      MouseHover: (SoundPath: "Hover.ogg", Volume: 6)
    )
  );
  Min: 0;
  Max: 100;
  Value: 50;
}

SliderNumberField

Curseur combiné avec affichage numérique.

SliderNumberField #BrightnessSlider {
  Anchor: (Width: 270, Height: 5);
  SliderStyle: @DefaultSliderStyle;
  NumberFieldStyle: @DefaultInputFieldStyle;
}

CheckBox

Case à cocher.

CheckBox #EnableOption {
  Anchor: (Width: 22, Height: 22);
  Background: (TexturePath: "CheckBoxFrame.png", Border: 7);
  Padding: (Full: 4);
  Style: (
    Unchecked: (
      DefaultBackground: (Color: #00000000),
      HoveredBackground: (Color: #00000000),
      ChangedSound: (SoundPath: "Untick.ogg", Volume: 6)
    ),
    Checked: (
      DefaultBackground: (TexturePath: "Checkmark.png"),
      HoveredBackground: (TexturePath: "Checkmark.png"),
      ChangedSound: (SoundPath: "Tick.ogg", Volume: 6)
    )
  );
  Value: false;
}

DropdownBox

Menu de sélection déroulant.

DropdownBox #LanguageSelector {
  Anchor: (Width: 330, Height: 32);
  Style: (
    DefaultBackground: (TexturePath: "Dropdown.png", Border: 16),
    HoveredBackground: (TexturePath: "DropdownHovered.png", Border: 16),
    PressedBackground: (TexturePath: "DropdownPressed.png", Border: 16),
    DefaultArrowTexturePath: "DropdownCaret.png",
    ArrowWidth: 13,
    ArrowHeight: 18,
    LabelStyle: (TextColor: #96a9be, FontSize: 13),
    PanelBackground: (TexturePath: "DropdownBox.png", Border: 16),
    EntryHeight: 31,
    EntriesInViewport: 10,
    Sounds: @DropdownBoxSounds
  );
}

Widgets d'Affichage

Sprite

Image animée ou statique.

Sprite #LoadingSpinner {
  Anchor: (Width: 32, Height: 32);
  TexturePath: "Spinner.png";
  Frame: (Width: 32, Height: 32, PerRow: 8, Count: 72);
  FramesPerSecond: 30;
}

AssetImage

Affiche une image d'asset (icône d'item, etc.).

AssetImage #ItemIcon {
  Anchor: (Width: 64, Height: 64);
}

ProgressBar

Barre de progression.

ProgressBar #HealthBar {
  Anchor: (Width: 200, Height: 20);
  BarTexturePath: "HealthBarFill.png";
  Alignment: Horizontal;
  Direction: Start;
  Value: 0.75;
}

Propriétés :

• Alignment - Horizontal ou Vertical
• Direction - Start ou End
• Value - 0.0 à 1.0

Widgets d'Inventaire

ItemGrid

Grille d'affichage pour les items d'inventaire.

ItemGrid #HotbarGrid {
  SlotsPerRow: 9;
  Style: (
    SlotBackground: "ItemSlot.png",
    SlotSize: 64,
    SlotSpacing: 4,
    HoveredSlotBackground: "ItemSlotHovered.png",
    SelectedSlotBackground: "ItemSlotSelected.png"
  );
  Background: (TexturePath: "HotbarBackground.png", Border: 10);
  Padding: 4;
  RenderItemQualityBackground: true;
  AreItemsDraggable: true;
}

Widgets de Navigation

TabNavigation

Navigation par onglets.

TabNavigation #CategoryTabs {
  Style: (
    TabStyle: (
      Default: (Background: "Tab.png", IconAnchor: (Width: 44, Height: 44)),
      Hovered: (Background: "TabHovered.png"),
      Pressed: (Background: "TabPressed.png")
    ),
    SelectedTabStyle: (
      Default: (Background: "TabSelected.png", Overlay: "TabSelectedOverlay.png")
    ),
    TabSounds: @TabSounds
  );
}

Propriétés de Tooltip

De nombreux widgets supportent les tooltips :

TextButton #InfoButton {
  TooltipText: %ui.tooltip.info;
  TextTooltipStyle: (
    Background: (TexturePath: "TooltipBackground.png", Border: 24),
    MaxWidth: 400,
    LabelStyle: (Wrap: true, FontSize: 16),
    Padding: 24
  );
}

Tableau Récapitulatif des Widgets

Widget	Usage
Group	Conteneur pour la mise en page
Label	Affichage de texte
Button	Bouton cliquable
TextButton	Bouton avec texte
BackButton	Bouton retour pré-stylisé
ActionButton	Action avec affichage de touche
TextField	Saisie de texte
NumberField	Saisie numérique
CompactTextField	Champ de recherche extensible
Slider	Contrôle curseur
SliderNumberField	Curseur avec affichage numérique
CheckBox	Case à cocher
DropdownBox	Menu déroulant de sélection
Sprite	Image/animation
AssetImage	Affichage d'icône d'asset
ProgressBar	Indicateur de progression
ItemGrid	Grille d'inventaire
TabNavigation	Navigation par onglets