Why can't I see my entire image with the iPhone 3?

Question

So I'm pretty close to finishing up my little project and I'm trying to make sure that my app is compatible with the iPhone 3 and 4...but this is really stumping me. I'm using the open source CCPickerview code posted by hm50 some time ago (http://www.cocos2d-iphone.org/forum/topic/10160). It works GREAT for the iPhone 4, but not at all in the iPhone 3 simulator. I think the problem is somewhere here in the implementation. I can sort of see what's happening when I incorrectly leave the -hd tag on the image. It appears that the image is getting cut clean in half once in non-retinal mode, and I can't say I'm an expert enough to identify why.

-(void)makePages {
    CCSprite *overlay = [CCSprite spriteWithFile:@"overlay-hd.png"];
    CGSize s = CGSizeMake(overlay.contentSize.width, overlay.contentSize.height);
    self.contentSize = s;

    CCLayerColor *backLayer = [CCLayerColor layerWithColor:(ccColor4B){248,250,251,255} width:self.contentSize.width height:self.contentSize.height];
    backLayer.position = ccp(-self.contentSize.width/2, -self.contentSize.height/2);
    [self addChild:backLayer];

    self.baseLayer = [CCLayerColor layerWithColor:(ccColor4B){150,150,150,0} width:s.width height:imgSize.height * numPages];

    for (int i=0; i < [arrayPages count]; i++) {
        CCNode* n = [arrayPages objectAtIndex:i];
        n.position = ccp(s.width/2, s.height/2 + i * (imgSize.height + padding)); 
        [baseLayer addChild:n];
    }

    baseLayer.position = ccp(-s.width/2, -s.height/2 - s.height * currentPage);
    [self addChild:baseLayer];

    overlay.position = ccp(0, 0);
    //overlay.opacity = 0;
    [self addChild:overlay];

    rect = CGRectMake(self.position.x - s.width/2, self.position.y - s.height/2, s.width, s.height);

    [self moveToPagePosition];
}

- (void) visit 
{
    if (!self.visible)
        return;

    glPushMatrix();

    glEnable(GL_SCISSOR_TEST);

    CGSize size = [[CCDirector sharedDirector] winSize];
    CGRect scissorRect = rect;

    ccDeviceOrientation orientation = [[CCDirector sharedDirector] deviceOrientation];
    switch (orientation) 
    {
        case kCCDeviceOrientationPortrait:
            break;
        case kCCDeviceOrientationPortraitUpsideDown:
            scissorRect.origin.x = size.width-scissorRect.size.width-scissorRect.origin.x;
            scissorRect.origin.y = size.height-scissorRect.size.height-scissorRect.origin.y;
            break;
        case kCCDeviceOrientationLandscapeLeft:
        {
            float tmp = scissorRect.origin.x;
            scissorRect.origin.x = scissorRect.origin.y;
            scissorRect.origin.y = size.width-scissorRect.size.width-tmp;
            tmp = scissorRect.size.width;
            scissorRect.size.width = scissorRect.size.height;
            scissorRect.size.height = tmp;
        }
            break;
        case kCCDeviceOrientationLandscapeRight:
        {
            float tmp = scissorRect.origin.y;
            scissorRect.origin.y = scissorRect.origin.x;
            scissorRect.origin.x = size.height-scissorRect.size.height-tmp;
            tmp = scissorRect.size.width;
            scissorRect.size.width = scissorRect.size.height;
            scissorRect.size.height = tmp;
        }
            break;
    }

    glScissor(scissorRect.origin.x*2, scissorRect.origin.y*2,
              scissorRect.size.width*2, scissorRect.size.height*2);

    [super visit];

    glDisable(GL_SCISSOR_TEST);
    glPopMatrix();
}

Screenshot

If I move the scroll over to the right, more of it shows up, but I really don't want it over there. Can any of you brilliant objective-c gurus help me out with this?

EDIT:

After further investigation, the issue is without a doubt:

rect = CGRectMake(self.position.x - s.width/2, self.position.y - s.height/2, s.width, s.height);

If I make it

rect = CGRectMake(self.position.x - s.width*2.05, self.position.y - s.height/1.48, self.contentSize.width*1.3, self.contentSize.height*.48);

It works just fine...but I don't think this solution is very elegant and it should be based on the overlay picture size. I'm not sure what I'm doing wrong here.

Answer 1

I wrote a CCPickerView too, you can find it on github. https://github.com/fidgetware/CCPickerView. It works with both low-res and hi-res images.

Answer 2

I'm guessing double-resolution images are being used on the older devices, which will be twice the size they should be.

You need to check the -scale property of the window's screen (or use [UIScreen mainScreen]), and choose the correct (retina or not) image based upon that.