Joystick gets stuck #31

bfishman · 2016-05-29T22:33:17Z

I'm using Nipple.js on two separate transparent elements, overlaid on top of an HTML canvas - a 'left' and 'right' element. This allows me to use two joysticks for a 'twin stick shooter' style game.

I'm having a lot of trouble determining when this actually happens, but it is happening quite frequently: the right joystick "locks up", frozen at the max extent of its bounds, and cannot be released without a page refresh. The left joystick never seems to lock up (it is defined first in my code).

Part of the difficulty in debugging this is that it only happens when using a phone to visit the website, and as such my debugging tools (namely access to the browser console) are practically non-existent. In the browser, I cannot reproduce the bug.

It also seems to happen only when there are 2 joysticks active at once. If only 1 joystick is used (despite both having been instantiated), the problem doesn't seem to surface.

Any ideas? I'm digging through your code to see if I can spot where this bug might come from, but figured I would bring it up in case you are able to spot the issue more easily.

Might not be relevant, but here's my usage:

function initializeMovementJoystick(){
    movementJoystick = NippleJS.create({zone: leftDiv});
    var currentOctant = null;
    var octants = new Array(8);
    octants[0] = function(state){InputHandler.setInputState("strafeRight", state);};
    octants[1] = function(state){InputHandler.setInputState("strafeRight", state);InputHandler.setInputState("forward", state);};
    octants[2] = function(state){InputHandler.setInputState("forward", state);};
    octants[3] = function(state){InputHandler.setInputState("strafeLeft", state);InputHandler.setInputState("forward", state);};
    octants[4] = function(state){InputHandler.setInputState("strafeLeft", state);};
    octants[5] = function(state){InputHandler.setInputState("strafeLeft", state);InputHandler.setInputState("backward", state);};
    octants[6] = function(state){InputHandler.setInputState("backward", state);};
    octants[7] = function(state){InputHandler.setInputState("strafeRight", state);InputHandler.setInputState("backward", state);};

    movementJoystick.on('end move', function(event, data){
        if (event.type === 'move'){
            if(data.distance < 15){
                if (currentOctant !== null){
                    //un-fire current
                    octants[currentOctant](false);
                    currentOctant = null;
                }
            } else {
                let angle = data.angle.degree;
                let octant =  Math.floor(((angle + 22.5) % 360) / 45.0);

                if(octant !== currentOctant){
                    if(currentOctant !== null){
                        //changed from one to another, un-fire last
                        octants[currentOctant](false);
                    }
                    //fire current
                    octants[octant](true);
                    currentOctant = octant;
                }
            }
        } else if (event.type === 'end'){
            if (currentOctant !== null){
                octants[currentOctant](false);
                currentOctant = null;
            }
        }
        //console.log(event);
        //console.log(data);
    });
}

function initializeRotationJoystick(){
    rotationJoystick = NippleJS.create({zone: rightDiv});
    var currentOctant = null;
    var octants = new Array(8);
    octants[0] = function(state){InputHandler.setInputState("turnRight", state);};
    octants[1] = function(state){InputHandler.setInputState("turnRight", state);InputHandler.setInputState("boost", state);};
    octants[2] = function(state){InputHandler.setInputState("boost", state);};
    octants[3] = function(state){InputHandler.setInputState("turnLeft", state);InputHandler.setInputState("boost", state);};
    octants[4] = function(state){InputHandler.setInputState("turnLeft", state);};
    octants[5] = function(state){InputHandler.setInputState("turnLeft", state);InputHandler.setInputState("shoot", state);};
    octants[6] = function(state){InputHandler.setInputState("shoot", state);};
    octants[7] = function(state){InputHandler.setInputState("turnRight", state);InputHandler.setInputState("shoot", state);};

    rotationJoystick.on('end move', function(event, data){
        if (event.type === 'move'){
            if (useRelativeOrientation){
                InputHandler.setInputState("targetAngle", data.angle.degree);
            } else if(data.distance < 15){
                if (currentOctant !== null){
                    //un-fire current
                    octants[currentOctant](false);
                    currentOctant = null;
                }
            } else {
                let angle = data.angle.degree;
                let octant =  Math.floor(((angle + 22.5) % 360) / 45.0);

                if(octant !== currentOctant){
                    if(currentOctant !== null){
                        //changed from one to another, un-fire last
                        octants[currentOctant](false);
                    }
                    //fire current
                    octants[octant](true);
                    currentOctant = octant;
                }
            }
        } else if (event.type === 'end'){
            if (currentOctant !== null){
                octants[currentOctant](false);
                currentOctant = null;
            }
        }
        //console.log(event);
        //console.log(data);

    });
}

