multi-touch or multitouch examples for html5 canvas using adobe animate cc

[jrameriz]

Using adobe animate html5 canvas, how can we use multitouch on and verify that 2 hit areas or buttons have been touched?

Using adobe animate html5 canvas, how can we use multitouch and know that there are multiple fingers on screen or canvas?

using adobe animate html5 canvas, how can we use multitouch to pinch zoom, pan, etc?

where can we find information about all multitouch examples or data that can help with this issue? (like maybe an API)

any examples here I believe will help lots of people because I have not seen this anywhere in forum.

Thanks !

[kglad]

enable touch events on your stage.

touch events are then converted to mouse events and you can use listeners to encode whatever your want.  each mouse event has a pointerID that you can use to control multitouch events like pinch/zoom.

EaselJS v0.8.2 API Documentation : Touch

[jrameriz]

Yeah, i get that there's touch documentation but is there any examples?

[ClayUUID]

Did you try reading the documentation?

[jrameriz]

yeah but a simple example on how  we can use multitouch and verify that 2 hit areas or buttons have been touched will go a long way!

[kglad · Accepted solution]

this is general multitouch code but if you just want to know if 2 buttons have been pressed, there are easier ways:

var touchObj = {};

var terminateLoop;

createjs.Touch.enable(stage);

this.b.addEventListener('mousedown',downF.bind(this));

this.b.addEventListener('pressup',upF.bind(this));

function downF(e){

if(!touchObj[e.pointerID]){

touchObj[e.pointerID]=[e.localX,e.localY];

}

if(!this.b.hasEventListener('pressmove')){

this.b.addEventListener('pressmove',moveF.bind(this));

}

}

function upF(e){

delete touchObj[e.pointerID];

terminateLoop = true;

for(var s in touchObj){

terminateLoop = false;

break

}

if(terminateLoop){

this.b.removeEventListener('pressmove',moveF.bind(this));

}

this.tf.text += 'up\n'

}

function moveF(e){

// do whatever with e.localX,e.localY and touchObj[e.pointerID][0],touchObj[e.pointerID][1]

}

[jrameriz]

that's cool thanks!

[kglad]

you're welcome.

note i edited the original code to change

touchObj[pointerID]=null;

to

delete touchObj[pointerID];

[jrameriz]

Yup seen that thanks!

[jrameriz]

kglad​ does this look like I'm hitting in the right direction to detect mousedown of two buttons at the same time?

or am i completely a newbie and need to go back to school.

//enable

createjs.Touch.enable(stage);

//buttons initial state

var button1press = false;

var button2press = false;

//adding a button1

this.doneRemovingScrew1.addEventListener("mousedown", button1.bind(this));

var buttonPressed1 = function button1()

{

  console.log("mousedown");

  //console.log(this);

  button1press = true;

  //playAnimation();

  return  button1press;

}

//adding a button2

this.doneRemovingScrew2.addEventListener("mousedown", button2.bind(this));

var buttonPressed2 = function button2()

{

  console.log("mousedown");

  //console.log(this);

  button2press = true;

  //playAnimation();

  return  button2press;

}

console.log(buttonPressed1);

console.log(buttonPressed2);

//still working on this

//function playAnimation(buttonPressed1, buttonPressed2){

// if (!buttonPressed1 && !buttonPressed2){

// this.gotoAndPlay(5);//play something on timeline

// }else{

// //do nothing

// }

// }

//

[kglad]

use the ticker class to determine if both buttons were pressed within a certain time interval (eg, 300 ms).

[jrameriz]

Wow! Nice! thanks! I will post my working examples when i get a chance incase someone needs them!

kglad​ thank you for you help!

[kglad]

you're welcome.