View
10
Download
0
Category
Preview:
Citation preview
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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"];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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 ...}
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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(); }
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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));}
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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]];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Sprites e interacción
¿Preguntas...?
18
Recommended