Introducción a Cocos2D

Introducción a Cocos2D

Sofía Swidarowicz Andrade

Sofía SwidarowiczMediaNet Software

2

AGENDA1.- 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


Un poco de mí

• Licenciada en Informática • Master en Ing Multimedia

Desarrollado serious games, y minijuegos e interactivos en cocos2D.

1.- Acerca de MediaNet Software


EMPRESA ESPAÑOLA

FUNDADA EN 1995

TRAYECTORIA DE SPIN-OFFS Y START-UPS

http://www.buyvip.com/index.jsp


PERFIL DE EMPRESA:

ARTESANÍA:CONOCIMIENTO + EXPERIENCIA

http://www.flickr.com/photos/24443965@N08/


UNA CULTURA BASADA EN LA INNOVACIÓN

UN ENFOQUE CENTRADO EN EL PROYECTO


PERFIL DE EMPRESA:

MÁS DE 200 ESPECIALISTAS


NUESTRA FÓRMULA:

COMPROMISOVISIÓN A LARGO PLAZOEQUIPO


Estrategia IT

Oficina de Proyectos

Consultoría

Desarrollo a medida

Implantación

Asistencia técnica in situ

¿QUÉ HACEMOS?

NUESTRAS ÁREAS DE ACTIVIDAD

Com

parti

ción

de o

bjeti

vos


Y SOBRE TODO:

LAS PERSONAS SON SIEMPRE LO PRIMERO


12

2.- Generalidades

Framework App Multimedia y Juegos 2D iPhone


13

2.1- ¿Por qué Cocos2D for iPhone?

Approves!

• Flexibilidad Librerías en C, etc• Fácil de usar


14


http://youtu.be/hvDCmKaJPak

Enlace a video: Ver en youtube

http://youtu.be/hvDCmKaJPak


15


Comunidad

Tutoriales


16


Tiny Tower

Sir Benfro’s Brilliant Ballon

SketchShare


17


Escenas (CCScene)

Puntuación

FINNivel 1Menu


18


Escenas (CCScene)

Copyright: Nintendo


19

3.- ¿Cómo se estructura?Capas (CCLayer)

HUD Layer


20


Nodos (CCNode)

• Layer• Scene• Sprites• Label• Color


21


Director (CCDirector)

• Decide cuando y cómo se ejecutan las escenas.

• Controla la ventana principal • Se coloca siempre al inicio de una escena


22


Librerías Físicas

Box2DChipmunk


23

Efectos



25

Partículas

Particle Desginer

Eje Eje

Parallax Scroll

Eje



26

Sprites


Refrescante..pero no.


27

Sprites4.- Características

• 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


28

Sprites4.- Características

Cocos2d usa OpenGL, un framework 3D, empleado para crear juegos/aplicaciones 2D.


29

Uso de Sprites en Cocos2D


Herramientas

SpriteSheet ahorro memoria,carga solo una vez en caché

• Zwoptex• Sprite Helper• Sprite Packer• Image Magick• Sprite Master• Texture Packer


30


• Mp3, m4a, Wav compresión deseada vs peso

Librerías Audio• CocosDenshion motor de audio de baja latencia• Deriba del japonés “Sonidos Electrónicos” y Cocos

Formatos


31


¿Cómo usar CocosDenshion?

Simple Audio Engine

CD Audio ManagerCD Sound Engine• Hasta 32 pistas

multiples• iOS 2.1.x o mayor

• Pistas de larga duración múltiple

• Se identifica por un ID en vez del nombre de archivo.


32

5.- Cocos2D y Plataformas

LevelHelper Kobol2D

http://www.levelhelper.org/

http://www.kobold2d.com/display/KKSITE/Home


33

CocosBuilder Beta


http://cocosbuilder.com/


34


http://code.google.com/p/cocos2d-android/Cocos2D for Android

http://cocos2d-javascript.org/tutorials/breakout-clone-tutorial-part-1Cocos2D for HTML5 JavaScript

Cocos2DX Multiplataforma Android/Windows Phone

http://www.cocos2d-x.org/


35

Enlaces de InterésCocos2D Página Oficial: http://www.cocos2d-iphone.org

Tutoriales de Ray Wenderlich: http://www.raywenderlich.com/

Foros:

http://www.cocos2d-iphone.org/forum/http://www.raywenderlich.com/forums/

Instalación Cocos2D:

http://phyline.com/blog/2011/12/instalacion-de-cocos2d/


36

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

Código


38

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


39

//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];

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];

En el .m dentro del init se coloca


40

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 spritesheetself.spriteFromSheet = [CCSprite spriteWithSpriteFrameName:@"capatostada1.png"];vspriteFromSheet.position = ccp(size.width * 0.1, size.height * 0.5);[spriteSheet addChild:vspriteFromSheet];


41

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 spritesCCAnimation *walkAnim = [CCAnimation animationWithFrames:walkAnimFrames delay:0.1f];self.walkAction = [CCRepeatForever actionWithAction: [CCAnimate actionWithAnimation:walkAnim restoreOriginalFrame:NO]]; [vBatchNode addChild:vspriteFromSheet z:-1];[vspriteFromSheet runAction:vwalkAction];


42

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 realizadosmoves = 0;scoreLabel = [CCLabelTTF labelWithString:@"0" fontName:@"Helvetica" fontSize:24];scoreLabel.position = ccp(190, 300); [self addChild:scoreLabel z:1];


43

Activación Touch//activamos el touchself.isTouchEnabled = YES;

//4.1 método de movimientos-(void)sumaMovimientos{ moves = moves +1; [scoreLabel setString:[NSString stringWithFormat:@"%i", moves]]; }

Método que suma movimientos


44

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);


45

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; }


46

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]; }


47

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];

}


48

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;}

//6 deteniendo el movimiento del sprite por pantalla-(void)catMoveEnded { [vspriteFromSheet stopAction:vwalkAction]; [vspriteFromSheet runAction:vwalkAction]; vmoving = FALSE;}

Método para detener las acciones de movimiento y animación

Gracias

Sofía Swidarowicz

www.phyline.com

@phynet

[email protected]

Introducción a Cocos2D

Technology

Transcript of Introducción a Cocos2D