Your SlideShare is downloading. ×
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Introducción a Cocos2D: Evento Codemotion
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introducción a Cocos2D: Evento Codemotion

4,571

Published on

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

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,571
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
51
Comments
3
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introducción a Cocos2DSofía Swidarowicz Andrade
  • 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. 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ÑOLAFUNDADA EN 1995TRAYECTORIA DE SPIN-OFFS YSTART-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 ENLA INNOVACIÓNUN ENFOQUE CENTRADOEN EL PROYECTO Sofía Swidarowicz MediaNet Software
  • 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. NUESTRA FÓRMULA:COMPROMISOVISIÓN A LARGO PLAZOEQUIPO Sofía Swidarowicz MediaNet Software
  • 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. Y SOBRE TODO:LAS PERSONAS SONSIEMPRE LO PRIMERO Sofía Swidarowicz MediaNet Software
  • 12. 2.- GeneralidadesFramework 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 BallonSketchShare 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ísticasLibrerías Físicas Chipmunk Box2D Sofía Swidarowicz 22 MediaNet Software
  • 23. 3.- CaracterísticasEfectos Sofía Swidarowicz 23 MediaNet Software
  • 24. 4.- Características Parallax ScrollPartículasParticle Desginer Eje Eje Eje Sofía Swidarowicz 25 MediaNet Software
  • 25. 4.- CaracterísticasSprites Refrescante..pero no. Sofía Swidarowicz 26 MediaNet Software
  • 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. 4.- CaracterísticasSpritesCocos2d usa OpenGL, un framework3D, empleado para crearjuegos/aplicaciones 2D. Sofía Swidarowicz 28 MediaNet Software
  • 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. 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. 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 PlataformasLevelHelper Kobol2D Sofía Swidarowicz 32 MediaNet Software
  • 32. 5.- Cocos2D y Plataformas CocosBuilder Beta Sofía Swidarowicz 33 MediaNet Software
  • 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. 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. 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. 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 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. 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. GraciasSofía Swidarowiczwww.phyline.com @phynet phyonline@gmail.com

×