Scaling Games for Mobile Devices

[spider]

I'm creating a game targeted at multiple mobile devices including ios, android and RIM blackberry. All these devices have multiple screen resolutions and varying aspect ratio's.

 

My game is a side scroller, similar to Run-Pixie-Run.

 

I quite like the idea of scaling the tiles / sprites up to match the vertical resolution of the screen, and then just exposing more or less of the right-hand-side depending on the horizontal resolution, as is done in Run-Pixie-Run.

 

What is the best strategy for this? Is there support in Phaser / Pixi to assist with this?

 

I attach 3 image examples of how Run-Pixie-Run scales.

 

 

[feiss]

I think your approach is good, scaling to device height and showing as much as you can in width. Adjust the GUI, and maybe you want to change speed factor a bit, depending on the screen ratio of the device (if the player sees less on the right, It will be more difficult for him, maybe you can slow down a bit the scroll to compensate)

 

As for Phaser help with this, I'm a Phaser noob, but maybe StageScaleMode can help you http://gametest.mobi/phaser/docs/Phaser.StageScaleMode.html

[vblue]

i'm interested in the scale method used also. It seems for me that when you initialize the game with width and height that's it . You can only scale that proportion, not modify it in any way.

[cuchi12]

I have a game similar to the jetpack joyride, in fact this is the first game I develop so I'm a noob here and I'm having the same scale issue, the game seems to work great on my ipad but when I test it on my iphone it looks weird, the player is so big, the floor image disappears, is there a way to detect the device where it is running and how to scale the sprites as a proportion of that scale? 

[Igor Georgiev]

Just found this old topic, I am in need of the same thing.....  

[VitaZheltyakov]

I am use some code:

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

canvas_width = window.innerWidth * window.devicePixelRatio;
canvas_height = window.innerHeight * window.devicePixelRatio;
aspect_ratio = canvas_width / canvas_height;
if (aspect_ratio > 1) scale_ratio = canvas_height / canvas_height_max;
else scale_ratio = canvas_width / canvas_width_max;

this.ball = game.add.sprite((game.world.centerX), game.world.centerY, 'ball');
this.ball.scale.set(scale_ratio);

 

[mdhdev]

I did this recently for a game with an initial resolution of 1024 * 768.

Here is my code, it scales quite nicely for any device size:
 

app.game.scale.maxHeight = window.innerHeight; 	
app.game.scale.maxWidth = Math.floor( app.game.scale.maxHeight / 1.333 );
app.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
app.game.scale.pageAlignHorizontally = true;
app.game.scale.refresh();

This was for a game that should always be in portrait mode.

[Sanju]

On 24/3/2016 at 10:16 PM, mdhdev said:

I did this recently for a game with an initial resolution of 1024 * 768.

Here is my code, it scales quite nicely for any device size:
 

app.game.scale.maxHeight = window.innerHeight; 	
app.game.scale.maxWidth = Math.floor( app.game.scale.maxHeight / 1.333 );
app.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
app.game.scale.pageAlignHorizontally = true;
app.game.scale.refresh();

This was for a game that should always be in portrait mode.

Hi,

I'm trying to use this approach for my game, but I'm having problems scaling the game sprites. Should I change it's scale property or is it something else?

Thanks

[mdhdev]

Hi Sanju,

The sprites should scale automatically, they do with my game anyway. What problem are you having?

[Sanju]

2 hours ago, mdhdev said:

Hi Sanju,

The sprites should scale automatically, they do with my game anyway. What problem are you having?

I think I got it.

I was assigning a wrong aspect ratio in the "app.game.scale.maxWidth = Math.floor( app.game.scale.maxHeight / 1.333 );" line and this was making my sprites to stretch in an odd way.

Now it seems to work. Not tested on a real mobile device yet, but it looks promising.

Thanks!