Perro LogoPerro Engine

GitHub
← Back to Documentation

FUR Components

⚠️ Experimental - Pre-Release

FUR provides a set of built-in components for building user interfaces. Each component has specific attributes and behaviors.

UI (Root)

The root component that wraps all FUR markup. Every FUR file must start with [UI].

[UI]    <!-- All other components go here -->[/UI]

Panel

A container component for grouping and organizing other components. Panels can have background colors, padding, and margins.

Common Attributes:

  • bg - Background color (e.g., bg=sea-5, bg=slate-8)
  • padding - Internal spacing (e.g., padding=4)
  • margin - External spacing
  • margin-top, margin-bottom, etc. - Directional margins
[Panel bg=slate-8 padding=8]
    [Text]
        Content
    [/Text]
[/Panel]

Text

Displays text content with customizable styling options.

Common Attributes:

  • text-color - Text color (e.g., text-color=white)
  • text-size - Font size (e.g., text-size=xl, text-size=lg)
  • font-weight - Font weight (e.g., font-weight=bold)
[Text font-weight=bold text-color=white text-size=xl]    Hello Perro![/Text]

Button

An interactive button component that can be clicked. Buttons automatically emit signals when clicked, based on their id attribute.

Common Attributes:

  • id - Unique identifier (required for signal emission)
  • bg - Background color
  • padding - Internal spacing
  • All Text attributes for button label styling
[Button id=start bg=green-6 padding=8]
    [Text text-color=white]
        Start Game
    [/Text]
[/Button]

A button with id=start will emit a start_Pressed signal when clicked. Scripts can listen for this signal using on start_Pressed().

Layout Components

FUR supports layout components for organizing child elements. These components control how children are positioned and arranged.

Layout components can have child layouts for more complex arrangements.

Complete Example

[UI]    [Panel bg=sea-5 padding=8]        [Text font-weight=bold text-size=xl text-color=white]            Game Menu        [/Text]         [Panel bg=slate-7 padding=4 margin-top=4]            [Button id=start bg=green-6 padding=8]                [Text text-color=white]                    Start                [/Text]            [/Button]             [Button id=settings bg=blue-6 padding=8 margin-top=4]                [Text text-color=white]                    Settings                [/Text]            [/Button]             [Button id=quit bg=red-6 padding=8 margin-top=4]                [Text text-color=white]                    Quit                [/Text]            [/Button]        [/Panel]    [/Panel][/UI]

Using FUR Files

To use a FUR file in your game, attach it to a UINode:

@script MainMenu extends UINode    fn init() {        self.fur_path = "res/ui/main_menu.fur"    }     on start_Pressed() {        Console.print("Start button clicked!")    }     on settings_Pressed() {        Console.print("Settings button clicked!")    }     on quit_Pressed() {        Console.print("Quit button clicked!")    }

Related