Supporting different orientations using Cocos2d on iPhone

Question

I’m trying to support both landscape and portrait orientations in my iPhone Cocos2D game, but I’m having trouble getting the coordinates to translate properly.

Here’s what I’m doing so far.

I have a GameWorld layer that I always keep in portrait, regardless of the device orientation. The following code is in my DeviceRotated event for UIDeviceOrientationLandscapeLeft. (‘self’ is my GameWorld layer)

[self runAction:[CCMoveTo actionWithDuration: 0.25f position:ccp(80, 0)]];

[self runAction:[CCRotateTo actionWithDuration:0.25f angle:90]];

So that I don’t have to write different code for each orientation I was hoping to use the following in my Sprite class to translate Sprite coordinates.

CGPoint spriteLoc = ccp(0,0);

CGPoint translatedSpriteLoc = [self.parent convertToNodeSpace:spriteLoc];

self.position = translatedSpriteLoc;

However, this doesn’t work.

If the device is in portrait mode with the sprite in the lower left corner and I rotate the device to the left, the sprite appears in the lower right. I want the sprite to be in the lower left in landscape just like it is in portrait.

Am I missing something or is there a better way to translate coordinates?

Answer 1

Well, if you don't mind a "jump cut" when you switch orientations, you can just use the built-in orientation support within Cocos2d. See this post at the Cocos2d forums.

If, however, you need pretty orientation, you may have to do something along the lines of what you were showing above, orienting things manually via rotation using actions.

Without more detail, it's hard to say why your approach doesn't work, but my guess is that you are seeing the sprite positioning you describe as a result of the fact that if you don't change orientation, the lower left in portrait IS the lower right in landscape when rotated left, i.e., it's the same point in GL space: (0,0). You're going to have to move the "origin point" of your GameWorld Layer as well as rotating it.

Try adding a full-screen image to your layer to see what's actually happening when rotating it. That should help you narrow down what you need to do.