Best practice for hybrid game

Phaser 3
1

Hi there
I developing hybrid game. The one game for mobile and desktop.
Mobile has portrait mode only.
Perhaps someone can recommend me a best approach to developing this type of game?

So far, I ran into 2 problems:

  1. The game should have fixed size due to design. So I try to separate mobile/desktop by this way:
const config = {
    width: isMobile()? 585 : 1079
    height: isMobile() ? 1266 : 782,
    type: Phaser.AUTO,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    }
}

That means I must know device platform before game creation.
Any thought how can I detect device outside Phaser scene? I’d tried to find any npm packages, but they are not recommended for use on mobile devices due to poor performance. :frowning:
2) Another issue is about config separation. I store text and images coordinates as jsons in separate files. This is logical, since, depending on the platform, the coordinates will differ. So I load required config depends on current platform. This is not always convenient. Perhaps someone has a ready-made example of how to properly organize the storage and load of configs? Maybe there is already some ready-made Class?

2

Maybe you can just check the window/viewport size?

3

@samme do you mean I should user window.innerWidth and window.innerHeight ?

4

Sure.

5

@samme Breathy said I don’t understand an expected result.
The game should take up all the free space inside the window.
And it will be opened in iframe.
I’ve like to have a result like this.
Image size: 800x533

const config = {
    width: 800,
    height: 533
}

snip_21
snip_211858×848 158 KB

Then I put

const config = {
    width: window.innerWidth,
    height: window.innerHeight,
}

snip_21-800
snip_21-8001866×893 154 KB

The image doesn’t fit all available space.

Then I replaced the image to bigger one (1200x800)

snip_21-1200
snip_21-12001667×872 160 KB

The picture is cropped to the right.

Screen resizing just resizes the picture itself :neutral_face:
IMHO, this is bit weird behavior