Explosions with Cocos2d

With this tutorial you will learn how to create a function that will play an animation like an explosion at a point you give it. In this example the explosion will be played at a touched location.

Here are the sprites you will need.

explosion graphics

Begin by adding this to your HelloWorldScene.h.


Add it after,

@interface HelloWorld : CCLayer



//Add line here

This is the declaration of our function. This tells the program that inside our hello world layer there is a function that receives a CGPoint value and then returns nothing. If you don’t add this you will get a warning that says “‘hello world’ may not respond to ‘-Explosion’”. With any function you create you must declare it in the h file.

Add this to the init function


Then add the following functions.

-(void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event


UITouch *touch = [touches anyObject];

CGPoint location = [touch locationInView:[touch view]];

location = [[CCDirector sharedDirector] convertToGL:location];

[self Explosion:location];


-(void) Explosion:(CGPoint)newPosition{

[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"Explosion.plist"];

CCSprite *sprite = [CCSprite spriteWithSpriteFrameName:@"Explotion1.png"];

sprite.position = newPosition;

[self addChild:sprite z:3];

NSMutableArray *animFrames = [NSMutableArray array];

CCSpriteFrame *frame1 = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"Explotion1.png"];

[animFrames addObject:frame1];

CCSpriteFrame *frame2 = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"Explotion2.png"];

[animFrames addObject:frame2];

CCSpriteFrame *frame3 = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"Explotion3.png"];

[animFrames addObject:frame3];

CCAnimation *animation = [CCAnimation animationWithName:@"dance" delay:0.2f frames:animFrames];

[sprite runAction:[CCSequence actions:[CCAnimate actionWithAnimation:animation restoreOriginalFrame:YES],

[CCCallFuncN actionWithTarget:self selector:@selector(spriteDone:)],nil]];

[[CCSpriteFrameCache sharedSpriteFrameCache] removeUnusedSpriteFrames];


- (void)spriteDone:(id)sender {

CCSprite *sprite = (CCSprite *)sender;

[self removeChild:sprite cleanup:YES];


Alot of this code we have seen before the function is new though.

-(void) Explosion:(CGPoint)newPosition

The function above is called in touchesEnded

[self Explosion:location];

We are sending the function the location that we touched.

That is how you create an explosion. You can use this explosion for when a bullet hits an object. See what you can do.

Download the code for Explosions in cocos2d.

Copy right Britney Lee Johnson August 2010.

This entry was posted in cocos2d. Bookmark the permalink.

2 Responses to Explosions with Cocos2d

  1. Sean says:

    Great tutorial, I learnt something new here with ensuring I always declare my functions in the header file. :) Thanks!

  2. Mark W says:

    and with that comment, I’ve also learnt the same thing ;)


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>