Support different Android Screen Resolutions

Support different Android Screen Resolutions
0.0 0



I’m new to cocos2d-x and I’m working at a game menu at the moment.

I tried it on different devices but the background Image doesn’t fit, so I’m having a few questions.

~~How can I support a background for all different screen resolutions.
~~How many backgroundimages do I need?

~~What imagesize do I need? Can I draw the graphics in Photoshop? If I can use it, how can I change the settings of the dpi density.
~~I read something about the autoscale feature, but how can I use it?

Thank you for your help.




You won’t really get a single image that will fit exactly on all devices unless you just stick to iOS devices.

My game has 3 different levels of image size.
They match the resolution of iPhone (480 x 320), iPhone 4 Retina (960 x 640) and Ipad Retina (2048 x 1536).

I use whichever image best fits the actual device.
For my android phone (1280 x 768) I just use the 960 x 640 images with a bit of cropping.
So its really just the 960 x 640 image scaled to 1280 x 853 cropped to 1280 x 768 so losing 85 pixels from the width.

Because most devices don’t use a similar resolution to iOS devices you wont get the images to display full screen without cropping or scaling / stretching.

The best you can do is probably create your background so that the interesting bits will fit on most devices and just have some unimportant stuff at the edges that you don’t mind being cropped.


I will try it.

Thank you very much for the fast answer :).


any idea about handling of coordinates ? how do you handle placement of UI elements ?


The design resolution settings in appDelegate are used to get a consistent placement.

If you are designing for 480 x 320 then a position of 10px will be automatically doubled when running on a screen that’s 960 x 640.

But what happens when you are running at 1024 x 768?
If you are using kResolutionNoBorder then its going to zoom in to fit the screen width without stretching.
10px from the left hand edge might now be off the screen.

There is some code somewhere on this site called VisibleRect.
Its a class that you can use to give you position that will always be in the correct position.

So if you want to position a button in the top right corner then you might do something like
button~~>setPosition~~ 10px, VisibleRect::Top() - 10)).

You could also say button~~>setAnchor //top right corner becomes 0,0 position
and then do
button~~>setPosition(VisibelRect::TopRight) //will align top right corner of button to be top right corner of screen.

This will set the position to be the same on all devices even with kResolutionNoBorder zooming.

Make sense?


wow that was a fast reply. Now I understand it. really thanks a lot. I will try it, and if I have any question I will ask again :slight_smile: