Determining whether a phone is rotated or not using Construct2

[Ydt]

I've been having some trouble with this. It seems that most browsers don't support the alpha, beta, and gamma values that are typically used in Construct2 to determine the angle of a phone.

 

Does anyone have any idea what steps to take in order to be able to create a "please turn phone" screen using Construct 2 (that works in mobile browsers)?

 

It seems to work in some browsers (using Alpha, Beta, and Gamma). But my phones stock browser doesn't support it which is a problem.

[MikeHart]

I am not using Construct myself, but can you determine the width and height of the browser canvas? If yes and if the width is smaller than the height, then it is in portrait mode.

[fatalfluff]

Careful here. While you can check orientation changes with WindowWidth, Windowheight system expressions, you can't just check against the one getting bigger than the other, because depending on the scaling mode, they stay relative to each other (in Letterbox Fullscreen for example, which is the most widely used). So you have to implement a bit more logic to catch that. I guess Construct tries to be clever here and not report the actual canvas size but it's own real window size to prevent game mechanics from breaking.

 

If you go down the Alpha/Beta/Gamma road, you have to be aware, that not all plattforms report them in the same way, some switch the axis and some are rotated by 90 degrees. So you have to read out what plattform you are on, and implement different checks for each (a lot of non-construct games seem to fall for this trap too).

[Ydt]

Careful here. While you can check orientation changes with WindowWidth, Windowheight system expressions, you can't just check against the one getting bigger than the other, because depending on the scaling mode, they stay relative to each other (in Letterbox Fullscreen for example, which is the most widely used). So you have to implement a bit more logic to catch that. I guess Construct tries to be clever here and not report the actual canvas size but it's own real window size to prevent game mechanics from breaking.

 

This is the problem I am having. While using the letterbox or integer scale modes construct only reports the "real" window size (320x480) at all times. So far my only work around is using either the scale inner or scale outer modes to get an accurate measure of the window size while the phone is rotated. 

[fatalfluff]

 

 

construct only reports the "real" window size (320x480) at all times.

 

Are you sure? I get different values in Letterbox Fullscreen, but relative to each other. Which values I get depend on the platform (Android 4.3 and Ios6 for example report different numbers). So I can catch a change, usually when the values get smaller, the player switched from Portrait to Landscape. 

 

Not sure why it would report the native project resolution to you.

You could enter the following URL on your phone(s) and check what my test case says..

 

http://www.grey-matter.de/d/orient3 

 

Either way, this is all a bit messy. I will try to get ahold of Ashley and ask him what the best (combination of) method(s) is.

[Ydt]

Are you sure? I get different values in Letterbox Fullscreen, but relative to each other. Which values I get depend on the platform (Android 4.3 and Ios6 for example report different numbers). So I can catch a change, usually when the values get smaller, the player switched from Portrait to Landscape. 

 

Not sure why it would report the native project resolution to you.

You could enter the following URL on your phone(s) and check what my test case says..

 

http://www.grey-matter.de/d/orient3

 

Either way, this is all a bit messy. I will try to get ahold of Ashley and ask him what the best (combination of) method(s) is.

 

Are you using letterbox scale or letterbox integer scale? What values are you looking at

 

edit:

 

I messed around a bit more and did get my test app to report the actual size of the window length and height. the problem now is that construct resizes the canvas when you rotate the device so for example if you have an app in portrait mode the height will always be a higher number than the width regardless of the orientation of the phone. I would feel uncomfortable using these numbers as  measure for whether or not the screen has been rotated as it would be hard to pin point the exact number you should base the rotation detection off of, especially with the wide variety of screen sizes out there.

[Hutto]

I use the Viewports. Pseudocode:

 

On load:

CurrentScreenHeight = ViewportBottom("Layer 0") - ViewportTop("Layer 0");

CurrentScreenWidth = ViewportRight("Layer 0") - ViewportLeft("Layer 0");

 

Periodically:

IF CurrentScreenHeight =/= ViewportBottom("Layer 0") - ViewportTop("Layer 0")

OR CurrentScreenWidth =/= ViewportRight("Layer 0") - ViewportLeft("Layer 0") {

// Do resize stuff here. End with:

CurrentScreenHeight = ViewportBottom("Layer 0") - ViewportTop("Layer 0");

CurrentScreenWidth = ViewportRight("Layer 0") - ViewportLeft("Layer 0");

}

 

To test for portrait and landscape, one way would be simply test which of the CurrentScreenHeight and CurrentScreenWidth is the biggest. If the biggest changes from one to the other, they probably rotated the screen. Then you can splash a message telling them to flip it back.

[fatalfluff]

The latest beta has a portrait/landscape condition on the browser object. So it's all warm and fuzzy now.