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

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

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

Don’t

Quick Reference

Resources

• NoesisGUI Docs: noesisengine.com
• Plugin Development: See hytale-plugin-dev skill
• NPC Dialogue: See hytale-npc-ai skill