• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introducción a Cocos2D: Evento Codemotion
 

Introducción a Cocos2D: Evento Codemotion

on

  • 4,514 views

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

Statistics

Views

Total Views
4,514
Views on SlideShare
2,618
Embed Views
1,896

Actions

Likes
1
Downloads
47
Comments
3

4 Embeds 1,896

http://phyline.com 1892
http://webcache.googleusercontent.com 2
http://ranksit.com 1
http://www.hsmaker.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
  • (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 :)
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introducción a Cocos2D: Evento Codemotion Introducción a Cocos2D: Evento Codemotion Presentation Transcript

    • Introducción a Cocos2DSofía Swidarowicz Andrade
    • 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
    • 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
    • 1.- Acerca de MediaNet Software
    • EMPRESA ESPAÑOLAFUNDADA EN 1995TRAYECTORIA DE SPIN-OFFS YSTART-UPS Sofía Swidarowicz MediaNet Software
    • PERFIL DE EMPRESA:ARTESANÍA:CONOCIMIENTO +EXPERIENCIA http://www.flickr.com/photos/24443965@N08/ Sofía Swidarowicz MediaNet Software
    • UNA CULTURA BASADA ENLA INNOVACIÓNUN ENFOQUE CENTRADOEN EL PROYECTO Sofía Swidarowicz MediaNet Software
    • 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
    • NUESTRA FÓRMULA:COMPROMISOVISIÓN A LARGO PLAZOEQUIPO Sofía Swidarowicz MediaNet Software
    • 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
    • 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 MediaNet Software
    • 2.1- ¿Por qué Cocos2D for iPhone? Approves! • Flexibilidad  Librerías en C, etc • Fácil de usar Sofía Swidarowicz 13 MediaNet Software
    • 2.1- ¿Por qué Cocos2D for iPhone?Enlace a video: Ver en youtube http://youtu.be/hvDCmKaJPak Sofía Swidarowicz 14 MediaNet Software
    • 2.1- ¿Por qué Cocos2D for iPhone? Tutoriales Comunida d Sofía Swidarowicz MediaNet Software 15
    • 2.1- ¿Por qué Cocos2D for iPhone? Sir Benfro’s Brilliant BallonSketchShare Tiny Tower Sofía Swidarowicz 16 MediaNet Software
    • 3.- ¿Cómo se estructura?Escenas (CCScene) Menu Nivel 1 FIN Puntuación Sofía Swidarowicz 17 MediaNet Software
    • 3.- ¿Cómo se estructura? Escenas (CCScene)Copyright: Nintendo Sofía Swidarowicz 18 MediaNet Software
    • 3.- ¿Cómo se estructura?Capas (CCLayer) HUD Layer Sofía Swidarowicz 19 MediaNet Software
    • 3.- ¿Cómo se estructura?Nodos (CCNode) • Layer • Scene • Sprites • Label • Color Sofía Swidarowicz 20 MediaNet Software
    • 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
    • 4.- CaracterísticasLibrerías Físicas Chipmunk Box2D Sofía Swidarowicz 22 MediaNet Software
    • 3.- CaracterísticasEfectos Sofía Swidarowicz 23 MediaNet Software
    • 4.- Características Parallax ScrollPartículasParticle Desginer Eje Eje Eje Sofía Swidarowicz 25 MediaNet Software
    • 4.- CaracterísticasSprites Refrescante..pero no. Sofía Swidarowicz 26 MediaNet Software
    • 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
    • 4.- CaracterísticasSpritesCocos2d usa OpenGL, un framework3D, empleado para crearjuegos/aplicaciones 2D. Sofía Swidarowicz 28 MediaNet Software
    • 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
    • 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
    • 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
    • 5.- Cocos2D y PlataformasLevelHelper Kobol2D Sofía Swidarowicz 32 MediaNet Software
    • 5.- Cocos2D y Plataformas CocosBuilder Beta Sofía Swidarowicz 33 MediaNet Software
    • 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
    • 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
    • 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
    • Código
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • GraciasSofía Swidarowiczwww.phyline.com @phynet phyonline@gmail.com