Introducción a Cocos2D
Descargar como PPSX, PDF0 recomendaciones630 vistas
El documento presenta una introducción al uso de Cocos2d, un framework para desarrollar aplicaciones multimedia y videojuegos en 2D. Detalla la estructura y características de Cocos2d, incluyendo su manejo de escenas, capas, nodos y sprites, así como herramientas y librerías de audio. También se abordan ejemplos de implementación y se proporcionan recursos adicionales para aprender a utilizar el framework.
![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](https://image.slidesharecdn.com/codemotion1-120326103913-phpapp01/85/Introduccion-a-Cocos2D-38-320.jpg)
![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](https://image.slidesharecdn.com/codemotion1-120326103913-phpapp01/85/Introduccion-a-Cocos2D-39-320.jpg)
![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](https://image.slidesharecdn.com/codemotion1-120326103913-phpapp01/85/Introduccion-a-Cocos2D-40-320.jpg)
![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](https://image.slidesharecdn.com/codemotion1-120326103913-phpapp01/85/Introduccion-a-Cocos2D-41-320.jpg)
![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](https://image.slidesharecdn.com/codemotion1-120326103913-phpapp01/85/Introduccion-a-Cocos2D-42-320.jpg)
![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](https://image.slidesharecdn.com/codemotion1-120326103913-phpapp01/85/Introduccion-a-Cocos2D-43-320.jpg)
![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](https://image.slidesharecdn.com/codemotion1-120326103913-phpapp01/85/Introduccion-a-Cocos2D-45-320.jpg)
![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](https://image.slidesharecdn.com/codemotion1-120326103913-phpapp01/85/Introduccion-a-Cocos2D-46-320.jpg)
![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](https://image.slidesharecdn.com/codemotion1-120326103913-phpapp01/85/Introduccion-a-Cocos2D-47-320.jpg)
Introducción a Cocos2D
- 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