Background Images for different resolutions

My primary development device is an iPad 1. Because (in case you wondered) I figure if performance is OK on that, it will be OK on anything :slight_smile:

Now, I use a background image in the game. For efficiency’s sake I split the image into two (let’s call them SKY.png and GROUND.png)

The images are,

Ground.png - 1024 x 256
Sky.png - 1024 x 512

I do it this way because I read somewhere (and tests proved it to be so) that having these dimensions was MUCH more efficient than having a single image at 1024 x 768

So, all good. It’s working fine.

But - what should I do to support larger screen sizes than 1024 x 768?

Do I create an image that is as wide as the different resolutions I support, and use the appropriate one?

if I do that, what is the ‘rule’ about efficiency of image size in cocos2d-x?

I remember reading about it but my google-fu is letting me down & I can’t find the information now!

There is very good tutorial for doing that : https://www.youtube.com/watch?v=tpdyfiTlcJg&list=PLZ1QII7yudbf2opgE-EM2ac_qDpVpjXFc

Thanks - but there seems to be several tutorials - 22 in all - some of which are 30 minutes long! Any chance you can at least point me to the right one?!

The 4 and 5 .

Ok - thanks.
I haven’t watched all the way through yet - but got the idea of what he is doing…

The problem I have with that is that he is scaling the sprites differently in the and Y dimensions, so for Flappy Bird it’s not a problem, as there’s nothing that will look out of place…

But say you had some circles in the background? Viewing the background on a different aspect ratio to that designed on would make them ovals not circles.

For me, i’m scaling the background in the X and Y dimensions, and yes , for some aspect ratio the circles sprites appears ovals, but as you know there’s always a price for the cross platform and multi resolutions :slight_smile: , but i’m satisfied, if you find better let me know please.

Take a look at this wiki on multiresolution support

The basic premise is that you define a few native resolutions you support and then fit all other resolution to those bins. For my projects I currently have the following resolutions:

  1. 529 x 320
  2. 1138 x 640
  3. 2276 x 1280
  4. 1366 x 768
  5. 2732 x 1536

My reasoning is as follows: all resolutions should be able to support up to a 16:9 aspect ratio. Resolutions 1, 2, and 3 are for phones and are based on 1x, 2x, 4x iPhone resolutions. Resolutions 4 and 5 are based on 1x and 2x iPad resolutions. Most of my app downloads are for iOS, which is why it’s important to me to make sure the graphics are tailored toward those resolutions. Android devices are too numerous, so they get fit into one of those bins. Since the graphics are 16:9, but iOS resolutions are not that wide, I make sure there is no important information in the regions that are cut off. I use the kResolutionNoBorder design resolution policy.

Well, what I’m trialling at the moment is something like:

provide graphics for a number of resolutions
say 1024x768 and 2048x1536 for simplicity.

decide which one to load depending on the screen size. Load the smallest one equal or larger to our screen size in any direction

e.g. a screen size of 1024 x 800 would load the larger graphics.

Calculate the ratio between the loaded graphic resolution and the screen size, in X and Y

Use the largest of these ratios to scale the sprite in both X and Y

Take a ‘ground’ graphic like the floor in a platform game.

the image is provided at 1024 x 150 and 2048 x 300

the screen size is 1024 x 800 compared to the design screen size of 1024 x 768

so I load the 2048 x 300 graphic. It’s 'resolution is 2048 x 1536

The y ratio is 1024 / 2048 = 0.5
The x ratio is 800 / 1536 = 0.52

so I scale my graphic by 0.52 (as it is the larger) giving me an image 1065 x 156

This means I will lost a little of the graphic on the edges, but the ratio will be the same, so no squishing

I haven’t actually tried this in anger yet - but it sounds like a good theory to me!

Are you doing all of this manually? Following the method in the link I provided sets up a lot of what you’re talking about automatically. Then you don’t even need to check which file you need to load, the correct one is chosen from the correct image directory.

For future reference, I was wrong in the above assumption - on the video (had I looked further I would have discovered) the sprites are scaled by the same value X and Y, so aren’t squished out of shape.

mea culpa

I had looked at the multi resolution support before - and honestly didn’t really follow what was going on. Then I noticed it said cocos2d-x 2.0x so kind of forgot about it…

But I see it actually says cocos2d-2.0-x-2.0.4. which I’m still not sure means it is available in 3.3?

I also noticed “You need to use relative coordinates only in NoBorder, FixedHeight and FixedWidth mode. Generally, developer uses NoBorder mode for better display” which I didn’t really understand

So, in answer to your question, yes, I am rolling my own. It’s not actually difficult, I just wondered what others do.

Of course, if the built in stuff is available in 3.x perhaps I should look at it again?

It does work for v3, too. You might have to adjust somethings (like using Director instead of CCDirector). If you want, I could post an example from my code (which uses v3).

Yeah… this is good… and initially, I also thought exactly the same thing, but for more resolutions and screen sizes because you know I work for android devices so I had to put so many if checks. :smiley: But the approach was exactly same as yours.

I also read the multi resolution thoery provided by cocos2d-x wiki. But, after doing all those maths by myself, I got the idea, that cocos2d-x must have provided a much much simpler way. So, I read that wiki tutorial again, and I suppose, I finally got what I want to do :smiley:

Thanks
I’ll look into it a bit more now…

Does it rescale sprites only when loaded?
I have my own animation classes and stuff, so would need to tailor it - but if it does teh grunt work it’s got to be worth a go!

You provide graphics for each bin you have (so for my example, I have 3-5 PNGs pre-generated for each sprite I need - all in different directories), then when it scales to a new screen resolution, it will pick the graphics from the specified directory and scale it as necessary