Device orientation

[Alien]

Good afternoon,

I, am unable to use device orientation (alpha, beta, gamma) on two Android phones. Can you please assist on this topic? Here is what I do:

// On init:
console.log(me.device.hasDeviceOrientation); // Returns false on both phones
console.log(me.device.watchDeviceOrientation()); // Returns false on both phones

// on entity:

if ((me.input.isKeyPressed('left')) || (me.device.gamma < -game.data.gammaThreshold)) {
// Never entered
...
}

The first phone is a FairPhone 2 (Android 7) and the second one is a Jelly Pro from Unihertz (Android 9). The official HTML5 device orientation API works fine on both of them, unfortunately MelonJS fails on both of them.

I use MelonJS 6.0.0.

 

Thanks in advance & Cheers from French Riviera,

Alien

[obiot]

Hello, that part of the code has not been updated in a while and it seems that last year a permission mechanism has been introduced in the standard (see Here), which would explain why it does not work anymore (i also tried our online example here and it also does not do anything anymore on my iphone). 

i’ll leave it to this for now, i will have a better look tomorrow morning, should be an easy fix, but thank you for the report, in the mean time i suggest you rather use the latest 7.1.1 version, instead of starting a new project with the 6.x branch.

Cool sinon de lire des feedbacks depuis la French Riviera ! Francais de Singapour ici ?

Edited May 25, 2020 by obiot

[Alien]

Thanks a lot, Olivier! I'll do that. I'm looking forward to be a tester: I'm going to apply the migration guide right now so maybe I'll be ready for tomorrow morning.

Keep in touch!

Singapour ? Le bol ! ?

[Alien]

Olivier,

My migration went well. I'm now on 7.1.1.

Regards,

Alien

[obiot]

Hi, after playing a bit the latest API, the new standard implementation is really restrictive :

- enabling device orientation or device motion event required to ask for user permission, through a gesture event

- enabling device orientation or device motion only works from a secure browser context (https)

 

I'm not going to embed all the gesture detection within melonJS itself because everybody could have a different need in terms on which element to use for the event detection, but after a few changes in melonJS (that I will publish later), the device test example now works and is also enabling the feature by doing this :

        // enable deviceorientation
        me.input.registerPointerEvent("pointerleave", me.game.viewport, function() {
            if (me.device.watchDeviceOrientation() || me.device.watchAccelerometer()) {
                me.input.releasePointerEvent("pointerleave", me.game.viewport);
            }
        });

as opposed to this : 

        // enable deviceorientation
        me.device.watchDeviceOrientation();
        me.device.watchAccelerometer();

 

just to "warn" you as you will have to take this in account somewhere in your code as well.
 

[obiot]

so here is for testing ! bad news is that this is on the 8.x branch, so you will have to update again but actually compared to 7.x there are really one 1 api change related to gravity and you should not even have to change it as it should be backward compatible.

So here is attached is the latest 8.0 build  :

melonjs.js

and then the wiki page for migration to 8.0 :

https://github.com/melonjs/melonJS/wiki/Upgrade-Guide#71x-to-800-dev

and the updated example on how to enable/use device motion detection:

https://github.com/melonjs/melonJS/blob/master/examples/devicetest/js/app.js

 

let me know how it works and if you can just share your example

Edited May 26, 2020 by obiot

[Alien]

Thank you so much, Olivier, you are fast! I'll test that ASAP and will let you know how it goes.

[Alien]

Olivier, it all went well.

I had no problem for the migration as you said and the device orientation works on the Jelly Pro phone. I'll test tomorrow on the Fair Phone 2 but I have no doubt it will work as well as it is all standard APIs.

Shall I stick to the version in your previous post for now or shall I use MelonJS master from GitHub?

Thanks again!

[obiot]

Great ! For the version, well if you are already building melonJS out of master you are already on the 8.0 branch so its the same basically as yesterday file was a yesterday snapshot 

[Alien]

Fine, this is no suprprise.

I have tested on the Fair Phone and it works as well.

Just a note: on both phones, it works only in Firefox beta and Chrome, not on latest, stable Firefox. But for the moment, this is no big deal for me.

[obiot]

Firefox deprecated the API a while ago, it was just a warning until now, but it might be that on the latest version that actually removed it.

