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

6 Likes
Android scaling and orientation
Game Safe Area Window
Change the canvas dimension on screen rotation
#2

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

1 Like
#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.

1 Like
#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.

#14

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…

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

#15

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:

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?

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

I hope this helps and you can solve your issue.

#16

Hey again man,
I’m using this example of yours and now directly this example, and it seems like this now:

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

What do you think ?

#17

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.

#18

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

#19

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:

1 Like
#20

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 about resize…