pixijs/pixi-haxe

Externs of Pixi.js for Haxe

Pixi.js 5 / Haxe 4

-### Installation

haxelib install pixijs

Issues

Found any bug? Please create a new issue.

Demos

• Basics

Usage

package basics;

import pixi.core.Application;
import pixi.core.graphics.Graphics;
import pixi.core.textures.Texture;
import pixi.core.sprites.Sprite;
import js.Browser;

class Main extends Application {

	var _bunny:Sprite;
	var _graphic:Graphics;

	public function new() {
		
		var options:ApplicationOptions = {
			width: Browser.window.innerWidth,
			height: Browser.window.innerHeight,
			backgroundColor: 0x006666,
			transparent: true,
			antialias: false,
		};
		
		super(options);
		ticker.add(function(delta){
			_animate(delta);
		});

		_bunny = new Sprite(Texture.from("assets/basics/bunny.png"));
		_bunny.anchor.set(0.5);
		_bunny.position.set(400, 300);

		_graphic = new Graphics();
		_graphic.beginFill(0xFF0000, 0.4);
		_graphic.drawRect(200, 150, 400, 300);
		_graphic.endFill();

		stage.addChild(_graphic);
		stage.addChild(_bunny);
		Browser.document.body.appendChild(view);
	}

	function _animate(e:Float) {
		_bunny.rotation += 0.1;
	}

	static function main() {
		new Main();
	}
}

Licensing Information

This content is released under the MIT License.

Pixi.js is licensed under the MIT License.

Contributor Code of Conduct

Code of Conduct is adapted from Contributor Covenant, version 1.4

pixi-haxe's Issues

different methods Loader.once in Haxe and JS

Hi, method Loader.once('complete', load);
callback for the 'complete' event of the Loader class - load
in js callback load - may have 2 parameters
in haxe callback load - must have only 1 parameter (and this bug , becouse second parametr have all loaded resourse)

Dynamic overload for DisplayObjectContainer::addChild

A few of the methods in DisplayObjectContainer seem to have overloads for Dynamic types such as addChild.

Is there any reason for this or should they be changed to stricter types?
Looking at the history of the file they seem to only be there for backwards compatibility with older versions of haxe-pixi?

RETINA_PREFIX should be moved to PIXI.settings

Hi, got an issue where our game sets RETINA_PREFIX, this no longer exists in v4.2.1 of pixijs, a bunch of vars have been moved from PIXI to PIXI.settings

Though a comment on v4.2.3 release "Fixes PIXI.settings not being respected" seems to suggest this might have been broken anyway on v4.2.1 and/or v4.2.2.

v4.2.1 changes:
"Moved a bunch of constants to PIXI.settings:
PIXI.settings.RESOLUTION (moved from PIXI.RESOLUTION)
PIXI.settings.FILTER_RESOLUTION (moved from PIXI.RESOLUTION)
PIXI.settings.TARGET_FPMS (moved from PIXI.TARGET_FPMS)
PIXI.settings.MIPMAP_TEXTURES (moved from PIXI.MIPMAP_TEXTURES)
PIXI.settings.SPRITE_BATCH_SIZE (moved from PIXI.SPRITE_BATCH_SIZE)
PIXI.settings.SPRITE_MAX_TEXTURES (moved from PIXI.SPRITE_MAX_TEXTURES)
PIXI.settings.RENDER_OPTIONS (moved from PIXI.DEFAULT_RENDER_OPTIONS)
PIXI.settings.GC_MODE (moved from PIXI.GC_MODES.DEFAULT)
PIXI.settings.TRANSFORM_MODE (moved from PIXI.TRANSFORM_MODE.DEFAULT)
PIXI.settings.SCALE_MODE (moved from PIXI.SCALE_MODES.DEFAULT)
PIXI.settings.RETINA_PREFIX (moved from PIXI.RETINA_PREFIX)
PIXI.settings.WRAP_MODE (moved from PIXI.WRAP_MODES.DEFAULT)
PIXI.settings.PRECISION (moved from PIXI.PRECISION.DEFAULT)"

DisplacementFilter: new is missing texture arg

Hi, the DisplacementFilter new requires a texture argument to work properly.
doc : http://www.goodboydigital.com/pixijs/docs/classes/DisplacementFilter.html.

Anyway, thanks for the awesome work. Using pixi.js from haxe is so refreshing :)

