Cocos2d Iphone Developer Technological

Cocos2d Tips: Creating a Menu

CCMenu by Santiapps - Marcio Valenzuela
CCMenu by Santiapps – Marcio Valenzuela

You can create a menu by creating label items or image items and passing them to a CCMenu object. A typical MainMenuScene.m file might look like this:

-(void)playScene:(CCMenuItemFont*)itemPassedIn {

if ([itemPassedIn tag] == 1) {

[[GameManager sharedGameManager] runSceneWithID:kIntroScene];

} else if ([itemPassedIn tag] == 2) {

[[GameManager sharedGameManager] runSceneWithID:kSecondScene];

} else if ([itemPassedIn tag] == 3) {

[[GameManager sharedGameManager] runSceneWithID:kThirdScene];

} else {

CCLOG(@”Unexpected item. Tag was: %d”, [itemPassedIn tag]);



-(void)displayMainMenu {

CGSize screenSize = [CCDirector sharedDirector].winSize;

if (sceneSelectMenu != nil) {

[sceneSelectMenu removeFromParentAndCleanup:YES];


// Main Menu

CCMenuItemImage *playGameButton = [CCMenuItemImage






CCMenuItemImage *optionsButton = [CCMenuItemImage






mainMenu = [CCMenu menuWithItems:playGameButton,optionsButton,nil];

[mainMenu alignItemsVerticallyWithPadding:screenSize.height * 0.059f];

[mainMenu setPosition:ccp(screenSize.width * 2,screenSize.height / 2)];

id moveAction =

[CCMoveTo actionWithDuration:1.2f

position:ccp(screenSize.width * 0.75f,

screenSize.height * 0.70f)];

id moveEffect = [CCEaseIn actionWithAction:moveAction rate:1.0f];

[mainMenu runAction:moveEffect];

[self addChild:mainMenu z:0 tag:kMainMenuTagValue];


-(void)displaySceneSelection {

CGSize screenSize = [CCDirector sharedDirector].winSize;

if (mainMenu != nil) {

[mainMenu removeFromParentAndCleanup:YES];


CCLabelTTF *playScene1Label = [CCLabelTTF labelWithString:@”Level 1″ fontName:@”Motter Tektura” fontSize:45];

playScene1Label.color=ccc3(000, 000, 000);

CCMenuItemLabel *playScene1 = [CCMenuItemLabel itemWithLabel:playScene1Label target:self selector:@selector(playScene:)];

[playScene1 setTag:1];

[playScene1 addChild:stroke z:-1];

CCLabelTTF *playScene2Label = [CCLabelTTF labelWithString:@”Level 2″ fontName:@”Motter Tektura” fontSize:45];

playScene2Label.color=ccc3(000, 000, 000);

CCMenuItemLabel *playScene2 = [CCMenuItemLabel itemWithLabel:playScene2Label target:self selector:@selector(playScene:)];

[playScene2 setTag:2];

[playScene2 addChild:stroke2 z:-1];

CCLabelTTF *playScene3Label = [CCLabelTTF labelWithString:@”Level 3″ fontName:@”Motter Tektura” fontSize:45];

playScene3Label.color=ccc3(000, 000, 000);

CCMenuItemLabel *playScene3 = [CCMenuItemLabel itemWithLabel:playScene3Label target:self selector:@selector(playScene:)];

[playScene3 setTag:3];

[playScene3 addChild:stroke3 z:-1];

CCLabelBMFont *backButtonLabel =

[CCLabelBMFont labelWithString:@”Back”


CCMenuItemLabel *backButton =

[CCMenuItemLabel itemWithLabel:backButtonLabel target:self


sceneSelectMenu = [CCMenu menuWithItems:playScene1,


[sceneSelectMenu alignItemsVerticallyWithPadding:screenSize.height * 0.059f];

[sceneSelectMenu setPosition:ccp(screenSize.width * 2,screenSize.height / 2)];

id moveAction = [CCMoveTo actionWithDuration:0.5f position:ccp(screenSize.width * 0.5f,screenSize.height/2)];

id moveEffect = [CCEaseIn actionWithAction:moveAction rate:1.0f];

[sceneSelectMenu runAction:moveEffect];

[self addChild:sceneSelectMenu z:1 tag:kSceneMenuTagValue];


There are three methods here that are important:

1) playScene which basically receives an item and based on the received item it calls CCDirector to play a scene.

2) displayMainMenu which uses images as buttons to call a second level menu item.  It basically creates menu items and then uses them to populate CCMenu menuWithItems.

3) displaySceneSelection which is called from the displayMainMenu which then takes the user selection and passes it to playScene.

Cocos2d Iphone Developer Technological

Cocos2d Tips: Animations and image sizing

So you have some art but don’t know how to properly size it for the iPad or iPhone in their 2 versions (retina and non-retina display)! Let’s learn about image sizing and how to use these images in animations for your game objects (player, enemies, power ups or simple eye candy).

Before we even get into creating animations, we need to clear up the sizing issue.  Currently there are 4 screen sizes:

iPhone NonRetina = 480 x320

iPhone Retina = 960 x 640

iPad NonRetina = 1024 x 768

iPad Retina = 2048 x 1536

This means that when creating art for a game, you will go bonkers sizing images for each device.  Backgrounds basically need to cover the whole screen thus they must be the above sizes.  One option is to split the background into parts because some things will scroll and others won’t.  We will take a look at scrolling later on.

Players & images on the other hand will have to be of a certain size.  A typical player image for iPhoneNR will be ~ 1/3 x height = 106.  But in the iPhoneR it must be 212.  On the iPadNR it will have to be 256 and on the iPadR it will be 512 pixels high.  You can get away with iPhoneR being the same size image for iPadNR.  However this is not very useful when you realize we will soon need to get rid of iPadNR assets since it will be phased out.  Phased out because most people switch Apple devices quite frequently.  Anyway, if we don’t consider iPadNR size being phased out, you still have to come up with 3 size images:

106px high

212-256px high

512px high

The problem is that the headache doesn’t stop there.  You must make those images in 2 versions, normal and -hd.  There are programs that help you take an image and automatically get both -hd and non-hd versions of your image but you still have to feed it 3 different sized images.  Cocos2d also helps because you can name those images:





and cocos2d will automatically use the right one wherever needed.

Ok so now you have your images ready.  Now you have to create animations for them.  This means that your outsourced graphic designer must not only create a single image for your main player, but also a few more “frames” to cover that single player’s animation.  Animations can be as complex as you want them because you can animate his jumping, his running, his attacking, his just-standing there etc.  If each animation requires on average 10 “frames” or images…that means you have 10 frames x 4 movement options = 40 frames.  Each of them in 3 sizes and 2 resolutions.  So this can get complicated pretty quick.  But lets just look at how to create a simple animation.

CCAnimation and CCAnimate.  These are CCActions which you can use to animate a sprite.  Basically you do something like this:

CCSprite *animatingSprite = [CCSprite spriteWithFile:@”frame1.png”];

[animatingSprite setPosition:ccp(50,50)];

[self addChild:animatingSprite];

CCAnimation *spriteAnim = [CCAnimation animation];

[spriteAnim addFrameWithFilename:@”frame2.png”];

[spriteAnim addFrameWithFilename:@”frame3.png”];

[spriteAnim addFrameWithFilename:@”frame4.png”];

id spriteAnimationAction = [CCAnimate actionWithDuration:0.5f animation:spriteAnim restoreOriginalFrame:YES];

id repeatSpriteAnimation = [CCRepeatForever actionWithAction:robotAnimationAction];

[animatingSprite runAction:repeatSpriteAnimation];

What we did here is create the sprite as we always do, position it and add it to the layer.  Then we created a CCAnimation and added frames to it.  Finally we used CCAnimate to implement that CCAnimation we created.  However we chained that action with the repeat forever action so we can clearly see the animation.  Sometimes animation frames are too few and too fast to be seen after game launch.

The takeaway here is that you have to create animations for all 3 sizes mentioned above.  This can get cumbersome.  So TexturePacker is very handy for this particular job.  It comes with an option for generating an NR or non-hd version as well as a Retina or -hd version of your images.  This means you still have to come up with the different iPad and iPhone sized images.  Once you name the image as:

frame1.png (which is for iPhone NR ~ 110 px high)

frame1.png (which is for iPadNR and iPhoneRet ~ 250 px high)

frame1.png (which is for iPadRET ~ 500 px high)

This way when you put your images in a Texture Altas file, you can have it generate the -hd versions automatically.  Create an atlas called:



Now when you publish the plist and png files, make sure to click on the AutoSD option in TP.  This will generate:





Now you can simply import ImagesAtlas into your Xcode project and Cocos2d v2.0 will automatically sift through your project and find the corresponding atlas according to the device its running on.

Remember you should create a texture atlas for iPad images and another for iPhone images because if you put them all in one, an iPhone user will have an unnecessarily large atlas being loaded, slowing down his game, which he will never user because he is on the iPhone.

Cocos2d Iphone Developer Technological

Cocos2d Tips: How to design a game coding strategy

Cocos2d Game Coding Tips by Marcio Valenzuela
Cocos2d Game Coding Tips by Marcio Valenzuela

Know you know quite a bit, enough to make a game. Do you know how and where to start? Let’s look at how to start coding your action layer, what code to put in what methods and how to keep your update method clean and tidy.

When I started coding, and unfortunately most of my current projects are still coded that way, I simply opened up Xcode and started coding.  iOS apps are a bit better because you can use the “hooks” methods they come with such as viewDidLoad and cellForRowAtIndexPath etc.  Games are a bit more confusing because you are given an empty slate.  At least in Cocos2d you pretty much just get an init method.

It’s important to keep your code clean and orderly.  This is hard to do if you start coding without a design blueprint in mind and even then it can get messy.  You get what is called spaghetti code, which is just a big jumble of code.  So here is a very quick and simple tip.

I normally start out by making a paper and pen sketch of the layout.  If you have read some previous posts or looked into my course at, you will have seen I start my apps with a hand drawn layout.  I don’t use digital tools for that because you can’t beat the sketch-erase flexibility of a good old fashioned scratchpad.

Anyway, here is the tip…once I have your layout and know that names of my classes, I use comments to place ideas.  IOW, I open up my mainActionLayer or actionLayer or whatever the layer name is, and I start entering lines of code like:

//Call Create my main player

//Call Make player move

//Call Enter first enemy

//IF time = x then Call Create Powerup

Notice for example I didn’t say, IF time…create power up, I said Call create…because this way I can outsource these things to individual methods.  This may be very obvious but when you get to coding a game, or app, your idea is fresh in your head and you don’t want Strategic Planning to slow you down.  This results in spaghetti code most of the time.  What you want is to get your ideas down “on paper” first.  Then worry about making those ideas happen.  The reason is that you get caught up in figuring out HOW to Call Make player move.  Most of the times you don’t know how to do something right off the bat or you get caught up in something silly like declaring ivars vs properties or you can’t recall the exact name of the method signature you had in mind to do something.  By the time you get it right, you’ve lost track of what you were doing.

So this is what I do; I take all my idea comments and put them in the init method.  Then I start creating the respective empty methods to carry out each step.  For example:


//Get image (from atlas or file) (from own subclass)

//Add to layer (or batch node)

//Position and call player initialization methods


This way I can see what needs to be done inside my layer and what I can do in another method or subclass.  Ie, in this case I may end up calling my player from its own subclass instead of just saying CCSprite *myPlayer.  This also helps me leave out specifics that belong in that subclass so that I don’t clutter up my init method or layer class with object specific code.  IOW, I wrote I needed to position my object and call its player initialization methods.  This means those methods to do initialization stuff for that object must reside outside of my layer, ergo, the object subclass methods.

I think this is a good tactic to creating games because believe it or not they will get more complex, even if you don’t intend them to.  That will make your code unreadable in the future and with API changes or new ideas, your code will be very easy to modify.

Translate »