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
2. AGENDA
1.- 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
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
10. Estrategia IT
Oficina de Proyectos
Consultoría
Desarrollo a medida
¿QUÉ HACEMOS?
Implantación
NUESTRAS ÁREAS DE Asistencia técnica in situ
ACTIVIDAD
Sofía Swidarowicz
MediaNet Software
11. Y SOBRE TODO:
LAS PERSONAS SON
SIEMPRE LO PRIMERO
Sofía Swidarowicz
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
26. 4.- Características
Sprites
• 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
Sofía Swidarowicz 27
MediaNet Software
28. 4.- Características
Uso de Sprites en Cocos2D
SpriteSheet ahorro memoria,carga solo una vez en
caché
Herramientas
• Zwoptex
• Sprite Helper
• Sprite Packer
• Image Magick
• Sprite Master
• Texture Packer
Sofía Swidarowicz 29
MediaNet Software
29. 4.- Características
Librerías Audio
• CocosDenshion motor de audio de baja latencia
• Deriba del japonés “Sonidos Electrónicos” y Cocos
Formatos
• 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
33. 5.- Cocos2D y Plataformas
Cocos2D for Android
http://code.google.com/p/cocos2d-android/
Cocos2D for HTML5 JavaScript
http://cocos2d-javascript.org/tutorials/breakout-clone-tutorial-part-1
Cocos2DX Multiplataforma Android/Windows Phone
http://www.cocos2d-x.org/
Sofía Swidarowicz 34
MediaNet Software
34. Enlaces de Interés
Cocos2D 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.- Demo
1. Instalación plantillas Cocos2D
2. Hola Mundo
3. Añadir y Mostrar un Sprite en una escena
4. Editar Sprite Sheets
5. Añadir y Mostrar el contenido de un sprite sheet
6. Animar un Sprite
7. Mover un Sprite
8. Uso de Labels como puntuación
Sofía Swidarowicz 36
MediaNet Software
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 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 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