The text was updated successfully, but these errors were encountered:

yoannmoinet · 2016-05-29T22:41:25Z

Thanks for reporting it, I'll look into this.
Do you have it hosted somewhere I can test it?

bfishman · 2016-05-30T03:14:59Z

I will message you privately.

yoannmoinet · 2016-05-30T20:35:51Z

Ok, so after testing it, I might have found a way to reproduce it.

I was able to reproduce the phenomenon by activating the right joystick, while playing with it, rotate the phone.
Then release your finger, and the joystick will stay activated.
After that, if you active the left joystick, both will tracked the same finger.
Release, and only the right one will de-activate, and the right one will stay stuck for ever.

Is it the behavior you were having?

It could be related to #30. This looks like an edge case, but definitely a bug.
I'll have to think what the joystick should do in this situation.
Kind of a tough one...

bfishman · 2016-05-30T20:53:12Z

It is not the same behavior, but I have seen that happen as well. Perhaps
they are related and one solution will fix both.

I will try to come up with a better repro..

On Mon, May 30, 2016 at 2:35 PM, Yoann Moinet notifications@github.com
wrote:

Ok, so after testing it, I might have found a way to reproduce it.

I was able to reproduce the phenomenon by activating the right joystick,
while playing with it, rotate the phone.
Then release your finger, and the joystick will stay activated.
After that, if you active the left joystick, both will tracked the same
finger.
Release, and only the right one will de-activate, and the right one will
stay stuck for ever.

Is it the behavior you were having?

It could be related to #30
#30. This looks like an
edge case, but definitely a bug.
I'll have to think what the joystick should do in this situation.
Kind of a tough one...

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#31 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/ADXbO21V1g_GS1-NeGJ0FRGJ-adjHZLfks5qG0oogaJpZM4IpZVm
.

mlknz · 2016-08-22T14:15:09Z

Having same issue. Reproduced by creating one static and one dynamic nipples on different dom elements.
addedNipples = 0;
removedNipples = 0;
lookNippleManager.on('added', (evt, nipple) => {
addedNipples++;
}).on('removed', (e, nipple) => {
removedNipples++;
});

When bug happens having addedNipples === removedNipples + 1 (after releasing touch). Spamming touches help with reproducing, but is not necessary.
Platforms: desktop Chrome on Ubuntu 14.04. Mobile Safari on multiple ios devices.

yoannmoinet · 2016-08-22T14:35:32Z

Thx @mlknz to add more details to this.
I'm still having a hard time pinpointing this (ANNOYING) bug.

mlknz · 2016-08-23T09:58:27Z

@yoannmoinet couldn't reproduce bug with dataOnly param set to true. Could it be dom manipulation related issue?

yoannmoinet · 2016-08-23T12:22:25Z

@mlknz it could be indeed.

I don't have much time on this right now, so feel free to investigate.
I'm fixing the issue you have with the dev workflow and I'm almost there.

mlknz · 2016-08-24T11:22:14Z

Found easy way to reproduce bug:
start a new touch on old joystick container before it gets removed from options.zone. This way Collection.processOnEnd is not called after releasing touch.

Basically slow double tap works.

SpaceRangerX · 2017-03-03T16:09:19Z

hi, I have fixed a similar issue (joystick gets stuck in iOS devices) by adding this line "|| self.binded" in this function in this file dist/nipplejs.js