What's the convention for js functions outside classes

Where can js files with functions like pixi.core.graphics.utils.bezierCurveTo be included?

I noticed there's pixi.core.utils.Utils, is it ok to include them there?

Interacting with EitherType

There are multiple instances of EitherType being used. What would be the ideal method of retrieving the value of a variable that is of EitherType? I am specifically looking at the hitArea of an Interactive Target:

pixi-haxe/src/pixi/interaction/InteractiveTarget.hx

Line 236 in 99bf8cd

var hitArea: EitherType< Rectangle,

As far as I can tell at the moment, it is impossible? When using haxe.ds.Either, you can at least use a switch with Left and Right, but that doesn't work in this case.

Thank you for your guidance and work on this project.

Test ticket from Code Climate

Phase 8 - Rewrite Samples

Rewrite and test the samples.

Phase 2 - Text & Filters

Externs for Text classes
https://github.com/GoodBoyDigital/pixi.js/tree/dev-rewrite/src/text

Also move filters to the new package
https://github.com/GoodBoyDigital/pixi.js/tree/dev-rewrite/src/filters

Phase 1 - Code Modularization

Create packages as per the new pixi structure.
https://github.com/GoodBoyDigital/pixi.js/tree/dev-rewrite/src

[minor]cannot access new PIXI.Graphics().graphicsData

the graphicsData array is not listed in the core.display.graphics.Graphics.hx

Version number downgraded

By some reason Haxelib think the latest version of this lib is "2.3.2" http://lib.haxe.org/p/pixijs.

It should be "3.0.31" based on the haxelib.json.

Full screen problem with IOS on landscape orientation.

Hi,
I have a problem with Haxe and PixiJs while using the “full screen” (bar are still here, just use all the available web space) view on IOS (tested with safari), when I turn my IPhone to portraits, then back in landscape, the view is no longer centered, but “scrolled down”, which is a problem, as it should be full screen, and force the user, if html accept it to scroll up again.
The bug is visible also on your Bunny Mark demo:
https://github.com/pixijs/pixi-haxe/tree/dev/samples/bunnymark

Thanks,
Red.

Video demo does not work in iOS Safari

Tested the video demo link on an iPhone 5S running version 8.3 and there was no playback just a black box where the video should be and a FPS counter.

Place original pixi.js in pixi-haxe lib

@adireddy Thanks for you work and supporting pixi-haxe!
Could you add pixi.js file to haxe library for easy work and version control?

Thanks in advance

Performance drop for haxe version?

Why does http://www.goodboydigital.com/pixijs/bunnymark_v3/ outperform haxe bunnies http://adireddy.github.io/demos/pixi-haxe/bunnymark.html ? I have a weak computer, so I can see that very clearly. Same window size - the haxe port bunny mark goes below 45 fps on 1500 bunnies. Js version on 6000.

How to create custom filters in Pixi Haxe?

Thanks for this great extern library, I'm using it for first time on a project and works so far very good.

I'm trying to make a custom filter based on https://github.com/pixijs/pixi-extra-filters/tree/master/src/filters/glow but I have no idea how to make it work, is there an example of a Haxe based filter?

• What values goes into uniforms object?
• How to make the variables updatable?

import js.html.Float32Array;
import pixi.core.renderers.webgl.filters.Filter;
import temple.utils.types.FloatUtils;
using StringTools;

/**
 * Source: https://github.com/pixijs/pixi-extra-filters/tree/master/src/filters/glow
 * @author Mark Knol
 */
class GlowFilter extends Filter
{
	public var uniforms = {}; // < what should this be?
	private var quality:Float;
	public var color:Float;
	public var outerStrength:Float;
	public var innerStrength:Float;

	public function new(distance:Int, outerStrength:Int, innerStrength:Int, color:Int, quality:Float) {
		super(
			GlowFilterShader.VERTEX,
			GlowFilterShader.FRAGMENT
				.replace("%QUALITY_DIST%", '' + FloatUtils.roundToPrecision(1 / quality / distance, 7))
				.replace("%DIST%", '' + FloatUtils.roundToPrecision(distance, 7))
		, uniforms);

		this.uniforms.distance = distance;
		this.uniforms.glowColor = new Float32Array([0, 0, 0, 1]);

		quality = Math.pow(quality, 1/3);
		this.quality = quality;

		this.uniforms.distance.value *= quality; //<< what type is distance here?

		this.color = color;
		this.outerStrength = outerStrength;
		this.innerStrength = innerStrength;
	}
}

