368 lines
8.9 KiB
Markdown
368 lines
8.9 KiB
Markdown
---
|
|
title: UI Styles
|
|
type: docs
|
|
weight: 14
|
|
---
|
|
|
|
This page documents the styling system for Hytale UI widgets.
|
|
|
|
## Style States
|
|
|
|
Interactive widgets support multiple states:
|
|
|
|
| State | When Applied |
|
|
|-------|--------------|
|
|
| `Default` | Normal state |
|
|
| `Hovered` | Mouse over widget |
|
|
| `Pressed` | Mouse button held |
|
|
| `Disabled` | Widget is disabled |
|
|
|
|
```
|
|
Style: (
|
|
Default: (Background: "Button.png"),
|
|
Hovered: (Background: "ButtonHovered.png"),
|
|
Pressed: (Background: "ButtonPressed.png"),
|
|
Disabled: (Background: "ButtonDisabled.png")
|
|
);
|
|
```
|
|
|
|
## LabelStyle
|
|
|
|
Text styling for Label widgets.
|
|
|
|
```
|
|
@MyLabelStyle = LabelStyle(
|
|
FontSize: 16,
|
|
FontName: "Default", // or "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;
|
|
}
|
|
```
|
|
|
|
### LabelStyle Properties
|
|
|
|
| Property | Type | Description |
|
|
|----------|------|-------------|
|
|
| `FontSize` | number | Text size |
|
|
| `FontName` | string | Font family ("Default", "Secondary") |
|
|
| `TextColor` | color | Text color |
|
|
| `RenderBold` | bool | Bold text |
|
|
| `RenderUppercase` | bool | Force uppercase |
|
|
| `LetterSpacing` | number | Space between characters |
|
|
| `Wrap` | bool | Enable text wrapping |
|
|
| `HorizontalAlignment` | enum | Start, Center, End |
|
|
| `VerticalAlignment` | enum | Top, Center, Bottom |
|
|
| `OutlineColor` | color | Text outline color |
|
|
| `Alignment` | enum | Shorthand for both alignments (Center) |
|
|
|
|
## ButtonStyle
|
|
|
|
Styling for Button widgets (without text).
|
|
|
|
```
|
|
@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;
|
|
}
|
|
```
|
|
|
|
### Button State Properties
|
|
|
|
| Property | Type | Description |
|
|
|----------|------|-------------|
|
|
| `Background` | PatchStyle | Background appearance |
|
|
|
|
## TextButtonStyle
|
|
|
|
Styling for TextButton widgets.
|
|
|
|
```
|
|
@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
|
|
);
|
|
```
|
|
|
|
### TextButton State Properties
|
|
|
|
| Property | Type | Description |
|
|
|----------|------|-------------|
|
|
| `Background` | PatchStyle | Background appearance |
|
|
| `LabelStyle` | LabelStyle | Text styling |
|
|
|
|
## PatchStyle
|
|
|
|
9-patch texture configuration for stretchable backgrounds.
|
|
|
|
```
|
|
@MyPatchStyle = PatchStyle(
|
|
TexturePath: "Panel.png",
|
|
Border: 16 // Uniform border
|
|
);
|
|
|
|
@MyPatchStyle2 = PatchStyle(
|
|
TexturePath: "Button.png",
|
|
HorizontalBorder: 80, // Left/right border
|
|
VerticalBorder: 12 // Top/bottom border
|
|
);
|
|
|
|
// With color tint
|
|
@ColoredPatch = PatchStyle(
|
|
Color: #ff0000(0.5) // Semi-transparent red
|
|
);
|
|
```
|
|
|
|
### PatchStyle Properties
|
|
|
|
| Property | Type | Description |
|
|
|----------|------|-------------|
|
|
| `TexturePath` | string | Path to texture file |
|
|
| `Border` | number | Uniform 9-patch border |
|
|
| `HorizontalBorder` | number | Left/right 9-patch border |
|
|
| `VerticalBorder` | number | Top/bottom 9-patch border |
|
|
| `Color` | color | Solid color (instead of texture) |
|
|
|
|
## InputFieldStyle
|
|
|
|
Styling for text input fields.
|
|
|
|
```
|
|
@MyInputStyle = InputFieldStyle(
|
|
TextColor: #ffffff,
|
|
FontSize: 16
|
|
);
|
|
|
|
@MyPlaceholderStyle = InputFieldStyle(
|
|
TextColor: #6e7da1
|
|
);
|
|
|
|
TextField {
|
|
Style: @MyInputStyle;
|
|
PlaceholderStyle: @MyPlaceholderStyle;
|
|
}
|
|
```
|
|
|
|
## SliderStyle
|
|
|
|
Styling for slider controls.
|
|
|
|
```
|
|
@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)
|
|
)
|
|
);
|
|
```
|
|
|
|
### SliderStyle Properties
|
|
|
|
| Property | Type | Description |
|
|
|----------|------|-------------|
|
|
| `Background` | PatchStyle | Track background |
|
|
| `Handle` | string | Handle texture path |
|
|
| `HandleWidth` | number | Handle width |
|
|
| `HandleHeight` | number | Handle height |
|
|
| `Sounds` | object | Sound effects |
|
|
|
|
## CheckBoxStyle
|
|
|
|
Styling for checkbox controls.
|
|
|
|
```
|
|
@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
|
|
|
|
Styling for dropdown menus.
|
|
|
|
```
|
|
@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, // or Bottom
|
|
PanelOffset: 7,
|
|
EntryHeight: 31,
|
|
EntriesInViewport: 10,
|
|
HoveredEntryBackground: (Color: #0a0f17),
|
|
PressedEntryBackground: (Color: #0f1621),
|
|
Sounds: @DropdownBoxSounds,
|
|
EntrySounds: @ButtonSounds
|
|
);
|
|
```
|
|
|
|
## ScrollbarStyle
|
|
|
|
Styling for scrollbars.
|
|
|
|
```
|
|
@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
|
|
|
|
Styling for tab navigation.
|
|
|
|
```
|
|
@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
|
|
|
|
Styling for text tooltips.
|
|
|
|
```
|
|
@MyTooltipStyle = TextTooltipStyle(
|
|
Background: (TexturePath: "TooltipBackground.png", Border: 24),
|
|
MaxWidth: 400,
|
|
LabelStyle: (Wrap: true, FontSize: 16),
|
|
Padding: 24
|
|
);
|
|
```
|
|
|
|
## Sound Definitions
|
|
|
|
Sounds are defined as objects with audio properties.
|
|
|
|
```
|
|
@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)
|
|
);
|
|
```
|
|
|
|
### Sound Properties
|
|
|
|
| Property | Type | Description |
|
|
|----------|------|-------------|
|
|
| `SoundPath` | string | Path to audio file |
|
|
| `Volume` | number | Volume level (can be negative) |
|
|
| `MinPitch` | number | Minimum pitch variation |
|
|
| `MaxPitch` | number | Maximum pitch variation |
|
|
|
|
## Style Inheritance
|
|
|
|
Use the spread operator to extend 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
|
|
);
|
|
```
|