Help with background sizes/config settings with tablet only app

Getting Started Newbie Questions
#1

Sorry if similar questions have already been posed but I promised i’ve searched the web and this forum for answers extensively and am quite confused by the multitude of answers.

I’m currently developing an iPad and Android only tablet app.  The designer created backgrounds and other assets for 768x1024 and 1536x2048 resolution.  This looks great on iPad but i have big black bars on the sides for Android.  If i zoomStretch, the app fits but gets noticeably skewed. What is the best way to configure this to look good on both tablets? Do i need to generate or resize images for it to work better on android?  Ideal config settings?

Thanks

#2

Hi @smeyer,

Probably the best scale setting for your needs is “zoomEven”. This will force the content area to span to the edge of the screen in all cases, with some content “bleeding off” on some devices. So you’ll lose a bit of visual content on some tablets, but at least you won’t have the black bars caused by the “letterbox” scale mode.

Hope this helps,

Brent

#3

Thanks for your reply Brent.  I’m playing around with zoomEven and learning a few things in the process but had a few additional questions. 

Like you mentioned there is some bleed off in android which is chopping off things like logo and some buttons.  So is this basically a trade off where i have the cutoff (vs black bars) and would need to adjust my UI to fit within the narrower android screen, which also results in some visible bleed space on iPads?  Or are there any tricks such as scaling/positioning to utilize the full iPad screen and make it fit Android as well?

#4

We use the system described here.

In your case, you can follow it to easily position UI relatively to one or two sides, so that it doesn’t bleed.

You can stretch the background as well, using totalWidth and totalHeight as width and height parameters of it. That really depends on you though, as in some cases, it might not look too good to stretch it. 
If that’s the case, then use a size big enough that it definitely covers all screens, but bleeds on smaller ones (:

#5

+1 for @RagdogStudios method. It is the same that we use.

#6

@RagdogStudios, help me wrap my head around this… 

So if this is a Tablet only app can/should i adjust the config base width/height?  All my asset demensions and files are set for 1024x768 so if i use the mobile size ill have to go through all the code and resize every element to prevent it from looking huge.  I can do that just wondered if there is an easier way. 

Also what are the default background sizes you use for this configuration?  I understand they might need to be stretched in some devices to prevent bars but just wanted to make sure I understand correctly.

Thanks

#7

@smeyer2, if it’s a tablet only app, 1024x768 can be a good starting point.

In that case, in your config.lua file, instead of 480x320 like we use, set it at 1024x768.
All the code that’s in our blog post adapts to any parameter you set to width and height. 

As we usually go with 480x320, 512x512 tends to adapt to any kind of display using “letterbox” for the scale.

1024x768 is already pretty big and it should adapt to any tablet. Keep in mind that in terms of resources, 1024x1024 or 1024x768 makes no difference (apart from file size which might be a bit bigger).

If you want to make it “dynamic”, meaning that if there’s room, it stretches, if not, it stays of the correct size, you can use math.max.

local bg = display.newImageRect(group, "background.png", math.max(totalWidth, 1024), math.max(totalHeight, 768));
#8

@RagdogStudios Thanks so much for the help!  I think im finally get it.

I changed my config to 1024x768 and am using the variables in your method.  This allows me to stretch backgrounds for android using the totalWidth value, plus i can absolutely position certain elements that is makes sense for like logo, etc.

I’ve also created a variable of my own:

local stretchRatio = (totalWidth/1024)

Some of my button positions rely on background elements and I’m using this ratio to dynamically position or scale them.  Seems to be working very well too.

#9

Hi @smeyer,

Probably the best scale setting for your needs is “zoomEven”. This will force the content area to span to the edge of the screen in all cases, with some content “bleeding off” on some devices. So you’ll lose a bit of visual content on some tablets, but at least you won’t have the black bars caused by the “letterbox” scale mode.

Hope this helps,

Brent

#10

Thanks for your reply Brent.  I’m playing around with zoomEven and learning a few things in the process but had a few additional questions. 

Like you mentioned there is some bleed off in android which is chopping off things like logo and some buttons.  So is this basically a trade off where i have the cutoff (vs black bars) and would need to adjust my UI to fit within the narrower android screen, which also results in some visible bleed space on iPads?  Or are there any tricks such as scaling/positioning to utilize the full iPad screen and make it fit Android as well?

#11

We use the system described here.

In your case, you can follow it to easily position UI relatively to one or two sides, so that it doesn’t bleed.

You can stretch the background as well, using totalWidth and totalHeight as width and height parameters of it. That really depends on you though, as in some cases, it might not look too good to stretch it. 
If that’s the case, then use a size big enough that it definitely covers all screens, but bleeds on smaller ones (:

#12

+1 for @RagdogStudios method. It is the same that we use.

#13

@RagdogStudios, help me wrap my head around this… 

So if this is a Tablet only app can/should i adjust the config base width/height?  All my asset demensions and files are set for 1024x768 so if i use the mobile size ill have to go through all the code and resize every element to prevent it from looking huge.  I can do that just wondered if there is an easier way. 

Also what are the default background sizes you use for this configuration?  I understand they might need to be stretched in some devices to prevent bars but just wanted to make sure I understand correctly.

Thanks

#14

@smeyer2, if it’s a tablet only app, 1024x768 can be a good starting point.

In that case, in your config.lua file, instead of 480x320 like we use, set it at 1024x768.
All the code that’s in our blog post adapts to any parameter you set to width and height. 

As we usually go with 480x320, 512x512 tends to adapt to any kind of display using “letterbox” for the scale.

1024x768 is already pretty big and it should adapt to any tablet. Keep in mind that in terms of resources, 1024x1024 or 1024x768 makes no difference (apart from file size which might be a bit bigger).

If you want to make it “dynamic”, meaning that if there’s room, it stretches, if not, it stays of the correct size, you can use math.max.

local bg = display.newImageRect(group, "background.png", math.max(totalWidth, 1024), math.max(totalHeight, 768));
#15

@RagdogStudios Thanks so much for the help!  I think im finally get it.

I changed my config to 1024x768 and am using the variables in your method.  This allows me to stretch backgrounds for android using the totalWidth value, plus i can absolutely position certain elements that is makes sense for like logo, etc.

I’ve also created a variable of my own:

local stretchRatio = (totalWidth/1024)

Some of my button positions rely on background elements and I’m using this ratio to dynamically position or scale them.  Seems to be working very well too.