class GlowFilterShader
{
	public static var FRAGMENT = 'varying vec2 vTextureCoord;
		varying vec4 vColor;

		uniform sampler2D uSampler;

		uniform float distance;
		uniform float outerStrength;
		uniform float innerStrength;
		uniform vec4 glowColor;
		uniform vec4 filterArea;
		vec2 px = vec2(1.0 / filterArea.x, 1.0 / filterArea.y);

		void main(void) {
			const float PI = 3.14159265358979323846264;
			vec4 ownColor = texture2D(uSampler, vTextureCoord);
			vec4 curColor;
			float totalAlpha = 0.0;
			float maxTotalAlpha = 0.0;
			float cosAngle;
			float sinAngle;
			for (float angle = 0.0; angle <= PI * 2.0; angle += %QUALITY_DIST%) {
			   cosAngle = cos(angle);
			   sinAngle = sin(angle);
			   for (float curDistance = 1.0; curDistance <= %DIST%; curDistance++) {
				   curColor = texture2D(uSampler, vec2(vTextureCoord.x + cosAngle * curDistance * px.x, vTextureCoord.y + sinAngle * curDistance * px.y));
				   totalAlpha += (distance - curDistance) * curColor.a;
				   maxTotalAlpha += (distance - curDistance);
			   }
			}
			maxTotalAlpha = max(maxTotalAlpha, 0.0001);

			ownColor.a = max(ownColor.a, 0.0001);
			ownColor.rgb = ownColor.rgb / ownColor.a;
			float outerGlowAlpha = (totalAlpha / maxTotalAlpha)  * outerStrength * (1. - ownColor.a);
			float innerGlowAlpha = ((maxTotalAlpha - totalAlpha) / maxTotalAlpha) * innerStrength * ownColor.a;
			float resultAlpha = (ownColor.a + outerGlowAlpha);
			gl_FragColor = vec4(mix(mix(ownColor.rgb, glowColor.rgb, innerGlowAlpha / ownColor.a), glowColor.rgb, outerGlowAlpha / resultAlpha) * resultAlpha, resultAlpha);
		}'.replace("\t","");

	public static var VERTEX = 'attribute vec2 aVertexPosition;
		this.quality = quality;
		attribute vec2 aTextureCoord;

		uniform mat3 projectionMatrix;
		varying vec2 vTextureCoord;

		void main(void){
			gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
			vTextureCoord = aTextureCoord;
		}'.replace("\t","");
}

Phase 6 - Rewrite Asset Loader

Externs for all loaders
https://github.com/GoodBoyDigital/pixi.js/tree/dev-rewrite/src/loaders

compile haxe to js

No field for AccessibilityManager

Pixi JS documentation has a field for object.accessibility = true/false. No example of how to use this haxe externs AccessibilityManager, it doesn't seem to work as expected.

My setup, Create renderer, create AccessibilityManager, set objects interactive to true and add some mouse events.

I can see mouse events working but tabbing is not working.

Test ticket from Code Climate

v2.x.x branch inconsistent

v2.x.x is inconsistent with our other repos that use v2.x. It may make sense to change it.

Semantically v2.x implies both minor and patch differences where v2.x.x implies a minor and patch version that match eachother :P

ignored params in Text.style

var style = {
fontSize:52,// ignored
fontSize:"52",//ignored
fontSize:"52px",//ignored
};
var text = new Text("some");
text.style = style;

Tilemap API

Hi,

