1

It seems like that also the new iPhone will be 16:9. No big news.

I need to deliver an App that I started one and a half year ago using Cocos2d 2.0 and targeting 3:2 screens. This means that all the graphics developed and drawn has been thought for a 3:2 screen.

The best solution I found is the following, using the extra space to include a joystic and some in game information as depicted by this sketch:

What I would like to achieve

There are already several answers that specify how I can detect when I am running on a 16:9 device. However my question here is.. how can I deal with the top and bottom black borders that by default are placed in my App?

Is there any way I can shift them and obtain only one black border at the bottom and overlay to this an extra input layer where I could add the joystic?

I have some hypothesis for solutions:

  • Hypothesis A: modify CCScene anchor point and shift it somehow to the top. At the moment is set to CGPointZero, which value changes according to the device used. However I tried hardcoding the value to (0,0) and nothing really changes:

    anchorPointInPoints_ = anchorPoint_ =CGPointMake(0.0f, 0.0f);

  • Hypothesis B: Modify the CCScene draw method to shift the view upwards in the parent UIView object. However I have no idea on how to do this.. I guess there could be some transformation matrix involved.

Hypothesis A seems not to be working so probably B is the best way to go. However, before digging the problem further I was wondering if some of you has already solved the problem.

Any help in pointing me to the correct direction would be greatly appreciated.

EDIT: I have been using CGPointMake assuming it worked in 3:2. In fact, as far as I know, the convention was to use 480 for height and 320 for width for both retina and non-retina devices. This simplified a lot the coding. However I am not sure if anything changed in this resepct with new 16:9 devices. If so this could be a step forward to solve my problem but of course would mean that I would need to add extra code for each scene to properly support this.

EDIT 2: Please refer to my second comment to LearnCocos2D answer.

+ (id) sceneWithLevelName:(LevelName)name
{
    CCScene *scene = [CCScene node];
    //I tried scene.position = CGPointMake(0,88); but happens as described in my comment to Learncocos2d's answer
    ShooterScene * shooterLayer = [[self alloc] initWithId:name];
    [scene addChild:shooterLayer];

    //I also tried to modify this layer (shooterLayer) but same proble, the black border stay.  

    return scene;    
}
Community
  • 1
  • 1
mm24
  • 9,280
  • 12
  • 75
  • 170

1 Answers1

0

It should suffice to modify the scene's position (not anchorPoint) on 16:9 devices.

Try this:

scene.position = CGPointMake(0, 88);

It should move the scene to the top and leave a blank area of 176 points underneath it on 16:9 devices.

CodeSmile
  • 64,284
  • 20
  • 132
  • 217
  • Thanks for the answer. I tried but doesn't seem to suffice. It does reposition the scene but the black border stay. After few seconds the scene moves down. I have added a code snippet in the answer so it is easier to understand. – mm24 Aug 27 '13 at 13:49
  • have you added the Default-568@2x.png to your project to enable widescreen mode? – CodeSmile Aug 27 '13 at 14:01