From what I understand from the docs and the auto complete objects when typing scripts in the editor, I should be able to go like this:
if(pc.touchs.length > 0) {
//do stuff with the global touches
}
But instead I just get the error that pc.touches doesn’t exist? Even console.log(pc.touches) doesn’t return anything despite the auto complete saying this would return an “array of the touches” and accepting the code.
So where is the object with the array of touches that playcanvas uses to make stuff like the app touch events located?
I am trying to get all the touches so I can loop them and see if any, not just the first or recent one, are within a “virtual button area” on the screen. So I can then do something like:
if (button area is touched because a touch x and y is inside the boundary) {
//simulate pushing a key on the keyboard by setting the same "pressing this button" variable the keyboard does.
}
I can’t seem to find what to type to get to the array of touches described in the documentation though. Where is it? What do I type to point to it?
There isn’t very good documentation for touch events. You should do something like this:
// in initialize method
if (app.touch) { // app.touch is a pc.TouchDevice object, it only exists if the browser is touch-capable
app.touch.on("touchstart", this.onTouchStart, this);
}
// later in script object definition
onTouchStart: function (e) { // e is a pc.TouchEvent object
// e contains `changedTouches` list and `touches` list, similar to regular browser event
var touch = e.changedTouches[0]; // touch is a pc.Touch object
console.log("touch at: " + touch.x + ", " + touch.y);
}
//listen for touch control
this.enable_touch = false;
//if we have a touch device, enable the touch controls
if(app.touch) {
app.touch.on("touchstart",this.touchcheck,this);
app.touch.on("touchend",this.touchcheck,this);
this.enable_touch = true;
}
This is the touchcheck function:
/////////////////////////////////////////////////////////
// TOUCH CONTROLS
/////////////////////////////////////////////////////////
touchcheck : function (e) {
console.log("running touchcheck");
//check touch events
touched = e.touches.length;
console.log("touched = " + touched);
//loop over all touched objects to find if anything is poking the virtual controls.
//////////////// WORKING HERE !!!!!!!!!!!!!!!!!!!!!!!!!! ///////////////////////////////////////////////////////////
this.touch_left = false;
this.touch_middle = false;
this.touch_right = false;
var cur_x = 0;
var cur_y = 0;
for(var i = 0; i < touched;i++) {
console.log("checking touch number " + i + " in the for loop.");
cur_x = e.touches[i].x;
cur_y = e.touches[i].y;
if(cur_x > 0 && cur_x < this.screen_w_third) {
this.touch_left = true;
console.log("touched the left.");
}
if(cur_x > this.screen_w_third && cur_x < (this.screen_w_third*2)) {
this.touch_middle = true;
console.log("touched the middle.");
}
if(cur_x > (this.screen_w_third*2) && cur_x < this.screen_width) {
this.touch_right = true;
console.log("touched the right.");
}
}
},
But I am not getting anything in my debug logs in Chrome. I’ve been hitting F12 after selecting run in the editor, selecting to emulate a device’s touch, reloading the app(as instructed by the Chrome debugger), and then clicking like mad all over my screen. The game doesn’t even trigger any of the “running touchcheck” messages.
I should add that my phone (android, running Firefox) does not seem to want to open the editor in a usable form. (It opens the page but the interface is all squshed against the side of the browser window and I can’t see the scene selection to open anything.) Since I cannot test my WIP code on the actual device without publishing a build and marking it as the new public build, I’m trying to use Chrome’s F12 debugger.
I think my code should be working, and I have no experience with the Chrome debugger, so I don’t know if the debugger’s mobile touch emulation is known to be broken or if I did something wrong in my code. The event controls don’t seem to be doing anything.
So what’s the probably obvious thing I missed this time?
Huh, weird. I just took a break and tried visiting the latest build (which is now running the above code) on my phone. Cause that’s how you take a break, help I think I’m stuck here forever.
Anyway, the above code seems to work fine in the actual wild of my touch phone. I must be missing something in how to use Chrome’s debugger then. I guess I better look that up sometime later then.
