We are developing a 2D game for iPhone using cocos2d-x. The artists are drawing the raster graphic for a resoluion of 640x960. For older iPhone devices, those that have a resolution of 320x480, should we provide a completely new set of graphics, to be adapted to the smaller resolution? I was thinking of simply scaling the whole scene of a factor of 2. That would save us the time to write a specific set of graphic elements for the smaller resolution. What is the best practices? How do you guys handle the different screen resolution w.r.t. the graphic part of the game?


It really depends on your art style. Does the game look fine scaled down halfway? Would making new, lower-res artwork push you over the current OTA download size? If so, then keep the larger graphics.

There are not a lot of people with 3GSs and 3rd gen iPod touches out there (the only currently supported non-retina small devices), and with iOS 6 the 3rd gen touch isn't going to be supported any more either.

  • 3
    \$\begingroup\$ Also watch out for fonts, they might be impossible to read on the lower res. \$\endgroup\$
    – DogDog
    Jun 21 '12 at 13:17

you should use two sets of graphics, this might help you reduce memory usage too as its already built into the framework of cocos2d.

You need to add a suffix on your images, apple uses the ”@2x” suffix, but cocos2d doesn't use that extension because of some incompatibilities. Instead, cocos2d has its own suffix: ”-hd”.

You'll need to enable retina mode though:

    // Director Initialization
[director setOpenGLView:glView];

// Enables High Res mode (Retina Display) on iPhone 4 and maintains low res on all other devices
if( ! [director enableRetinaDisplay:YES] )
    CCLOG(@"Retina Display Not supported");

You'll also need to create hd fonts.

More info can be found here:



Well, it depends on your artists and how they are designing, if you use Adobe Illustrator, which is vector based, that means you can scale to whatever size you need. My process is to draw the image I want out on paper, scan it in, make a version in of the drawing in Adobe Illustrator (using the drawing as a template), then rasterize in Adobe Photoshop and add any final touches.

If there are any designers, who think they can add or help me improve my process, I would really appreciate a comment or a message.


I handle the resolution of images like this

float spriteheight = ((size.height/10)/(spritename->getContentSize().height));
float spritewidth = ((size.width/7)/(spritename->getContentSize().width));

the 10 and 7 depends on how big or small your image is, the higher the number makes your image smaller and the lowest makes them bigger.

hope this helps your problem


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .