How To Make A Game Like Fruit Ninja With Box2D and Cocos2D – Part 1

This is a post by iOS Tutorial Team Member Allen Tan, an iOS developer and co-founder at White Widget. You can also find him on Google+ and Twitter. In this tutorial, you’ll learn how to make a sprite cutting game for the iPhone similar to Fruit Ninja by Halfbrick Studios using the powerful Cocos2D and […] By Allen Tan.

Leave a rating/review
Save for later
Share
You are currently viewing page 3 of 3 of this article. Click here to view the first page.

Adding a Fruit to the Scene

So far, nothing has been happening on screen yet, and you are obviously itching to see the fruits of your labor - pun intended! :]

Switch to HelloWorldLayer.h and make the following changes:

// Add to top of file
#import "PolygonSprite.h"

// Add inside the @interface
CCArray *_cache;

// Add after the @interface
@property(nonatomic,retain)CCArray *cache;

Switch back to HelloWorldLayer.mm and make these changes:

// Add to top of file
#import "Watermelon.h"

// Add inside the @implementation
@synthesize cache = _cache;

// Add inside the init method, below [self initPhysics]
[self initSprites];

// Add inside the dealloc method, before calling [super dealloc]
[_cache release];
_cache = nil;

// Add anywhere inside the @implementation and before the @end

-(void)initSprites
{
    _cache = [[CCArray alloc] initWithCapacity:53];
    
    // Just create one sprite for now. This whole method will be replaced later.
    PolygonSprite *sprite = [[Watermelon alloc] initWithWorld:world];
    [self addChild:sprite z:1];
    [sprite activateCollisions];
    [_cache addObject:sprite];
}

You declare a cache array, which will hold all the fruits and bombs you create in the future. Next, you create 1 Watermelon and add it to the scene. You call activateCollisions so that the Watermelon does not pass through the walls.

Compile and run, and you should see a Watermelon falling from the center area of the screen, and land at the bottom as shown below.

The Fruit of your Labor

You may notice that the Watermelon isn't exactly at the center. The reason for this is that you positioned the object based on its Box2D body, and our Box2D body's origin is at the lower-left corner of the object. The thin outline around the Watermelon is visible because debug drawing mode is still turned on.

Where To Go From Here?

Here is a sample project with all of the code from the above tutorial.

That's it for part 1 of the series. So far, you have a Watermelon Textured Polygon that just falls to the bottom of the screen.

But instead of drawing a rectangular sprite with transparent space like you usually see in Box2D tutorials, this uses PRKit to only draw the parts of the texture that correspond to the vertices of the Box2D body. This will come in handy soon!

Now you're ready for Part 2 of the tutorial, where you add the ability to slice the fruits!

In the meantime, if you have any questions or comments about this part, please join the forum discussion below!


This is a post by iOS Tutorial Team Member Allen Tan, an iOS developer and co-founder at White Widget. You can also find him on and Twitter.

Allen Tan

Contributors

Allen Tan

Author

Over 300 content creators. Join our team.