Medianet Software fue patrocinador Platinum en el evento Codemotion. Nuestra compañera Sofía Swidarowicz dinamizó un taller técnico sobre "Introducción a Cocos 2D". Durante tu taller habló de como Introducir a los usuarios en una de las herramientas más usadas a la hora de desarrollar aplicaciones o videojuegos (especialmente para iPhone) llamado Cocos2D. En esta presentación aparece toda la documentación expuesta durante el taller técnico.

1. Introducción a Cocos2D
Sofía Swidarowicz Andrade

2. AGENDA
1.- Acerca de MediaNet Software
2.- Generalidades Cocos2D
3.- ¿Cómo se estructura?
4.- Características
5.- Cocos2D y tipos de plataformas
6.- Demo
7.- Conclusiones
Sofía Swidarowicz 2
MediaNet Software

3. Un poco de mí
• Licenciada en Informática
• Master en Ing Multimedia
Desarrollado serious games, y minijuegos e
interactivos en cocos2D.
Sofía Swidarowicz
MediaNet Software

4. 1.- Acerca de MediaNet Software

5. EMPRESA ESPAÑOLA
FUNDADA EN 1995
TRAYECTORIA DE SPIN-OFFS Y
START-UPS
Sofía Swidarowicz
MediaNet Software

6. PERFIL DE EMPRESA:
ARTESANÍA:
CONOCIMIENTO +
EXPERIENCIA http://www.flickr.com/photos/24443965@N08/
Sofía Swidarowicz
MediaNet Software

7. UNA CULTURA BASADA EN
LA INNOVACIÓN
UN ENFOQUE CENTRADO
EN EL PROYECTO
Sofía Swidarowicz
MediaNet Software

8. 18/03/12 194 Medianos - Google Maps
PERFIL DE EMPRESA:
MÁS DE 200
ESPECIALISTAS
©2012 Google -
194 Medianos
Publicación restringida · 68 vistas
Creado el 12 de Mar · Por · Actualizado hace 2 días
Sofía Swidarowicz
MediaNet Software
Argentina - Comodoro Rivadavia

9. NUESTRA FÓRMULA:
COMPROMISO
VISIÓN A LARGO PLAZO
EQUIPO
Sofía Swidarowicz
MediaNet Software

10. Estrategia IT
Oficina de Proyectos
Consultoría
Desarrollo a medida
¿QUÉ HACEMOS?
Implantación
NUESTRAS ÁREAS DE Asistencia técnica in situ
ACTIVIDAD
Sofía Swidarowicz
MediaNet Software

11. Y SOBRE TODO:
LAS PERSONAS SON
SIEMPRE LO PRIMERO
Sofía Swidarowicz
MediaNet Software

12. 2.- Generalidades
Framework App Multimedia y
Juegos 2D iPhone
Sofía Swidarowicz 12
MediaNet Software

13. 2.1- ¿Por qué Cocos2D for iPhone?
Approves!
• Flexibilidad  Librerías en C, etc
• Fácil de usar
Sofía Swidarowicz 13
MediaNet Software

14. 2.1- ¿Por qué Cocos2D for iPhone?
Enlace a video: Ver en youtube
http://youtu.be/hvDCmKaJPak
Sofía Swidarowicz 14
MediaNet Software

15. 2.1- ¿Por qué Cocos2D for iPhone?
Tutoriales
Comunida
d Sofía Swidarowicz
MediaNet Software
15

16. 2.1- ¿Por qué Cocos2D for iPhone?
Sir Benfro’s Brilliant Ballon
SketchShare
Tiny Tower
Sofía Swidarowicz 16
MediaNet Software

17. 3.- ¿Cómo se estructura?
Escenas (CCScene)
Menu Nivel 1 FIN
Puntuación
Sofía Swidarowicz 17
MediaNet Software

18. 3.- ¿Cómo se estructura?
Escenas (CCScene)
Copyright: Nintendo
Sofía Swidarowicz 18
MediaNet Software

