SCALING PHASER GAME TO DIFFERENT MOBILE DEVICES

[craidencool]

Hey guys can you help me? How do you scale a phaser game through different android or ios devices. I tried the scale manage and used only the one game size which is 720x1024 and it has a part that is not included and I read that using the device aspect ratio could help this be done but I dont know how to implement this.. I am still new so hope you can have the time to help me thank you! 

[VitaZheltyakov]

var configuration = {
'canvas_width_max' : 2048,					
'canvas_width' : 1000,						
'canvas_height_max' : 2048,				
'canvas_height' : 650,						
'scale_ratio' : 1,							
'aspect_ratio' : 1,							
};

configuration.canvas_width = window.screen.availWidth * window.devicePixelRatio;
configuration.canvas_height = window.screen.availHeight * window.devicePixelRatio;
configuration.aspect_ratio = configuration.canvas_width / configuration.canvas_height;
if (configuration.aspect_ratio < 1) configuration.scale_ratio = configuration.canvas_height / configuration.canvas_height_max;
else configuration.scale_ratio = configuration.canvas_width / configuration.canvas_width_max;

game = new Phaser.Game(configuration.canvas_width, configuration.canvas_height, options.render, 'gamewindow');

this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.refresh();

sprite.scale.set(configuration.scale_ratio);

 

[craidencool]

13 hours ago, VitaZheltyakov said:

var configuration = {
'canvas_width_max' : 2048,					
'canvas_width' : 1000,						
'canvas_height_max' : 2048,				
'canvas_height' : 650,						
'scale_ratio' : 1,							
'aspect_ratio' : 1,							
};

configuration.canvas_width = window.screen.availWidth * window.devicePixelRatio;
configuration.canvas_height = window.screen.availHeight * window.devicePixelRatio;
configuration.aspect_ratio = configuration.canvas_width / configuration.canvas_height;
if (configuration.aspect_ratio < 1) configuration.scale_ratio = configuration.canvas_height / configuration.canvas_height_max;
else configuration.scale_ratio = configuration.canvas_width / configuration.canvas_width_max;

game = new Phaser.Game(configuration.canvas_width, configuration.canvas_height, options.render, 'gamewindow');

this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.refresh();

sprite.scale.set(configuration.scale_ratio);

 

Sir Im using tiled maps,  will this affect the output of your code? It is sort of running horizontally. thank you!

[craidencool]

ad sir will this work in portrait mode?

 

[VitaZheltyakov]

1 hour ago, craidencool said:

Sir Im using tiled maps,  will this affect the output of your code? It is sort of running horizontally. thank you!

This code works as well as for portrait and landscape modes.

[craidencool]

25 minutes ago, VitaZheltyakov said:

This code works as well as for portrait and landscape modes.

But will this work sir for tiled maps? because the tiled map has a fixed size and it does not scale together with the game size

 

[VitaZheltyakov]

8 hours ago, craidencool said:

But will this work sir for tiled maps? because the tiled map has a fixed size and it does not scale together with the game size

 

I don't know. I am not work with tiles

[caymanbruce]

On 6/25/2016 at 5:31 AM, VitaZheltyakov said:

var configuration = {
'canvas_width_max' : 2048,					
'canvas_width' : 1000,						
'canvas_height_max' : 2048,				
'canvas_height' : 650,						
'scale_ratio' : 1,							
'aspect_ratio' : 1,							
};

configuration.canvas_width = window.screen.availWidth * window.devicePixelRatio;
configuration.canvas_height = window.screen.availHeight * window.devicePixelRatio;
configuration.aspect_ratio = configuration.canvas_width / configuration.canvas_height;
if (configuration.aspect_ratio < 1) configuration.scale_ratio = configuration.canvas_height / configuration.canvas_height_max;
else configuration.scale_ratio = configuration.canvas_width / configuration.canvas_width_max;

game = new Phaser.Game(configuration.canvas_width, configuration.canvas_height, options.render, 'gamewindow');

this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.refresh();

sprite.scale.set(configuration.scale_ratio);

 

I work out the scale on my phones and Mac based on this. Thank you so much.