Jump to content

Multi touch broken on 3.0.7?


Recommended Posts

Looking at the example for multi touch here: http://www.goodboydigital.com/pixijs/examples/8/ I am using the Chrome mobile browser


bunny.mousedown = bunny.touchstart = function(data){  data.originalEvent.preventDefault()  // store a refference to the data  // The reason for this is because of multitouch  // we want to track the movement of this particular touch  this.data = data;  this.alpha = 0.9;  this.dragging = true;};

It appears based on pixi version v1.3.0 and multi touch works.


However, when I try to use the current version of pixi 3.0.7 a few things changed:

requestAniFrame() is now requestAnimationFrame()

That is easy to change. Also the event object passed to the event handler has data as a property rather than having data passed directly. I fixed that by:

bunny.mousedown = bunny.touchstart = function(data){  data.originalEvent.preventDefault()  // store a refference to the data  // The reason for this is because of multitouch  // we want to track the movement of this particular touch  this.data = data.data;  this.alpha = 0.9;  this.dragging = true;};

Unfortunately multi touch doesn't work. Does anyone have a working example of multi touch working for pixi 3.0.7?





Link to comment
Share on other sites

Bump. Anyone? I am tearing my hair out on this one and I can't get remote debugging in chrome to work to figure out the guts of the source.


It appears that every element receives all the touches.

When I write


Now I place two fingers each on a different pixijs element. Yet data.originalEvent.targetTouches.length = 2 in the touchstart or touchmove handler.

Note that when I store the event.data object on touchstart and reference that results are the same.

Link to comment
Share on other sites

Thank you for your patience. I am committed to get to grips with Pixi.js , I will produce a clean example today.


You could also help by making this multi touch example http://www.goodboydigital.com/pixijs/examples/8/ work with pixi 3.0.7 and add it to the V3 examples http://pixijs.github.io/examples/


I am developing a range of new touch screen UI controls based on pixi.js for a ship simulator. They work beautifully on all devices thanks to pixi.js but I am pretty keen to get multi touch to work too so that multiple controls can be manipulated at the same time.

Link to comment
Share on other sites

OK, here is a clean example showing the basic issue (only touch events are handled so you need a touch screen device)




Touching the orange panel causes correct touchstart and touchend events to be fired for the orange panel. Same deal with the green panel.

However, a touchmove event on the orange panel also results in a touch move event to be fired for the green panel. That is unexpected.


So I decided to try to fix the problem with this demo




Now a touchmove on the orange panel results only in touchmove events being handled for the orange panel. Kind of a hack really because if you now use a finger on each panel you still get a touchmove event on each panel regardless which finger moves (Pretty tricky to keep a finger still but you can see it)




So finally I compare the event.data to the stored data object in the touchmove event handler but that makes no difference.


To me it makes sense that example 1 should simply work as expected but I be happy with instructions in how to work around the issue properly.

Link to comment
Share on other sites

I respect you guys for the impressive library you have written and I start from the position that it must be me doing something wrong so I am trying hard to understand your responses and check my premises.


Yes, it appears the DOM behaviour is the same to my surprise. Here is a pure HTML example: http://planetinaction.com/pixi/multitouch4.htm (Use two fingers). Events with orange id's appear in the touchmove event handler of the green DOM object. I don't understand the logic behind this but yes it is the same.


So, accepting this behaviour as a given, I have been digging deeper looking specifically at the touch identifiers which appear OK so I wrote a test where I store the touch identifier in touchstart and check this identifier in the touchmove




This example actually behaves correctly. I can now suppress response with this check.

var orangeID = -1;orange.on('touchstart', function(event){ orangeID = event.data.identifier; log('touchstart: orange ' + orangeID)});orange.on('touchmove', function(event){  if (event.data.identifier == orangeID && orangeID != -1){    log('touchmove: orange ' + event.data.identifier);  }});


So, since I store and check the identifiers, I should be able to store and check the data objects themselves as your older examples demonstrate. However that doesn't work.



var greenData = null;green.on('touchstart', function(event){  greenData = event.data;  log('touchstart: green ' + greenData.identifier + ' ' + event.data.identifier)});green.on('touchmove', function(event){  if (event.data == greenData && greenData != null){    log('touchmove: green ' + greenData.identifier + ' ' + event.data.identifier);  }});

So, what this means is that I have found a way to make multi touch work for me but the fact that this last example doesn't work bothers me. Either I still lack some understanding or there is a weird kind of bug going on in the library.

I wish one of your expert team would look into this and produce a working example for multi touch for pixi as I want to do this the right way.

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...