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 AWTextureFilter for blur and font shadows


By harnessing CCTexture2DMutable the class AWTextureFilter can be used to create some cool effects. These include Gaussian Blur , selective Gaussian Blur, and dynamically generated font shadows as shown in the following scene:

Getting ready

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

How to do it...

Execute the following code:

#import "CCTexture2DMutable.h"
#import "AWTextureFilter.h"

@implementation Ch1_UsingAWTextureFilter

-(CCLayer*) runRecipe {
  CGSize winSize = [[CCDirector sharedDirector] winSize];

//Pixel Format RGBA8888 is required for blur effects
  [CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_RGBA8888];
  
  /*** Display a blurred texture ***/

  //Create the blur mutable texture
  CCTexture2DMutable *mutableBlurTexture = [[[CCTexture2DMutable alloc] initWithImage:[UIImage imageNamed:@"cocos2d_beginner.png"]] autorelease];

  //Apply blur to the mutable texture
  [AWTextureFilter blur:mutableBlurTexture radius:3];

  //Create a sprite to show the blur
  CCSprite *blurSprite = [CCSprite spriteWithTexture:mutableBlurTexture];
  [blurSprite setPosition:ccp(winSize.width/2+blur.contentSize.width/2+1, winSize.height/2)];

  //Add sprite to the scene
[self addChild:blurSprite z:0 tag:0];

/*** Display a selectively blurred texture ***/

  //Create the mutable texture to selectively blur
  CCTexture2DMutable *mutableSelectiveBlurTexture = [[[CCTexture2DMutable alloc] initWithImage:[UIImage imageNamed:@"cocos2d_beginner.png"]] autorelease];
  
  //Apply selective blur to the mutable texture
  [AWTextureFilter blur:mutableSelectiveBlurTexture radius:8 rect:CGRectMake(240-200, (winSize.height-160)-75, 150, 150)];
    
  //Create a sprite to show the selective blur
  CCSprite *selectiveBlurSprite = [CCSprite spriteWithTexture:mutableSelectiveBlurTexture];
  [selectiveBlurSprite setPosition:ccp(winSize.width/2, winSize.height/2)];

  //Add sprite to the scene
[self addChild:selectiveBlurSprite z:0 tag:1];

/*** Display dynamic font shadow effect ***/

  //Create a background so we can see the shadow
  CCLayerColor *background = [CCLayerColor layerWithColor:ccc4(200, 100, 100, 255) width:300 height:50];
  [background setIsRelativeAnchorPoint:YES];
  [background setAnchorPoint:ccp(0.5f, 0.5f)];
  [background setPosition:ccp(winSize.width/2, winSize.height/2)];
    
  //Create a sprite for the font label
  CCSprite* labelSprite = [CCSprite node];
  [labelSprite setPosition:ccp(winSize.width/2, winSize.height/2)];
  
  //Create a sprite for the shadow
  CCSprite* shadowSprite = [CCSprite node];
  [shadowSprite setPosition:ccp(winSize.width/2+1, winSize.height/2+1)];
  
  //Color it black
  [shadowSprite setColor:ccBLACK];
  
  //Add sprites to a node and the node to the scene
  CCNode* node = [[CCNode alloc] init];
  [node addChild:background z:-1];
  [node addChild:shadowSprite z:0];
  [node addChild:labelSprite z:1];
  [self addChild:node z:-1 tag:2];
    
  //Create a mutable texture with a string
  CCTexture2DMutable *shadowTexture = [[[CCTexture2DMutable alloc] initWithString:@"Shadowed Text" fontName:@"Arial" fontSize:28] autorelease];
  
  //Copy the mutable texture as non mutable texture
  CCTexture2D *labelTexture = [[shadowTexture copyMutable:NO] autorelease];
  
  //Set the label texture
  [labelSprite setTexture:labelTexture];
  [labelSprite setTextureRect:CGRectMake(0, 0, shadowTexture.contentSize.width, shadowTexture.contentSize.height)];
  
  //Apply blur to the shadow texture
  [AWTextureFilter blur:shadowTexture radius:4];
  
  //Set the shadow texture
  [shadowSprite setTexture:shadowTexture];
  [shadowSprite setTextureRect:CGRectMake(0, 0, shadowTexture.contentSize.width, shadowTexture.contentSize.height)];

  return self;
}

How it works...

AWTextureFilter uses CCTexture2DMutable to achieve a compelling Gaussian Blur effect. This is one example of complex pixel manipulation.

Font shadows:

CCTexture2DMutable inherits from CCTexture2D. This allows us to use the following method:

- (id) initWithString:(NSString*)string fontName:(NSString*)name fontSize:(CGFloat)size;

This creates a label texture that we can then use to create a blurred font shadow effect by creating a similar texture that we offset, darken, blur, and finally draw behind the original label texture.

There's more...

Here are a few other suggestions for the use of this blurring technique:

  • Blurring a screenshot as a background for the pause menu (see the next recipe in this chapter, Taking and using screenshots)

  • Combine with a color effect for a cool glow effect

  • Increase or decrease blur radius for reveal-based puzzle and trivia games