Multi touch broken on 3.0.7?

[dinther]

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?

 

 

 

 

[dinther]

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

 event.data.originalEvent.targetTouches.length

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.

[xerver]

You have to implement multitouch support yourself, the interaction manager just forwards along events.

 

Without a running example of what you are experiencing there is nothing I can do to help you.

[dinther]

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.

[dinther]

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

 

http://planetinaction.com/pixi/multitouch1.htm

 

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

 

http://planetinaction.com/pixi/multitouch2.htm

 

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)

 

http://planetinaction.com/pixi/multitouch3.htm

 

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.

[xerver]

Is that different behavior than what happens in DOM? If the move event fires, but the the delta is 0 does it matter that the event runs?

[dinther]

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

 

http://planetinaction.com/pixi/multitouch6.htm

 

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.

 

http://planetinaction.com/pixi/multitouch5.htm

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.

[xerver]

event.data is an object that is created for each event. `event.data === someStoredObject` will always be false. Store the values you need instead of a ref to the object.