Documentation/content/ui-systems/ui-styles.fr.md at main

Files

2026-01-20 20:33:59 +01:00

9.2 KiB

Raw Permalink Blame History

title, type, weight

title	type	weight
Styles UI	docs	14

Cette page documente le système de styles pour les widgets UI de Hytale.

États de Style

Les widgets interactifs supportent plusieurs états :

État	Quand Appliqué
`Default`	État normal
`Hovered`	Souris sur le widget
`Pressed`	Bouton de souris maintenu
`Disabled`	Widget désactivé

Style: (
  Default: (Background: "Button.png"),
  Hovered: (Background: "ButtonHovered.png"),
  Pressed: (Background: "ButtonPressed.png"),
  Disabled: (Background: "ButtonDisabled.png")
);

LabelStyle

Style de texte pour les widgets Label.

@MyLabelStyle = LabelStyle(
  FontSize: 16,
  FontName: "Default",           // ou "Secondary"
  TextColor: #ffffff,
  RenderBold: true,
  RenderUppercase: false,
  LetterSpacing: 0,
  Wrap: false,
  HorizontalAlignment: Center,   // Start, Center, End
  VerticalAlignment: Center,     // Top, Center, Bottom
  OutlineColor: #000000(0.5)
);

Label {
  Style: @MyLabelStyle;
}

Propriétés LabelStyle

Propriété	Type	Description
`FontSize`	nombre	Taille du texte
`FontName`	chaîne	Famille de police ("Default", "Secondary")
`TextColor`	couleur	Couleur du texte
`RenderBold`	bool	Texte en gras
`RenderUppercase`	bool	Forcer les majuscules
`LetterSpacing`	nombre	Espace entre les caractères
`Wrap`	bool	Activer le retour à la ligne
`HorizontalAlignment`	enum	Start, Center, End
`VerticalAlignment`	enum	Top, Center, Bottom
`OutlineColor`	couleur	Couleur du contour du texte
`Alignment`	enum	Raccourci pour les deux alignements (Center)

ButtonStyle

Style pour les widgets Button (sans texte).

@MyButtonStyle = ButtonStyle(
  Default: (Background: (TexturePath: "Button.png", Border: 12)),
  Hovered: (Background: (TexturePath: "ButtonHovered.png", Border: 12)),
  Pressed: (Background: (TexturePath: "ButtonPressed.png", Border: 12)),
  Disabled: (Background: (TexturePath: "ButtonDisabled.png", Border: 12)),
  Sounds: @ButtonSounds
);

Button {
  Style: @MyButtonStyle;
}

Propriétés d'État Button

Propriété	Type	Description
`Background`	PatchStyle	Apparence du fond

TextButtonStyle

Style pour les widgets TextButton.

