sesión 5: desarrollo de videojuegos - experto java · características de los juegos • gran...
TRANSCRIPT
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2011-2012 Depto. Ciencia de la Computación e IA
Gráficos y multimedia
Sesión 5: Desarrollo de videojuegos
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Puntos a tratar• Videojuegos para dispositivos móviles• Texturas en OpenGL• Motor Cocos2D• Escena 2D• Sprites• Fondos• Acciones
2
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Historia
3
1997 20102001 2003 2005 2007 2008 2011
1997
Del Snake ...
2010
... a Infinity Blade
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Videojuegos para dispositivos móviles• No están diseñados específicamente para jugar
• Están más limitados que otros dispositivos• Escasa memoria / memoria de vídeo• Tamaño de la aplicación• Menor capacidad de procesamiento• Pantalla reducida• Diferente interfaz de entrada • Almacenamiento limitado• Poco ancho de banda• Posibles interrupciones
4
Y no tan limitados
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Características de los juegos• Gran audiencia• Siempre los llevamos encima
• Útiles para “hacer tiempo”• Intuitivos• Pausables• Guardar progreso
• Rejugabilidad• Recompensas y logros• Juegos sociales
5
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Entretenimiento rápido
6
VS
Entretenimiento rápido(Geared)
Juego inmersivo(Myst)
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Optimización de texturas
• La memoria de video es limitada• Debemos reducir los binarios al máximo• Acelerar render• Formatos de textura
7
RGB8888 32 bits, canal alpha 8 bits
RGB4444 16 bits, canal alpha 4 bits
RGB565 16 bits, sin canal alpha (para fondos)
RGB5551 16 bits, canal alpha de 1 bit
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Compresión de texturas• Existen formatos de compresión con pérdidas
8
– Dependiente del disposiHvo• ATITC, PVRTC, DXT
– Todos los disposiHvos OpenGL ES 2.0 soportan ETC1• $ANDROID_SDK_HOME/tools/etc1tool• No Hene canal alpha
– PVRTC– 2 ó 4 bits
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
RBG8888 vs RGB4444
9
RGB8888
RGB4444
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Dithering
10
RGB8888 RGB4444 RGB4444+Dithering
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Motores
11
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Unreal Development Kit
12
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Motores Open Source para móviles
13
http://www.andengine.org/
http://code.google.com/p/libgdx/
http://www.ogre3d.org
http://jmonkeyengine.com/
http://www.cocos2d-iphone.org/http://code.google.com/p/cocos2d-android/
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Plantilla de Cocos2D• Instalar con script install-‐templates.sh
14
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Componentes de un videojuego 2D
15
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Estados del juego
16
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Gestión de estados en Cocos2D
• La clase principal de Cocos2D es CCDirector• Tenemos un singleton que gestiona la ejecución del juego• Establece el estado actual, y permite transiciones a otros estados
• Los estado se representan mediante escena (CCScene)• Las escenas contienen un grafo de nodos (CCNode)• Representan los elementos que intervienen en la escena• Sprites, fondos, texto, botones, capas
17
[CCDirector sharedDirector];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Grafo de la escena 2D
18
CCMenu CCLabel
CCSpriteCCLabel CCLayer CCAction
CCLayer
CCScene
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Capas• Las escenas normalmente tienen una capa principal• Implementamos una subclase de la capa (CCLayer)
19
@interface MenuPrincipalLayer : CCLayer+(CCScene *) scene;@end
+(CCScene *) scene{ CCScene *scene = [CCScene node]; MenuPrincipalLayer *layer = [MenuPrincipalLayer node]; [scene addChild: layer]; return scene;}
-‐(id) init{ if( (self=[super init])) { // Inicializar componentes de la capa ... } return self;}
Inicializamos todos los elementos de la capa (nodos) y los añadimos como hijos con addChild:
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Transiciones entre escenas
• Mostrar escena inicial al ejecutar el juego
• Cambiar a otra escena
• Cambiar a otra escena con una transición
20
[[CCDirector sharedDirector] runWithScene: [MenuPrincipalLayer scene]];
[[CCDirector sharedDirector] replaceScene: [PuntuacionesLayer scene]];
[[CCDirector sharedDirector] replaceScene: [CCTransitionFade transitionWithDuration:0.5f scene:[PuntuacionesLayer scene]]];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Fuentes• Podemos utilizar dos tipos de fuentes• Fuentes TrueType del sistema• Fuentes bitmap personalizadas
• Fuentes TrueType
• Fuentes bitmap (formato.fnt)
21
CCLabelTTF *label = [CCLabelTTF labelWithString:@"Game Over" fontName:@"Marker Felt" fontSize:64];[self addChild: label];
CCLabelBMFont *label = [CCLabelBMFont labelWithString:@"Game Over" fntFile:@"fuente.fnt"];[self addChild: label];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Creación de fuentes bitmap• Herramienta Hiero Bitmap Font Tool
22
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Menús• Pueden contener items de texto o imágenes
23
CCMenuItemImage * item1 = [CCMenuItemImage itemFromNormalImage:@"nuevo_juego.png" selectedImage:@"nuevo_juego_selected.png" target:self selector:@selector(comenzar:)]; CCMenuItemImage * item2 = [CCMenuItemImage itemFromNormalImage:@"continuar.png" selectedImage:@"continuar_selected.png" target:self selector:@selector(continuar:)]; CCMenuItemImage * item3 = [CCMenuItemImage itemFromNormalImage:@"opciones.png" selectedImage:@"opciones_selected.png" target:self selector:@selector(opciones:)]; CCMenu * menu = [CCMenu menuWithItems: item1, item2, item3, nil];[menu alignItemsVertically]; [self addChild: menu];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Sprites• 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
24
self.sprite.position = ccp(240, 160);
CCSprite *personaje = [CCSprite spriteWithFile: @"personaje.png"];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
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• Podemos crearlos con TexturePacker (formato .plist)
25
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
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
26
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile: @"sheet.plist"];
CCSprite *sprite = [CCSprite spriteWithSpriteFrameName:@"frame01.png"];
CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName: @"frame01.png"];
CCSprite *sprite = [CCSprite spriteWithSpriteFrame: frame];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
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
27
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];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
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
28
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];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Colisiones entre sprites• Detectar interacción entre sprites• Enemigo toca a nuestro personaje• Nuestra bala impactar en el enemigo
• La intersección entre forma complejas es costosa• Simplificamos mediante un bounding box• Rectángulo que abarca el sprite• La intersección de rectángulos es muy sencilla
29
CGRect bbPersonaje = [spritePersonaje boundingBox];CGRect bbEnemigo = [spriteEnemigo boundingBox]; if (CGRectIntersectsRect(bbPersonaje, bbEnemigo)) { // Game over ...}
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Fondo• El fondo habitualmente es muy extenso• No podemos crear una imagen con todo el fondo del nivel• Creamos el fondo como un mosaico a partir de piezas• Es lo que se conoce como tilemap
30
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Herramienta Tiled Map Editor• Se puede utilizar para crear el mosaico• Guarda el resultado en formato TMX• Permite crear mapas ortogonales e isométricos
31
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Carga del mapa
• Cocos2D soporta el formato TMX
• Podemos añadirlo como nodo a la escena con addChild:
• Dimensiones del mapa• Dimensiones de cada tile: ancho x alto• Celdas del mosaico: columnas x filas• Tamaño del mapa (ancho*columnas) x (alto*filas)
32
CCTMXTiledMap *fondo = [CCTMXTiledMap tiledMapWithTMXFile: @"mapa.tmx"];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
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
33
while(true) { leeEntrada(); actualizaEscena(); dibujaGraficos(); }
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
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
34
[self schedule: @selector(update:)];
-‐ (void) update: (ccTime) dt { self.sprite.position = ccpAdd(self.sprite.position, ccp(100*dt, 0));}
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
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
35
CCMoveTo *actionMoveTo = [CCMoveTo actionWithDuration: 3.0 position: ccp(200, 50)];
[sprite runAction: actionMoveTo];
[sprite stopAllActions];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
Secuencia de acciones y repetición• Podemos crear una secuencia de acciones
• Podemos repetir una acción o secuencia
36
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];
Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles
Gráficos y multimedia © 2011-2012 Depto. Ciencia de la Computación e IA Desarrollo de videojuegos
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
37
CCAnimate *animate = [CCAnimate actionWithAnimation: [[CCAnimationCache sharedAnimationCache] animationByName:@"animAndar"]]; [self.spritePersonaje runAction: [CCRepeatForever actionWithAction: animate]];