Monday, April 23, 2012

How to make cocos2d game

Step 1: Getting Cocos2D

Before you begin, you need to download and install a couple tools. The first is the Cocos2D game engine. You can obtain it from their website at http://cocos2d-iphone.org/download.

Once downloaded, you need to install their Xcode templates. This will make your life much easier in the future when you want to set up a project using Cocos2D. Here is their tutorial on how to do that. Don’t worry, this is really simple: just download the template tarball and then untar it in ~/Library/Developer/Xcode/Templates on your machine. The next time you open Xcode and create a new project, you should see a Templates category with several Cocos2D options.


Step 2: Texture Packer

Texture Packer is a fantastic tool that will take a set of textures, turn them into a single texture, and output a plist that tells Cocos2D how to use them. Having a single texture can save you quite a bit of disk space, load time, and complexity.

To get started, download Texture Packer from http://texturepacker.com. You can use the demo version for this tutorial but I strongly recommend purchasing this tool. It is well worth the money!


Importing Assets Into Texture Packer

Start by downloading the attachment for this tutorial. It contains both the standard and high definition versions of our images. Remember, the iPhone 3GS is free now, so there are still plenty of users not using retina display devices. Let’s not leave them out. ;)

Being that we have 2 separate versions of our images, you will need to perform this process twice. Simply drag all of the images in the HD folder except title-hd.png and game-over-hd.png into Texture Packer. It will be clear later why we are not including these two images.


Exporting Assets Out Of Texture Packer

Texture Packer will automatically lay out the images for you and create a single image that is as small as it can possibly be. Note that Cocos2D requires all image dimensions to be supplied in powers of 2.

Now that the images have been laid out, click the Publish button at the top. Name the output background-hd. Make sure to clear the images from Texture Packer and repeat this process for all of the standard definition images in the sd folder and name their output background.

You should now see a total of 4 files: background-hd.png, background-hd.plist, background.png, and background.plist.


#import "GameLayer.h"
@implementation GameLayer
@synthesize spritesBatchNode = _spritesBatchNode;
+(CCScene *) scene {
     CCScene *scene = [CCScene node];
     GameLayer *layer = [GameLayer node];
     [scene addChild: layer];
     return scene;
}
-(void) dealloc {
     [_spritesBatchNode release];
     [super dealloc];
}

-(id) init {
     if( (self=[super init])) {
            [CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_RGBA4444];// 1.
            self.spritesBatchNode = [CCSpriteBatchNode batchNodeWithFile:@"caterpillar.png"];
            [self addChild:self.spritesBatchNode];// 2.
            [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"caterpillar.plist"];
            [CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_RGB565];// 3.
     CCSprite * background = [CCSprite spriteWithSpriteFrameName:@"background.png"];
            background.anchorPoint = ccp(0,0);
            [self.spritesBatchNode addChild:background];
            [CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_Default];
            }
    return self;
}
@end

No comments:

Post a Comment