394 lines
8.2 KiB
Markdown
394 lines
8.2 KiB
Markdown
---
|
|
title: Widgets UI
|
|
type: docs
|
|
weight: 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 |
|