# Best practice for hybrid game

**URL:** <https://phaser.discourse.group/t/best-practice-for-hybrid-game/10285>\
**Category:** Phaser 3\
**Created:** [September 20, 2021, 11:29pm UTC](https://phaser.discourse.group/t/best-practice-for-hybrid-game/10285 "2021-09-20T23:29:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dvasuta](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dvasuta/32/5297_2.png) [@dvasuta](https://phaser.discourse.group/u/dvasuta)\
**Post date:** [September 20, 2021, 11:29pm UTC](https://phaser.discourse.group/t/best-practice-for-hybrid-game/10285/1 "2021-09-20T23:29:16Z")

</div>

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:

```javascript
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. ☹  
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?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 21, 2021, 2:43pm UTC](https://phaser.discourse.group/t/best-practice-for-hybrid-game/10285/2 "2021-09-21T14:43:08Z")

</div>

Maybe you can just check the window/viewport size?

---

<div class="post-metadata">

**Author:** ![dvasuta](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dvasuta/32/5297_2.png) [@dvasuta](https://phaser.discourse.group/u/dvasuta)\
**Post date:** [September 22, 2021, 12:56pm UTC](https://phaser.discourse.group/t/best-practice-for-hybrid-game/10285/3 "2021-09-22T12:56:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 22, 2021, 2:34pm UTC](https://phaser.discourse.group/t/best-practice-for-hybrid-game/10285/4 "2021-09-22T14:34:26Z")

</div>

Sure.

---

<div class="post-metadata">

**Author:** ![dvasuta](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dvasuta/32/5297_2.png) [@dvasuta](https://phaser.discourse.group/u/dvasuta)\
**Post date:** [September 22, 2021, 3:46pm UTC](https://phaser.discourse.group/t/best-practice-for-hybrid-game/10285/5 "2021-09-22T15:46:38Z")

</div>

@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

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

```

 ![snip_21](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/d124fccde67d957044a50d800ac3f46fadbd9c7a.jpeg)

Then I put

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

```

 ![snip_21-800](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/4/4ee549db9a16352ee4b9e7c842a68829b970d442.jpeg)  
The image doesn’t fit all available space.

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

 ![snip_21-1200](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/2/244418f273c082dd5bd308684015ea5c222e73c6.jpeg)  
The picture is cropped to the right.

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