Game Scaling/Resizing Example (v3)


#1

Phaser Frist Game Example with scaling/resizing

I have made an resizing example based on the Phaser 3 Frist Game Tutorial.

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 :slight_smile:

GitHub

https://github.com/yandeu/phaser3-scaling-resizing-example

Video

Codepen


Platformer Example

I have also added this scaling strategy to my platformer example I posted here.

Video


Game Safe Area Window
Android scaling and orientation
#2

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


#3

I found a bug with this, and I posted an example here: 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?


#4

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.

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

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


#5

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)


#6

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.


#7

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. :wink:


#8

@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> :rofl:

It was that simple!


#9

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.


#10

@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?


#11

@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.


#12

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.

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

#13

@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.