CODEWITHSUNDEEP
iphoneioscocos2d-iphoneiphone-5
bluestunt
bluestunt

Reputation: 479

iPhone 5 vs iPhone 4 Screen sizing

I have been developing a cocos2d app for the iPhone. I have been testing it solely on my iPhone 5. Everything looks great on it, but when I test it on the 3.5 inch simulator iPhone, some buttons go missing and some labels get misplaced.

I was wondering why this happens? I had thought that everything is positioned via the cocos2d grid which then converts it into pixels, so no matter the screen size the layout should look the same.

I think the problem might be due partly to the fact that when I set the position of a menu item, (0,0) puts it at the center of the screen. I don't know why this is.

Any advice on what is going on?

iPhone 5 on the left, simulator (3.5 inch) left.

enter image description here

Here is the code for this screen: 

    CCSprite *title = [CCSprite spriteWithSpriteFrameName:@"highscoresTitle.png"];
    [self addChild:title];
    title.position = ccp([CCDirector sharedDirector].winSize.width/2, [CCDirector sharedDirector].winSize.height-title.contentSize.height-15);
    background.position = ccp([CCDirector sharedDirector].winSize.width/2, [CCDirector sharedDirector].winSize.height/2);
    play = [CCMenuItemSprite itemWithNormalSprite:[CCSprite spriteWithSpriteFrameName:@"playNew.png"] selectedSprite:[CCSprite spriteWithSpriteFrameName:@"playNew.png"] target:self selector:@selector(playScene:)];
    play.position = ccp(0, -200);

    CCLabelTTF *backLabel = [CCLabelTTF labelWithString:@"BACK" fontName:@"RBNo2-Light-Alternative" fontSize:25];
    CCMenuItemLabel *goBack = [CCMenuItemLabel itemWithLabel:backLabel target:self selector:@selector(back:)];
    goBack.position = ccp(0, -260);

    CCMenuItemSprite *gameicon = [CCMenuItemSprite itemWithNormalSprite:[CCSprite spriteWithSpriteFrameName:@"gameCenter.png"] selectedSprite:[CCSprite spriteWithSpriteFrameName:@"gameCenter.png"] target:self selector:@selector(gameIcon:)];
    gameicon.position = ccp(0, -150);

    CCMenu *menu = [CCMenu menuWithItems:play,goBack, gameicon, nil];
    [self addChild:menu z:0]; 

    for(int i = 0; i<5 && i<length; i++){

        NSString *temp = [NSString stringWithFormat:@"%d: %d", i+1,[[highscores objectAtIndex:i]intValue]];
        CCLabelTTF *label = [CCLabelTTF labelWithString:temp fontName:@"RBNo2-Light-Alternative" fontSize:20];
        label.position = ccp([CCDirector sharedDirector].winSize.width/2, 350-i*30);
        label.visible = YES;
        [self addChild:label z:100 tag:1];

    }

    NSString *temp = [NSString stringWithFormat:@"Last Score: %d", newHighscore];
    CCLabelTTF *label = [CCLabelTTF labelWithString:temp fontName:@"RBNo2-Light-Alternative" fontSize:20];
    label.position = ccp([CCDirector sharedDirector].winSize.width/2, 415);
    label.visible = YES;
    [self addChild:label z:100 tag:1];

Here is another example with sliders: (iPhone 5 left) enter image description here

And here is the code for the sliders:

    sliderCtl = [[UISlider alloc]initWithFrame:CGRectMake(100, 460, 200, 0)];
    //[sliderCtl.layer setAffineTransform:CGAffineTransformMakeRotation(3.141/2)];
    [sliderCtl addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];

    sliderCtl.backgroundColor = [UIColor clearColor];
    sliderCtl.value = 1.0;

    [[[[CCDirector sharedDirector] openGLView] window] addSubview:sliderCtl];

    sliderEff = [[UISlider alloc]initWithFrame:CGRectMake(100, 402, 200, 0)];

    [sliderEff addTarget:self action:@selector(effectsSlider:) forControlEvents:UIControlEventValueChanged];

    sliderEff.backgroundColor = [UIColor clearColor];
    sliderEff.value = 1.0;

    [[[[CCDirector sharedDirector] openGLView] window] addSubview:sliderEff];

Thanks a lot.

Upvotes: 0

Views: 516

Answers (2)

XBXSlagHeap
XBXSlagHeap

Reputation: 174

I have run into the same issues and am now using the UIDevice Extension library from GitHub at the following link to identify the device. This is a little overkill unless you use other items from the identified device besides just screen size but thought you might be able to use it since I tend to always run into more needs by device type.

https://github.com/erica/uidevice-extension

Upvotes: 0

s.bandara
s.bandara

Reputation: 5664

Most likely, this answer will disappoint you. iPhone 5 has a number of pixels along its long edge that is different from all previous models. The coordinate system you use for placing objects in your scene is point, where 1 pt equals 2 px on devices with Retina displays.

You do make use of winSize which is provided to you by the CCDirector. This indeed helps you calculating relative positions, for example in order to center along the horizontal as I see it in some places of your code, e.g. for label. You alone are responsible for positioning your objects, with some help from anchorPoint, winSize, and related properties.

Specific example: You place goBack at a relative position of -260 pt. Note that your menu is centered on the screen by default. On an iPhone 4S and every previous model, this means an absolute position of 480 pt / 2 - 260 pt = -20 pt. No surprise that button is off screen. You will have to test for winSize.height and adjust accordingly.

Upvotes: 2

Related Questions