scale Phaser.ScaleManager.RESIZE; has no canvas/screen size limit

[nandobtz]

Noob here using Phaser. But here's my issue:
I'm struggling to get to a perfect scale on the game I'm building. The best option for me so far is Phaser.ScaleManager.RESIZE;
But this method doesn't have a limit to the canvas size. If an user has a huge screen, say 30 inches, he'd have a lot of advantage over an user with a medium size screen, say 17 inches. The 30 inches user would have much more view of the world.

I've tried to set the canvas to a fixed size, like 1280x720, then dynamically resize the canvas style. And using Phaser.ScaleManager.SHOW_ALL; But it doesn't do the trick because it shows the black borders and I can't get rid of it.

To make it clear what I want to achieve, I'm building an online multiplayer game (.io). If you notice the most famous .io games like agar.io, diep.io and slither.io, the game scale is perfect for any screen size. If the screen is too big, the game doesn't show more screen. It just adjusts for a more zoomed game.

Here's a gif of what I need and how my game is now:
agar.io:
https://gyazo.com/94a41e06816b8dc9a1fd4608c0cfa525
Notice that in agario, the screen only goes so far before the game starts to scale.

My game:
https://gyazo.com/4269ecfb1253b9ddbcd6e917ad1a8602
Notice how much of the world I can see after scaling my game. Meaning that there is no limit for the canvas.

Please let me know if you need more information in order to help me out here!

Thanks in advance!

[casey]

These tutorial should help you

https://www.joshmorony.com/how-to-scale-a-game-for-all-device-sizes-in-phaser/

http://www.emanueleferonato.com/2015/02/26/the-basics-of-responsive-html5-games/

Are you setting viewpoint window.innerWidth and outerWidth? https://phaser.io/examples/v2/display/viewport 

[samme]

This is almost it. 

 

[nandobtz]

On 2/24/2018 at 3:47 PM, samme said:

This is almost it. 

 

That's almost it, yes! Thank you samme! I will try to implement it and let you know how it goes.

 

EDIT: The only thing I noticed that doesn't fit with what I need is the WIDTH. On your pen, the height fills the screen. But the width doesn't fill the screen (see black bars on the left and right side). Any way to fix that too?

[samme]

44 minutes ago, nandobtz said:

The only thing I noticed that doesn't fit with what I need is the WIDTH. On your pen, the height fills the screen. But the width doesn't fill the screen (see black bars on the left and right side). Any way to fix that too?

It's partly because my maximums are small and square (640 × 640) and the screen is wide. But yes, that approach implies a fixed aspect ratio, which agar.io doesn't seem to use.

 

[nandobtz]

1 hour ago, samme said:

It's partly because my maximums are small and square (640 × 640) and the screen is wide. But yes, that approach implies a fixed aspect ratio, which agar.io doesn't seem to use.

 

Wonderful, wonderful! I was able to implement it perfectly. Now that's exactly what I needed. The only thing I changed was the "var scale = Math.max(1, Math.max(scaleX, scaleY));" to var scale = Math.max(0.5, Math.max(scaleX, scaleY)); so players with smaller screen will have a similar view to bigger screen (not cut out). Thank you again, Samme. You're a savior!

[luisb]

doesnt work in phaser ce 2.10...any idea? Regards

[nandobtz]

2 hours ago, luisb said:

doesnt work in phaser ce 2.10...any idea? Regards

I'm using phaser ce v2.10.1. Not sure if it makes any difference. It worked fine for me.

[luisb]

43 minutes ago, nandobtz said:

I'm using phaser ce v2.10.1. Not sure if it makes any difference. It worked fine for me.

Hi Newbie..yes a uses 2.10.1..please help me... you said thar your canvas game resize perfectly?

I tried again and the code no resize de canvas and not put the correct dimension in init.

 

this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;

this.scale.align(true, true);

 

let scaleX = parentBound.width / window.screen.availWidth;
let scaleY = parentBound.height / window.screen.availHeight + 80;
let scale = Math.max(0.5, Math.max(scaleX, scaleY));
let width = ~~Math.min(parentBound.width / scale,window.screen.availWidth);
let height = ~~Math.min(parentBound.height / scale,window.screen.availHeight + 80);

scaleManager.setGameSize(width, height);
scaleManager.setUserScale(scale, scale, 0, 0, false, true);

[Netional]

To the original poster:

Let Phaser maximize the canvas (different per user) and give your camera the same world coordinates (your own game coordinates) in all cases.

The camera will automatically cover the entire screen and by just working in your own coordinates every user will see the same portion of the game.