Why is the sprite generated different sizes in iPhone 5 and iPad retina?

Question

I was following these tutorial: http://www.raywenderlich.com/32954/how-to-create-a-game-like-tiny-wings-with-cocos2d-2-x-part-1

The hill texture is generated by passing vertices and texture coordinates to the draw method of the CCNode representing the terrain.

The hills look fine on my iPod touch, and my iPhone. But when I view them in the iPad retina display, the hills seem smaller (as if the calculation was for a smaller display), and the alignment is incorrect. Instead of being drawn from y = 0 , they are drawn from slightly above the bottom of the screen (as if the hills are floating).

Is there some kind of error in the calculation ? How to fix it ?

EDIT: On my iPhone / iPod, the hills are so large that only two hills are on screen at a time. But on my iPad retina, there are 4 hills on screen at a time. So there is some kind of device dependent calculation.

Answer 1

But when I view them in the iPad retina display, the hills seem smaller (as if the calculation was for a smaller display),

That's indeed what happens. In High-DPI mode the OS reports a smaller physical display resolution so that applications using the Cocos2D API can use the same pixel distances and positions as on non-Retina displays. Cocos2D then internally scales everything appropriately.

For OpenGL this fails, of course.

Here's a tutorial on how to deal with the subject: http://www.david-amador.com/2010/09/setting-opengl-view-for-iphone-4-retina-hi-resolution/

The relevant code is this:

int w = 320;
int h = 480;

float ver = [[[UIDevice currentDevice] systemVersion] floatValue];
// You can't detect screen resolutions in pre 3.2 devices, but they are all 320x480
if (ver >= 3.2f)
{
    UIScreen* mainscr = [UIScreen mainScreen];
    w = mainscr.currentMode.size.width;
    h = mainscr.currentMode.size.height;
}

if (w == 640 && h == 960) // Retina display detected
{
        // Set contentScale Factor to 2
    self.contentScaleFactor = 2.0;
        // Also set our glLayer contentScale Factor to 2
    CAEAGLLayer *eaglLayer = (CAEAGLLayer *)self.layer;
    eaglLayer.contentsScale=2; //new line
}