Book Image

Cocos2d for iPhone 1 Game Development Cookbook

By : Nathan Burba
Book Image

Cocos2d for iPhone 1 Game Development Cookbook

By: Nathan Burba

Overview of this book

Cocos2d for iPhone is a robust but simple-to-use 2D game framework for iPhone. It is easy to use, fast, flexible, free, and Appstore approved. More than 2500 AppStore games already use it, including many best-seller games. Do you want to take your cocos2d game development skills to the next level and become more professional in cocos2d game design? Cocos2d for iPhone 1 Game Development Cookbook will help you reach that next level. You will find over 100 recipes here that explain everything from the drawing of a single sprite to AI pathfinding and advanced networking. Full working examples are emphasized. Starting with the first chapter, Graphics, you will be taken through every major topic of game development. You will find both simple and complex recipes in the book. Each recipe is either a solution to a common problem (playing video files, accelerometer steering) or a cool advanced technique (3D rendering, textured polygons). This cookbook will have you creating professional quality iOS games quickly with its breadth of working example code.
Table of Contents (15 chapters)
Cocos2d for iPhone 1 Game Development Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Using CCParallaxNode


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.

Getting ready

Please refer to the project RecipeCollection01 for full working code of this recipe.

How to do it...

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

How it works...

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.

  • Parallax Ratio :

    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 or ccp(0,0). Once the main CCParallaxNode instance moves the children will move with the proper ratio.

There's more...

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.