nandobtz

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

Recommended Posts

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!

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

 

Share this post


Link to post
Share on other sites
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! :)

Share this post


Link to post
Share on other sites
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);

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.