How to provide graphics for multiple resolutions?

Hello,

I wonder how should I provide Construct 2 with graphics when working with Retina displays?

I'm building an iOS App and I'd like to know what is the workflow to have high-res graphics for retina displays and low-res versions to normal displays?

I'm used with other frameworks in which we have 3 base files with naming suffix that specifies which resolution is the image in, then the framework just load the appropriate image (that avoids using a huge image for lower resolution devices, saving a lot of memory. It doesn't scale images either, because it uses the appropriate image in the exact resolution):

sprites.png

spritesijt@2x.png (iPhone 4+)

spritesijt@4x.png (iPad 3+)

The documentation isn't clear about this: scirra.com/manual/66/projects

It just states how to turn support for Retina on/off, not how graphics should be provided.

Thank you.

Creating sprites for the largest resolution is generally the way to go.

I asked the same question when I started with C2

VRAM usage can be a concern, but on most mobile devices I've found CPU to be more of an issue.

Thank you, thehen.

I'm a heavy Corona SDK and Unity developer and I'm really used to switching graphics according to resolution.

Using the highest resolution image for all devices seems overkill. What about a crowded game running on an iPhone 3? I can't image an iPhone 3 game with a 2048x1536 background scaled down at runtime. Or even worst, a low cost Android phone? With individual images, I can easily export a 480x320 for these devices and they won't use a huge 2048px image. <img src="smileys/smiley5.gif" border="0" align="middle" />

I'm trying to find out about the same exact issue :(

Anyone have any tips on how to handle 2x/4x graphics through Construct?

Ninjadoodle

you can't

just use higher resolution assets

fortunetly more and more devices have higher resolution

Ok, thank you for your quick answer :)

Looks like I'll have to go with one of the other tools, as there is still a lot of older/underpowered devices out there and I'd like to get the widest reach possible.

Thanks again!

Ashley

Is it possible to create an export option that automatically reduces images sizes and positions, etc to cater for lower resolution export?

E.g. 960x640 > 480x320 or 2048x1536 > 1024x768

Most of the time we start creating games with retina display sizes but end up with memory issues. This feature could safe us a lot of time manually reducing sizes and adjusting positions.

Thanks.

The handful of devices in our office have pixel ratios of 1.0, 1.3, 1.5, 2.0, 2.24, and 3. Any pixel ratio value is possible, and on Android you get a really wide selection. In light of this I don't think it makes any sense at all to try and target one particular pixel ratio.

Hi Ashley

(I pasted this from the other topic I posted in - scirra.com/forum/topic83270.html)

That's actually the standard way of dealing with different ratios and pixel densities. Don't get me wrong, I absolutely love construct, but I really think this is a very important missing feature.

Most of the top SDK's handle loading assets this way - Corona/Gideros/Stencyl, even Gamesalad as a resolution independence feature that allows you to load HD assets.

You wouldn't necessarily worry about creating 1.2, 1.5, 1.7x assets etc, but you should definitely worry about loading low res graphics on low powered/lo-res devices and loading hi-res assets on high powered/hi-res devices.

So, having at least 2 sets of assets - one SD and one HD would definitely be the way to go.

Trying to run a game designed for 1920x1080 on a 480x320 Android device might not be optimal as far as speed goes and neither would the opposite, as the graphics would look very blurry/pixelated.

The other bonus is that if you decide to update your apps in the future ( as resolutions get higher ) you can just upload higher resolution graphics with a (for example) — suffix and the engine will take care of the rest ( only use those graphics if the device is a very high definition TV or tablet ).

If you design your graphics as vectors, then exporting different sets of assets is no issue at all :)

I really think that this would a really good feature for Construct 2 to add as it is currently the best/only way to make sure you graphics look good across a range of devices (short of using vector graphics).

I have to agree here. You design your game for one resolution but then create 2-3 different resolutions for your sprite sheets and then based on screen density decide which to use. As for backgrounds depends if you want to have letterbox or not, in which case you overscan your design to not have anything cropped too much.

Do you have benchmarks to back that up? As thehen said, we generally find low-power devices are CPU-bound, not GPU-bound. GPUs are very well optimised for things like downscaling, and with mipmaps they do it with very good quality. We also support memory management to avoid running out of memory, so even devices with 512MB of RAM can get by with a well-designed game. Unless you want a huge game to run on a low-powered Android handset (which the CPU probably couldn't handle anyway), then it seems like drawing multiple sets of artwork is just a waste of time and unnecessary bloat to the size of the game.

Hi Ashley

I don't have any benchmarks, as I'm still learning the process and mainly going by research and other peoples feedback/experiences, with loading high res. images on low spec devices.

I'm happy to give your way a go, but I would like to ask a couple of questions ?

• If I want to make sure my game plays well on HD screens (1920x1080/1920x1280) would the best approach be to ?

1. Make a game at lets say (1920x1280) and scale it down for older devices?

2. Make the game window 4x smaller e.g. 480x320 and import all the sprite graphics at 4x the size and scale them to 25%, then scale the whole window up to the desired resolution.

Will HD graphics at this size still be optimal for lower spec devices?

Do you have any other tips regarding this?

I am all good with scaling(letterbox etc.), but I need as much info dealing with this as possible.

If anyone has any experiences or tips, I would really appreciate them.

Thank you!

Both your options result in identical rendering work. It is probably easier to go for option 1.

Exported to a mobile device, having multiple sets of graphics in your build .... will play havoc on your performance.

Everything from your project gets loaded into memory.

With a small game this shouldnt be that hard.

But with a large game .. where you probably designed the high resolution graphics for, having all those extra images will bloat your program really fast.

Well, for sure there should be a system to load only the desired assets into memory, that's at least what happens normally