Phaser Scaling Question

[ozdy]

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

 

[fitness23]

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

[ozdy]

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.

[samme]

 

[ozdy]

I don't think I explained my question too well, I've updated the picture in my original post.

[samme]

https://codepen.io/samme/full/pWvMNm/

[ozdy]

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.

[m4rk2s]

I have actually a bad wifi connection i don't know if this pen could help 

i also need to understand the scaling problem for games i want to port to smartphones

[samme]

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.

[ozdy]

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);