O documento resume as principais características do Cocos2d, uma framework para desenvolvimento de jogos 2D para plataformas Apple. Ele descreve que o Cocos2d é open source, multiplataforma e possui uma grande comunidade. Também explica conceitos básicos como cenas, layers e sprites utilizados no desenvolvimento de jogos com Cocos2d.

1. Desenvolvimento de Jogos
com Cocos2d
André “xorna” Espeiorin

2. @xorna
Sócio/Programador/Eletrecista da CodeRockr
Programador LAMP
Programador iOS
entre outras coisas

3. Um pouco sobre o Cocos2d
Open Source (BSD e MIT License)
Relativamente Novo (stable release em 2010)
Comunidade Crescente
Multi-plataforma
Centenas de jogos publicados
Relativamente bem documentado

4. Versões do Cocos2d
Original escrita em Python (multi-plataforma)
Portada em Objective-C (Plataforma Apple)
Portada em Java (Android)
Portada em Javascript
Portada em C++ (multi-plataforma, pero no
mucho)
CocosNet (C#, Mono)
Ruby (iOS)

5. Cocos2d para iOS
Versão Atual 1.0.1
Muito utilizado, desde desenvolvedores Indies
até Zynga e Atari
Engines Físicas embarcadas:
Chipmunk
Box2D
Biblioteca de Áudio própria
Baseado em OpenGL ES 1.1

6. Cocos2d para iOS
Sprite Sheets
Suporte a Tiled Maps
Sistema de Partículas
Renderização de texto
Integração com o Game Center
Entre muitas outras features...

7. Toda a plataforma Apple

8. Exemplos

9. Zynga: FarmVille

10. Pro Zombie Soccer

11. Pro Zombie Soccer

12. Pro Zombie Soccer

13. Zombie Smash

14. Zombie Smash

15. Zombie Smash

16. Zombie Smash

17. Zombie Smash

18. O que preciso para começar?
Ambiente de desenvolvimento Apple:
Mac
Mac OS X
Xcode com iOS SDK
Cocos2d
Conhecimentos:
Objective-C
Desenvolvimento iOS (Não precisa ser
avançado)
Dominar os conceitos a seguir apresentados

19. Conceitos Básicos
Scenes
Director
Layers
Sprites

20. Scenes
Classe CCScene
Uma “Cena”, “Tela” ou “parte” do jogo
Apenas uma cena é apresentada por vez
Exemplos: Menu, Fase X, Tela de Game Over, etc
Cada CCScene, possui pelo menos 1 CCLayer
Passar Game
Intro Menu Fase 1
Fase ... Over

21. Director
Classe CCDirector
“Dirige” o game
Transições, mudança de cena
Responsável por tudo por trás das Cenas
Responsável pela inicialização do OpenGL ES

22. Layers
Classe CCLayer
Área “Utilizável” da Cena
Podem ser usadas várias “camadas”
Definem aparência e comportamento da cena
Podem conter vários tipos de objetos
Podem ser transformadas assim como outros
objetos

23. Layers (Exemplo)

24. Layers (Exemplo)

25. Sprites
Classe CCSprite
Imagem 2D que pode ser transformada
Pode conter outros Sprites
Transformações no Sprite são propagadas para
todos os objetos “filhos”

26. Touch Screen
Muito mais possibilidades
Muito mais responsabilidades
Um pouco mais de trabalho para manipular
eventos
O Cocos2d para iOS possui 2 tipos de eventos:
Standard Touch
Targeted Touch

27. Standard Touch
Mesmos eventos do CocoaTouch
Ativado pela propriedade:
self.isTouchEnabled = YES;
Protocolo CCStandardTouchDelegate:
@protocol CCStandardTouchDelegate <NSObject>
@optional
- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)ccTouchesCancelled:(NSSet *)touches withEvent:(UIEvent
*)event;
@end

28. Targeted Touch
Ao contrário do Standard, ele notifica um único
toque por vez
Para ativar as Notificações, você deve “registrar”
seu objeto:
[[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:
0 swallowsTouches:YES];}

