A modern UI library for kaboom.

npm i kaboom-flex-ui

Firstly, import the UI plugin and load it into kaboom.

import flexUIPlugin from "kaboom-flex-ui";

const k = kaboom({
    plugins: [ flexUIPlugin ]
});

Then, to create a UI you will have to call the makeUI function with a function that returns a UI element.

const mainMenu = k.makeUI(() => k.$box(
    {
        width: 500,
        height: 500,
        background: YELLOW
    },
    k.$text("Hello, World!")
));

After defining the UI you will have to add it the current scene using its add method.

mainMenu.add();

After a reload you should now see a yellow rectangle on your screen with the text "Hello, World!".

• makeUI
• $box
• $box
• $box
• $text
• $button
• default

Defines a UI function that takes a UI generator and returns an object with an add method.

Parameters:

• generator: The UI generator function.

Creates a UI box element with optional attributes and children elements. Creates a UI box element with specified attributes and optional children elements.

Parameters:

• children: The children UI elements.
• attrs: The attributes for the box element.
• children: The children UI elements.

Creates a UI box element with optional attributes and children elements. Creates a UI box element with specified attributes and optional children elements.

Parameters:

• children: The children UI elements.
• attrs: The attributes for the box element.
• children: The children UI elements.

Creates a UI box element with optional attributes and children elements. Creates a UI box element with specified attributes and optional children elements.

Parameters:

• children: The children UI elements.
• attrs: The attributes for the box element.
• children: The children UI elements.

Creates a UI text element with the specified text and optional attributes.

Parameters:

• text: The text content.
• attrs: Optional attributes for the text element.

Creates a UI button element with the specified text and attributes.

Parameters:

• text: The text content.
• attrs: The attributes for the button element.