Sign in to follow this  
ozdy

Phaser Scaling Question

Recommended Posts

Hello guys, currently I'm trying to resize my game to the whole window, while centering a fixed aspect ratio game window in the center, and having padding sprites at the side, but without success. 

Can you tell me what I should do? Cheers

 

info2.png

Share this post


Link to post
Share on other sites
14 minutes ago, fitness23 said:

Sorry your question is a little confusing. What do you mean by padded sprites? Do the grey areas still belong to the games canvas?

Yes, the padded sprites still are part of game canvas.

Share this post


Link to post
Share on other sites

Hi, @samme, thank you for your answers, but it doesn't exactly do what I'd like. When I stretch the view, the left and right paddings are on top of the world sprite, but I'd like them not to be - I'd want the visible world to start at x=0 after the left padding sprite and end at x=1920 before the right padding sprite no matter how much I stretch it.

Share this post


Link to post
Share on other sites
6 hours ago, ozdy said:

When I stretch the view, the left and right paddings are on top of the world sprite, but I'd like them not to be - I'd want the visible world to start at x=0 after the left padding sprite and end at x=1920 before the right padding sprite no matter how much I stretch it.

Revised. You'll have to adjust camera.bounds in the resize callback if you want them to meet the padding boundaries. 

This kind of design is much simpler if you put the buttons overlay in HTML/CSS instead, so if that's a possibility, try it.

Share this post


Link to post
Share on other sites
15 hours ago, samme said:

Revised. You'll have to adjust camera.bounds in the resize callback if you want them to meet the padding boundaries. 

This kind of design is much simpler if you put the buttons overlay in HTML/CSS instead, so if that's a possibility, try it.

EDIT: Solved it, thanks again!

this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
this.game.scale.setResizeCallback(this.onSizeChange, this);
 
onSizeChange():void {
var ratio = Math.min(window.innerWidth/Game.WIDTH,window.innerHeight/Game.HEIGHT);
this.game.scale.setGameSize(window.innerWidth/ratio,Game.HEIGHT);
this.game.scale.setUserScale(ratio,ratio,0,0);
this.camera.bounds.x = -Infinity;
this.camera.bounds.width = Infinity;
this.camera.x = -(window.innerWidth/ratio-Game.WIDTH)/2;
}

Original Post:

Thank you @samme, this is almost what I'm looking for. How can I add stretching, like having the game scale so that ratio of game is math.min(screen_height/logical_game_height,screen_width/logical_game_width) ? I tried setting the code below, but the game flickers :(

this.game.world.scale.x = this.game.world.scale.y = Math.min(this.game.width/Game.WIDTH,this.game.height/Game.HEIGHT);

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

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.