Blog

Pixi.js goes all touchy, clicky, feely with an interaction manager!

March 19, 2013 at 11:45 pm / by

Sometimes things just click… Go on – have a go! It’s a real live demo:

Well now pixi.js is interactive! After much toiling away in the Goodboy code caves I have just finished building the interaction manager.

Events or Callbacks?

I had a little internal fight with my self as I couldn’t decide wether to use callbacks or events for pixi.js. Whilst it is true that events are more powerful and offer more flexibility, callbacks require less code and are faster.

So after much deliberation I decided that (bearing in mind pixi.js has a heavy focus on speed) that I should go with the leanest option. Callbacks it is! It’s worth noting that it wouldn’t take to much effort to create a little bit of code makes the callbacks dispatch events if needed.

Another big optimisation is that at this stage only sprites can be interactive. With this being the case it means I managed to get the interactive manager super optimised.

How to make the with the clicks?

To enable interactivity with pixi.js all you have to do when creating a stage do this:

Its worth noting that interactivity is set to false by default. Its another one of those optimisations, no point having it unless you need it right? ;)

The next thing to do when you want an to create an interactive sprite is to do this:

Easy peasy right? All sprites are not interactive by default because… you guessed it, it’s another optimisation!

OK, so now the sprite is interactive all thats needed is to set any callbacks you might require..

Done and done!

The data object that is passed through the callback is an instance of PIXI.InteractionData. This little guy contains two points: global, which is the global position of the touch or mouse and local which is the local position of the touch or mouse relative to the sprite. UPDATE: local has been replaced with a getLocalPosition function.. check it out here!

I think thats the basics covered. This new functionality will have been uploaded to github by the time you are reading this, so go get hands (and fingers and mice) on!

I have included the src code for the example above on github, but if you can also download the example here:

DOWNLOAD SOURCE

Did you like this? Share it:
 

17 Comments

  1. Great job! Are there any plans to support a combination of mouse/tap events? Similar to the way JQuery Mobile has vmousedown, vmouseup and vmousemove. I’ve found those events to be of particular use when designing a game that runs on both touch screens and mouse devices.

    • Mat Groves says:

      That did cross my mind, I often find my self doing somthing similar. I figured to start off with I would make the interaction manager fairly simple and then listen to community feedback to see where to take it from there. But yes its a very good idea!

  2. Carl says:

    This is great, thank you for the work you’ve been putting into pixi.js. I’ve been enjoying playing around with it so far.

  3. josh freeman says:

    nice one! Just started on building a game using the pixi.js engine so great timing :)

  4. Iain says:

    Great update dudes. Here’s my thoughts:
    – on ios5 the things disappeared when I touched them rather than lighting up
    – would be nice to have a “press” and “release” callback that work across touch and mouse.
    – callbacks and events both have their problems – is there not a way of doing signals / an array of multiple callbacks?
    – have you tried building a virtual controller for touch to make sure that all works?

    • Mat Groves says:

      Yo dude! thanks for feeding back!
      - I did test the demo on ios5 devices and seemed to work all gravy? Your iphone 4s always seems to be a little funky! what specific version ya running?
      - Yeah, a few people have mentioned this. Can’t decide whether I should get rid of mousedown and touchstart and replace them with one callback ‘press’. Seems like that would make sense? Keen to get peoples opinion on this one!
      - I see what you mean, I went with callbacks also because it would be relatively straight forward to hook up signals or events to them. That way people can sort of choose there preference?
      - Haven’t tried building a touch controller yet.. but have something in the pipeline that will be ready early next week that should satisfy ya ;)

  5. Lee says:

    Great!

    Callbacks seems like a good choice to me. They might work nicely with js-signals. You could do something like this:

    mySprite.mousedown = mousedownSignal.dispatch;

    That way you can have multiple listeners with very little extra code.

    :)

  6. Spacehunter says:

    Nice job! Keep up the awesome work, I really appreciate what your doing!

  7. Julio Cesar Canares Garcia says:

    Hi Brah!

    awesome , i want know as get the width of a texture , i’m trying make this , check out

    textureButtonNormal.baseTexture.width –> for get the width of the texture
    textureButtonNormal.baseTexture.height –> for get the height of the texture

    but not give the correct width , can give me a possible solution a my problem. thanks :)

    • Mat Groves says:

      Hello! Yes the main reason the width and height are 0 is that the much like loading an image in html it does not know the width and height until it has loaded. You could use a pre-loader to load the image maybe? Hope that helps :)

      • Julio Cesar Canares Garcia says:

        Hi, well i’m using the class PIXI.AssetLoader() , after the load all assets I recently the request for Width and Height, when I do the width and height of the texture gives me half the actual width and height. sorry for my english not is very good :D

  8. Karl Mikko says:

    Does Pixi support touch move? And multi touch like in the browser where the touch start has an array of touches?

Leave a Comment

 

— required *

— required *