From 27c4b94d382f99ee910a5cbf938a8f24f29c179d Mon Sep 17 00:00:00 2001 From: Elliot Smith Date: Fri, 30 May 2014 16:16:49 +0100 Subject: [PATCH] Be more discriminating when handling touch events Check the position and type of the touch event to determine whether acceleration is being applied. The only issue with this is that if a touch moves from the right of the screen to the left, if a touchend event occurs in the left side of the screen, it won't stop the acceleration. But it's a better solution than counting the number of touches. Also added a check on touch move events, so that only moves which occur on the left of the screen are counted as turns. The reason for this is that in some cases, the touch identifier was being incorrectly applied: so a touch which started on the left of the screen could accidentally be continued by a touchmove occurring on the right of the screen, resulting in a violent right turn. (It appears as though the touch ID can mistakenly transfer between touches with different fingers.) By testing where the touchmove occurs, the violent turn effect can be removed, as only a finger on the left-hand side of the screen can cause moves. --- .../controllers/TouchController.coffee | 2 +- bkcore.coffee/controllers/TouchController.js | 74 ++++++++++--------- bkcore/hexgl/ShipControls.js | 11 ++- 3 files changed, 46 insertions(+), 41 deletions(-) diff --git a/bkcore.coffee/controllers/TouchController.coffee b/bkcore.coffee/controllers/TouchController.coffee index b1dc5a1..24b749e 100644 --- a/bkcore.coffee/controllers/TouchController.coffee +++ b/bkcore.coffee/controllers/TouchController.coffee @@ -53,7 +53,7 @@ class TouchController event.preventDefault() return if not @active for touch in event.changedTouches - if @stickID is touch.identifier + if @stickID is touch.identifier and touch.clientX < @stickMargin @stickPos.set(touch.clientX, touch.clientY) @stickVector.copy(@stickPos).substract(@stickStartPos) break diff --git a/bkcore.coffee/controllers/TouchController.js b/bkcore.coffee/controllers/TouchController.js index 5283e69..d8e7f15 100644 --- a/bkcore.coffee/controllers/TouchController.js +++ b/bkcore.coffee/controllers/TouchController.js @@ -1,4 +1,4 @@ -// Generated by CoffeeScript 1.4.0 +// Generated by CoffeeScript 1.7.1 /* TouchController (stick + buttons) for touch devices @@ -6,29 +6,26 @@ @class bkcore.controllers.TouchController @author Thibaut 'BKcore' Despoulain -*/ - + */ (function() { var TouchController, Vec2, exports, _base; TouchController = (function() { - TouchController.isCompatible = function() { return 'ontouchstart' in document.documentElement; }; - /* - Creates a new TouchController - - @param dom DOMElement The element that will listen to touch events - @param stickMargin int The left margin in px for stick detection - @param buttonCallback function Callback for non-stick touches - */ + /* + Creates a new TouchController + + @param dom DOMElement The element that will listen to touch events + @param stickMargin int The left margin in px for stick detection + @param buttonCallback function Callback for non-stick touches + */ function TouchController(dom, stickMargin, buttonCallback) { - var _this = this; this.dom = dom; this.stickMargin = stickMargin != null ? stickMargin : 200; this.buttonCallback = buttonCallback != null ? buttonCallback : null; @@ -38,21 +35,27 @@ this.stickPos = new Vec2(0, 0); this.stickStartPos = new Vec2(0, 0); this.stickVector = new Vec2(0, 0); - this.dom.addEventListener('touchstart', (function(e) { - return _this.touchStart(e); - }), false); - this.dom.addEventListener('touchmove', (function(e) { - return _this.touchMove(e); - }), false); - this.dom.addEventListener('touchend', (function(e) { - return _this.touchEnd(e); - }), false); + this.dom.addEventListener('touchstart', ((function(_this) { + return function(e) { + return _this.touchStart(e); + }; + })(this)), false); + this.dom.addEventListener('touchmove', ((function(_this) { + return function(e) { + return _this.touchMove(e); + }; + })(this)), false); + this.dom.addEventListener('touchend', ((function(_this) { + return function(e) { + return _this.touchEnd(e); + }; + })(this)), false); } - /* - @private - */ + /* + @private + */ TouchController.prototype.touchStart = function(event) { var touch, _i, _len, _ref; @@ -78,10 +81,10 @@ return false; }; - /* - @private - */ + /* + @private + */ TouchController.prototype.touchMove = function(event) { var touch, _i, _len, _ref; @@ -92,7 +95,7 @@ _ref = event.changedTouches; for (_i = 0, _len = _ref.length; _i < _len; _i++) { touch = _ref[_i]; - if (this.stickID === touch.identifier) { + if (this.stickID === touch.identifier && touch.clientX < this.stickMargin) { this.stickPos.set(touch.clientX, touch.clientY); this.stickVector.copy(this.stickPos).substract(this.stickStartPos); break; @@ -102,10 +105,10 @@ return false; }; - /* - @private - */ + /* + @private + */ TouchController.prototype.touchEnd = function(event) { var touch, _i, _len, _ref; @@ -133,15 +136,14 @@ })(); + /* Internal class used for vector2 @class Vec2 @private - */ - + */ Vec2 = (function() { - function Vec2(x, y) { this.x = x != null ? x : 0; this.y = y != null ? y : 0; @@ -169,11 +171,11 @@ })(); + /* Exports @package bkcore - */ - + */ exports = exports != null ? exports : this; diff --git a/bkcore/hexgl/ShipControls.js b/bkcore/hexgl/ShipControls.js index 81c31a6..b62e958 100644 --- a/bkcore/hexgl/ShipControls.js +++ b/bkcore/hexgl/ShipControls.js @@ -131,10 +131,13 @@ bkcore.hexgl.ShipControls = function(ctx) window.location.reload(false); else if(event.touches.length == 3) ctx.restart(); - else if(event.touches.length <= 1) - self.key.forward = false; - else - self.key.forward = true; + // touch was on the right-hand side of the screen + else if (touch.clientX > (ctx.width / 2)) { + if (event.type === 'touchend') + self.key.forward = false; + else + self.key.forward = true; + } }); } else if(ctx.controlType == 4 && bkcore.controllers.OrientationController.isCompatible())