Introducción a Cocos2D
Sofía Swidarowicz Andrade
Sofía SwidarowiczMediaNet Software
2
AGENDA1.- 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 SwidarowiczMediaNet Software
Un poco de mí
• Licenciada en Informática • Master en Ing Multimedia
Desarrollado serious games, y minijuegos e interactivos en cocos2D.
1.- Acerca de MediaNet Software
Sofía SwidarowiczMediaNet Software
EMPRESA ESPAÑOLA
FUNDADA EN 1995
TRAYECTORIA DE SPIN-OFFS Y START-UPS
Sofía SwidarowiczMediaNet Software
PERFIL DE EMPRESA:
ARTESANÍA:CONOCIMIENTO + EXPERIENCIA
http://www.flickr.com/photos/24443965@N08/
Sofía SwidarowiczMediaNet Software
UNA CULTURA BASADA EN LA INNOVACIÓN
UN ENFOQUE CENTRADO EN EL PROYECTO
Sofía SwidarowiczMediaNet Software
PERFIL DE EMPRESA:
MÁS DE 200 ESPECIALISTAS
Sofía SwidarowiczMediaNet Software
NUESTRA FÓRMULA:
COMPROMISOVISIÓN A LARGO PLAZOEQUIPO
Sofía SwidarowiczMediaNet Software
Estrategia IT
Oficina de Proyectos
Consultoría
Desarrollo a medida
Implantación
Asistencia técnica in situ
¿QUÉ HACEMOS?
NUESTRAS ÁREAS DE ACTIVIDAD
Com
parti
ción
de o
bjeti
vos
Sofía SwidarowiczMediaNet Software
Y SOBRE TODO:
LAS PERSONAS SON SIEMPRE LO PRIMERO
Sofía SwidarowiczMediaNet Software
12
2.- Generalidades
Framework App Multimedia y Juegos 2D iPhone
Sofía SwidarowiczMediaNet Software
13
2.1- ¿Por qué Cocos2D for iPhone?
Approves!
• Flexibilidad Librerías en C, etc• Fácil de usar
Sofía SwidarowiczMediaNet Software
14
2.1- ¿Por qué Cocos2D for iPhone?
http://youtu.be/hvDCmKaJPak
Enlace a video: Ver en youtube
Sofía SwidarowiczMediaNet Software
15
2.1- ¿Por qué Cocos2D for iPhone?
Comunidad
Tutoriales
Sofía SwidarowiczMediaNet Software
16
2.1- ¿Por qué Cocos2D for iPhone?
Tiny Tower
Sir Benfro’s Brilliant Ballon
SketchShare
Sofía SwidarowiczMediaNet Software
17
3.- ¿Cómo se estructura?
Escenas (CCScene)
Puntuación
FINNivel 1Menu
Sofía SwidarowiczMediaNet Software
18
3.- ¿Cómo se estructura?
Escenas (CCScene)
Copyright: Nintendo
Sofía SwidarowiczMediaNet Software
19
3.- ¿Cómo se estructura?Capas (CCLayer)
HUD Layer
Sofía SwidarowiczMediaNet Software
20
3.- ¿Cómo se estructura?
Nodos (CCNode)
• Layer• Scene• Sprites• Label• Color
Sofía SwidarowiczMediaNet 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 SwidarowiczMediaNet Software
22
4.- Características
Librerías Físicas
Box2DChipmunk
Sofía SwidarowiczMediaNet Software
23
Efectos
3.- Características
Sofía SwidarowiczMediaNet Software
25
Partículas
Particle Desginer
Eje Eje
Parallax Scroll
Eje
4.- Características
Sofía SwidarowiczMediaNet Software
26
Sprites
4.- Características
Refrescante..pero no.
Sofía SwidarowiczMediaNet Software
27
Sprites4.- Características
• 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 SwidarowiczMediaNet Software
28
Sprites4.- Características
Cocos2d usa OpenGL, un framework 3D, empleado para crear juegos/aplicaciones 2D.
Sofía SwidarowiczMediaNet Software
29
Uso de Sprites en Cocos2D
4.- Características
Herramientas
SpriteSheet ahorro memoria,carga solo una vez en caché
• Zwoptex• Sprite Helper• Sprite Packer• Image Magick• Sprite Master• Texture Packer
Sofía SwidarowiczMediaNet Software
30
4.- Características
• Mp3, m4a, Wav compresión deseada vs peso
Librerías Audio• CocosDenshion motor de audio de baja latencia• Deriba del japonés “Sonidos Electrónicos” y Cocos
Formatos
Sofía SwidarowiczMediaNet Software
31
4.- Características
¿Cómo usar CocosDenshion?
Simple Audio Engine
CD Audio ManagerCD Sound Engine• Hasta 32 pistas
multiples• iOS 2.1.x o mayor
• Pistas de larga duración múltiple
• Se identifica por un ID en vez del nombre de archivo.
Sofía SwidarowiczMediaNet Software
32
5.- Cocos2D y Plataformas
LevelHelper Kobol2D
Sofía SwidarowiczMediaNet Software
33
CocosBuilder Beta
5.- Cocos2D y Plataformas
Sofía SwidarowiczMediaNet Software
34
5.- Cocos2D y Plataformas
http://code.google.com/p/cocos2d-android/Cocos2D for Android
http://cocos2d-javascript.org/tutorials/breakout-clone-tutorial-part-1Cocos2D for HTML5 JavaScript
Cocos2DX Multiplataforma Android/Windows Phone
http://www.cocos2d-x.org/
Sofía SwidarowiczMediaNet Software
35
Enlaces de InterésCocos2D Página Oficial: http://www.cocos2d-iphone.org
Tutoriales de Ray Wenderlich: http://www.raywenderlich.com/
Foros:
http://www.cocos2d-iphone.org/forum/http://www.raywenderlich.com/forums/
Instalación Cocos2D:
http://phyline.com/blog/2011/12/instalacion-de-cocos2d/
Sofía SwidarowiczMediaNet Software
36
6.- Demo1. Instalación plantillas Cocos2D2. Hola Mundo3. Añadir y Mostrar un Sprite en una escena4. Editar Sprite Sheets5. Añadir y Mostrar el contenido de un sprite sheet6. Animar un Sprite7. Mover un Sprite8. Uso de Labels como puntuación
Código
Sofía SwidarowiczMediaNet Software
38
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 SwidarowiczMediaNet Software
39
//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];
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];
En el .m dentro del init se coloca
Sofía SwidarowiczMediaNet Software
40
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 spritesheetself.spriteFromSheet = [CCSprite spriteWithSpriteFrameName:@"capatostada1.png"];vspriteFromSheet.position = ccp(size.width * 0.1, size.height * 0.5);[spriteSheet addChild:vspriteFromSheet];
Sofía SwidarowiczMediaNet Software
41
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 spritesCCAnimation *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 SwidarowiczMediaNet Software
42
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 realizadosmoves = 0;scoreLabel = [CCLabelTTF labelWithString:@"0" fontName:@"Helvetica" fontSize:24];scoreLabel.position = ccp(190, 300); [self addChild:scoreLabel z:1];
Sofía SwidarowiczMediaNet Software
43
Activación Touch//activamos el touchself.isTouchEnabled = YES;
//4.1 método de movimientos-(void)sumaMovimientos{ moves = moves +1; [scoreLabel setString:[NSString stringWithFormat:@"%i", moves]]; }
Método que suma movimientos
Sofía SwidarowiczMediaNet Software
44
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 SwidarowiczMediaNet Software
45
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 SwidarowiczMediaNet Software
46
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 SwidarowiczMediaNet Software
47
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 SwidarowiczMediaNet Software
48
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;}
//6 deteniendo el movimiento del sprite por pantalla-(void)catMoveEnded { [vspriteFromSheet stopAction:vwalkAction]; [vspriteFromSheet runAction:vwalkAction]; vmoving = FALSE;}
Método para detener las acciones de movimiento y animación