spider

Scaling Games for Mobile Devices

Recommended Posts

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.

 

 

post-5162-0-36940700-1387375126.jpg

post-5162-0-93855300-1387375128.jpg

post-5162-0-15968000-1387375131.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.