Pixi.js now even better at being interactive!

April 16, 2013 at 11:59 am / by

Mat Groves touches mice…


Thought I should let the world know that I have just finished updating the interaction manager for pixi.js in an attempt to make it more awesomerer.

What new crazy mind blowing features have been added? Well let me tell you!

first up I added 4 new callbacks to interactive objects:

1: mousemove – called every time the mouse is moved.

2: mouseupoutsidecalled when the item was pressed but then the mouse moved and was released outside of it.

3: touchmove – called every time a touch is moved

4: touchendoutside – called when the item was touched but then the touch moved and was released outside of it.

And here’s how to use them in da codes:

The addition of these callbacks should allow people who use pixi.js a little finer control over the interactions.

Another new feature I added was in the InteractionData that gets sent to the callbacks. Before they contained a local point wich was the position of the touch/mouse relative to the item being touched. This had its uses but I found that I needed somthing a little more flexable.. enter “getLocalPosition”

This little guy is super useful as it lets you get the position of a touch or mouse relative to ANY object. Here it is in action..

And now I have saved the best till last… Drumroll please!

ANY DisplayObject can now be interactive. Like so:

The only other thing worth mentioning is that you can also set a hitArea for a displayObject. The hitArea defines a rectangle that will be used for touch and mouse detection for that displayObject.

If your display object contains tonnes of children then using a hitArea could also be a neat way of optimising your code as it means that touch/mouse detection becomes a lot simpler for the interaction manager!

So that’s that then! A few new features that should make life a little easier for us and the other pixi.js users out there. You can find all these wonderful changes over on github… Enjoy :D

Did you like this? Share it:


  1. Jonathan says:

    Glad to see detailed touch events. One thing though, you swapped the definitions of touchendoutside and touchmove in your writeup. Just thought I’d point that out to avoid confusion.

  2. Ian Stokes says:

    your engine is neat, thanks for making it

  3. Julio Cesar Canares Garcia says:

    Great work!!! this make short my futures projects , thanks bro :)

  4. Olla says:

    Great Work, Thank You for the tutorials and examples, a great help! I was having a problem while running example 9 from chrome and changing the image( I tried on other browser and it works fine) using node.js http server and I get this error,

    WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not ‘texture complete’,

    Thank You for your help!

    • Mat Groves says:

      No worries, The problem you are having is that the texture used for a tiling sprite needs to be a power of 2 size eg: 1024×1024, 512×512, 256×256, 128×128, 64×64, 42×32
      The reason for this is that it is MUCH faster for webgl to tile a power of two texture. Hope that helps!

  5. Schoening says:

    This is really neat!

    Does the Rectangle mean that I could build asymetric rectangles too?

    Like: 200, 100, 50, 35 ?

Leave a Comment


— required *

— required *