5Mixer / haxeui-kha

The Kha backend of the HaxeUI framework -

haxeui-kha

This is the Kha backend for HaxeUI

Installation

• haxeui-kha has a dependency to haxeui-core, and so that too must be installed
• haxeui-kha also has a dependency to Kha, please refer to the installation instructions on their site

mkdir Libraries
cd Libraries
git clone https://github.com/haxeui/haxeui-core.git
git clone https://github.com/haxeui/haxeui-kha.git
git clone https://github.com/haxefoundation/hscript.git

Or even better, add them as git submodules for proper versioning!

Usage

The simplest method to create a new Kha application that is HaxeUI ready is to use one of the haxeui-templates. These templates will allow you to start a new project rapidly with HaxeUI support baked in.

If however you already have an existing application, then incorporating HaxeUI into that application is straightforward.

khamake.js

Simply add the following lines to your khamake.js and rebuild your project files:

project.addLibrary('haxeui-core');
project.addLibrary('haxeui-kha');
project.addLibrary('hscript');

Toolkit initialisation and usage

The Kha system itself must be initialised and a render loop started. This can be done by using code similar to:

class Main {
    public static function main() {
        kha.System.start({}, function ( _ ) {
            kha.Assets.loadEverything(function() {
                haxe.ui.Toolkit.init();

                final screen = haxe.ui.core.Screen.instance;
                final ui = haxe.ui.macros.ComponentMacros.buildComponent("ui.xml");

                screen.addComponent(ui);

                kha.System.notifyOnFrames(function( framebuffers: Array<kha.Framebuffer> ) {
                    final fb = framebuffers[0];
                    final g2 = fb.g2;
                    g2.begin(true, kha.Color.White);
                        screen.renderTo(g2);
                    g2.end();
                });
            });
        });
    }
}

Once the toolkit is initialised you can add components using the methods specified here.

Kha specifics

As well as using the generic Screen.instance.addComponent, it is also possible to render a component to a specific surface use the components special renderTo function. Eg:

main.renderTo(...);

Addtional resources

• component-explorer - Browse HaxeUI components
• playground - Write and test HaxeUI layouts in your browser
• component-examples - Various componet examples
• haxeui-api - The HaxeUI api docs.
• haxeui-guides - Set of guides to working with HaxeUI and backends.