Using NoesisGUI

When to use this skill

• The user wants to create a custom UI for Hytale.

• The user asks about NoesisGUI or XAML in the context of game development.

• The user needs to implement MVVM (Model-View-ViewModel) for a game interface.

• The user wants to optimize UI performance in Hytale.

Workflow

• Define Requirements: Identify the purpose of the UI (HUD, Inventory, Main Menu, etc.).

• Setup Environment: Ensure the user has a XAML editor (Visual Studio Code with Noesis Extension or Noesis Studio).

• Draft layout (XAML): Create the visual structure using standard XAML controls (Grid , StackPanel , Border , ControlTemplate ).

• Implement Logic (Code-Behind/ViewModel): Define the data context and bind properties.

• Integrate: Connect the XAML to the game engine (Hytale) using the appropriate registration methods.

Instructions

1. Basic XAML Structure

Start with a UserControl or Page as the root.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="1280" d:DesignHeight="720">

<Grid>
    <!-- UI Elements Go Here -->
    <TextBlock Text="Hello Hytale!" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"/>
</Grid>

</UserControl>

2. Data Binding (MVVM)

NoesisGUI relies heavily on Data Binding. Avoid referencing UI elements directly in code (e.g., button.Content = "..." ). Instead, bind to properties in a ViewModel.

XAML:

<TextBlock Text="{Binding PlayerName}" /> <Button Command="{Binding AttackCommand}" Content="Attack" />

C# (ViewModel Concept): Ensure your data context implements INotifyPropertyChanged .

public class PlayerViewModel : INotifyPropertyChanged { private string _playerName; public string PlayerName { get => _playerName; set { _playerName = value; OnPropertyChanged("PlayerName"); } } // ... Command implementations }

3. Hytale Specifics

• Registration: Hytale mods typically register UI files in a client-side proxy or initialization step.

• Assets: Reference images using relative paths or Hytale's asset system URIs if applicable.

• Input: Ensure the UI handles input focus correctly so it doesn't conflict with game controls.

4. Best Practices for Performance

• Batching: Group static elements.

• Hit Testing: Set IsHitTestVisible="False" on elements that don't need interaction (like background decorations) to save processing time.

• Complexity: Avoid deep nesting of visual trees. Use Canvas for simple 2D positioning if Grid is too heavy, though Grid is usually preferred for responsive layouts.

Resources

• NoesisGUI Documentation

• Hytale Modding Docs (Check for specific Noesis integration guides)