iOS: Scaling an iPad App to the iPhone (non retina)

[josholm]

Hi,

I now there have been some ways to do that, but I can't find/remember them.

I have a 1024x786 App running on the iPad and I want to make a 480x320 iPhone (standard) App from that.

What is the best way to scale it in a way that it has (almost) the same aspect ratio?

Regards,

Josh.

[Colin Holgate]

The way I solved the problem was to have a 480x320 stage that has content that is 360 tall, going from -20 Y onwards. The content was iPad resolution, but scaled to 46.875%. When it plays back you get exactly the 480x320 part of the content, and when on iPad it makes the 480 fill the 1024 width, and the extra content that you didn't see on the iPhone shows up, to fill the 768 height.

The reverse should be possible, hopefully the center 1024x683 pixels of the 1024x768 stage would show on the iPhone.

You may have read advice about setting the scalemode of the stage. Don't do that in this instance. The default behavior is what you want.

[josholm]

Thanks Colin,

however, I need to show everything on the iPad and the left and right of the iPhone so I have to adjust the scaling just there.

Regards,

Josh.

[Colin Holgate]

The two screens are a different aspect ratio, so for the same scene you have to either show less vertically, or more horizontally on the iPhone. In either case the iPad sees the middle 4:3 part of the whole scene. Which way will you do it?

[josholm]

I will show the complete width of the landscape app, so I will need to display it horizontally and crop it vertically on the iPhone.

Due to the fact that I also need to show the bottom, I will crop the upper part of it...

[Colin Holgate · Accepted solution]

Ok, that's slightly different than my situation. With things I've done I crop the top and bottom equally, and so I don't have to do anything, that happens automatically. You  might think about whether or not you could do the same.

If you can't, perhaps the easiest solution would be to put all of your content into a stage level movieclip, laid out as 4:3 content. That will get scaled to the size for each device, and then you would set the Y position of the container to this:

var sw:Number = stage.stageWidth;

var sh:Number = stage.stageHeight;

containerMC.y = sh-sw*.75;

[josholm]

Thanks, I will try to do it that way and give you feedback if that worked well.

Regards,

Josh.