19. 3.- ¿Cómo se estructura?
Capas (CCLayer)
HUD Layer
Sofía Swidarowicz 19
MediaNet Software

20. 3.- ¿Cómo se estructura?
Nodos (CCNode)
• Layer
• Scene
• Sprites
• Label
• Color
Sofía Swidarowicz 20
MediaNet Software

21. 3.- ¿Cómo se estructura?
Director (CCDirector)
• Decide cuando y cómo se ejecutan las
escenas.
• Controla la ventana principal
• Se coloca siempre al inicio de una escena
Sofía Swidarowicz 21
MediaNet Software

22. 4.- Características
Librerías Físicas
Chipmunk Box2D
Sofía Swidarowicz 22
MediaNet Software

23. 3.- Características
Efectos
Sofía Swidarowicz 23
MediaNet Software

24. 4.- Características
Parallax Scroll
Partículas
Particle Desginer
Eje Eje
Eje
Sofía Swidarowicz 25
MediaNet Software

25. 4.- Características
Sprites
Refrescante..pero no.
Sofía Swidarowicz 26
MediaNet Software

26. 4.- Características
Sprites
• Un tipo de mapa de bits  hardware
especializado
• Utilizados para generar animaciones
• Son usados en videojuegos y apps 2D
• Mortal Kombat  fotografiaban actores
para hacer cada animación de los
personajes
Sofía Swidarowicz 27
MediaNet Software

27. 4.- Características
Sprites
Cocos2d usa OpenGL, un framework 3D,
empleado para crear juegos/aplicaciones
2D.
Sofía Swidarowicz 28
MediaNet Software

28. 4.- Características
Uso de Sprites en Cocos2D
SpriteSheet  ahorro memoria,carga solo una vez en
caché
Herramientas
• Zwoptex
• Sprite Helper
• Sprite Packer
• Image Magick
• Sprite Master
• Texture Packer
Sofía Swidarowicz 29
MediaNet Software

29. 4.- Características
Librerías Audio
• CocosDenshion  motor de audio de baja latencia
• Deriba del japonés “Sonidos Electrónicos” y Cocos
Formatos
• Mp3, m4a, Wav  compresión deseada vs peso
Sofía Swidarowicz 30
MediaNet Software

30. 4.- Características
¿Cómo usar CocosDenshion?
Simple Audio Engine
CD Sound Engine CD Audio Manager
• Hasta 32 pistas multiples • Pistas de larga duración múltiple
• iOS 2.1.x o mayor • Se identifica por un ID en vez del
nombre de archivo.
Sofía Swidarowicz 31
MediaNet Software

31. 5.- Cocos2D y Plataformas
LevelHelper Kobol2D
Sofía Swidarowicz 32
MediaNet Software

32. 5.- Cocos2D y Plataformas
CocosBuilder Beta
Sofía Swidarowicz 33
MediaNet Software

33. 5.- Cocos2D y Plataformas
Cocos2D for Android
http://code.google.com/p/cocos2d-android/
Cocos2D for HTML5 JavaScript
http://cocos2d-javascript.org/tutorials/breakout-clone-tutorial-part-1
Cocos2DX Multiplataforma Android/Windows Phone
http://www.cocos2d-x.org/
Sofía Swidarowicz 34
MediaNet Software

34. Enlaces de Interés
Cocos2D Página Oficial: Foros:
http://www.cocos2d-iphone.org http://www.cocos2d-iphone.org/forum/
http://www.raywenderlich.com/forums/
Tutoriales de Ray Wenderlich:
http://www.raywenderlich.com Instalación Cocos2D:
/ http://phyline.com/blog/2011/12/inst
alacion-de-cocos2d/
Sofía Swidarowicz 35
MediaNet Software

