Cocos2D For iPhone Tutorial 2 – Make A Sprite (Not The Drink!)

Okay, now that you’ve successfully installed Cocos2D for iPhone, let’s go over making a project and displaying a sprite.

First off, we need to create a new project. This is done by opening Xcode and going to File -> New Project. Alternatively, Hit the “Create a new Xcode project” button in the welcome window. In the new project window, select “Cocos2d” from the user templates section of the sidebar. The type of application that you want to make right now is a “cocos2d Application”. Double click the corresponding icon.

In your project sidebar, expand the “Classes” folder. The file that we are going to work with in this tutorial is “HelloWorldScene.m”. Click it.

Be default, the code should be as follows:

//  HelloWorldLayer.m</p> // Import the interfaces #import "HelloWorldScene.h" // HelloWorld implementation @implementation HelloWorld +(id) scene { // 'scene' is an autorelease object. CCScene *scene = [CCScene node]; // 'layer' is an autorelease object. HelloWorld *layer = [HelloWorld node]; // add layer as a child to scene [scene addChild: layer]; // return the scene return scene; } // on "init" you need to initialize your instance -(id) init { // always call "super" init // Apple recommends to re-assign "self" with the "super" return value if( (self=[super init] )) { // create and initialize a Label CCLabelTTF *label = [CCLabelTTF labelWithString:@"Hello World" fontName:@"Marker Felt" fontSize:64]; // ask director the the window size CGSize size = [[CCDirector sharedDirector] winSize]; // position the label on the center of the screen label.position =  ccp( size.width /2 , size.height/2 ); // add the label as a child to this Layer [self addChild: label]; } return self; } // on "dealloc" you need to release all your retained objects - (void) dealloc { // in case you have something to dealloc, do it in this method // in this particular example nothing needs to be released. // cocos2d will automatically release all the children (Label) // don't forget to call "super dealloc" [super dealloc]; } @end

To make sure Cocos2D is configured correctly, click “Build and Debug” (at the top of the window). The iOs simulator application should open, and the Cocos2D application should run. The default code will cause “Hello World” to be displayed on the screen. All is well? Good.

After getting rid of all the unnecessary parts of code in our HelloWorldScene.m file, such as comments, we can trim it down to:

#import "HelloWorldScene.h" @implementation HelloWorld +(id) scene { CCScene *scene = [CCScene node]; HelloWorld *layer = [HelloWorld node]; [scene addChild: layer]; return scene; } -(id) init { if( (self=[super init] )) { } return self; } - (void) dealloc { [super dealloc]; } @end

 

Before we get to writing the code that will display a sprite, let’s make sure we know what a sprite is. The definition of a sprite is “A computer graphic that may be moved on-screen and otherwise manipulated as a single entity”. For example, in Angry Birds, the birds that you launch with a slingshot are sprites.

Now that we’ve got that over with, let’s get back to the project. Obviously, we are going to need a sprite that we can manipulate. Luckily, there is a default Cocos2D icon in the “Resources” folder in the sidebar that we can use. If you’re really against using that, then you can import your own small png image to the Resources folder and adjust the code that we go through accordingly. For the purpose of this tutorial, though, we are going to use the default image “Icon.png”.

Let’s cut to the code (I love saying that). We’re going to start off by making an object for our sprite. We do this by making an object in the class “CCSprite”. Let’s call our object “icon” because that’s the name of the image we are using. The code for this is “CCSprite *icon;”.  “Where do I put this?” you ask. Glad you asked. We are going to put this right under the #import code. Like so:

#import "HelloWorldScene.h" CCSprite *icon; @implementation HelloWorld +(id) scene { CCScene *scene = [CCScene node]; HelloWorld *layer = [HelloWorld node]; [scene addChild: layer]; return scene; } -(id) init { if( (self=[super init] )) { } return self; } - (void) dealloc { [super dealloc]; } @end

Because we declared our object outside of the methods, all of the methods will be able to access it. While this isn’t of real importance right now, it will become necessary when our code becomes more complicated.

The next thing we need to do is connect our icon.png file to our object “icon” and tell the iOS simulator where to place the image on the screen. The section of code that we are going to work in is the “init” method (look at the above code for “-(id) init”). The init method is what is run/initialized when a scene is loaded (we’ll go over scenes in a future tutorial, but you can probably figure out what they are by their name). It’s unnecessary for me to show the code in the rest of the program, so the next bit of code will only be the init method (you will want to add this to the init method in the code above).

-(id) init { if( (self=[super init] )) { icon = [CCSprite spriteWithFile:@"Icon.png"]; icon.position = ccp(300,200); [self addChild:icon]; } return self; }

 

icon = [CCSprite spriteWithFile:@”Icon.png”];

This line of code sets the image file of the sprite. You would change the object name (in this case, “icon”) depending on the name of your object. Also, the name of the image file would change depending on what the name of the image in your Resources folder is called.

icon.position = ccp(300,200);

You can’t just tell a computer to stick an image on the screen and expect it to go where you want it to. This code specifies the coordinates of the image. In the case of Cocos2D, the origin of the coordinate plane is the bottom left corner of the iPhone or iPod Touch screen. The coordinate itself refers to the location of the exact center of the sprite/image.

[self addChild:icon];

This simply adds the icon sprite to the current layer. We’ll go over layers and their many uses in a future tutorial.

That’s it.

Click “Run and Debug” and watch the Cocos2D icon sit at the coordinates (300,200) on your virtual iPhone screen!

For practice (and to test your understanding), I suggest you try adding multiple sprites with different images to the screen.