A thought on mobile image resolutions

Discussion and feedback on Construct 2

Post » Wed Apr 11, 2012 2:56 pm

With 2D games sometimes deploying to multiple devices can be time consuming. It actually harder to deploy 2D games to multiple devices rather than 3D.

I have been thinking about this problem and I think I have a good solution. So let me outline the problem.

Let's say you want to make a game for iPhone and iPad. Right there there are 4 different screen resolutions

iPhone regular
iPhone retina
iPad regular
iPad retina

If you want a screen background you have to make the retina first then scale it down to the regular. The way game salad achieves this is that they take your image and re size it for you. I think this is a great approach. I recommend having an feature where you can click a re size to all iOS devices button that will do this for you. This way you can upload one image for any image with the bigger resolution and it will re size. The re size will be easy because it is exactly half from the retina to the regular.

This doesn't tackle the problem of androids. iOS developers complain about the screen resolutions but android has way more devices. Im not that familiar with developing for android so Im not sure what the best course of action is. I feel that screen size/resolution could be an issue. I also think that the scaling in android images are not that equal (1/2, 1/3 etc) so having the engine scale it for you would be a mistake because there will be too many unknowns to assure quality. My suggestion is that you could possibly have an section where you drag each resolution of each image that you made outside of C2 into C2 and depending on which device the game is played on it will use the respected image.

Anyway, just a thought.
B
69
S
11
G
6
Posts: 324
Reputation: 8,321

Post » Wed Apr 11, 2012 6:11 pm

It's an interesting idea, but I always thought it was best solved by simply designing for the biggest (iPad retina) and using the 'fullscreen scale' option to it scales down for all the smaller displays. Then you also have a single universal app that should work on any iOS or Android device regardless of screen size.

It does use more memory for the images, but on the other hand games which scale up sprites or zoom in will improve quality on the lower-resolution screens, which is a nice touch. It also is a true one-size-fits-all solution rather than having a myriad different options for each possible screen size out there.
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,580

Post » Thu Apr 12, 2012 8:57 am

@Ashley
[QUOTE=Ashley] It's an interesting idea, but I always thought it was best solved by simply designing for the biggest (iPad retina) and using the 'fullscreen scale' option to it scales down for all the smaller displays. [/QUOTE]

Are you talking about 2048 * 1536? Will it not be a performance hit for weaker devices apart from the memory allocation? What if we also need to export it for chrome or facebook? Wronghands2012-04-12 08:58:12
B
47
S
3
G
5
Posts: 56
Reputation: 4,630

Post » Thu Apr 12, 2012 3:21 pm

@Wronghands - GPUs are so extremely efficiently designed for simple 2D drawing that I don't think you'll actually see much or even any runtime performance hit from using bigger textures. If you read our old blog post HTML5 gaming performance analysis, you'll note at least on desktop it takes longer to request the GPU to draw an image than it takes for the GPU to actually draw it, which means you can do a lot of scaling and rotating with zero performance impact. So memory usage/download size is the only issue.

As for Chrome and Facebook, since desktop displays go up to 1920x1080 which is only a little less than the iPad 3, it should be ideal for that as well.
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,580

Post » Fri Apr 13, 2012 11:36 pm

Thanks for the clarification Ashley.
B
47
S
3
G
5
Posts: 56
Reputation: 4,630

Post » Wed Jul 18, 2012 3:53 pm

What if I'd need to develop for iPad3 and at the same time I need it to run for an old iPhone ( 480 x 320 )? So, considering this, how about the performance if I'd design everything for 2048 x 1536 but loading the graphic resources at runtime ( I believe that's possible using plugins ) according to the detected device ( BTW: is there a plugin to do that? ). If, for example, the iPhone is detected ( 480x320 ) and I load the resources prepared for it, then I stretch them programmatically but will also have the project set to scale mode so they'll be scaled down back to the iPhone screen resolution. Would that still affect the memory usage of the iPhone as it would when using large graphics ( prepared for iPad3 )?
B
16
S
4
G
3
Posts: 46
Reputation: 2,875

Post » Wed Jul 18, 2012 10:21 pm

i am in the middle of such a dilemma right now.

i have an ipad app, that i want to convert to iphone. i can't come to a reasonable solution to "stretch" the various 1024x768 ipad graphics elements into 960x640 iphone and still make them look right.

i would like to avoid having to redo all the artwork, and have to reimport 250+ elements and change screen XY positions etc....
B
41
S
11
G
4
Posts: 428
Reputation: 7,356

Post » Thu Jul 19, 2012 12:21 am

@xyboox, @bjadams - have you tried using the fullscreen scale option I mentioned earlier in the thread? It should just downscale everything automatically. There shouldn't be any serious performance impact as long as it's hardware accelerated (as in, not PhoneGap).
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,580

Post » Thu Jul 19, 2012 12:49 pm

@bjadams @xyboox I used to have similar problem but with Chrome Webstore and future Android publishment.

I'm really sure that actually the best option is to use the Fulscreen Scale mode with additions:

1. Take care about aspect ratios, that can be from 1.33 to 1,5+. You can not avoid to make the background images wider for the 1,5 ratio, and do it in a way it works (not kills the layout).

2. Use Archor behavior - to let some objects float to the left or to the right.

3. Somewhere in your menu/game screen you will need to have a streching area, what is 0% if played in 1.33 ratio and could be up to 13% of the screen width in 1.5 ratio.

My very first game - not an Angry Birds :) - uses this logic:
https://chrome.google.com/webstore/detail/eppldkeacbgnkjkabpnikmlnokknlcbc

This not just works on Chrome Webstore, but i have great results in 320x240px, 480x320px and 800x480px screens in Android (not published yet).

If you install it to Chrome, you can adjust the browser window with/height, and it will work from 1.33 to about 1.6 aspect ratio.
B
19
S
5
G
4
Posts: 109
Reputation: 4,195

Post » Thu Jul 19, 2012 5:22 pm

@Ashley - of course I've tried the fullscreen ( which is a cool option, BTW ), but the problem, as nicely above, is the aspect ratio.

B
16
S
4
G
3
Posts: 46
Reputation: 2,875

Next

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 9 guests