I want to create externs for pixi-tilemap (https://github.com/pixijs/pixi-tilemap), would it be okay to make a PR to this repo? Seems like the best route instead of trying to create a specific repository just for the haxe externs.

Thanks,

Phase 3 - Core Package

All core package classes
https://github.com/GoodBoyDigital/pixi.js/tree/dev-rewrite/src/core

Big one.

PIXI.CanvasBuffer not available with PIXI v4.0

Phase 7 - Cleanup & anything pending

Code cleanup and externs for any missing/pending classes.

new BaseTexture(source:String, ..) should be Element

The mapping of the BaseTexture constructor is wrong. source is declared a String but it should be js.html.Element so it can take an Image or a Canvas. Or define 2 overloads, if that's possible.

 /**
  * @param source {Image|Canvas} the source object of the texture.
  */
 function new(source:String, ?scaleMode:Int, ?resolution:Float);

Retina example doesn't seem to work

Hello,
I was recently doing some tests with scaling etc and it feels like renderingOptions.resolution doesn't make any difference. At first I was trying to use twice as big image for same resolution but double pixelRatio. First results didn't makes any sense so I moved from device to chrome Dev tools. It wasn't any better after that so I went back to github example.

Here what I'm expecting:
[email protected] is 960x600
[email protected] is 1920x1200
so img 2 is 2 times bigger than img1

If I run it on 960x600 screen with pixelRatio = 1 I should be able to see whole image, just like that, right?

So.... Running on same resolution but with pixelRatio = 2 should load bigger image (twice as big) and I still should see exactly same thing, right? If the answer is YES, then I have some bad news:

So now my question is:
-Is there something wrong with my understanding of this or something is actually not working properly?

Best Regards,
Slawomir

particle

Hi!
Great work you did on the v3. I'm currently moving my pixiV2 haxe projects to v3. Thanks for the hard work!

No just to know: should I move the the haxe wrappers for pixi-particles outside of pixi-haxe? Or do you intend to move them back here?
Thanks!

How to access drawCount info?

Hey, I can't success to trace the drawCount info from https://github.com/pixijs/pixi-haxe/blob/dev/src/pixi/core/renderers/webgl/WebGLRenderer.hx#L38
Is it the number of draw call ?

How do you access it from the app/Application.hx class ?

Add compatibility for macros

I'm currently working on creating an automated custom Pixi build system using macros, but the macro gets stuck on anything imported from the js package. If we could change to using typedefs for the js package, and then provide dummy ones if we are in macro land, that should fix the errors.

Externs for Pixi v3.x rewrite

pixijs/pixijs#1296

Using UInt for js target

I get the following error when trying to compile:

/usr/share/haxe/lib/pixijs/2,1,3/pixi/primitives/Graphics.hx:53: characters 1-73 : Class not found : UInt

https://github.com/adireddy/haxe-pixi/blob/master/pixi/primitives/Graphics.hx#L53

I know the documentation says to simulate UInt for platforms that don't support it, but would it maybe be better to change the signature of methods to use Int instead seeing as JS is the only target?

graphics.generateTexture missing?

Hi,
I can't find the generateTexture in graphics. (http://pixijs.github.io/docs/PIXI.Graphics.html)
I draw many things using the graphics API and usually end with some

new Sprite( mygraphics.generateTexture(1,1) );

Now, is it located somewhere else or is the haxe-pixi project not on par with the current pixi.js lib? If so what's the current status?

Thanks!

OpenFL/Haxeflixel integration?

Hi, Im new to haxe, is it possible to use this together with openFL/haxeflixel. I come from a Flash background and this would be brilliant for cross-platform games

Haxe externs for PixiParticles

Hi,
I just wrote the externs for PixiParticles (https://github.com/CloudKidStudio/PixiParticles).
They are of course based on haxe-pixi defs so I wanted to know if you would be interested to add them to the haxe-pixi project or would prefer me to push them to a new github repository?

Fix "MethodLength" issue in samples/bunnymark/Main.hx

Method _setup length is 55 lines (max allowed is 50)

https://codeclimate.com/github/pixijs/pixi-haxe/samples/bunnymark/Main.hx#issue_57fa64fae5b88a00010001f8

Phase 4 - Spine & Extras

Externs for Spine classes
https://github.com/GoodBoyDigital/pixi.js/tree/dev-rewrite/src/spine

And extras
https://github.com/GoodBoyDigital/pixi.js/tree/dev-rewrite/src/extras

Can't access PIXI.utils.TextureCache from Haxe

Hey, I didn't find a way to use it via Haxe. At the moment I'm using an untyped to access it:

untyped js('for (var name in PIXI.utils.TextureCache)
if (name.indexOf("explosion_") == 0)
out[out.length] = name;');

Open AbstractFilter

Hi,
I am trying to create a custom filter in Haxe.

1 / However, the current wrapper for the AbstractFilter class forces two args:

fragmentSrc:Array
and uniforms:Dynamic.

If you could make these args optional it would allow for customisation. (ie: do some computation before setting them). in Javascript, it already works like this (https://github.com/GoodBoyDigital/pixi.js/blob/master/src/pixi/filters/ColorStepFilter.js for instance)

2 / the current implementation misses several vars :

passes : Array
shaders : Array ?? (haven't used yet and did not find any code using it..)
uniforms : Dynamic
fragmentSrc : Array

( ref https://github.com/GoodBoyDigital/pixi.js/blob/master/src/pixi/filters/AbstractFilter.js )

Thanks!

Pixel perfect collision?

How do we achieve pixel perfect collision? This seems to be a problem with pixijs, but the common workarounds using WebGLExtract seem to not have externs. I'm considering creating a separate canvas element and using it to get pixel data like this, is this recommended?

EDIT: To clarify my situation, I need to get alpha tolerant pixel testing on animations, and building hitArea polygons isn't really feasible in my setup unless they could be done at runtime.

EDIT 2: I've found this work around for now.
var pixel:Array<Float> = untyped __js__('({0}).extract.pixels({1}).slice({2}, {3})', app.renderer, renderTexture, startInd, startInd+4);

EDIT 3: This actually still won't work because you can't clear RenderTextures on canvas without renderer.clearRenderTexture which is seemingly webgl only.

Can pixi js realistically support pixel colour testing? I've take the feature for granted, but it seems the tech might not be there yet or something??

InteractionData::identifier

Hello, thank you so much for these externs.

Can you please, in a next commit, include the InteractionData::identifier property ? Again, thanks for the great work :)

I've been using this property in pixi v3 for multitouch gameplays, it's really nice it has been included in pixi v4.

4.4.1

Better to put 4.4.1 in repo, it has some serious fixes.

DisplayObject.hitArea fallback to Dynamic

Hi!
I am using a circle instead of a rectangle for my hitArea. It does not work since you are waiting for a Rectangle.
You used to use a Dynamic instead in v1.6 and it was working. Can you revert to Dynamic? Thanks!

Reference: http://www.goodboydigital.com/pixijs/docs/classes/DisplayObject.html#property_hitArea

Application.hx null getter

Hey, thanks for those awesome externs!

In the Application.hx why does the pixelRatio, skipFrame, width, height, transparent, antialias, forceFXAAA, autoResize, backgroundColor have their getter set to null?

Overriding width / height

Hi, im wondering how it would be possible to override the width and height in parent classes to implement custom logic, eg:

class Something extends Graphics {
    public override set_width(value:Float):Float {
        // something custom
        return value;
    }
}

The problem seems to be that width and height are just vars, rather than getters / setters. Ive managed to get around this by commenting out width in the extern and adding:

    public var width(get, set):Float;
    @:getter(width)
    public function get_width():Float {
            ...
    }

    @:setter(width)
    public function set_height(value:Float):Float {
            ...
        return value;
    }

But obviously this isnt correct as it means i have to edit the externs and also means i have to add the vars to "Text.hx", do you have any advice of how to do this, or are there any plans to make the externs use getters/setters so they can be overriden?

Cheers,
Ian

Detector or PIXI.autoDetectRenderer no longer available?

I have some code in a project that was using the Detector extern, but it seems to longer be available... Is this an oversight or is there some other way to achieve this?

Cheers,
Ian

Phase 5 - Rewrite Interaction Manager

Externs for the new Interaction Manager classes
https://github.com/GoodBoyDigital/pixi.js/tree/dev-rewrite/src/interaction

EventEmitter & TextStyle in pixi v4 (reported in html5gamedevs.com)

In Pixi v3 it was impossible to extends EventEmitter because the resource was loaded at runtime

Unless I'm wrong, EventEmitter code is now include in the pixi.js v4 file.

I have tried to extends EventEmitter in v4 but have this error: Uncaught ReferenceError: EventEmitter is not defined

The haxe extern has no reference to a JS Object so I added :

@:native("EventEmitter")
extern class EventEmitter {

in the externs but it doesnt work either. Have you an idea about the issue ?

Last question about TextStyle:

// generate an error (in FlashDevelop)
var lTxt2:Text = new Text("pixiv4", { fontSize: 100, fontFamily: "MyOtherFont", fill: 0x000000, align: "left" } ); 

// works fine
var lStyle:TextStyleObject = { fontSize: 100, fontFamily: "MyOtherFont", fill: 0x000000, align: "left" };
var lTxt2:Text = new Text("pixiv4", lStyle );

Any other idea ?

Thank you for your help.