Jump to content

Porting Pixi


Recommended Posts

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:




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.



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...