Added Touch support. Doesn't handle multi-touch yet, but single touch works perfectly with all current input tests.

This commit is contained in:
photonstorm 2017-07-28 03:28:10 +01:00
parent 7cc5a61d50
commit 9e10fca98d
5 changed files with 159 additions and 1 deletions

View file

@ -58,6 +58,9 @@ var Config = new Class({
this.inputMouse = GetValue(config, 'input.mouse', true);
this.inputMouseEventTarget = GetValue(config, 'input.mouse.target', null);
this.inputTouch = GetValue(config, 'input.touch', true);
this.inputTouchEventTarget = GetValue(config, 'input.touch.target', null);
this.disableContextMenu = GetValue(config, 'disableContextMenu', false);
// If you do: { banner: false } it won't display any banner at all

View file

@ -1,4 +1,4 @@
var CHECKSUM = {
build: 'fe5bfd50-7332-11e7-902d-a936c8f38615'
build: 'f30debd0-733b-11e7-b23c-ef3e3e85b72b'
};
module.exports = CHECKSUM;

View file

@ -73,6 +73,18 @@ var Pointer = new Class({
this.justMoved = false;
},
touchmove: function (event, time)
{
this.event = event;
this.x = this.manager.transformX(event.changedTouches[0].pageX);
this.y = this.manager.transformY(event.changedTouches[0].pageY);
this.justMoved = true;
this.dirty = true;
},
move: function (event, time)
{
if (event.buttons)
@ -117,6 +129,26 @@ var Pointer = new Class({
this.dirty = true;
},
touchstart: function (event, time)
{
this.buttons = 1;
this.event = event;
this.x = this.manager.transformX(event.changedTouches[0].pageX);
this.y = this.manager.transformY(event.changedTouches[0].pageY);
this.primaryDown = true;
this.downX = this.x;
this.downY = this.y;
this.downTime = time;
this.justDown = true;
this.isDown = true;
this.dirty = true;
},
up: function (event, time)
{
if (event.buttons)
@ -144,6 +176,26 @@ var Pointer = new Class({
this.dirty = true;
},
touchend: function (event, time)
{
this.buttons = 0;
this.event = event;
this.x = this.manager.transformX(event.changedTouches[0].pageX);
this.y = this.manager.transformY(event.changedTouches[0].pageY);
this.primaryDown = false;
this.upX = this.x;
this.upY = this.y;
this.upTime = time;
this.justUp = true;
this.isDown = false;
this.dirty = true;
},
noButtonDown: function ()
{
return (this.buttons === 0);

View file

@ -6,6 +6,7 @@ var GetTransformedPoint = require('./components/GetTransformedPoint');
var Keyboard = require('../keyboard/KeyboardManager');
var Mouse = require('../mouse/MouseManager');
var MouseEvent = require('../mouse/events/');
var Touch = require('../touch/TouchManager');
var Pointer = require('../Pointer');
var PointScreenToWorldHitTest = require('./components/PointScreenToWorldHitTest');
var HitTest = require('./components/HitTest');
@ -34,6 +35,7 @@ var GlobalInputManager = new Class({
// Listeners
this.keyboard = new Keyboard(this);
this.mouse = new Mouse(this);
this.touch = new Touch(this);
this.activePointer = new Pointer(this, 0);
@ -57,6 +59,7 @@ var GlobalInputManager = new Class({
this.keyboard.boot();
this.mouse.boot();
this.touch.boot();
},
update: function (time, delta)
@ -108,6 +111,21 @@ var GlobalInputManager = new Class({
pointer.up(event, time);
this.events.dispatch(new MouseEvent.UP(event));
break;
case 'touchmove':
pointer.touchmove(event, time);
break;
case 'touchstart':
pointer.touchstart(event, time);
break;
case 'touchend':
pointer.touchend(event, time);
break;
}
}
},

View file

@ -0,0 +1,85 @@
var Class = require('../../utils/Class');
// https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
// https://patrickhlauke.github.io/touch/tests/results/
// https://www.html5rocks.com/en/mobile/touch/
var TouchManager = new Class({
initialize:
function TouchManager (inputManager)
{
this.manager = inputManager;
/**
* @property {boolean} capture - If true the DOM events will have event.preventDefault applied to them, if false they will propagate fully.
*/
this.capture = false;
this.enabled = false;
this.target;
this.handler;
},
boot: function ()
{
var config = this.manager.config;
this.enabled = config.inputTouch;
this.target = config.inputTouchEventTarget;
if (!this.target)
{
this.target = this.manager.game.canvas;
}
if (this.enabled)
{
this.startListeners();
}
},
startListeners: function ()
{
var queue = this.manager.queue;
var _this = this;
var handler = function (event)
{
if (event.preventDefaulted)
{
// Do nothing if event already handled
return;
}
// console.log(event);
queue.push(event);
if (_this.capture)
{
event.preventDefault();
}
};
this.handler = handler;
this.target.addEventListener('touchstart', handler, false);
this.target.addEventListener('touchmove', handler, false);
this.target.addEventListener('touchend', handler, false);
},
stopListeners: function ()
{
this.target.removeEventListener('touchstart', this.handler);
this.target.removeEventListener('touchmove', this.handler);
this.target.removeEventListener('touchend', this.handler);
}
});
module.exports = TouchManager;