Best method for handling multiple resolutions

Solar2D General Questions/Discussion
#1

I have a pretty basic question. What are some of the techniques to handle multiple resolutions, and is there a consensus on which is the best method?

I built my current game for Android, Kindle Fire, and iOS all using a resolution of 320x480 and used letterbox scaling to make it fit all screens. It then uses @2x graphics to support the Kindle, iPad, and other high res devices. So far this method has worked pretty well for me, and I can build for any device without changing resolution settings. Is this a pretty standard way others are building for multiple devices?

Thanks! [import]uid: 84258 topic_id: 20333 reply_id: 320333[/import]

#2

Don`t you get “black borders” with this config? (eg. on iPad)
Cheers,
Rodrigo. [import]uid: 89165 topic_id: 20333 reply_id: 79454[/import]

#3

I use a slightly oversized background image to prevent this. Works pretty well. [import]uid: 84258 topic_id: 20333 reply_id: 79458[/import]

#4

@kbradford, thanks for the reply. I`ve done the same to handle this issue as well.

Cheers,
Rodrigo. [import]uid: 89165 topic_id: 20333 reply_id: 79461[/import]

#5

Thats definetely one way of dealing with the black border issue!

Recently (mainly due to the size of an ipad screen) ive started doing it abit differently so i can take full advantage of the larger screen size, instead of just upscaling the current iphone version.

For example…

local device = system.getInfo( "model" );  
if device == "iPad" then director:changeScene("titlepageiPad","fade")  
else director:changeScene("titlepage","fade") end

As you can see above, i check to see if the current device is an ipad, if it is it loads a completely different title page, with more features etc.

This wouldn’t really work for Android devices though because they have a whole host of different screen resolutions, but for just iOS, it works great! [import]uid: 69826 topic_id: 20333 reply_id: 79466[/import]

#6

In the past, I did the same as you. Set screen size to be 320x480 and used @2x graphics for tablets.

In my latest project, I set the screen size to 768x1024 (iPad size) and then used scale = “zoomStretch”. So, on the iPad no scaling is needed because everything is sized and spaced for that screen size. On other devices, the software scales things down to fit the screen. I’m happy with the results, but I can’t say that this would be a good approach for all projects.

[import]uid: 67839 topic_id: 20333 reply_id: 79523[/import]

#7

Hey guys, thanks for the insight about “how to get nice backgrounds cross-platforms”. :slight_smile:

Both ways looks like nice and if it solves our problem that`s good btw.

PS: elbowroomapps ,for using your setup you do use your images sized at 768x1024 (all of them) and so just scale those down to get all devices, is it? And if so, you get rid then of the @2 images?

Thanks.

Cheers,
Rodrigo. [import]uid: 89165 topic_id: 20333 reply_id: 79558[/import]

#8

@RSCdev,

All my background images are 768x1024. For everything else, I created them just like I would the @2 images, but I didn’t create any @1 images.

I’m using the latest CoronaSDK daily builds, so for iOS the app does not need to work on anything older than an iPhone 3GS.

Also, I’m not doing anything with retina text, but the text is really a minor part of the app.

I kind of stumbled into this approach. I wanted to create 2 version of this app, a regular version and a HD version for iPad. I created the HD version first. For testing, I only have an iPad2 but I wanted to make sure it worked on iPad1. I think the iPad1 is closer to the iPhone3GS in processor power and memory. So, I built my app as a universal app just to see if it would work on the 3GS. It worked OK and looked OK, so now I have my 2 versions of the app with only a few minor code changes.

I’m also working on a version with ads. This was a little problem because the ad sizes are not impacted by any scaling I do, and the iPad and iPhone ads don’t take up the same proportion of space. [import]uid: 67839 topic_id: 20333 reply_id: 79585[/import]

#9

@elbowroomapps, I appreciate your insight mate, really!

Principally because this subject is so “boring” to be getting into and so I want one way that it works for almost " every device out there if possible. So Ill try to set this as you are doing and see if I can like this also use less assets as well (its good).
PS: After all I assume you do not use the API display.newImageRect() instead, with this setup just use the old one display.newImage and be happy, that`s right? :wink:
Cheers,
Rodrigo. [import]uid: 89165 topic_id: 20333 reply_id: 79595[/import]

#10

I use both display.newImageRect() and display.newImage().

I have a few cases where I use the same image but I want it to be different sizes. I create the image at the largest size I need. I then use display.newImageRect() to create the various sizes I need. So, I set an image to be 200x200 on the iPad, the software then downsizes it for the iPhone.

I should also add that I’m using vector graphics and not pixel graphics. That might make a big difference in how the graphics look when you allow the software to downsize it like this. [import]uid: 67839 topic_id: 20333 reply_id: 79617[/import]

#11

@elbowroomapps Great! I got it now! So you use both API`s just to be able to “play” with the sizes you want for ONE image (your asset 768x1024px), as the API display.newImageRect() must have the X,Y values setup and so you can “play” with these values getting any size you want, right?

Sorry, I think this one is the last one. :\

PS: I should also add that I’m using vector graphics and not pixel graphics. That might make a big difference in how the graphics look when you allow the software to downsize it like this.

Wow, for sure it does make a huge visual difference as well. Thanks for mentioning.
Hey, glad about the explanation.

Cheers,
Rodrigo. [import]uid: 89165 topic_id: 20333 reply_id: 79638[/import]