Introducción a Cocos2DSofía Swidarowicz Andrade
AGENDA1.- Acerca de MediaNet Software2.- Generalidades Cocos2D3.- ¿Cómo se estructura?4.- Características5.- Cocos2D y tip...
Un poco de mí• Licenciada en Informática• Master en Ing Multimedia             Desarrollado serious games, y minijuegos e ...
1.- Acerca de MediaNet Software
EMPRESA ESPAÑOLAFUNDADA EN 1995TRAYECTORIA DE SPIN-OFFS YSTART-UPS                             Sofía Swidarowicz          ...
PERFIL DE EMPRESA:ARTESANÍA:CONOCIMIENTO +EXPERIENCIA          http://www.flickr.com/photos/24443965@N08/                 ...
UNA CULTURA BASADA ENLA INNOVACIÓNUN ENFOQUE CENTRADOEN EL PROYECTO                        Sofía Swidarowicz              ...
18/03/12                                       194 Medianos - Google MapsPERFIL DE EMPRESA:MÁS DE 200ESPECIALISTAS        ...
NUESTRA FÓRMULA:COMPROMISOVISIÓN A LARGO PLAZOEQUIPO                       Sofía Swidarowicz                       MediaNe...
Estrategia IT                    Oficina de Proyectos                         Consultoría                    Desarrollo a ...
Y SOBRE TODO:LAS PERSONAS SONSIEMPRE LO PRIMERO                     Sofía Swidarowicz                     MediaNet Software
2.- GeneralidadesFramework App Multimedia y     Juegos 2D iPhone                       Sofía Swidarowicz   12             ...
2.1- ¿Por qué Cocos2D for iPhone?               Approves!   • Flexibilidad  Librerías en C, etc   • Fácil de usar        ...
2.1- ¿Por qué Cocos2D for iPhone?Enlace a video:       Ver en youtube                  http://youtu.be/hvDCmKaJPak        ...
2.1- ¿Por qué Cocos2D for iPhone?    Tutoriales                 Comunida                 d       Sofía Swidarowicz        ...
2.1- ¿Por qué Cocos2D for iPhone?                           Sir Benfro’s Brilliant BallonSketchShare              Tiny Tow...
3.- ¿Cómo se estructura?Escenas (CCScene)       Menu     Nivel 1     FIN               Puntuación                         ...
3.- ¿Cómo se estructura?  Escenas (CCScene)Copyright: Nintendo                                           Sofía Swidarowicz...
3.- ¿Cómo se estructura?Capas (CCLayer)            HUD Layer                          Sofía Swidarowicz   19              ...
3.- ¿Cómo se estructura?Nodos (CCNode) •   Layer •   Scene •   Sprites •   Label •   Color                              So...
3.- ¿Cómo se estructura?Director (CCDirector) • Decide cuando y cómo se ejecutan las escenas. • Controla la ventana princi...
4.- CaracterísticasLibrerías Físicas      Chipmunk                Box2D                                  Sofía Swidarowicz...
3.- CaracterísticasEfectos                                Sofía Swidarowicz   23                                MediaNet S...
4.- Características                        Parallax ScrollPartículasParticle Desginer                     Eje             ...
4.- CaracterísticasSprites               Refrescante..pero no.                                  Sofía Swidarowicz   26    ...
4.- Características Sprites• Un tipo de mapa de bits  hardwareespecializado• Utilizados para generar animaciones• Son usa...
4.- CaracterísticasSpritesCocos2d usa OpenGL, un framework3D, empleado para crearjuegos/aplicaciones 2D.                  ...
4.- CaracterísticasUso de Sprites en Cocos2DSpriteSheet  ahorro memoria,carga solo una vez encachéHerramientas• Zwoptex• ...
4.- CaracterísticasLibrerías Audio• CocosDenshion  motor de audio de baja latencia• Deriba del japonés “Sonidos Electróni...
4.- Características         ¿Cómo usar CocosDenshion?                 Simple Audio Engine    CD Sound Engine              ...
5.- Cocos2D y PlataformasLevelHelper        Kobol2D                         Sofía Swidarowicz   32                        ...
5.- Cocos2D y Plataformas     CocosBuilder Beta                         Sofía Swidarowicz   33                         Med...
5.- Cocos2D y PlataformasCocos2D for Androidhttp://code.google.com/p/cocos2d-android/Cocos2D for HTML5 JavaScripthttp://co...
Enlaces de InterésCocos2D Página Oficial:         Foros:http://www.cocos2d-iphone.org   http://www.cocos2d-iphone.org/foru...
6.- Demo1.   Instalación plantillas Cocos2D2.   Hola Mundo3.   Añadir y Mostrar un Sprite en una escena4.   Editar Sprite ...
Código
En el .h se coloca // HelloWorldLayer @interface HelloWorldLayer : CCLayer {    CCSprite * vspriteFromSheet;    CCSpriteBa...
En el .m dentro del init se coloca Background//1 Instanciar la clase CGSize para obtener el tamaño de pantalla  CGSize siz...
Sprites//2 Usando el SpriteSheet.[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"NCat.plist"];CCSpr...
Animación de Sprites//3 animando los sprites. Se crea un array y se llena con los sprites  NSMutableArray *walkAnimFrames ...
Labels//4 labelCCLabelTTF *labelPuntos = [CCLabelTTF labelWithString:@"Movimientos" fontName:@"Helvetica"fontSize:24];labe...
Activación Touch    //activamos el touch    self.isTouchEnabled = YES;Método que suma movimientos//4.1 método de movimient...
Método que calcula el movimiento de los sprites del spritesheet//5 moviendo el sprite-(void) ccTouchEnded:(UITouch *)touch...
Método que calcula el movimiento de los sprites del spritesheet//Lo que durará el gato en movimiento al trasladarse. Lo ob...
Método que calcula el movimiento de los sprites del spritesheet//Hacemos que el sprite detenga la acción de movimiento o d...
Método que calcula el movimiento de los sprites del spritesheet self.moveAction = [CCSequence actions:               [CCMo...
Método para calcular el touch-(void) registerWithTouchDispatcher{   [[CCTouchDispatcher sharedDispatcher] addTargetedDeleg...
GraciasSofía Swidarowiczwww.phyline.com    @phynet     phyonline@gmail.com
Upcoming SlideShare
Loading in...5
×

Introducción a Cocos2D: Evento Codemotion

4,725

Published on

Esta es la presentación hecha para el taller Cocos2D del evento Codemotion.

El código fuente del ejemplo puedes obtenerlo a través del siguiente enlace: (al final de la página)

http://www.medianet.es/1499/nuestros-companeros-en-codemotion/

O por descarga directa en: http://t.co/lPRNbbUF

:D

Published in: Education
3 Comments
1 Like
Statistics
Notes
  • Hola
    Yo os dejo info de este curso de nivel basico de Cocos2D (intensivo de fin de semana)
    Estoy pensando en matricularme y asi formarme un poco en este tema.
    ¿Como lo veis? http://agbo.biz/tech/curso-cocos2d-basico/
    Gracias
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hola Claudio. En la slide coloqué 'Solo en videojuegos 2D' porque me refería a que los videojuegos en 3D no se usan sprites. Arriba de esa línea había colocado 'usado para generar animaciones'. Quizá debí colocar en cualquier aplicación-videojuego. Pero en la charla se habló un poco mejor jaja.

    Abrazo! :D
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • (dispositiva 26) Los sprites no son utilizados solamente en videosjuegos, sino que además, son enormemente utilizados en sitios web por medio de CSS para aminorar la cantidad de imágenes y el manejo de su carga (peso).

    un abrazo :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,725
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
52
Comments
3
Likes
1
Embeds 0
No embeds

No notes for slide

Introducción a Cocos2D: Evento Codemotion

  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 framework3D, empleado para crearjuegos/aplicaciones 2D. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×