Manager.prototype.unbindDocument = function (force) { var self = this; // If there are no touch left // unbind the document. if (!Object.keys(self.ids).length || force === true || self.binded) { self.unbindEvt(document, 'move') .unbindEvt(document, 'end'); self.binded = false; } };

Fix #61 #57 #33 #31 #30

kevzettler · 2018-03-31T23:50:00Z

I am seeing this happen with nipplejs@0.6.8

I think this only happens when dataOnly: false and the DOM elements are rendered.

There are no error warnings thrown. The behaveior that happens is the joy stick UI DOM elements just freeze or lockup, The joystic UI remains visible on screen and cannot be manipulated.

robertlong · 2018-04-12T01:21:52Z

I'm seeing this as well and can replicate only on iOS devices, Android seems to work fine.

I've added a console log to Super.trigger and I'm seeing the following output (you're going to want to paste this into an editor to make any sense of it 😅):

[Log] added 0:added – {el: <div id="nipple_0_0">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_0">, on: function, off: function, show: function, hide: function, …}Object
[Log] added 0:added – {el: <div id="nipple_0_0">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_0">, on: function, off: function, show: function, hide: function, …}Object
[Log] start – {el: <div id="nipple_0_0">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_0">, on: function, off: function, show: function, hide: function, …}Object
[Log] start 0:start – {el: <div id="nipple_0_0">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_0">, on: function, off: function, show: function, hide: function, …}Object
[Log] rested – {el: <div id="nipple_0_0">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_0">, on: function, off: function, show: function, hide: function, …}Object
[Log] rested 0:rested – {el: <div id="nipple_0_0">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_0">, on: function, off: function, show: function, hide: function, …}Object
[Log] rested 0:rested – {el: <div id="nipple_0_0">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_0">, on: function, off: function, show: function, hide: function, …}Object
[Log] move – {identifier: 0, position: {x: 268, y: 525}, force: 0, …} (nipplejs.js, line 251)
{identifier: 0, position: {x: 268, y: 525}, force: 0, pressure: 0, distance: 0, …}Object
[Log] move 0:move – {identifier: 0, position: {x: 268, y: 525}, force: 0, …} (nipplejs.js, line 251)
{identifier: 0, position: {x: 268, y: 525}, force: 0, pressure: 0, distance: 0, …}Object
[Log] move – {identifier: 0, position: {x: 269, y: 523}, force: 0.044721359549995794, …} (nipplejs.js, line 251)
{identifier: 0, position: {x: 269, y: 523}, force: 0.044721359549995794, pressure: 0, distance: 2.23606797749979, …}Object
[Log] move 0:move – {identifier: 0, position: {x: 269, y: 523}, force: 0.044721359549995794, …} (nipplejs.js, line 251)
{identifier: 0, position: {x: 269, y: 523}, force: 0.044721359549995794, pressure: 0, distance: 2.23606797749979, …}Object
[Log] move – {identifier: 0, position: {x: 270, y: 523}, force: 0.0565685424949238, …} (nipplejs.js, line 251)
{identifier: 0, position: {x: 270, y: 523}, force: 0.0565685424949238, pressure: 0, distance: 2.8284271247461903, …}Object
[Log] move 0:move – {identifier: 0, position: {x: 270, y: 523}, force: 0.0565685424949238, …} (nipplejs.js, line 251)
{identifier: 0, position: {x: 270, y: 523}, force: 0.0565685424949238, pressure: 0, distance: 2.8284271247461903, …}Object
[Log] move – {identifier: 0, position: {x: 269, y: 524}, force: 0.0282842712474619, …} (nipplejs.js, line 251)
{identifier: 0, position: {x: 269, y: 524}, force: 0.0282842712474619, pressure: 0, distance: 1.4142135623730951, …}Object
[Log] move 0:move – {identifier: 0, position: {x: 269, y: 524}, force: 0.0282842712474619, …} (nipplejs.js, line 251)
{identifier: 0, position: {x: 269, y: 524}, force: 0.0282842712474619, pressure: 0, distance: 1.4142135623730951, …}Object
[Log] end – {el: <div id="nipple_0_0">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_0">, on: function, off: function, show: function, hide: function, …}Object
[Log] end 0:end – {el: <div id="nipple_0_0">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_0">, on: function, off: function, show: function, hide: function, …}Object
[Log] added 1:added – {el: <div id="nipple_0_1">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_1">, on: function, off: function, show: function, hide: function, …}Object
[Log] added 1:added – {el: <div id="nipple_0_1">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_1">, on: function, off: function, show: function, hide: function, …}Object
[Log] start – {el: <div id="nipple_0_1">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_1">, on: function, off: function, show: function, hide: function, …}Object
[Log] start 1:start – {el: <div id="nipple_0_1">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_1">, on: function, off: function, show: function, hide: function, …}Object
[Log] rested – {el: <div id="nipple_0_1">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_1">, on: function, off: function, show: function, hide: function, …}Object
[Log] rested 1:rested – {el: <div id="nipple_0_1">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_1">, on: function, off: function, show: function, hide: function, …}Object
[Log] rested 1:rested – {el: <div id="nipple_0_1">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_1">, on: function, off: function, show: function, hide: function, …}Object
[Log] move – {identifier: 1, position: {x: 275, y: 524}, force: 0, …} (nipplejs.js, line 251)
{identifier: 1, position: {x: 275, y: 524}, force: 0, pressure: 0, distance: 0, …}Object
[Log] move 1:move – {identifier: 1, position: {x: 275, y: 524}, force: 0, …} (nipplejs.js, line 251)
{identifier: 1, position: {x: 275, y: 524}, force: 0, pressure: 0, distance: 0, …}Object
[Log] removed – {el: <div id="nipple_0_0">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_0">, on: function, off: function, show: function, hide: function, …}Object
[Log] removed 0:removed – {el: <div id="nipple_0_0">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_0">, on: function, off: function, show: function, hide: function, …}Object
[Log] removed 0:removed – {el: <div id="nipple_0_0">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_0">, on: function, off: function, show: function, hide: function, …}Object
[Log] destroyed – {el: <div id="nipple_0_0">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_0">, on: function, off: function, show: function, hide: function, …}Object
[Log] hidden – {el: <div id="nipple_0_0">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_0">, on: function, off: function, show: function, hide: function, …}Object
[Log] shown – {el: <div id="nipple_0_1">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_1">, on: function, off: function, show: function, hide: function, …}Object
[Log] shown 1:shown – {el: <div id="nipple_0_1">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_1">, on: function, off: function, show: function, hide: function, …}Object
[Log] shown 1:shown – {el: <div id="nipple_0_1">, on: function, off: function, …} (nipplejs.js, line 251)
{el: <div id="nipple_0_1">, on: function, off: function, show: function, hide: function, …}Object

It looks as though the nipple_0_0 element is added, end is called, nipple_0_1 is added, nipple_0_0 is removed, and then nipple_0_1 has it's shown event fired and is stuck.

kevzettler · 2018-04-12T05:31:42Z

great find @robertlong

robertlong · 2018-04-12T20:17:08Z

I've done some more research today. It looks like the second touchend is not fired on mobile Safari or Mobile Firefox on Android when you do a slow double tap. This causes the second nipple element to get stuck.

robertlong · 2018-04-12T23:14:41Z

I ended up getting stuck on this. It probably has something to do with event.preventDefault() or returning false from an event handler, but I couldn't figure out what handler was causing the issue. Most of the occurrences of this issue can be solved by setting fadeTime: 0 so I'm going to stick with that for now.

yoannmoinet added the bug label May 29, 2016

yoannmoinet added the help wanted label Aug 23, 2016

Kalkut mentioned this issue Sep 27, 2017

Fix stuck joystick issues (#31 and #33) #58

Closed

yoannmoinet added a commit that referenced this issue Dec 19, 2017

fix: add touchcancel handling as touchend for events coming from outside

ebc501e

Fix #61 #57 #33 #31 #30

yoannmoinet closed this as completed Dec 19, 2017

lazerwalker mentioned this issue Aug 27, 2018

Joystick does not "end" and lock #72

Closed

14725 mentioned this issue Mar 19, 2023

[BUG] #206

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Joystick gets stuck #31

Joystick gets stuck #31

bfishman commented May 29, 2016 •

edited

yoannmoinet commented May 29, 2016 •

edited

bfishman commented May 30, 2016

yoannmoinet commented May 30, 2016

bfishman commented May 30, 2016

mlknz commented Aug 22, 2016 •

edited

yoannmoinet commented Aug 22, 2016

mlknz commented Aug 23, 2016

yoannmoinet commented Aug 23, 2016

mlknz commented Aug 24, 2016

SpaceRangerX commented Mar 3, 2017 •

edited

kevzettler commented Mar 31, 2018 •

edited

robertlong commented Apr 12, 2018 •

edited

kevzettler commented Apr 12, 2018

robertlong commented Apr 12, 2018

robertlong commented Apr 12, 2018

Joystick gets stuck #31

Joystick gets stuck #31

Comments

bfishman commented May 29, 2016 • edited

yoannmoinet commented May 29, 2016 • edited

bfishman commented May 30, 2016

yoannmoinet commented May 30, 2016

bfishman commented May 30, 2016

mlknz commented Aug 22, 2016 • edited

yoannmoinet commented Aug 22, 2016

mlknz commented Aug 23, 2016

yoannmoinet commented Aug 23, 2016

mlknz commented Aug 24, 2016

SpaceRangerX commented Mar 3, 2017 • edited

kevzettler commented Mar 31, 2018 • edited

robertlong commented Apr 12, 2018 • edited

kevzettler commented Apr 12, 2018

robertlong commented Apr 12, 2018

robertlong commented Apr 12, 2018

bfishman commented May 29, 2016 •

edited

yoannmoinet commented May 29, 2016 •

edited

mlknz commented Aug 22, 2016 •

edited

SpaceRangerX commented Mar 3, 2017 •

edited

kevzettler commented Mar 31, 2018 •

edited

robertlong commented Apr 12, 2018 •

edited