(SOLVED) How to support both portrait and landscape modes in HTML5 games?

Questions
1

Hi everyone, I’m looking for some advice.

I’m currently testing how to export an HTML5 game, for example to Poki.

I’d like to detect the screen dimensions where the game is running and automatically adjust everything for either horizontal (default) or vertical orientation.

However, when I test the HTML5 version, I’m stuck in horizontal mode.

Even when I try it on inspector.poki.dev, it always remains in landscape.

I’m not sure if this is due to something in HTML code or another setting.

Here are my current settings:

Display Width: 1031

Display Height: 580

High DPI: Yes

Dynamic Orientation: Yes

HTML5 Scale Mode: Fit

What do you usually do to make your HTML5 games support both portrait and landscape modes?

Thanks in advance for any tips or suggestions that can point me in the right direction!

1 Like
2

What do you mean by stuck in horizontal mode? When you say “adjust everything for either horizontal or vertical orientation” what do you mean by “everything”?

For GUI you can use layouts and the GUI should adjust if the orientation changes. For the rest of your content (sprites etc) you can listen for window size changes using window.set_listener() and react to changes in window size.

1 Like
3

You need html scale mode to be stretch.
In fit mode canvas keep it aspect, and don’t fill all available space.

5 Likes
4

The “stretch” mode fixed the screen filling issue. Thank you very much.

But now I’m experiencing a strange behavior shown in the video below (the ship is positioned at the mouse position). It also happens in the Windows version as well as in HTML5.

Does anyone know how to fix this?

5

you need convert screen mouse coord to game window coord

try this

local function convert_coord(action)
    local screen_size_x, screen_size_y = window.get_size()
    local config_size_x, config_size_y = tonumber(sys.get_config("display.width")), tonumber(sys.get_config("display.height"))

    local zoom = math.min(screen_size_x / config_size_x, screen_size_y / config_size_y)
    local projected_width = screen_size_x / zoom
    local projected_height = screen_size_y / zoom
    local xoffset = -(projected_width - config_size_x) / 2
    local yoffset = -(projected_height - config_size_y) / 2

    return vmath.vector3((action.x / config_size_x) * projected_width + xoffset, (action.y / config_size_y) * projected_height + yoffset, 0)
end
4 Likes
6

This worked. Thank you very much!