Question

I’m using cocos2d for iOS. Not sure if I’m doing something wrong here or if CCParallaxNode does something strange that I just don’t understand.

I’m trying to create a few layers of parallax scrolling in the background of my game, at the moment I just have one layer added to the parallax node till I can figure out what’s going wrong. When the game loads the layer it’s always offset down and left by about 30% of the image size. I’ve uploaded an image demonstrating the difference in position here http://oi42.tinypic.com/29dz1av.jpg.

Here is my code:

background = [CCParallaxNode node];
background.anchorPoint = ccp(0,0);
background.position = ccp(0,0);
[self addChild: background];

background_image = [CCSprite spriteWithFile: @"layer01.png"
                                      rect: CGRectMake(0, 0, 100, 100)];
background_image.anchorPoint = ccp(0,0);
background_image.position = ccp(0,0);

[background addChild: background_image z:0 parallaxRatio: ccp(0,0) positionOffset:ccp(0,0)];

The cocos2d icon is attached to the same layer as the parallax node and it’s position and anchor point are set to 0,0 so the bottom left of the icon should be in the same location as the bottom left of the blue background image.

I have tested this using a basic sprite in place of the parallax node and everything lines up as it should so it’s not the image itself.

Any help with this would be appreciated.

Answer 1

First, I don’t suggest you to set parallax node & its children’s anchor point & position directly because it will cause some unexpected results. You should add the parallax node to a layer as its child, and set the layer’s anchor point & position to place your parallax.

Second, CCParallaxNode also provides a positionOffset that you can place your picture in parallax at first. This can help if you want to align several layers of pictures’ view center.

So I think you should do something like this(Since I’m using cocos2d-x, I’m not sure its right with obj-C):

layer = [[CCLayer alloc]init];
background = [CCParallaxNode node];
[layer addChild: background];
[self addChild: layer];

Then you just have to add the picture sprite in background, and set layer’s position & anchor point.

Hope it can help.