Switching window orientation on mobile

#1

Hi,
I have always developed web clients to work in landscape mode, and when the device is rotated an external JS detects it and shows a message above the application to ask the user to rotate the device back to landscape.

Now I need to adapt the contents of the future applications to the two orientations: how can I dynamically change the window size by swapping the default width and height?
I tried to install extension-orientation but… it doesn’t exist anymore in haxelib!

I tried myself by doing

var originalHeight: Int = Lib.application.window.height;
Lib.application.window.height = Lib.application.window.width;
Lib.application.window.width = originalHeight;

and

Lib.application.window.resize(Lib.application.window.height, Lib.application.window.width);

The result is the same: the window does not resize, or at least the visible contents, but the interactive areas (of the buttons) are rescaled accordingly. I know where the interactive areas are because mouse_over triggers different texts for each button in the client.
The new size of the interactive areas related to the corresponding buttons are

width = original width * 16:9
height = original height * 9:16

and the position

x = original x * 16:9
y = original y * 9:16

I am only rescaling the “interactive layer”, my approach is totally wrong.

Thanks

#2

I’d recommend this:

1.) Use the proper CSS in your index.html template in order to resize your content as needed
2.) (If you use <window width="0" height="0" />) make sure you handle Event.RESIZE

I believe the browser should rotate with the device, then if your CSS triggers a resize, it will either letterbox and scale your content, or it will resize it and trigger Event.RESIZE for you to handle the new width and height.

Landscape vs portrait can be detected if the width or height is greater than the other

#3

Try installing it from GitHub instead:

> haxelib git extension-orientation https://github.com/HaxeExtension/extension-orientation.git
#4

Ouch! It installs but it is for iOS and Android only :sweat_smile:

#5

I have set

window width="0" height="0"

so now I can detect the RESIZE event.
Now I am rescaling the various game layers calculating the new scale by the default app size and the effective window size (stage.stageWidth/Height), but I don’t know if it is the correct approach, maybe it is heavy on CPU (10 layers to rescale). What if I add all layers to a single DisplayObjectContainer on stage and rescale it?

I’d like to know how normally the autosize is done: is the div (no, the app inside the div) rescaled by the GPU?

I can distinguish between landscape and portrait mode to rescale and rearrange layers, but I first need to know if I am on the right way, because I am completely ignoring the CSS approach you suggested.

#6

Scaling a single container Sprite works okay :slight_smile:

We look at the embed element, if it’s a canvas element, we dispatch when it is resized. If it is a DIV, we do the same for the size, but you’ll want a percentage or exact size set on the DIV to prevent infinite resizing

#7

Ok, I am now able to rescale, resize, swap proportions correctly from inside the app.

I will find out later if I need to move these functions outside, in a separate JS or in some static settings of the CSS.