Presentación de PowerPointexpertojava.ua.es/dadm/restringido/juegos/traspas/sesion...Ciencia de la Computación e IA Sprites e interacción Carga de sprite sheets • Añadir contenido

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

© 2012-2013 Depto. Ciencia de la Computación e IA

Videojuegos

Sesión 2: Sprites e interacción


Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción

Puntos a tratar• Sprites• Fotogramas• Animaciones• Sprite batch• Colisiones• Ciclo del juego• Acciones• Entrada

2



Sprites• Elementos bidimensionales que se integran en la escena• Normalmente se utilizan para personajes y otros elementos en

movimiento• Puede tratarse de imágenes o de animaciones• Tiene una posición en pantalla, y también puede tener rotación y

escala

3



Sprites en Cocos 2D• Se representan con la clase CCSprite

• Se posicionan con position y anchorPoint, como todos los nodos (ccp equivale a CGPointMake)

• Podemos aplicar diferentes transformaciones• rotation, scale, scaleX, scaleY, skewX, skewY

• El orden de dibujado de los nodos viene dado por el orden Z• Propiedad zOrder

4

self.sprite.position = ccp(240, 160);

CCSprite *personaje = [CCSprite spriteWithFile: @"personaje.png"];



Fotogramas• Necesitamos diferentes fotogramas para cada sprite• Crearlos en diferentes imágenes malgastaría memoria de vídeo• Es recomendable empaquetarlos en sprite sheets• Todos los fotogramas en una misma imagen• Aprovecha el tamaño óptimo de texturas de OpenGL

5



Texture Packer• Nos permite crear sprite sheets automáticamente• Se proporciona un conjunto de imágenes• Las empaqueta en una única textura• La versión de pago nos permite optimizar la textura generada

• Genera un fichero plist que podemos leer con Cocos 2D• Para dar soporte a retina creamos un plist adicional con sufijo hd• Usaremos imágenes de mayor resolución, pero mismo nombre

6

http://www.codeandweb.com/texturepacker

sheet.plistsheet.png

sheet-‐hd.plistsheet-‐hd.png





Carga de sprite sheets• Añadir contenido del sprite sheet a la caché de fotogramas

• Cada fotograma se identifica por un nombre• Por defecto, el nombre de fichero de su imagen original

• Como alternativa, podemos obtener primero el fotograma y a partir de él el sprite

7

[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile: @"sheet.plist"];

CCSprite *sprite = [CCSprite spriteWithSpriteFrameName:@"frame01.png"];

CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName: @"frame01.png"];

CCSprite *sprite = [CCSprite spriteWithSpriteFrame: frame];



Animación de sprites• Podemos definir una animación a partir de los fotogramas

• Establecemos la periodicidad

• La añadimos a la caché a animaciones

• Mostramos un fotograma determinado de la animación

8

CCAnimation *animAndar = [CCAnimation animation];[animAndar addFrame: [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName: @"frame01.png"]];[animAndar addFrame: [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName: @"frame02.png"]];

animAndar.delay = 0.25;

[[CCAnimationCache sharedAnimationCache] addAnimation: animAndar name: @"animAndar"];

[sprite setDisplayFrameWithAnimationName: @"animAndar" index: 0];



Sprite batch• Optimiza la forma de renderizar sprites• En OpenGL los sprites son texturas mapeadas sobre geometría• Es más eficiente enviar toda la geometría en una única

operación, y después mapear la textura sobre ella• Se puede hacer para sprites que usen el mismo sprite sheet• Creamos un CCSpriteBatchNode y añadimos sprites como hijos

9

CCSpriteBatchNode *spriteBatch = [CCSpriteBatchNode batchNodeWithFile:@"sheet.png"];[self addChild:spriteBatch];

CCSprite *sprite1 = [CCSprite spriteWithSpriteFrameName:@"frame01.png"];sprite1.position = ccp(50,20);CCSprite *sprite2 = [CCSprite spriteWithSpriteFrameName:@"frame01.png"];sprite2.position = ccp(150,20); [spriteBatch addChild: sprite1];[spriteBatch addChild: sprite2];



Colisiones entre sprites• Detectar interacción entre sprites• Enemigo toca a nuestro personaje• Nuestra bala impacta en el enemigo

• La intersección entre formas complejas es costosa• Simplificamos mediante un bounding box• Rectángulo que abarca el sprite• La intersección de rectángulos es muy sencilla

