Has anyone ever managed to get an app to run in full screen on Android and iPhone?

Solar2D General Questions/Discussion
#1

I’m struggling to get my application layout correct with both Android and iPhone.

I use…

application =
{
content =
{
width = 320,
height = 480,
scale = “letterbox”,
fps = 60,
xAlign = “center”,
yAlign = “bottom”
},
}

I have to use lettebox else the balls in my game look squished. Do people use different config.lua for each platform?

For example on iPhone if I place text at y=0 it’s at the top of the screen, the same code with Android at the text is someway down the screen.

HELP! [import]uid: 9371 topic_id: 3800 reply_id: 303800[/import]

#2

For example I use the config above but on a HTC Wildfire which is 240 x 320 I have a “gaps” down either side.

On a HTC Desire which is 480 * 800 I have a “gap” at the top.

So short of building for each device what techniques can be used to ensure that a game will be full screen with the correct aspect ratio on every device?

I wonder should I not specify the resolution in the config, use really large background images that will always fill the screen, i.e. say 1024 * 1024. Then in the game query the height and width of the display area and position accordingly? If this is the way then in a portait game I should set the yalign to the bottom and display the scores etc at the ‘top’ according to the displays height.

Any help would be appreciated. [import]uid: 9371 topic_id: 3800 reply_id: 12929[/import]

#3

I use Letterbox since it’s the only one that doesn’t distort or crop edges. It’s up to you to design within the overflow. I’ve found the optimal resolution to work at is 1138 by 768, with the playable area being withing 960x640.

You could also try ZoomEven/ZoomScale (can’t recall off the top of my head). [import]uid: 11024 topic_id: 3800 reply_id: 12949[/import]

#4

I’m still having COMPLETE nightmares trying to ensure that the layout of my game looks correct.

Bearing in mind I have no idea what the target devices resolution is…

Is it best practice to NOT specify the width and height in the config.lua and have LARGE images (that could be off screen) and use the display.contentWidth and Height to make sure images are placed in the correct place?

Seems like a waste of resources to have a say 1200 * 800 image for the background in case its a large pad that its being run on whereas on a lower spec phone the screen size might be just 320*240.

Do people build JUST for a specific device? [import]uid: 9371 topic_id: 3800 reply_id: 13316[/import]

#5

ARGGGH! Using a 1138 * 768 image for the background looks fine on iPhone, iPhone4 but there are now gaps at the top and bottom on the Droid!

HOW THE HELL DOES ANYONE GET MULTIPLE RESOLUTIONS TO WORK!!!?!?!?! [import]uid: 9371 topic_id: 3800 reply_id: 13317[/import]

#6

For my first release it was too late to really change the design so I just used letter boxing and then put actual black boxes in a top layer surrounding the viewable area to clip overflow. Someone else here mentioned doing that too. It looks awkward though when there’s an abrupt void of black space on the edge of an iPad or Android device, so I choose to be mindful of that in the future. Basically I target iPhone 4 so the device scales to 960x640 (specified in config file), but the overflow takes care of the space on the other devices when set to Letterbox.

I tried removing the config-specified display sizes and detecting screen dimensions but I ended up getting pixelated graphics and it was a hassle having to make sure every object scaled the right way (if at all) so it really depends on how much work you want to do.

I don’t think there’s a preferable way to do anything, part of nature is trial and error. [import]uid: 11024 topic_id: 3800 reply_id: 13318[/import]

#7

–“ARGGGH! Using a 1138 * 768 image for the background looks fine on iPhone, iPhone4 but there are now gaps at the top and bottom on the Droid!”

I was working horizontally. Also make sure you’re configured to use the playable area resolution, not the overflow. 960x640 with your image being 1138x768. [import]uid: 11024 topic_id: 3800 reply_id: 13319[/import]

#8

So in effect I need a build for each different resolution device. That sucks BUG TIME! [import]uid: 9371 topic_id: 3800 reply_id: 13320[/import]

#9

Even if I just focus on Android there are a whole bunch of different resolutions. The simulator just has a fixed resolution for Android which is crazy, would be far better for it to allow custom resolutions so we can REALLY see what it would look like!

There MUST be a better way. [import]uid: 9371 topic_id: 3800 reply_id: 13321[/import]

#10

Not too sure what you mean by the playable area, you mean the viewable area I suppose. The only way to know what it is is NOT to use the config.lua and use the contentHeight/Width. Then place objects based upon that BUT I cannot see to get a full screen background for ALL resoltuions. [import]uid: 9371 topic_id: 3800 reply_id: 13322[/import]

#11

I was suggesting the overflow method because it’s easiest.

When working with different resolutions, if you want to minimize the amount of work you have to do to make the game work, the overflow area that shows on devices of varying resolution may or may not be able to be interacted with depending on your code. I just suggested working with the smallest proportion (iPhone’s proportions) and then allowing overflow on the top and bottom with your background image.

That’s just the minimal approach to compensating for the screen size differences.

If you went further and detected the screen size and had code that works with that, then you won’t have any problem at all. All it means is that you would have to put more work into it and not work in absolute sizes. You don’t need a different build for each size. You won’t be able to do that anyways unless you want 5 different products on the android marketplace confusing your users. [import]uid: 11024 topic_id: 3800 reply_id: 13323[/import]

#12

I think the correct approach is not to use the config.lua and to detect the screen size and adjust accordingly. That works so far for placing of objects but not for the background image. I don’t quite understand why such a large image still doesn’t fill the screen. [import]uid: 9371 topic_id: 3800 reply_id: 13325[/import]

#13

Did you add true in the parameter to turn off autoscaling? [import]uid: 11024 topic_id: 3800 reply_id: 13326[/import]

#14

AHA! Now we are getting somewhere! THANKS!

[edit]

Not so fast. On the iPhone 3 and myTouch the image is now too big and it needs to be scaled down. So how to scale and not scale? [import]uid: 9371 topic_id: 3800 reply_id: 13327[/import]