Porting Pixi

[teadriven]

We are developing an application for a production line in a factory (mostly image processing done in C++) but its interface is being developed for browsers. We've reached a point where the interface needs to provide a 2D representation of results, so I started to look around for an appropriate library (as an alternative to drawing directly to the canvas). I discovered pixi.js and loved how easy it was to use and the fact it supports both WebGL and canvas rendering.

 

Our interface is actually being developed in Dart so at first I considered using the js interop capabilities to access the api, but the nice object-oriented structure of pixi lends itself to a direct port. I decided to give it a go:

 

http://github.com/emergent-design/pixi.dart

 

It's still early days and a fair way behind pixi.js in terms of functionality; I'm not sure how stable it is either. It's already available through pub so should be very easy for devs to add to their projects. In keeping with the spirit of pixi.js it's also released under an MIT licence.

 

By the way, the new filter stuff looks awesome. Hopefully I'll be able to port that as well, just as soon as I've caught up with the other features.

 

 

[Mat Groves]

Great job @teadriven!

[Alvin]

I don't really like Dart personally, but I must admit that you have done a great job.

Perhaps you can try to get in touch with Seth Ladd or some Dart engineers from Google, they might help you

[teadriven]

Thanks guys! 

 

After getting something working I did actually find another Dart project doing a similar thing (not a pixi port but inspired by pixi), however that only has the WebGL backend at the moment and we really needed to have the canvas fallback, plus I had already made a decent amount of progress.

 

Mat: Most of the port has been fairly straightforward thanks to your sensible OO design, however by far the hardest part has been trying to recreate the optimisations that use linked lists for flattening the stage and especially for handling the batches! I had to take the existing Dart implementation for a LinkedList and add the functionality required (because it couldn't be easily extended) producing something I named PixiList

 

Alvin: I have posted on the Dartisans google plus group (Seth Ladd is very active on there) to see if it gets any interest.

 

On another note:

When implementing the BitmapText I found that my implementation did not render quite the same as in pixi.js, it seems the kerning is different. I found the original font and used their web interface to render the same text for comparison and mine actually looks right, so I think there is a slight bug in pixi.js. I couldn't work out what though since I was copying how it worked fairly closely, but it looks like it was either not applying kerning at all or using the wrong kerning values.