Hytale UI Studio

code Code Editor (.UI)

// ============================================================
// FILE: ComponentLab.ui
// DESC: Showcase of Hytale UI components with strict syntax
// ============================================================

Group {
  // 1. ROOT CONTAINER (Overlay)
  // Occupies the full screen and centers the content
  Anchor: (Full: 0);
  LayoutMode: Middle;
  Background: #000000(0.85); // Semi-transparent dark background

// ==========================================================
  // MAIN WINDOW
  // ==========================================================
  Group #MainPanel {
    // PROPERTIES (Defined BEFORE children for strict mode compliance)
    Anchor: (Width: 450, Height: 600);
    Background: #2a2a2a;
    Padding: (Full: 25);
    
    // Vertical Layout: Stacks children from top to bottom
    LayoutMode: Top;

// ------------------------------------------------------
    // 1. HEADER SECTION
    // ------------------------------------------------------
    Label #Header {
      Anchor: (Bottom: 5);
      Text: "COMPONENT LAB";
      Style: (
        FontSize: 26,
        RenderBold: true,
        RenderUppercase: true,
        TextColor: #F0A020, // Hytale Orange
        HorizontalAlignment: Center
      );
    }

Label #SubHeader {
      Anchor: (Bottom: 25);
      Text: "Hytale UI Engine Test Environment";
      Style: (
        FontSize: 14,
        TextColor: #888888,
        HorizontalAlignment: Center
      );
    }

// ------------------------------------------------------
    // 2. INPUT FIELDS
    // ------------------------------------------------------
    // Name Label
    Label { 
      Anchor: (Bottom: 5); 
      Text: "Character Name:"; 
      Style: (FontSize: 13, TextColor: #cccccc); 
    }

// Text Input (Accepts PlaceholderText)
    TextField #InputName {
      Anchor: (Height: 42, Bottom: 15);
      Padding: (Horizontal: 12);
      // Background with border property triggers 9-slice rendering
      Background: (Color: #111111, Border: 2);
      PlaceholderText: "Enter name...";

Style: (FontSize: 16, TextColor: #FFFFFF);
    }

// Level Label
    Label { 
      Anchor: (Bottom: 5); 
      Text: "Level (Number Only):"; 
      Style: (FontSize: 13, TextColor: #cccccc); 
    }

// Numeric Input (Strict: No PlaceholderText allowed here)
    NumberField #InputLevel {
      Anchor: (Height: 42, Bottom: 20);
      Padding: (Horizontal: 12);
      Background: (Color: #111111, Border: 2);

Style: (FontSize: 16, TextColor: #FFFFFF);
    }

// Visual Separator Line
    Group #Separator {
      Anchor: (Height: 2, Bottom: 20);
      Background: #444444;
    }

// ------------------------------------------------------
    // 3. BUTTONS SECTION
    // ------------------------------------------------------
    Label { 
      Anchor: (Bottom: 10); 
      Text: "Button States:"; 
      Style: (FontSize: 13, TextColor: #cccccc); 
    }

// ROW 1: Horizontal Layout for Action Buttons
    Group #Row1 {
      LayoutMode: Left; // Arranges children side-by-side
      Anchor: (Height: 48, Bottom: 10);

// Primary Button (Blue)
      Button #BtnPrimary {
        FlexWeight: 1; // Takes 50% of available width
        Anchor: (Right: 5); // Spacing between buttons
        LayoutMode: Middle;
        Background: #4A90E2;

// Interaction styles must be defined BEFORE the Label child
        Style: (
          Hovered: (Background: #5DA0F2),
          Pressed: (Background: #3070B0)
        );

Label { 
          Text: "PRIMARY"; 
          Style: (RenderBold: true, TextColor: #ffffff); 
        }
      }

// Danger Button (Red)
      Button #BtnDanger {
        FlexWeight: 1; // Takes the other 50%
        Anchor: (Left: 5);
        LayoutMode: Middle;
        Background: #8B3A3A;

Style: (
          Hovered: (Background: #A34545),
          Pressed: (Background: #602020)
        );

Label { 
          Text: "DANGER"; 
          Style: (RenderBold: true, TextColor: #FFCCCC); 
        }
      }
    }

// ROW 2: Horizontal Layout for Secondary Options
    Group #Row2 {
      LayoutMode: Left;
      Anchor: (Height: 48);

// Disabled Button (Visual only)
      Button #BtnDisabled {
        FlexWeight: 1;
        Anchor: (Right: 5);
        LayoutMode: Middle;
        Background: #444444;

Label { 
          Text: "DISABLED"; 
          Style: (RenderBold: true, TextColor: #888888); 
        }
      }

// Secondary Button (Outline style)
      Button #BtnSecondary {
        FlexWeight: 1;
        Anchor: (Left: 5);
        LayoutMode: Middle;
        Background: (Color: #333333, Border: 2);

Style: (
          Hovered: (Background: #444444),
          Pressed: (Background: #222222)
        );

Label { 
          Text: "SECONDARY"; 
          Style: (RenderBold: true, TextColor: #BBBBBB); 
        }
      }
    }

// Spacer: Pushes content to the bottom
    Group { FlexWeight: 1; }

// Footer Label
    Label {
      Text: "Hytale UI Studio v2.0";
      Style: (FontSize: 12, TextColor: #555555, HorizontalAlignment: Center);
    }
  }
}

Hytale UI Documentation

CSS API Reference