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');
await project.addProject("Libraries/haxeui-kha");

Note that haxeui-kha must be added as as a subproject, instead of as a library, in order to include HaxeUI-specific shaders.

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.

haxeui / haxeui-kha

readme