[Alien]

That would explain, then. Allright.

[obiot]

Works on ios with Firefox on my side.

are u sure you used a https connection ?

[Alien]

Yes, I am. But I'm not totally sure that I used latest mobile Firefox, maybe it is older than I think. Do you want me to double-check?

[Alien]

I've just checked again and both phones use Firefox 68.8.1 (the non-working one) and Firefox Beta 75.0.0-beta.6 (the working one). That's the only thing which change.

[Alien]

Olivier,

 

I'm sorry, I failed gathering information about why FF 68 on Android doesn't provide device orientation. Let me explain: on my Linux box, I have FF 76 and it doesn't allow me to remote debug FF68 on Android (too old mobile version). So I can't provide any console message. The only FF version that I can remote debug from Linux is the Beta one, but this is the one which works, so it is not of any help here. I tried an older version but on my Debian, all I could get my hands on was an old Firefox-ESR for which I totally failed to launch a remote debugger.

I've tried a lot of things, but no way. Maybe you have an idea?

Regards,

Alien

[Alien]

OK, I eventually managed to debug Firefox  68! Unfortunately, there is no error message in the console...

Just for the record, here is what I have done:

Here, there are tons of FF .deb packages:

https://sourceforge.net/projects/ubuntuzilla/files/mozilla/apt/pool/main/f/firefox-mozilla-build/

And here, there are versions of Ubuntu for VirtualBox:

https://www.osboxes.org/ubuntu/

I managed to debug my game with FF 71 on Ubuntu 16.04.

[obiot]

any reason why FF68 is such a strong requirement ? the issue here with supporting pre-W3C (vendor specific) device orientation event is that there are number of things to work with, including different range of value or even different type (e.g. FF used to return properties like x,y,z, instead of alpha, gamma beta , Chrome used to return degrees instead of radians, etc..).

Honestly that's a lots of pain for not just updating to a more recent version of FF

[Alien]

Thanks a lot for this answer Olivier! I don't have any real reason to stick to FF 68 on Android, except that it's the latest version to date. But as I said, I can stick to FF Beta and see how it goes, no problem about that. I just wanted (hard) to give you a console error. But as there is none of them, let's keep moving.

My hope is that at the time my game goes live, currently Beta Firefox will be latest Firefox. ?

[obiot]

oh, I did not realize/understand FF 76 for Android was the last stable version, that's interesting...

would you be able to run the following line in the FF 76 console :

console.log(window.DeviceOrientationEvent);
console.log(DeviceOrientationEvent.requestPermission);
console.log(screen.mozOrientation);

and see what they output ?

and then potentially in the beta one to compare both ?

Edited June 1, 2020 by obiot

[Alien]

OK, done. Here are the logs from FF 68.8.1:

### function DeviceOrientationEvent() {
    [native code]
}            game.js:104:13
### undefined             game.js:105:13
### portrait-primary    game.js:106:13

And here are those from Firefox beta:

### function DeviceOrientationEvent() {
    [native code]
}        game.js:104:13
### undefined         game.js:105:13
### portrait-primary         game.js:106:13

which look exactly the same.

FYI, the logs have been written to the console in the "loaded" function of my game.js, I mean after this has been executed:

    // enable deviceorientation
    me.input.registerPointerEvent("pointerleave", me.game.viewport, function() {
      if (me.device.watchDeviceOrientation()) {
        me.input.releasePointerEvent("pointerleave", me.game.viewport);
      }
    });

(because this is in my "onload").

[obiot]

Interestingly both support the DeviceMotionEvent, and do not need to request for user permission before using it.

only difference i see now is that in FF68, PointerEvent(s) are not enabled by default, but they are in the beta. Now that should be abstracted by melonjs (and translated automatically by a corresponing touch or mouse event), but maybe pointerleave is not the correct one to use here, you could try to use pointerend instead to see if it works (even though for both cases here, as opposed to FF on iOS there is no need for a first gesture).

[Alien]

OK, I'll do that ASAP.!

[Alien]

Olivier,

Sorry for the long delay. I finally managed to do the test you asked for. I got this in FF68 and in FF Beta:

"invalid event type: pointerend"

Too bad...

[Alien]

Olivier,

Any news on that topic, please? Or shall we stick to FF Beta for Android?