Cocos 2d: Images rendered on retina devices are double in size

Question

I am new to Cocos 2d. So kindly excuse me incase this is very basic stuff.

I am creating CCMenuItemImage from images and it is working fine on non retina devices but in case of retina device(iPhone and iPad retina) images being rendered are double of expected size. Provided, images used for retina devices are twice in resolution as that of non retina devices. For instance if a button has resolution of 100 x 100 for non retina devices, same button for retina devices has a resolution of 200 x 200(because retina devices have double resolution of non retina ones).

I am using the following code to create CCMenuItemImage :-

CCMenuItemImage *startButton = [CCMenuItemImage itemFromNormalImage:startBtnImg selectedImage:startBtnImg target:self selector:@selector(MenuButtonAction:)];

In case of retina devices 'startButtonImg' will have the file name with double resolution compared to non retina devices.

To Summarize When I render CCMenuItemImage on retina devices, images being rendered are of double size(it should not be like this).

Kindly help me in figuring out what am I doing wrong. Thanks in advance!

http://stackoverflow.com/questions/13625914/cocos2d-my-image-retina-doesnt-resize/13626707#13626707 — Sudhakar, Apr 18 '13 at 06:05

score 2 · Answer 1 · answered Apr 18 '13 at 05:56

2

change your retina images name with -hd,
e.g.
SD image -> apple.png [100x100]
HD image -> apple-hd.png [200x200]

in your code refer to the SD image only. e.g. [CCSprite spriteWithFile:@"apple"];
your app must have retina support enabled in config.

answered Apr 18 '13 at 05:56

Saurabh Passolia

8,099
1
26
41

score 2 · Answer 2 · answered Apr 18 '13 at 05:56

2

hd suffix for retina display in cocos2d. for example if you have a image img.jpg in the application.

you must have 2 images img.jpg (100*100) img-hd.jpg (200 *200)

img.jpg will be used for ordinary iphones and img-hd.jpg for hd devices

answered Apr 18 '13 at 05:56

Geo Paul

1,777
6
25
50

score 1 · Accepted Answer · answered Apr 19 '13 at 09:37

This tutorial explains how to have different resources for iPhone and iPad, both retina and not in a peaceful way :) http://www.raywenderlich.com/25736/how-to-make-a-simple-iphone-game-with-cocos2d-2-x-tutorial

Did you forget to let the CCFileUtils module know the postfix you were using for each of the files the following way?

// On iPhone HD: "-hd"
    CCFileUtils *sharedFileUtils = [CCFileUtils sharedFileUtils];
    [sharedFileUtils setEnableFallbackSuffixes:NO];             // Default: NO. No fallback suffixes are going to be used
    [sharedFileUtils setiPhoneRetinaDisplaySuffix:@"-hd"];      // Default on iPhone RetinaDisplay is "-hd"
    [sharedFileUtils setiPadSuffix:@"-ipad"];                   // Default on iPad is "ipad"
    [sharedFileUtils setiPadRetinaDisplaySuffix:@"-ipadhd"];    // Default on iPad RetinaDisplay is "-ipadhd"

Make sure you've done it, and that when you initialize a sprite you have all the image resources copied to your applications bundle. For instance, if you have the following code you should have 4 images:

projectile.png, projectile-hd.png, projectile-ipad.png and projectile-ipadhd.png

CCSprite *projectile = [CCSprite spriteWithFile:@"projectile.png"];

Cocos 2d: Images rendered on retina devices are double in size

3 Answers3