10

CGRect bbPersonaje = [spritePersonaje boundingBox];CGRect bbEnemigo = [spriteEnemigo boundingBox]; if (CGRectIntersectsRect(bbPersonaje, bbEnemigo)) { // Game over ...}



Motor del juego• El elemento principal es el hilo del juego

• CCDirector gestiona este ciclo, en cada iteración:• Dibuja los nodos de la escena actual• Actualiza los nodos de la escena actual

• Sólo se dibujará y se actualizará la escena actualmente activa

11

while(true) { leeEntrada(); actualizaEscena(); dibujaGraficos(); }



Actualización de la escena• Podemos definir un método en nuestra escena que se ejecute

en cada iteración del ciclo del juego• Un buen lugar para definirlo es la subclase de CCLayer

• Programamos la ejecución del método con

• Implementamos el método anterior

• Delta time (dt)• Nos indica el tiempo transcurrido desde la iteración anterior

Lo utilizaremos para actualizar la escena adecuadamente

12

[self schedule: @selector(update:)];

-‐ (void) update: (ccTime) dt { self.sprite.position = ccpAdd(self.sprite.position, ccp(100*dt, 0));}



Acciones• Actualizan los nodos de la escena automáticamente• Hay acciones instantáneas y acciones con una duración• Todas derivan de CCAction

• Por ejemplo, acción para mover un nodo a una posición

• Ejecutar la acción

• Detener todas las acciones de un nodo

13

CCMoveTo *actionMoveTo = [CCMoveTo actionWithDuration: 3.0 position: ccp(200, 50)];

[sprite runAction: actionMoveTo];

[sprite stopAllActions];



Secuencia de acciones y repetición• Podemos crear una secuencia de acciones

• Podemos repetir una acción o secuencia

14

CCPlace *actionPlace = [CCPlace actionWithPosition:ccp(0, 50)];CCMoveTo *actionMoveTo = [CCMoveTo actionWithDuration: 3.0 position: ccp(200, 50)]; CCSequence *actionSequence = [CCSequence actions: actionMoveTo, actionPlace, nil]; [sprite runAction: actionSequence];

CCRepeatForever *actionRepeat = [CCRepeatForever actionWithAction:actionSequence];[sprite runAction: actionRepeat];



Animaciones

• Podemos reproducir una animación por fotogramas de un sprite mediante una acción CCAnimate• Debemos proporcionar el nombre de la animación en la caché de

animaciones

15

CCAnimate *animate = [CCAnimate actionWithAnimation: [[CCAnimationCache sharedAnimationCache] animationByName:@"animAndar"]]; [self.spritePersonaje runAction: [CCRepeatForever actionWithAction: animate]];



Entrada• Se debe habilitar en la capa (CCLayer)

• Si en algún momento se deshabilita (self.isTouchEnabled = NO) deberemos ejecutar las dos líneas anteriores para volver a habilitarla

• También podemos habilitar el acelerómeto con isAccelerometerEnabled

• Debemos definir un delegado para recibir los eventos• Normalmente nuestra capa se comportará como delegada

16

self.isTouchEnabled = YES;[[CCDirector sharedDirector] touchDispatcher] addTargetedDelegate:self priority:0 swallowsTouches:YES];



Delegado para eventos táctiles

17

-‐ (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event { CGPoint location = [self convertTouchToNodeSpace: touch]; // Se acaba de poner el dedo en la posicion location // Devolvemos YES si nos interesa seguir recibiendo eventos // de dicho contacto return YES;} -‐ (void)ccTouchCancelled:(UITouch *)touch withEvent:(UIEvent *)event { // Se cancela el contacto (posiblemente por salirse fuera del área)} -‐ (void)ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event { CGPoint location = [self convertTouchToNodeSpace: touch]; // Se ha levantado el dedo de la pantalla} -‐ (void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event { CGPoint location = [self convertTouchToNodeSpace: touch]; // Hemos movido el dedo, se actualiza la posicion del contacto}

Convertir coordenadas de pantalla a Cocos 2D



¿Preguntas...?

18

Documents

Presentación de PowerPointexpertojava.ua.es/dadm/restringido/juegos/traspas/sesion...Ciencia de la Computación e IA Sprites e interacción Carga de sprite sheets • Añadir contenido