Cocos2Dfor iOSByGibson TangAzukisoft Pte Ltd22 – 12 - 2012 (The day after the Mayan prediction of the end of the world)

Who Am I?Mobile Developer since 2004

Ex Nokia Symbian

Ex J2ME developer

Currently Android and iPhone developer

Binary size max is 64 kb, not 64 MB

What is Cocos2DPopular Objective-C game engine

Easy to use

Tons of support

Open source and free (Very important)

Cocos2DUsed in thousands of games

Creator of Cocos2D was acqui-hired by Zynga

Yes, the Zynga whose stock is tanking now

What is Cocos2DHas a lot of ports

Cocos2d-x for Android and cross platform

Cocos2d html5

Cocos2d for Blackberry etc

What is Cocos2Dhttp://www.cocos2d-iphone.org/download

Go download it now

Cocos2DDirector – The guy that calls the shots

Scenes – Director manages scenes

Layers – Scenes can comprise of 1 or more layers

It is a game engine based on concept of nodes

Cocos2D

ScenesThink of a scene as a screen

So in a game, you may have a• Starting scene• Gameplay scene• Results sceneetc

LayersA scene can have > 1 layers

Think of a layer in the same vein as a layer in a Photoshop PSD file

Same concept

CCNodeCCNode is the base class that almost all Cocos2D classes inherit from

This has common properties such as - Position- Z order- Tag- etc

OriginThe coordinate system starts from bottom left of screen

0,0 X

Y

Hope you still remember your Cartesian Math

Cocos2DAll classes and objects have the prefix ‘CC’

• CCSprite

• CCAction

• CCMoveBy

etc

CCSpriteAn image object that loads in a png file

CCSprite *sprite = [CCSprite spriteWithFile:@”man.png”];

Sprite MovementCocos2d has a vast array of actions

• Movement• Scaling• Fading• Rotation• etc• http://www.cocos2d-iphone.org/api-

ref/2.1.0/interface_c_c_action.html

Sprite• After loading a sprite• Need call the ‘add’ method• To add the sprite to another sprite• Or add to a scene• Then the game engine handles

the rendering for you• Easy as Pie

Sprite Basics

CCSprite *sprite = [CCSprite spriteWithFile:@”man.png”];• [self addChild:sprite];• [sprite runAction:[CCMoveTo

actionWithDuration: 2.0f position:ccp(240, 320)]];

This moves man.png to position 240, 320 using 2 seconds

UIKitSo what happens if you want to integrate UIKit element?

• Textfield

• Alertview

• Webview

Can you do that with Cocos2D?

UIKitYes, you can. Most common way is to add them in using code

UIAlertView* alert_view = [[UIAlertView alloc] initWithTitle:@”Title" message:@"Your Message" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];[alert_view setDelegate:self];[alert_view show];[alert_view autorelease];

UIKit

UIKitYes, you can. Most common way is to add them in using code

UIView *myView = (UIView*) [[CCDirector sharedDirector] openGLView];//get the view textField = [[UITextField alloc] initWithFrame:CGRectMake(40, 168, 250, 40)]; [myView addSubview:textField]; [[[[CCDirector sharedDirector]openGLView] window]addSubview:myView];[myView setDelegate:self];

UIKit

UIKitYes, you can also add your xibs into Cocos2D

http://www.raywenderlich.com/4817/how-to-integrate-cocos2d-and-uikit

Audio

• To play audio is very simple• Just #import “SimpleAudioEngine.h”• Then call the methods to play the audio• Background music• Effect

• mp3, wav, caf (Core Audio Format) files can be used

Audio

• [[SimpleAudioEngine sharedEngine] preloadEffect:@"sfx.wav"];

//sfx.wav is the name of the sound file

• [[SimpleAudioEngine sharedEngine] playEffect:@"sfx.wav"];//play the audio file sfx.wav

• [[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"bgm.mp3"];//play the bgm.mp3 background music

It’s Demo TimeI am going to show you how to create a simple game

- Game mechanics is simple- Tap the snails to squash them- Before they reach the end of the screen- It won’t be the next Angry Birds- But it’s a start

Download Code

•http://www.azukisoft.com/HelloiOSDevs.zip