35. 6.- Demo
1. Instalación plantillas Cocos2D
2. Hola Mundo
3. Añadir y Mostrar un Sprite en una escena
4. Editar Sprite Sheets
5. Añadir y Mostrar el contenido de un sprite sheet
6. Animar un Sprite
7. Mover un Sprite
8. Uso de Labels como puntuación
Sofía Swidarowicz 36
MediaNet Software

36. Código

37. En el .h se coloca
// HelloWorldLayer
@interface HelloWorldLayer : CCLayer
{
CCSprite * vspriteFromSheet;
CCSpriteBatchNode *vBatchNode;
CCAction *vwalkAction;
CCLabelTTF *scoreLabel;
CCAction *vmoveAction;
BOOL vmoving;
int moves;
}
@property (nonatomic, retain) CCSprite *spriteFromSheet;
@property (nonatomic, retain) CCAction *walkAction;
@property (nonatomic, retain) CCAction *moveAction;
// returns a CCScene that contains the HelloWorldLayer as the only child
+(CCScene *) scene;
@end
Sofía Swidarowicz 38
MediaNet Software

38. En el .m dentro del init se coloca
Background
//1 Instanciar la clase CGSize para obtener el tamaño de pantalla
CGSize size = [[CCDirector sharedDirector] winSize];
//1.1 Insertar Background
CCSprite *background = [CCSprite spriteWithFile:@"backgroundRetina.png"];
background.anchorPoint = CGPointZero;
[self addChild:background];
Sprites
//1.3 Instanciando un sprite, ubicándolo en un lugar determinado en pantalla y añadiendolo al
self como hijo.
CCSprite *sprite = [CCSprite spriteWithFile:@"bug.png"];
sprite.position = ccp( size.width/2 , size.height/2);
[self addChild:sprite];
Sofía Swidarowicz 39
MediaNet Software

39. Sprites
//2 Usando el SpriteSheet.
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"NCat.plist"];
CCSpriteBatchNode *spriteSheet = [CCSpriteBatchNode batchNodeWithFile:@"NCat.png"];
[self addChild:spriteSheet];
//2.1 usando uno de los sprites del spritesheet
self.spriteFromSheet = [CCSprite spriteWithSpriteFrameName:@"capatostada1.png"];
vspriteFromSheet.position = ccp(size.width * 0.1, size.height * 0.5);
[spriteSheet addChild:vspriteFromSheet];
Sofía Swidarowicz 40
MediaNet Software

40. Animación de Sprites
//3 animando los sprites. Se crea un array y se llena con los sprites
NSMutableArray *walkAnimFrames = [NSMutableArray array];
for(int i = 1; i <= 12; ++i) {
[walkAnimFrames addObject:
[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:
[NSString stringWithFormat:@"capa%d.png", i]]];
}
//3.1 animando los sprites
CCAnimation *walkAnim = [CCAnimation animationWithFrames:walkAnimFrames delay:0.1f];
self.walkAction = [CCRepeatForever actionWithAction:
[CCAnimate actionWithAnimation:walkAnim restoreOriginalFrame:NO]];
[vBatchNode addChild:vspriteFromSheet z:-1];
[vspriteFromSheet runAction:vwalkAction];
Sofía Swidarowicz 41
MediaNet Software

41. Labels
//4 label
CCLabelTTF *labelPuntos = [CCLabelTTF labelWithString:@"Movimientos" fontName:@"Helvetica"
fontSize:24];
labelPuntos.position = ccp(100,300);
[self addChild:labelPuntos];
//4.1 Label que muestra el la suma de movimientos realizados
moves = 0;
scoreLabel = [CCLabelTTF labelWithString:@"0" fontName:@"Helvetica" fontSize:24];
scoreLabel.position = ccp(190, 300);
[self addChild:scoreLabel z:1];
Sofía Swidarowicz 42
MediaNet Software

42. Activación Touch
//activamos el touch
self.isTouchEnabled = YES;
Método que suma movimientos
//4.1 método de movimientos
-(void)sumaMovimientos{
moves = moves +1;
[scoreLabel setString:[NSString stringWithFormat:@"%i", moves]];
}
Sofía Swidarowicz 43
MediaNet Software

