Once again: Dynamic content scaling of images

Solar2D General Questions/Discussion
#1

Hi, after reading tons of tutorials, blog pages, forum threads and the API reference and playing around with different image sizes and settings during the last hours I am still confused about this topic.

I’d like to prepare my apps for every possible hardware platform using iOS and Android OS.

But so far I was not able to setup a background image for every platform without any black bars at the top/bottom or left/right of the device screens. It works great with iPhone 3 to iPhone 4 scaling. As soon as the aspect ratio differs from 320 to 480 (as on iPhone 3) the image will not match exactly.

Do I need different images for the different aspect ratios? And do I need different config.lua settings for the base content width and height to get the same coordinates for objects at the different screen sizes?

Thank you! %-)

Jens [import]uid: 96902 topic_id: 19566 reply_id: 319566[/import]

#2

Hey there,

Take a look at the Ghosts VS Monsters sample code.

Avoiding black bars is very tricky, one suggestion is to make a slightly over-sized background, which I’ve heard OK feedback on.

When using letterbox things can get a bit off due to the different width/height ratios but a larger background, I believe, should help navigate this.

Peach :slight_smile: [import]uid: 52491 topic_id: 19566 reply_id: 75565[/import]

#3

Make sure you understand the “magic recipe”:

http://blog.anscamobile.com/2011/01/dynamic-image-resolution-made-easy/ [import]uid: 71767 topic_id: 19566 reply_id: 75623[/import]

#4

@Peach: Thanks for the hint to the Ghosts vs Monsters sample code. Just reading the code to get the idea what they have done.

I loaded this app into the simulator and after switching the device to iPad or one of the Android devices I got the same black bars as with my own code. If you move the scene to the right or left end of the screen you could see the clouds come in on the right side black bar and leaving the scene on the left handed black bar.

@dejay.clayton: Thanks for this link. I already have read this tutorial together with several other tuts, blog entries and suggestions from the forums.
I tried a lot of the hints and I never got a result suiting my needs.

I will try this “magic recipe” thing again, doing it step by step. Maybe I missed a step or did something the wrong way.

At least I could build the code for each device group (for each aspect ratio) with seperate configs/graphics but I try to avoid this way for obvius reasons.

Merry X-mas! :slight_smile: [import]uid: 96902 topic_id: 19566 reply_id: 75633[/import]

#5

Hi, I tried that “Magic Recipe” and it works for getting the higher resolution images on devices with other aspect ratios then 480x320. Nice! :slight_smile:

But, as suspected, it don’t helps with the black bars issue.

I will focus on iPhones first and enhance the app for iPad and Android devices later step by step. [import]uid: 96902 topic_id: 19566 reply_id: 75763[/import]

#6

I had a post about this a while ago which might help.
https://developer.anscamobile.com/forum/2011/11/16/howto-backgrounds-no-black-borders-appleandroid-devices [import]uid: 70847 topic_id: 19566 reply_id: 75764[/import]

#7

Awesome, +1 for sample code. [import]uid: 71767 topic_id: 19566 reply_id: 75770[/import]

#8

Hi Ingemar,

thank you for your answer.
Unfortunately I could not try your HowTo so far. And I am not able to try it for the next 3-4 weeks due to limited or no access to my computer.

As soon as I am back I will try it and let you know if this was the solution for my issue.

Thanks and kind regards,
Jens [import]uid: 96902 topic_id: 19566 reply_id: 79408[/import]