haxeui-pixijs

haxeui-pixijs is the PixiJS backend for HaxeUI.

Installation

• haxeui-pixijs has a dependency to haxeui-core, and so that too must be installed.
• haxeui-pixijs also has a dependency to pixi-haxe (the PixiJS Haxe externs), please refer to the installation instructions on their site.
• You will also need a copy of the PixiJS JavaScript libraries which can be obtained here. (Note: if you are using haxeui-templates the library is included automatically for you)

Eventually all these libs will become haxelibs, however, currently in their alpha form they do not even contain a haxelib.json file (for dependencies, etc) and therefore can only be used by downloading the source and using the haxelib dev command or by directly using the git versions using the haxelib git command (recommended). Eg:

haxelib git haxeui-core https://github.com/haxeui/haxeui-core
haxelib dev haxeui-pixijs path/to/expanded/source/archive

Usage

The simplest method to create a new PixiJS 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:

haxelibs

As well as the haxeui-core and haxeui-pixijs haxelibs, you must also include (in either the IDE or your .hxml) the haxelib pixijs.

Toolkit initialisation and usage

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

private static function initPixi() {
	_stage = new Graphics();
    var options:RenderingOptions = {};
    _renderer = Detector.autoDetectRenderer(width, height, options);
	
    Browser.document.body.appendChild(_renderer.view);
    Browser.window.requestAnimationFrame(cast _render);
}

private static function _render() {
    Browser.window.requestAnimationFrame(cast _render);
    _renderer.render(_stage);
}

Initialising the toolkit requires you to add these lines somewhere before you start to actually use HaxeUI in your application and after PixiJS has been initialised:

Toolkit.init({
	stage: _stage,      // the default place 'Screen' will place objects
	renderer: _renderer // the renderer that is being used
});

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

PixiJS specifics

As well as using the generic Screen.instance.addComponent, it is also possible to add components directly using a PixiJS display container. Eg:

_stage = new Graphics();
_stage.addChild(main);

Initialisation options

The configuration options that may be passed to Tookit.init() are as follows:

Toolkit.init({
	stage: _stage,      // the default place 'Screen' will place objects
	renderer: _renderer // the renderer that is being used
});

Addtional resources

• haxeui-api - The HaxeUI api docs.
• haxeui-guides - Set of guides to working with HaxeUI and backends.
• haxeui-demo - Demo application written using HaxeUI.
• haxeui-templates - Set of templates for IDE's to allow quick project creation.
• haxeui-bdd - A behaviour driven development engine written specifically for HaxeUI (uses haxe-bdd which is a gherkin/cucumber inspired project).
• WWX2016 presentation - A presentation given at WWX2016 regarding HaxeUI.