From abff68324bd940ebcdf6e35334a7ba08975f5868 Mon Sep 17 00:00:00 2001 From: Aris <64918822+Arisamiga@users.noreply.github.com> Date: Thu, 21 Dec 2023 00:18:06 +0000 Subject: [PATCH 1/4] Added Touch Ability to Gumball game --- static/scenes/gumball/js/controls.js | 36 ++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/static/scenes/gumball/js/controls.js b/static/scenes/gumball/js/controls.js index 761f00057..7d6b7920e 100755 --- a/static/scenes/gumball/js/controls.js +++ b/static/scenes/gumball/js/controls.js @@ -34,11 +34,15 @@ app.Controls = function(game) { this.onKeyDown_ = this.onKeyDown_.bind(this); this.onKeyUp_ = this.onKeyUp_.bind(this); this.onDeviceOrientation_ = this.onDeviceOrientation_.bind(this); + this.onTouchStart_ = this.onTouchStart_.bind(this); + this.onTouchEnd_ = this.onTouchEnd_.bind(this); // Events are cleared by app.Game in its dispose method. $(window).on('keydown.gumball', this.onKeyDown_); $(window).on('keyup.gumball', this.onKeyUp_); $(window).on('deviceorientation.gumball', this.onDeviceOrientation_); + $(window).on('touchstart.gumball', this.onTouchStart_); + $(window).on('touchend.gumball', this.onTouchEnd_); }; /** @@ -121,3 +125,35 @@ app.Controls.prototype.onKeyUp_ = function(e) { this.isRightDown = false; } }; + +/** + * Handles the on Touch Start. Called dynamically. + * @param {!Event} e The event object. + * @private + */ +app.Controls.prototype.onTouchStart_ = function(e) { + // Get the horizontal position where the touch started + var touchX = e.touches[0].clientX; + + if (touchX < window.innerWidth / 2) { // Left + this.isLeftDown = true; + } else { // Right + this.isRightDown = true; + } + + // Let tutorial know about touch so it can hide the tutorial. + if (!this.touchStarted) { + this.tutorial.off('device-tilt'); + this.touchStarted = true; + } +}; + +/** + * Handles the on Touch End. Called dynamically. + * @param {!Event} e The event object. + * @private + */ +app.Controls.prototype.onTouchEnd_ = function(e) { + this.isLeftDown = false; + this.isRightDown = false; +}; From d2ebbd40455f8888c5e752e6d3fd88032af1ea3b Mon Sep 17 00:00:00 2001 From: Aris <64918822+Arisamiga@users.noreply.github.com> Date: Fri, 5 Dec 2025 22:32:17 +0000 Subject: [PATCH 2/4] Added simulated tilt on touch --- static/scenes/gumball/js/controls.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/static/scenes/gumball/js/controls.js b/static/scenes/gumball/js/controls.js index 7d6b7920e..9fefc84ff 100755 --- a/static/scenes/gumball/js/controls.js +++ b/static/scenes/gumball/js/controls.js @@ -73,7 +73,6 @@ app.Controls.prototype.onDeviceOrientation_ = function(e) { if (e.gamma == null || this.isDesktopish_) { return; } - // Portrait var degree = e.gamma; @@ -134,10 +133,11 @@ app.Controls.prototype.onKeyUp_ = function(e) { app.Controls.prototype.onTouchStart_ = function(e) { // Get the horizontal position where the touch started var touchX = e.touches[0].clientX; - if (touchX < window.innerWidth / 2) { // Left + this.tilt = -15; this.isLeftDown = true; } else { // Right + this.tilt = 15; this.isRightDown = true; } @@ -154,6 +154,7 @@ app.Controls.prototype.onTouchStart_ = function(e) { * @private */ app.Controls.prototype.onTouchEnd_ = function(e) { + this.tilt = 0; this.isLeftDown = false; this.isRightDown = false; }; From aed9272088e7f12be7cdf30a9bfcc7eae039cd35 Mon Sep 17 00:00:00 2001 From: Aris <64918822+Arisamiga@users.noreply.github.com> Date: Fri, 5 Dec 2025 22:41:41 +0000 Subject: [PATCH 3/4] Ignore orientation when touch is active --- static/scenes/gumball/js/controls.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/static/scenes/gumball/js/controls.js b/static/scenes/gumball/js/controls.js index 9fefc84ff..fe78cad33 100755 --- a/static/scenes/gumball/js/controls.js +++ b/static/scenes/gumball/js/controls.js @@ -63,6 +63,12 @@ app.Controls.prototype.isLeftDown = false; */ app.Controls.prototype.tilt = 0; +/** + * Whether touch is currently active. + * @type {boolean} + */ +app.Controls.prototype.touchActive = false; + /** * Handles the device orientation event. * @param {!Event} e The event object. @@ -70,7 +76,7 @@ app.Controls.prototype.tilt = 0; */ app.Controls.prototype.onDeviceOrientation_ = function(e) { e = e.originalEvent; - if (e.gamma == null || this.isDesktopish_) { + if (e.gamma == null || this.isDesktopish_ || this.touchActive) { return; } // Portrait @@ -133,6 +139,7 @@ app.Controls.prototype.onKeyUp_ = function(e) { app.Controls.prototype.onTouchStart_ = function(e) { // Get the horizontal position where the touch started var touchX = e.touches[0].clientX; + this.touchActive = true; if (touchX < window.innerWidth / 2) { // Left this.tilt = -15; this.isLeftDown = true; @@ -155,6 +162,7 @@ app.Controls.prototype.onTouchStart_ = function(e) { */ app.Controls.prototype.onTouchEnd_ = function(e) { this.tilt = 0; + this.touchActive = false; this.isLeftDown = false; this.isRightDown = false; }; From 9176da237a4298a3d19e6817eabb3bc42ed1f3b2 Mon Sep 17 00:00:00 2001 From: Aris <64918822+Arisamiga@users.noreply.github.com> Date: Sun, 7 Dec 2025 17:06:12 +0000 Subject: [PATCH 4/4] Fix for multi touch interactions --- static/scenes/gumball/js/controls.js | 41 ++++++++++++++++++---------- 1 file changed, 27 insertions(+), 14 deletions(-) diff --git a/static/scenes/gumball/js/controls.js b/static/scenes/gumball/js/controls.js index fe78cad33..690336d3b 100755 --- a/static/scenes/gumball/js/controls.js +++ b/static/scenes/gumball/js/controls.js @@ -132,21 +132,29 @@ app.Controls.prototype.onKeyUp_ = function(e) { }; /** - * Handles the on Touch Start. Called dynamically. - * @param {!Event} e The event object. - * @private + * Sets the direction based on the touch X position provided + * @param {number} touchX */ -app.Controls.prototype.onTouchStart_ = function(e) { - // Get the horizontal position where the touch started - var touchX = e.touches[0].clientX; - this.touchActive = true; - if (touchX < window.innerWidth / 2) { // Left - this.tilt = -15; +app.Controls.prototype.setDirectionFromTouch = function(touchX) { + this.isLeftDown = false; + this.isRightDown = false; + if (touchX < window.innerWidth / 2) { + this.tilt = -15; // Left this.isLeftDown = true; } else { // Right this.tilt = 15; this.isRightDown = true; } +}; + +/** + * Handles the on Touch Start. Called dynamically. + * @param {!Event} e The event object. + * @private + */ +app.Controls.prototype.onTouchStart_ = function(e) { + this.touchActive = true; + this.setDirectionFromTouch(e.touches[0].clientX); // Let tutorial know about touch so it can hide the tutorial. if (!this.touchStarted) { @@ -161,8 +169,13 @@ app.Controls.prototype.onTouchStart_ = function(e) { * @private */ app.Controls.prototype.onTouchEnd_ = function(e) { - this.tilt = 0; - this.touchActive = false; - this.isLeftDown = false; - this.isRightDown = false; -}; + if (e.touches && e.touches.length > 0) { + this.setDirectionFromTouch(e.touches[0].clientX); + this.touchActive = true; + } else { + this.tilt = 0; + this.touchActive = false; + this.isLeftDown = false; + this.isRightDown = false; + } +}; \ No newline at end of file