As mentioned in the title, when I want to migrate the ’augmented’ script in the ‘iPhone6’ project to my own project, the ‘augmented’ script creates a new canvas, covers the main canvas of playcanvas, and touch events become unavailable.
Augmented.prototype.initialize = function () {
var app = this.app;
this.canvas = document.createElement('canvas');
this.canvas.width = app.graphicsDevice.width;
this.canvas.height = app.graphicsDevice.height;
this.canvas.style.position = 'absolute';
this.canvas.style.left = '0px';
this.canvas.style.top = '0px';
document.body.appendChild(this.canvas);
this.ctx = this.canvas.getContext('2d');
this.camera = app.root.findByName('camera');
};
So to solve this, I created a new touch device based on ‘window’ to re-enable touch
TouchTest.prototype.initialize = function() {
var touch = new pc.TouchDevice(window);
this.app.touch = touch;
if (touch) {
touch.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
touch.on(pc.EVENT_TOUCHEND, this.onTouchEnd, this);
touch.on(pc.EVENT_TOUCHCANCEL, this.onTouchCancel, this);
}
};
However, when I test it in chrome, an error appears (but it seems that the game itself is running well)
Any good suggestions for solving this problem?
Here is the link to my testing project