Horizontal and vertical orientation depending on the device - html games

Questions
#23

@BunBunBun Thank you for the information. Of course I made a simple change for myself, but I would like to have a proven solution under all browsers.
When it comes to gamedistribution, for example, I have not found such an option in their system so far.

#24

Guys, sorry but I still have this question.
Changing orientation works cool, I modified myself JS script in index.html. But, if the proportions and sizes of the different layouts differ, about changing the orientation the GUI displays correctly, but all other elements stay in the proportions of the previous layout. I understand that the whole collection should be re-rendered, but I don’t know how to do it.

#25

You can detect orientation changes using window.set_listener(). When you get a window size change and detect orientation change you need to manually update your game objects to work with a different orientation. The render script itself will obviously render using the new dimensions/orientation but you are in charge of moving the game objects. It is only the gui which will automatically adapt to a new layout.

1 Like
#26

I am just now trying to do this. All elements display correctly according to the new dimensions.

But I still don’t understand why, for example, the background doesn’t automatically take the default size from the layout ?

I understand that I need to have somewhere saved what size the background should be for each layout and after detecting the change manually set the appropriate sizes. Am I right ?

#27

Is the background a game object with a sprite? Or a gui box node? If it is a gui box node you need to set the adjust mode of the node to always stretch across the screen.

If it is a game object with a sprite you need to make sure you are using graphics that work in both portrait and landscape mode or that you change it depending on orientation.

Also keep in mind that the render script can be configured to zoom in/out your content to always cover the window.

1 Like
#28

@britzl

You know what, either I don’t understand something or I’m doing something wrong, because:

  1. I have two layouts:
    a) 960 x 540 Portrait
    b) 800 x 600 Landscape

Each layout has a different background (object sprite)
I have saved X and Y half-coordinates for each element for both Portrait and Landscape

  1. If I set in game.project - display 960 x 540
    I execute the compilation, everything is OK. The same when I set the display
    for 800 x 600.

  2. However, if I set 960 x 540 and do the compilation and then resize the window to
    get Landscape orientation, the layout changes, the GUI looks correct, while the background and other elements appear in the correct orientation, but are smaller than the game window, so roughly by about 2 times. It looks more or less as shown in the screen. If I resize the window even when I reach the 800 x 600 size, the background and other elements on it are always smaller than the window size (GUI behaves correctly).

image

  1. I have the rendering set msg.post("@render:", “use_fixed_fit_projection”, { near = -1, far = 1 })

  2. I don’t understand why this is the case. Since the appropriate sprites are prepared for each orientation and in point 2 everything is always OK

#29

No no, the layouts only apply to gui nodes. There is no such thing as having two different sprites. It’s always the same sprite.

#30

Sorry. I expressed myself imprecisely.

I have two different objects for the background:
(a) bg_Portrait
(b) bg_Landscape

For each orientation this background looks a little different, it does not differ only in size

Depending on which layout is active, such an object is displayed.
And as I wrote for point number 2 it works fine.
The problem will appear from the moment I described in point 3.

#31

Could you please share a project where I can test this?