Parallaxing is a staple of 2D side-scrolling video games. A competent developer would be remiss if he didn't include a nice parallaxed background in a 2D side-scroller. Cocos2d makes parallaxing easy with CCParallaxNode.
Execute the following code:
@implementation Ch1_UsingCCParallaxNode -(CCLayer*) runRecipe { //Create four parallax sprites, one for each layer CCSprite* parallaxLayer01 = [CCSprite spriteWithFile:@"parallax_layer_01.png"]; CCSprite* parallaxLayer02 = [CCSprite spriteWithFile:@"parallax_layer_02.png"]; CCSprite* parallaxLayer03 = [CCSprite spriteWithFile:@"parallax_layer_03.png"]; CCSprite* parallaxLayer04 = [CCSprite spriteWithFile:@"parallax_layer_04.png"]; //Create a parallax node and add all four sprites CCParallaxNode* parallaxNode = [CCParallaxNode node]; [parallaxNode setPosition:ccp(0,0)]; [parallaxNode addChild:parallaxLayer01 z:1 parallaxRatio:ccp(0, 0) positionOffset:ccp(240,200)]; [parallaxNode addChild:parallaxLayer02 z:2 parallaxRatio:ccp(1, 0) positionOffset:ccp(240,100)]; [parallaxNode addChild:parallaxLayer03 z:3 parallaxRatio:ccp(2, 0) positionOffset:ccp(240,100)]; [parallaxNode addChild:parallaxLayer04 z:4 parallaxRatio:ccp(3, 0) positionOffset:ccp(240,20)]; [self addChild:parallaxNode z:0 tag:1]; //Move the node to the left then the right //This creates the effect that we are moving to the right then the left CCMoveBy* moveRight = [CCMoveBy actionWithDuration:5.0f position:ccp(-80, 0)]; CCMoveBy* moveLeft = [CCMoveBy actionWithDuration:2.5f position:ccp(80, 0)]; CCSequence* sequence = [CCSequence actions:moveRight, moveLeft, nil]; CCRepeatForever* repeat = [CCRepeatForever actionWithAction:sequence]; [parallaxNode runAction:repeat]; return self; } @end
Cocos2d makes it very easy to create a professional looking scrolling background. CCParallaxNode
breaks the concept of parallaxing down to its key components. In the following example we attach four sprites to an instance of CCParallaxNode
. Keep in mind that you can attach any CCNode
to a CCParallaxNode
. We then set parallaxRatio
and parallaxOffset
to create the desired effect.
This ratio determines how real game coordinates affect the coordinates of this particular parallaxed layer. A ratio of
ccp(2,0)
means the sprite will scroll twice as fast on the X and not at all on the Y. Higher (faster) ratios are typically drawn closer to the camera.Position Offset:
The position offset of each child node represents where it will be drawn when its parent (the
CCParallaxNode
) is at the origin orccp(0,0)
. Once the mainCCParallaxNode
instance moves the children will move with the proper ratio.
There are a number of ways to loop a parallaxed background. One involves checking the parallaxNode
position at every step and adjusting all the child position offsets based on the integer value of the parallax node X position divided by the screen size:
parallaxNodeChildXOffset = baseXOffset + ((int) (self.position.x / winSize.width)) * winSize.width;
This effectively resets the child positions after the parallaxNode
has moved one full screen width.