43. Método que calcula el movimiento de los sprites del spritesheet
//5 moviendo el sprite
-(void) ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event {
CGPoint touchLocation = [touch locationInView: [touch view]];
touchLocation = [[CCDirector sharedDirector] convertToGL: touchLocation];
touchLocation = [self convertToNodeSpace:touchLocation];
//Para que el gato se mueva por el ancho de la pantalla del iPhone (480 pixels), estimamos 3 seg
// V = d/t 480 pixeles / 3 seg
float catVelocity = 480.0/3.0;
// se calcula la posición del toque y del gato, para luego obtener la diferencia entre ambos. Es lo
// que se tendrá que mover el gato al punto del touch
CGPoint moveDifference = ccpSub(touchLocation, vspriteFromSheet.position);
//Se calcula la distancia real en la que ha movido el gato en una línea recta. Una hipotenusa que ya calcula
// ccpLenght emplean o la diferencia de posición obtenida entre el punto a y b (el gato con el touch)
float distanceToMove = ccpLength(moveDifference);
Sofía Swidarowicz 44
MediaNet Software

44. Método que calcula el movimiento de los sprites del spritesheet
//Lo que durará el gato en movimiento al trasladarse. Lo obtenido del calculo de la hipotenusa, lo que debe
//moverse en realidad sobre la velocidad (pix / seg)
float moveDuration = distanceToMove / catVelocity;
//Ahora se debe saber si el gato se debe mover a la izq o a la derecha. Si es menor a cero debe voltearse.
//Como Nyan Cat está mirando a la derecha, pues si es >0 se queda como está, sino debe voltearse para que mire a //la izq.
De este modo COCOS2D nos facilita la tarea de no tener que crear varios sprites (uno mirando para un //lado y otro
mirando para el contrario)
if (moveDifference.x > 0) {
vspriteFromSheet.flipX = NO;
} else {
vspriteFromSheet.flipX = YES;
}
Sofía Swidarowicz 45
MediaNet Software

45. Método que calcula el movimiento de los sprites del spritesheet
//Hacemos que el sprite detenga la acción de movimiento o de animación, debemos anular cualquier comando
//que ya existiera activo ya que no pueden ejecutarse una acción y hacer la llamada a una nueva.
[vspriteFromSheet stopAction:vmoveAction];
[vspriteFromSheet stopAction:vwalkAction];
//Le indicamos que se mueva al lugar que hemos calculado, proveniente del touch
if (!vmoving) {
[vspriteFromSheet runAction:vwalkAction];
}
Sofía Swidarowicz 46
MediaNet Software

46. Método que calcula el movimiento de los sprites del spritesheet
self.moveAction = [CCSequence actions:
[CCMoveTo actionWithDuration:moveDuration position:touchLocation],
[CCCallFunc actionWithTarget:self selector:@selector(catMoveEnded)],
nil];
[vspriteFromSheet runAction:vmoveAction];
vmoving = TRUE;
//Hacemos la llamada al método que suma los movimientos, lo hacemos aquí para que vaya contando cada touch.
[self sumaMovimientos];
}
Sofía Swidarowicz 47
MediaNet Software

47. Método para calcular el touch
-(void) registerWithTouchDispatcher
{
[[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:0
swallowsTouches:YES];
}
-(BOOL) ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event {
return YES;
}
Método para detener las acciones de movimiento y animación
//6 deteniendo el movimiento del sprite por pantalla
-(void)catMoveEnded {
[vspriteFromSheet stopAction:vwalkAction];
[vspriteFromSheet runAction:vwalkAction];
vmoving = FALSE;
}
Sofía Swidarowicz 48
MediaNet Software

48. Gracias
Sofía Swidarowicz
www.phyline.com
@phynet
phyonline@gmail.com