Hytale UI & HUD
Create custom user interfaces and HUD elements for your Hytale mods.
UI Framework
Hytale uses NoesisGUI - a powerful XAML-based UI framework.
UI Types
Type Use For Examples
HUD Always-on-screen Health, mana, minimap
Overlay Temporary display Notifications, titles
Screen Full interface Inventory, menus
Dialog Popups Confirmations, NPC chat
Widget Reusable components Buttons, bars, icons
Folder Structure
MyPack/ └── Common/ └── UI/ ├── hud/ │ ├── my_hud.xaml │ └── my_hud.xaml.cs ├── screens/ │ ├── custom_menu.xaml │ └── custom_inventory.xaml └── textures/ ├── button_bg.png └── icons/
Basic HUD Element
XAML Definition
<!-- my_hud.xaml --> <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10">
<!-- Mana Bar -->
<Border Background="#333" CornerRadius="5" Padding="2">
<Grid Width="200" Height="20">
<Rectangle Fill="#224" RadiusX="3" RadiusY="3"/>
<Rectangle x:Name="ManaFill" Fill="#48F" RadiusX="3" RadiusY="3"
HorizontalAlignment="Left" Width="150"/>
<TextBlock Text="150/200" Foreground="White"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
</Grid>
</UserControl>
JSON Registration
{ "hudId": "mymod:mana_bar", "xaml": "ui/hud/mana_bar.xaml", "position": "top-left", "offset": { "x": 10, "y": 50 } }
HUD Positions
Position Description
top-left
Upper left corner
top-center
Upper center
top-right
Upper right corner
center
Screen center
bottom-left
Lower left
bottom-center
Lower center
bottom-right
Lower right
Common UI Components
Progress Bar
<Grid Width="200" Height="20"> <Rectangle Fill="#333" RadiusX="3" RadiusY="3"/> <Rectangle x:Name="ProgressFill" Fill="#4A4" RadiusX="3" RadiusY="3" HorizontalAlignment="Left" Width="{Binding Progress}"/> <TextBlock Text="{Binding ProgressText}" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid>
Icon Button
<Button Width="48" Height="48" Style="{StaticResource IconButton}"> <Image Source="textures/icons/sword.png" Width="32" Height="32"/> </Button>
Tooltip
<Border Background="#222" CornerRadius="5" Padding="10"> <StackPanel> <TextBlock Text="{Binding ItemName}" FontWeight="Bold" Foreground="#FF0"/> <TextBlock Text="{Binding ItemDesc}" Foreground="#AAA" TextWrapping="Wrap"/> </StackPanel> </Border>
Custom Screens
Menu Screen
<UserControl> <Grid Background="#88000000"> <Border Background="#333" CornerRadius="10" Padding="20" HorizontalAlignment="Center" VerticalAlignment="Center"> <StackPanel Width="300"> <TextBlock Text="My Custom Menu" FontSize="24" Foreground="White" HorizontalAlignment="Center"/>
<Button Content="Option 1" Margin="0,20,0,0" Height="40"/>
<Button Content="Option 2" Margin="0,10,0,0" Height="40"/>
<Button Content="Close" Margin="0,20,0,0" Height="40"
Click="OnClose"/>
</StackPanel>
</Border>
</Grid>
</UserControl>
Inventory Grid
<ItemsControl ItemsSource="{Binding InventorySlots}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Columns="9" Rows="4"/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Border Width="48" Height="48" Background="#444" BorderBrush="#666" BorderThickness="1" Margin="2"> <Image Source="{Binding Icon}" Stretch="Uniform"/> </Border> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>
Plugin Integration
Show/Hide HUD
// Show custom HUD player.showHUD("mymod:mana_bar");
// Hide HUD player.hideHUD("mymod:mana_bar");
// Check if visible boolean visible = player.isHUDVisible("mymod:mana_bar");
Update HUD Data
// Update bound data player.setHUDData("mymod:mana_bar", "mana", currentMana); player.setHUDData("mymod:mana_bar", "maxMana", maxMana);
// Or with object ManaData data = new ManaData(currentMana, maxMana); player.setHUDData("mymod:mana_bar", data);
Open Screens
// Open custom screen player.openScreen("mymod:custom_menu");
// Open with data player.openScreen("mymod:shop", shopInventory);
// Close current screen player.closeScreen();
Notifications
// Show toast notification player.showNotification("Achievement Unlocked!", 5.0f);
// Show title player.showTitle("Boss Defeated!", "You earned 500 XP", 3.0f);
// Show action bar message player.showActionBar("Press E to interact");
Data Binding
ViewModel Pattern
public class ManaViewModel { private int mana; private int maxMana;
public int getMana() { return mana; }
public void setMana(int value) {
this.mana = value;
notifyPropertyChanged("mana");
notifyPropertyChanged("manaPercent");
}
public double getManaPercent() {
return (double) mana / maxMana * 100;
}
}
In XAML
<Rectangle Width="{Binding ManaPercent, Converter={StaticResource PercentToWidth}}"/> <TextBlock Text="{Binding Mana, StringFormat='{}{0} MP'}"/>
Styling
Custom Button Style
<Style x:Key="GameButton" TargetType="Button"> <Setter Property="Background" Value="#444"/> <Setter Property="Foreground" Value="White"/> <Setter Property="BorderBrush" Value="#666"/> <Setter Property="BorderThickness" Value="2"/> <Setter Property="Padding" Value="15,8"/> <Setter Property="FontSize" Value="14"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#555"/> <Setter Property="BorderBrush" Value="#888"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Background" Value="#333"/> </Trigger> </Style.Triggers> </Style>
Color Palette
<Color x:Key="PrimaryColor">#4A90D9</Color> <Color x:Key="SecondaryColor">#2ECC71</Color> <Color x:Key="DangerColor">#E74C3C</Color> <Color x:Key="BackgroundColor">#2C3E50</Color> <Color x:Key="TextColor">#ECF0F1</Color>
Best Practices
Do
Practice Why
Use data binding Automatic updates
Consistent styling Professional look
Test all resolutions Accessibility
Provide feedback User understands
Don't
Mistake Why Bad
Too many HUDs Screen clutter
Tiny text Hard to read
No close button Frustrating
Block gameplay Annoying
Quick Reference
Task How
Create HUD Define XAML + register JSON
Show HUD player.showHUD("id")
Update data player.setHUDData(...)
Open screen player.openScreen("id")
Show notification player.showNotification(...)
Resources
-
NoesisGUI Docs: noesisengine.com
-
Plugin Development: See hytale-plugin-dev skill
-
NPC Dialogue: See hytale-npc-ai skill