/// /// /// /** * Input - Touch * * @desc http://www.w3.org/TR/touch-events/ * https://developer.mozilla.org/en-US/docs/DOM/TouchList * http://www.html5rocks.com/en/mobile/touchandmouse/ * Android 2.x only supports 1 touch event at once, no multi-touch * * @version 1.1 - 27th February 2013 * @author Richard Davey * * @todo Try and resolve update lag in Chrome/Android * Gestures (pinch, zoom, swipe) * GameObject Touch * Touch point within GameObject * Input Zones (mouse and touch) - lock entities within them + axis aligned drags */ class Touch { /** * Constructor * @param {Game} game. * @return {Touch} This object. */ constructor(game: Game) { this._game = game; this.finger1 = new Finger(this._game); this.finger2 = new Finger(this._game); this.finger3 = new Finger(this._game); this.finger4 = new Finger(this._game); this.finger5 = new Finger(this._game); this.finger6 = new Finger(this._game); this.finger7 = new Finger(this._game); this.finger8 = new Finger(this._game); this.finger9 = new Finger(this._game); this.finger10 = new Finger(this._game); this._fingers = [this.finger1, this.finger2, this.finger3, this.finger4, this.finger5, this.finger6, this.finger7, this.finger8, this.finger9, this.finger10]; this.touchDown = new Signal(); this.touchUp = new Signal(); this.start(); } /** * * @property _game * @type Game * @private **/ private _game: Game; /** * * @property x * @type Number **/ public x: number; /** * * @property y * @type Number **/ public y: number; /** * * @property _fingers * @type Array * @private **/ private _fingers: Finger[]; /** * * @property finger1 * @type Finger **/ public finger1: Finger; /** * * @property finger2 * @type Finger **/ public finger2: Finger; /** * * @property finger3 * @type Finger **/ public finger3: Finger; /** * * @property finger4 * @type Finger **/ public finger4: Finger; /** * * @property finger5 * @type Finger **/ public finger5: Finger; /** * * @property finger6 * @type Finger **/ public finger6: Finger; /** * * @property finger7 * @type Finger **/ public finger7: Finger; /** * * @property finger8 * @type Finger **/ public finger8: Finger; /** * * @property finger9 * @type Finger **/ public finger9: Finger; /** * * @property finger10 * @type Finger **/ public finger10: Finger; /** * * @property latestFinger * @type Finger **/ public latestFinger: Finger; /** * * @property isDown * @type Boolean **/ public isDown: bool = false; /** * * @property isUp * @type Boolean **/ public isUp: bool = true; public touchDown: Signal; public touchUp: Signal; /** * * @method start */ public start() { this._game.stage.canvas.addEventListener('touchstart', (event) => this.onTouchStart(event), false); this._game.stage.canvas.addEventListener('touchmove', (event) => this.onTouchMove(event), false); this._game.stage.canvas.addEventListener('touchend', (event) => this.onTouchEnd(event), false); this._game.stage.canvas.addEventListener('touchenter', (event) => this.onTouchEnter(event), false); this._game.stage.canvas.addEventListener('touchleave', (event) => this.onTouchLeave(event), false); this._game.stage.canvas.addEventListener('touchcancel', (event) => this.onTouchCancel(event), false); document.addEventListener('touchmove', (event) => this.consumeTouchMove(event), false); } /** * Prevent iOS bounce-back (doesn't work?) * @method consumeTouchMove * @param {Any} event **/ private consumeTouchMove(event) { event.preventDefault(); } /** * * @method onTouchStart * @param {Any} event **/ private onTouchStart(event) { event.preventDefault(); // A list of all the touch points that BECAME active with the current event // https://developer.mozilla.org/en-US/docs/DOM/TouchList // event.targetTouches = list of all touches on the TARGET ELEMENT (i.e. game dom element) // event.touches = list of all touches on the ENTIRE DOCUMENT, not just the target element // event.changedTouches = the touches that CHANGED in this event, not the total number of them for (var i = 0; i < event.changedTouches.length; i++) { for (var f = 0; f < this._fingers.length; f++) { if (this._fingers[f].active === false) { this._fingers[f].start(event.changedTouches[i]); this.x = this._fingers[f].x; this.y = this._fingers[f].y; this.touchDown.dispatch(this._fingers[f].x, this._fingers[f].y, this._fingers[f].timeDown, this._fingers[f].timeUp, this._fingers[f].duration); this.isDown = true; this.isUp = false; break; } } } } /** * Doesn't appear to be supported by most browsers yet * @method onTouchCancel * @param {Any} event **/ private onTouchCancel(event) { event.preventDefault(); // Touch cancel - touches that were disrupted (perhaps by moving into a plugin or browser chrome) // http://www.w3.org/TR/touch-events/#dfn-touchcancel // event.changedTouches = the touches that CHANGED in this event, not the total number of them for (var i = 0; i < event.changedTouches.length; i++) { for (var f = 0; f < this._fingers.length; f++) { if (this._fingers[f].identifier === event.changedTouches[i].identifier) { this._fingers[f].stop(event.changedTouches[i]); break; } } } } /** * Doesn't appear to be supported by most browsers yet * @method onTouchEnter * @param {Any} event **/ private onTouchEnter(event) { event.preventDefault(); // For touch enter and leave its a list of the touch points that have entered or left the target // event.targetTouches = list of all touches on the TARGET ELEMENT (i.e. game dom element) // event.touches = list of all touches on the ENTIRE DOCUMENT, not just the target element // event.changedTouches = the touches that CHANGED in this event, not the total number of them for (var i = 0; i < event.changedTouches.length; i++) { for (var f = 0; f < this._fingers.length; f++) { if (this._fingers[f].active === false) { this._fingers[f].start(event.changedTouches[i]); break; } } } } /** * Doesn't appear to be supported by most browsers yet * @method onTouchLeave * @param {Any} event **/ private onTouchLeave(event) { event.preventDefault(); // For touch enter and leave its a list of the touch points that have entered or left the target // event.changedTouches = the touches that CHANGED in this event, not the total number of them for (var i = 0; i < event.changedTouches.length; i++) { for (var f = 0; f < this._fingers.length; f++) { if (this._fingers[f].identifier === event.changedTouches[i].identifier) { this._fingers[f].leave(event.changedTouches[i]); break; } } } } /** * * @method onTouchMove * @param {Any} event **/ private onTouchMove(event) { event.preventDefault(); // event.targetTouches = list of all touches on the TARGET ELEMENT (i.e. game dom element) // event.touches = list of all touches on the ENTIRE DOCUMENT, not just the target element // event.changedTouches = the touches that CHANGED in this event, not the total number of them for (var i = 0; i < event.changedTouches.length; i++) { for (var f = 0; f < this._fingers.length; f++) { if (this._fingers[f].identifier === event.changedTouches[i].identifier) { this._fingers[f].move(event.changedTouches[i]); this.x = this._fingers[f].x; this.y = this._fingers[f].y; break; } } } } /** * * @method onTouchEnd * @param {Any} event **/ private onTouchEnd(event) { event.preventDefault(); // For touch end its a list of the touch points that have been removed from the surface // https://developer.mozilla.org/en-US/docs/DOM/TouchList // event.changedTouches = the touches that CHANGED in this event, not the total number of them for (var i = 0; i < event.changedTouches.length; i++) { for (var f = 0; f < this._fingers.length; f++) { if (this._fingers[f].identifier === event.changedTouches[i].identifier) { this._fingers[f].stop(event.changedTouches[i]); this.x = this._fingers[f].x; this.y = this._fingers[f].y; this.touchUp.dispatch(this._fingers[f].x, this._fingers[f].y, this._fingers[f].timeDown, this._fingers[f].timeUp, this._fingers[f].duration); this.isDown = false; this.isUp = true; break; } } } } /** * * @method calculateDistance * @param {Finger} finger1 * @param {Finger} finger2 **/ public calculateDistance(finger1: Finger, finger2: Finger) { } /** * * @method calculateAngle * @param {Finger} finger1 * @param {Finger} finger2 **/ public calculateAngle(finger1: Finger, finger2: Finger) { } /** * * @method checkOverlap * @param {Finger} finger1 * @param {Finger} finger2 **/ public checkOverlap(finger1: Finger, finger2: Finger) { } /** * * @method update */ public update() { this._game.input.x = this.x; this._game.input.y = this.y; } /** * * @method stop */ public stop() { //this._domElement.addEventListener('touchstart', (event) => this.onTouchStart(event), false); //this._domElement.addEventListener('touchmove', (event) => this.onTouchMove(event), false); //this._domElement.addEventListener('touchend', (event) => this.onTouchEnd(event), false); //this._domElement.addEventListener('touchenter', (event) => this.onTouchEnter(event), false); //this._domElement.addEventListener('touchleave', (event) => this.onTouchLeave(event), false); //this._domElement.addEventListener('touchcancel', (event) => this.onTouchCancel(event), false); } /** * * @method reset **/ public reset() { this.isDown = false; this.isUp = false; } }