Scale for mobile phone... best practice?

Hey everyone,

I've been playing around with my Android phone for two days to see how things work. Right now i have my game set as Fullscreen in browser: Scale outer which seems to works. The noticeable problem is that the graphics, which look okay on my desktop, are way to small on my Android and this is where my question comes in.

I see two ways to go about this:

1. Either i scale the whole layout to which ever size looks good, let's say 2.0 (twice as large). This however makes most of the layout disappear due to the limited window size so the graphics scale out of screen if you will.

2. I scale every individual graphical element but then they have a much smaller layout to work on since the window size is the same but the objects are twice as big. I can imagine that this approach could make it hard to plan your game levels and stuff like that since they look much smaller on my desktop?

So anyway, I was hoping on some input about best practices when it comes to mobile phones. I guess i want the game to look and act the same on both devices since they use the same aspect ratio, but only with larger graphics on the Android. Or is it so simple that you need to create two versions every time, one for desktop and one for mobile?

Thanks!

roughly the same discussion in this thread:

http://www.scirra.com/forum/adjust-to-android-device-size_topic72015_post437381.html?KW=#437381

Ok thanks

As a rough guide I did this:

1) set the canvas to be 640x832 (iphone 4 4s size with address bar gone)

2) anchor the outer ui ellements to the edge. Note, there are plenty of bugs with anchor, especially if you want to center or use a different origin point, so I ended up doing my own anchoring by re positioning all the UI elements each time a window size change is detected (or you can do it every tick if you want).

3) I calculate if the main center game area will fit. If its too big or too small, then I just scale that one layer.

4) I use Crop, with a large backgroud image.

5) I always switch off webGL, as it screws up text and other items.

6) set the the "use ios retina display" to iphone only, as the default app res looks good in an ipad without it and no scaling needed.

Its pretty hairy.

Thanks for this information, its help me.

As a rough guide I did this:

1) set the canvas to be 640x832 (iphone 4 4s size with address bar gone)

2) anchor the outer ui ellements to the edge. Note, there are plenty of bugs with anchor, especially if you want to center or use a different origin point, so I ended up doing my own anchoring by re positioning all the UI elements each time a window size change is detected (or you can do it every tick if you want).

3) I calculate if the main center game area will fit. If its too big or too small, then I just scale that one layer.

4) I use Crop, with a large backgroud image.

5) I always switch off webGL, as it screws up text and other items.

6) set the the "use ios retina display" to iphone only, as the default app res looks good in an ipad without it and no scaling needed.

Its pretty hairy.

Make platform specific games... so worry about scaling at the end (although bear it in mind)

Make the game for the Ipad 3 (biggest one around).. use scale outer.. umm what else........

Make collision boxes bigger..

Trial and error.

Ok thanks ppl ^^