Introducción a Cocos2D

1,209 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,209
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción a Cocos2D

  1. 1. Introducción a Cocos2DSofía Swidarowicz Andrade
  2. 2. AGENDA1.- Acerca de MediaNet Software2.- Generalidades Cocos2D3.- ¿Cómo se estructura?4.- Características5.- Cocos2D y tipos de plataformas6.- Demo7.- Conclusiones Sofía Swidarowicz 2 MediaNet Software
  3. 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. 4. 1.- Acerca de MediaNet Software
  5. 5. EMPRESA ESPAÑOLAFUNDADA EN 1995TRAYECTORIA DE SPIN-OFFS YSTART-UPS Sofía Swidarowicz MediaNet Software
  6. 6. PERFIL DE EMPRESA:ARTESANÍA:CONOCIMIENTO +EXPERIENCIA http://www.flickr.com/photos/24443965@N08/ Sofía Swidarowicz MediaNet Software
  7. 7. UNA CULTURA BASADA ENLA INNOVACIÓNUN ENFOQUE CENTRADOEN EL PROYECTO Sofía Swidarowicz MediaNet Software
  8. 8. 18/03/12 194 Medianos - Google MapsPERFIL DE EMPRESA:MÁS DE 200ESPECIALISTAS ©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. 9. NUESTRA FÓRMULA:COMPROMISOVISIÓN A LARGO PLAZOEQUIPO Sofía Swidarowicz MediaNet Software
  10. 10. Estrategia IT Oficina de Proyectos Consultoría Desarrollo a medida¿QUÉ HACEMOS? ImplantaciónNUESTRAS ÁREAS DE Asistencia técnica in situACTIVIDAD Sofía Swidarowicz MediaNet Software
  11. 11. Y SOBRE TODO:LAS PERSONAS SONSIEMPRE LO PRIMERO Sofía Swidarowicz MediaNet Software
  12. 12. 2.- GeneralidadesFramework App Multimedia y Juegos 2D iPhone Sofía Swidarowicz 12 MediaNet Software
  13. 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. 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. 15. 2.1- ¿Por qué Cocos2D for iPhone? Tutoriales Comunida d Sofía Swidarowicz MediaNet Software 15
  16. 16. 2.1- ¿Por qué Cocos2D for iPhone? Sir Benfro’s Brilliant BallonSketchShare Tiny Tower Sofía Swidarowicz 16 MediaNet Software
  17. 17. 3.- ¿Cómo se estructura?Escenas (CCScene) Menu Nivel 1 FIN Puntuación Sofía Swidarowicz 17 MediaNet Software
  18. 18. 3.- ¿Cómo se estructura? Escenas (CCScene)Copyright: Nintendo Sofía Swidarowicz 18 MediaNet Software
  19. 19. 3.- ¿Cómo se estructura?Capas (CCLayer) HUD Layer Sofía Swidarowicz 19 MediaNet Software
  20. 20. 3.- ¿Cómo se estructura?Nodos (CCNode) • Layer • Scene • Sprites • Label • Color Sofía Swidarowicz 20 MediaNet Software
  21. 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. 22. 4.- CaracterísticasLibrerías Físicas Chipmunk Box2D Sofía Swidarowicz 22 MediaNet Software
  23. 23. 3.- CaracterísticasEfectos Sofía Swidarowicz 23 MediaNet Software
  24. 24. 4.- Características Parallax ScrollPartículasParticle Desginer Eje Eje Eje Sofía Swidarowicz 25 MediaNet Software
  25. 25. 4.- CaracterísticasSprites Refrescante..pero no. Sofía Swidarowicz 26 MediaNet Software
  26. 26. 4.- Características Sprites• Un tipo de mapa de bits  hardwareespecializado• Utilizados para generar animaciones• Son usados en videojuegos y apps 2D• Mortal Kombat  fotografiaban actorespara hacer cada animación de lospersonajes Sofía Swidarowicz 27 MediaNet Software
  27. 27. 4.- CaracterísticasSpritesCocos2d usa OpenGL, un framework 3D,empleado para crear juegos/aplicaciones2D. Sofía Swidarowicz 28 MediaNet Software
  28. 28. 4.- CaracterísticasUso de Sprites en Cocos2DSpriteSheet  ahorro memoria,carga solo una vez encachéHerramientas• Zwoptex• Sprite Helper• Sprite Packer• Image Magick• Sprite Master• Texture Packer Sofía Swidarowicz 29 MediaNet Software
  29. 29. 4.- CaracterísticasLibrerías Audio• CocosDenshion  motor de audio de baja latencia• Deriba del japonés “Sonidos Electrónicos” y CocosFormatos • Mp3, m4a, Wav  compresión deseada vs peso Sofía Swidarowicz 30 MediaNet Software
  30. 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. 31. 5.- Cocos2D y PlataformasLevelHelper Kobol2D Sofía Swidarowicz 32 MediaNet Software
  32. 32. 5.- Cocos2D y Plataformas CocosBuilder Beta Sofía Swidarowicz 33 MediaNet Software
  33. 33. 5.- Cocos2D y PlataformasCocos2D for Androidhttp://code.google.com/p/cocos2d-android/Cocos2D for HTML5 JavaScripthttp://cocos2d-javascript.org/tutorials/breakout-clone-tutorial-part-1Cocos2DX Multiplataforma Android/Windows Phone http://www.cocos2d-x.org/ Sofía Swidarowicz 34 MediaNet Software
  34. 34. Enlaces de InterésCocos2D 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. 35. 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 Sofía Swidarowicz 36 MediaNet Software
  36. 36. Código
  37. 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. 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. 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. 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. 41. Labels//4 labelCCLabelTTF *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. 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. 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. 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. 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. 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. 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. 48. GraciasSofía Swidarowiczwww.phyline.com @phynet phyonline@gmail.com

×