29. Targeted Touch Delegate
@protocol CCTargetedTouchDelegate <NSObject>
- (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event;
@optional
// touch updates:
- (void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event;
- (void)ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event;
- (void)ccTouchCancelled:(UITouch *)touch withEvent:(UIEvent *)event;
@end

30. Qual devo usar?
Standard se você precisa de manipular vários
toques simultâneos
Targeted se você procura algo simples, com
apenas um toque por vez

31. Ações Básicas
Mover elementos
Rotacionar elementos
Mostrar/Esconder elementos
Redimensionar elementos
Todas as ações podem ser animadas

32. Ações Compostas
Executar Ações em sequência
Executar várias Ações ao mesmo tempo
Repetir Ações
Repetir Ações em looping

33. Suavização de Ações (Básicas)
Tornam as transições/animações mais suaves
Transições com variações na aceleração

34. Suavização de Ações (Básicas)
Tornam as transições/animações mais suaves
Transições com variações na aceleração
linear

35. Suavização de Ações (Básicas)
Tornam as transições/animações mais suaves
Transições com variações na aceleração
linear easeInCubic

36. Suavização de Ações (Básicas)
Tornam as transições/animações mais suaves
Transições com variações na aceleração
linear easeInCubic easeOutCubic

37. Suavização de Ações (Básicas)
Tornam as transições/animações mais suaves
Transições com variações na aceleração
linear easeInCubic easeOutCubic easeInOutCubic

38. Ações Especiais
CallFunc / CallBlock
Chamar methodo após execução de uma Ação
id actionTo = [CCMoveTo actionWithDuration: 2 position: ccp(s.width-40,
s.height-40)];
id actionBy = [CCMoveBy actionWithDuration: 2 position: ccp(80,80)];
id actionCallFunc = [CCCallFunc actionWithTarget:self
selector:@selector(doATask)];
id actionSequence = [CCSequence actions: actionTo, actionBy,
actionCallFunc, nil];

39. Talk is Cheap, show me the code ;)

40. Baixar Cocos2d
$ git clone git://github.com/cocos2d/cocos2d-iphone.git
$ cd cocos2d-iphone
$ git checkout develop

41. Instalar Templates Cocos2d
No diretório do Cocos2d, executar o seguinte
script:
$ cd cocos2d-iphone/
$ ./install-templates.sh

42. Criar um projeto Cocos2d

43. Arquivos Criados

44. Executar projeto criado

45. Anatomia do CCLayer (header)
// When you import this file, you import all the cocos2d classes
#import "cocos2d.h"
// HelloWorldLayer
@interface HelloWorldLayer : CCLayer
{
}
// returns a CCScene that contains the HelloWorldLayer as the only
child
+(CCScene *) scene;
@end

46. Anatomia do CCLayer (Implementação)
// Import the interfaces
#import "HelloWorldLayer.h"
// HelloWorldLayer implementation
@implementation HelloWorldLayer
+(CCScene *) scene
{
! // 'scene' is an autorelease object.
! CCScene *scene = [CCScene node];
!
! // 'layer' is an autorelease object.
! HelloWorldLayer *layer = [HelloWorldLayer node];
!
! // add layer as a child to scene
! [scene addChild: layer];
!
! // return the scene
! return scene;
}

47. Anatomia do CCLayer (Implementação)
// 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;
}

48. Alteração no Header da Layer
#import "cocos2d.h"
// HelloWorldLayer
@interface HelloWorldLayer : CCLayer <CCTargetedTouchDelegate>
{
CCSprite *troll;
}
@property (nonatomic, retain) CCSprite *troll;
// returns a CCScene that contains the HelloWorldLayer as the only child
+(CCScene *) scene;
- (void) trollolol;
@end

49. Criação de Sprites
-(id) init
{
! if( (self=[super init])) {
// Cria o Sprite Troll
!! self.troll = [CCSprite spriteWithFile:@"Troll.png" rect:CGRectMake(0.0, 0.0,
128.0, 105.0)];
// Posiciona ele em qualquer lugar
[self trollolol];
// Adiciona ele a Layer
[self addChild:troll];
// Registra o Targeted Touch
[[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:0
swallowsTouches:YES];
!}
! return self;
}

50. Método Trollolol
- (void) trollolol {
CGSize winSize = [[CCDirector sharedDirector] winSize];
int minY = troll.contentSize.height/2;
int maxY = winSize.height - troll.contentSize.height/2;
int rangeY = maxY - minY;
int minX = troll.contentSize.width/2;
int maxX = winSize.width - troll.contentSize.width / 2;
int rangeX = maxX - minX;
int actualY = (arc4random() % rangeY) + minY;
int actualX = (arc4random() % rangeX) + minX;
troll.position = ccp(actualX, actualY);
}

51. Manipular o Touch
- (BOOL) ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event {
CGPoint touchPoint = [self convertTouchToNodeSpace:touch];
if (CGRectContainsPoint(troll.boundingBox, touchPoint)) {
[self trollolol];
return YES;
}
return NO;
}

52. Resultado

53. Resultado

54. Resultado

55. Resultado

56. Resultado

57. Dúvidas?

58. Código fonte
https://github.com/xorna/CodeRockrJam