@MyTextButtonStyle = TextButtonStyle(
  Default: (
    Background: (TexturePath: "Button.png", Border: 12),
    LabelStyle: (FontSize: 17, TextColor: #bfcdd5, RenderBold: true)
  ),
  Hovered: (
    Background: (TexturePath: "ButtonHovered.png", Border: 12),
    LabelStyle: (FontSize: 17, TextColor: #ffffff, RenderBold: true)
  ),
  Pressed: (
    Background: (TexturePath: "ButtonPressed.png", Border: 12),
    LabelStyle: (FontSize: 17, TextColor: #aaaaaa, RenderBold: true)
  ),
  Disabled: (
    Background: (TexturePath: "ButtonDisabled.png", Border: 12),
    LabelStyle: (FontSize: 17, TextColor: #797b7c, RenderBold: true)
  ),
  Sounds: @ButtonSounds
);

Propriétés d'État TextButton

Propriété	Type	Description
`Background`	PatchStyle	Apparence du fond
`LabelStyle`	LabelStyle	Style du texte

PatchStyle

Configuration de texture 9-patch pour les fonds étirables.

@MyPatchStyle = PatchStyle(
  TexturePath: "Panel.png",
  Border: 16                    // Bordure uniforme
);

@MyPatchStyle2 = PatchStyle(
  TexturePath: "Button.png",
  HorizontalBorder: 80,         // Bordure gauche/droite
  VerticalBorder: 12            // Bordure haut/bas
);

// Avec teinte de couleur
@ColoredPatch = PatchStyle(
  Color: #ff0000(0.5)           // Rouge semi-transparent
);

Propriétés PatchStyle

Propriété	Type	Description
`TexturePath`	chaîne	Chemin vers le fichier texture
`Border`	nombre	Bordure 9-patch uniforme
`HorizontalBorder`	nombre	Bordure 9-patch gauche/droite
`VerticalBorder`	nombre	Bordure 9-patch haut/bas
`Color`	couleur	Couleur unie (au lieu de texture)

InputFieldStyle

Style pour les champs de saisie texte.

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

@MyPlaceholderStyle = InputFieldStyle(
  TextColor: #6e7da1
);

TextField {
  Style: @MyInputStyle;
  PlaceholderStyle: @MyPlaceholderStyle;
}

SliderStyle

Style pour les contrôles curseur.

@MySliderStyle = SliderStyle(
  Background: (TexturePath: "SliderBackground.png", Border: 2),
  Handle: "SliderHandle.png",
  HandleWidth: 16,
  HandleHeight: 16,
  Sounds: (
    Activate: (SoundPath: "SliderTick.ogg", Volume: 10),
    MouseHover: (SoundPath: "Hover.ogg", Volume: 6)
  )
);

Propriétés SliderStyle

Propriété	Type	Description
`Background`	PatchStyle	Fond de la piste
`Handle`	chaîne	Chemin texture de la poignée
`HandleWidth`	nombre	Largeur de la poignée
`HandleHeight`	nombre	Hauteur de la poignée
`Sounds`	objet	Effets sonores

CheckBoxStyle

Style pour les cases à cocher.

@MyCheckBoxStyle = CheckBoxStyle(
  Unchecked: (
    DefaultBackground: (Color: #00000000),
    HoveredBackground: (Color: #ffffff20),
    PressedBackground: (Color: #ffffff10),
    DisabledBackground: (Color: #424242),
    ChangedSound: (SoundPath: "Untick.ogg", Volume: 6)
  ),
  Checked: (
    DefaultBackground: (TexturePath: "Checkmark.png"),
    HoveredBackground: (TexturePath: "Checkmark.png"),
    PressedBackground: (TexturePath: "Checkmark.png"),
    ChangedSound: (SoundPath: "Tick.ogg", Volume: 6)
  )
);

DropdownBoxStyle

Style pour les menus déroulants.

@MyDropdownStyle = DropdownBoxStyle(
  DefaultBackground: (TexturePath: "Dropdown.png", Border: 16),
  HoveredBackground: (TexturePath: "DropdownHovered.png", Border: 16),
  PressedBackground: (TexturePath: "DropdownPressed.png", Border: 16),
  DefaultArrowTexturePath: "DropdownCaret.png",
  HoveredArrowTexturePath: "DropdownCaret.png",
  PressedArrowTexturePath: "DropdownCaretPressed.png",
  ArrowWidth: 13,
  ArrowHeight: 18,
  LabelStyle: (TextColor: #96a9be, FontSize: 13),
  EntryLabelStyle: (TextColor: #b7cedd),
  SelectedEntryLabelStyle: (TextColor: #b7cedd, RenderBold: true),
  HorizontalPadding: 8,
  PanelBackground: (TexturePath: "DropdownBox.png", Border: 16),
  PanelPadding: 6,
  PanelAlign: Right,                // ou Bottom
  PanelOffset: 7,
  EntryHeight: 31,
  EntriesInViewport: 10,
  HoveredEntryBackground: (Color: #0a0f17),
  PressedEntryBackground: (Color: #0f1621),
  Sounds: @DropdownBoxSounds,
  EntrySounds: @ButtonSounds
);

ScrollbarStyle

Style pour les barres de défilement.

@MyScrollbarStyle = ScrollbarStyle(
  Spacing: 6,
  Size: 6,
  Background: (TexturePath: "Scrollbar.png", Border: 3),
  Handle: (TexturePath: "ScrollbarHandle.png", Border: 3),
  HoveredHandle: (TexturePath: "ScrollbarHandleHovered.png", Border: 3),
  DraggedHandle: (TexturePath: "ScrollbarHandleDragged.png", Border: 3),
  OnlyVisibleWhenHovered: false
);

TabNavigationStyle

Style pour la navigation par onglets.

@TabStyle = TabStyleState(
  Background: "Tab.png",
  Overlay: "TabOverlay.png",
  IconAnchor: (Width: 44, Height: 44),
  Anchor: (Width: 82, Height: 62)
);

@MyTabsStyle = TabNavigationStyle(
  TabStyle: (
    Default: @TabStyle,
    Hovered: (...@TabStyle, Background: "TabHovered.png"),
    Pressed: (...@TabStyle, Background: "TabPressed.png")
  ),
  SelectedTabStyle: (
    Default: (
      ...@TabStyle,
      Overlay: "TabSelectedOverlay.png"
    )
  ),
  TabSounds: @TabSounds,
  SeparatorAnchor: (Width: 5, Height: 34),
  SeparatorBackground: "TabSeparator.png"
);

TextTooltipStyle

Style pour les infobulles texte.

@MyTooltipStyle = TextTooltipStyle(
  Background: (TexturePath: "TooltipBackground.png", Border: 24),
  MaxWidth: 400,
  LabelStyle: (Wrap: true, FontSize: 16),
  Padding: 24
);

Définitions de Sons

Les sons sont définis comme des objets avec des propriétés audio.

@ButtonSounds = (
  Activate: (
    SoundPath: "Sounds/ButtonActivate.ogg",
    Volume: 6,
    MinPitch: -0.2,
    MaxPitch: 0.2
  ),
  MouseHover: (
    SoundPath: "Sounds/ButtonHover.ogg",
    Volume: 6
  )
);

@DropdownBoxSounds = DropdownBoxSounds(
  Activate: (SoundPath: "Tick.ogg", Volume: 6),
  MouseHover: (SoundPath: "Hover.ogg", Volume: 6),
  Close: (SoundPath: "Untick.ogg", Volume: 6)
);

Propriétés de Son

Propriété	Type	Description
`SoundPath`	chaîne	Chemin vers le fichier audio
`Volume`	nombre	Niveau de volume (peut être négatif)
`MinPitch`	nombre	Variation de hauteur minimale
`MaxPitch`	nombre	Variation de hauteur maximale

Héritage de Styles

Utilisez l'opérateur spread pour étendre les styles :

@BaseButtonStyle = TextButtonStyle(
  Default: (Background: @DefaultBg, LabelStyle: @DefaultLabel),
  Hovered: (Background: @HoveredBg, LabelStyle: @DefaultLabel),
  Pressed: (Background: @PressedBg, LabelStyle: @DefaultLabel),
  Sounds: @ButtonSounds
);

@DestructiveButtonStyle = TextButtonStyle(
  ...@BaseButtonStyle,
  Default: (...@BaseButtonStyle.Default, Background: @DestructiveBg),
  Sounds: @DestructiveSounds
);

9.2 KiB Raw Permalink Blame History