# Game Scaling/Resizing Example (v3)

**URL:** <https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555>\
**Category:** Examples\
**Created:** [March 6, 2019, 7:02pm UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555 "2019-03-06T19:02:21Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 6, 2019, 7:02pm UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/1 "2019-03-06T19:02:21Z")

</div>

## Phaser Frist Game Example with scaling/resizing

I have made an resizing example based on the [Phaser 3 Frist Game Tutorial](https://phaser.io/tutorials/making-your-first-phaser-3-game).

The objects inside the saveArea are always visible on all screen sizes.  
There are two scaling strategies. FIT and SMOOTH. The example below uses SMOOTH. To try the strategy FIT, set SCALE\_MODE on line 5 to ‘FIT’.

Hope you like it 🙂

### GitHub

[https://github.com/yandeu/phaser3-scaling-resizing-example](https://github.com/yandeu/phaser3-scaling-resizing-example)

### Video

### Codepen

https://codepen.io/yandeu/embed/preview/oVBybd?height=300&slug-hash=oVBybd&default-tabs=js,result&host=https://codepen.io

* * *

## Platformer Example

I have also added this scaling strategy to my platformer example I [posted here](https://phaser.discourse.group/t/phaser-3-pwa-platformer-example-with-spine-animations/919).

### Video

---

<div class="post-metadata">

**Author:** ![StealthGary](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stealthgary/32/775_2.png) [@StealthGary](https://phaser.discourse.group/u/StealthGary)\
**Post date:** [March 9, 2019, 1:28am UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/2 "2019-03-09T01:28:59Z")

</div>

This is exactly what I’ve been looking for - thanks!

---

<div class="post-metadata">

**Author:** ![gregmax17](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/gregmax17/32/751_2.png) [@gregmax17](https://phaser.discourse.group/u/gregmax17)\
**Post date:** [March 11, 2019, 10:28pm UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/3 "2019-03-11T22:28:22Z")

</div>

I found a bug with this, and I posted an example here: [https://codepen.io/gregmax17/pen/aMLpyW](https://codepen.io/gregmax17/pen/aMLpyW)

The problem I’m having is the interactive portion. On lines 77-88, I added shape inside a container, and made the container be interactive, and a simple `pointerup` event. When I click on the container, I don’t see anything in the console. However, if I resize the window, _then_ I see the expected results.

Any ideas why?

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 12, 2019, 12:06am UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/4 "2019-03-12T00:06:57Z")

</div>

Thanks @gregmax17,  
I think this has something to do with the order of calling the resize functions. If you simply add the setTimeout function below, at the bottom of the file, it will work.

```javascript
  //--
  setTimeout(() => resize(), 1000)
})

```

_I know this is not a suitable solution, but I thinks I’m on the right track._

---

<div class="post-metadata">

**Author:** ![gregmax17](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/gregmax17/32/751_2.png) [@gregmax17](https://phaser.discourse.group/u/gregmax17)\
**Post date:** [March 12, 2019, 12:47am UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/5 "2019-03-12T00:47:03Z")

</div>

Thank you for taking the time to reply. I did just that in the `window.onload` event and in the `MainScene`, but no luck. Its really strange.

Is there something else that needs needs to be called in addition to the `game.scale.resize` method? The `refresh` method? Something in the input manager maybe? (just throwing out random ideas, I’m really new to Phaser myself)

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 12, 2019, 12:49am UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/6 "2019-03-12T00:49:26Z")

</div>

I just noticed that the issue is only present on codepen. Probably because the game is embedded as an iFrame.

I also noticed that in the browser the function `this.scale.on('resize', (gameSize, baseSize, displaySize, resolution)` is triggered once at the beginning of the game, event though the screen does not resize. On codepen, this function is only triggered after the window gets resized.

It works as expected on my phone and in the browser.

I do not know if I have to write something in addition or if it is a phaser scaleManager bug.

---

<div class="post-metadata">

**Author:** ![StealthGary](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stealthgary/32/775_2.png) [@StealthGary](https://phaser.discourse.group/u/StealthGary)\
**Post date:** [March 12, 2019, 1:18am UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/7 "2019-03-12T01:18:37Z")

</div>

I actually have a similar issue… it seems the hit area created by a setInteractive call on a sprite, doesn’t update when you manipulate the canvas css. If I remove the `game.canvas.style` lines, the hit areas update as expected - though of course the resizing is all messed up. 😉

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 12, 2019, 1:26am UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/8 "2019-03-12T01:26:02Z")

</div>

@gregmax17 I found the issue!!

It’s in the index.html file.  
I wrote `<div id="phaser-example"></div>` instead of `<div id="phaser-game"></div>` 🤣

It was that simple!

---

<div class="post-metadata">

**Author:** ![StealthGary](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stealthgary/32/775_2.png) [@StealthGary](https://phaser.discourse.group/u/StealthGary)\
**Post date:** [March 12, 2019, 1:31am UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/9 "2019-03-12T01:31:20Z")

</div>

Not sure we’re talking about the same issue!  
I actually tried removing the pointer events on the sprites and re-adding them on resize, but that didn’t seem to make any difference. I’m not sure we’re supposed to be messing with the canvas styles when the scale manager is handling things.

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 12, 2019, 2:00am UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/10 "2019-03-12T02:00:04Z")

</div>

@StealthGary No, sorry. I was resolving the issue above.

Can you recheck if you issue is gone now? It looks like a very similar issue.

If not, can you please describe the issue you’re experiencing a bit more deeply?

---

<div class="post-metadata">

**Author:** ![gregmax17](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/gregmax17/32/751_2.png) [@gregmax17](https://phaser.discourse.group/u/gregmax17)\
**Post date:** [March 12, 2019, 5:15pm UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/11 "2019-03-12T17:15:02Z")

</div>

@StealthGary I think I know what you were encountering, I was too. Set the scale mode in your game config to `Phaser.Scale.NONE`. The resize functions we were creating, `SMOOTH` or `FIT`, are more custom and override what Phaser is doing internally.

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [March 12, 2019, 6:20pm UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/12 "2019-03-12T18:20:32Z")

</div>

I believe setting `Phaser.Scale.NONE` has the same effect as just leaving the scale property out of the gameConfig?

Like in my example. There is no scale property.

* * *

**EDIT:**  
`Phaser.Scale.NONE` is actually the default. But I have added the code below on github and codepen to make it more clear how it works.

```javascript
scale: {
  // we do scale the game manually in resize()
  mode: Phaser.Scale.NONE,
  width: DEFAULT_WIDTH,
  height: DEFAULT_HEIGHT
},

```

---

<div class="post-metadata">

**Author:** ![StealthGary](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stealthgary/32/775_2.png) [@StealthGary](https://phaser.discourse.group/u/StealthGary)\
**Post date:** [March 12, 2019, 6:32pm UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/13 "2019-03-12T18:32:25Z")

</div>

@gregmax17 Thanks, that worked! Strangely, I’d read in the docs that the resize method should only be used when the scaling mode is set to ‘NO\_SCALE’ - I’d tried that to no avail, but ‘NONE’ seems to work. I guess they’re two different things.

---

<div class="post-metadata">

**Author:** ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)\
**Post date:** [April 13, 2019, 8:49am UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/14 "2019-04-13T08:49:18Z")

</div>

Hello @yannick, I’m having some issue with FULL example, I just did the same thing with your code on CodePen, and still I can’t see the all canvas…

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/727319b6795c06055abc3fa5d504c45ced3b896f.png)

I have this problem now can you help me out with this ?

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [April 13, 2019, 1:00pm UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/15 "2019-04-13T13:00:36Z")

</div>

FULL? You mean FIT?

I designed it to be used in full screen. I see that you have other html around it. I guess you have to change the code a bit. For example, I guess, in your case you have to use the width and height of the wrapping div (“core”) in stead of the window.innerWidth and window.innerHeight like below:

```javascript
const w = window.innerWidth // put the widht of the core div here?
const h = window.innerHeight // put the height of the core div here?

```

Also maybe you have to adjust the parent in scale to core?

```javascript
scale: {
  parent: 'phaser-game', // put 'core' here?
}

```

I hope this helps and you can solve your issue.

---

<div class="post-metadata">

**Author:** ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)\
**Post date:** [April 13, 2019, 1:16pm UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/16 "2019-04-13T13:16:07Z")

</div>

Hey again man,  
I’m using [this example](https://codepen.io/yandeu/pen/vPXvMb?editors=0010) of yours and now directly this example, and it seems like this now:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/7d69f4763cef73f27c82ac79e0c68cc2aec10c29.png)

It’s seems to be fine when i just reload the page, when i scale this kinda fast this happens,

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/3d4dd9af97f0c6bfbc538b61962e5c60fdd4e7fa.png)

What do you think ?

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [April 13, 2019, 1:36pm UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/17 "2019-04-13T13:36:01Z")

</div>

Ohhh, you where referring to this. This is actually a really bad example. It was my first attempt to implement a nice scaling strategy. It works very different than the strategy in this topic. Actually in the example you use, the canvas does never change its size. Only the css does the work by hiding some part of the canvas based on the aspect ratio.

I do not know if this example can easily be used in what you are building. I guess it is a css problem, because, as I mentioned above, the canvas size stays the same.

Personally I would not use the approach you are using, but the approach I published in this topic instead.

---

<div class="post-metadata">

**Author:** ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)\
**Post date:** [April 13, 2019, 1:37pm UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/18 "2019-04-13T13:37:47Z")

</div>

Thanks for quickly answers, Do you meen this example you showed on this topic ? 🙂

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [April 13, 2019, 1:47pm UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/19 "2019-04-13T13:47:39Z")

</div>

Yes. The example in the first post of this topic is the good one. Check the github link and the codepen link in the first post of this topic.

I have also implemented the strategy from this topic in 2 other games I’ve published in this forum. Check them out and have a look at the source code:

- [Platformer Example](https://phaser.discourse.group/t/919)
- [Real-Time Multiplayer Game](https://phaser.discourse.group/t/1739)

---

<div class="post-metadata">

**Author:** ![hcakar](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/hcakar/32/459_2.png) [@hcakar](https://phaser.discourse.group/u/hcakar)\
**Post date:** [April 13, 2019, 2:39pm UTC](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555/20 "2019-04-13T14:39:25Z")

</div>

Hey Again @yannick,  
Thanks again for your help but this one also doesn’t work for my case, I believe as you said it’s an issue with my css and like sidebar’s and stuff, i’ll try to make it some other way.

Also i opened [this issue](https://phaser.discourse.group/t/about-scalemanager-orientation-change-resize/1792) about resize…

[Next page](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555.md?page=2)