Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IA
Videojuegos
Sesión 1: Motores de videojuegos
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Puntos a tratar• Videojuegos para dispositivos móviles• Texturas en OpenGL• Motor Cocos2D• Escena 2D• Transiciones• Fuentes• Menús• Pantalla retina• Cocos Builder
2
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Historia
3
1997 20102001 2003 2005 2007 2008 2011
1997
Del Snake ...
2010
... a Infinity Blade
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores 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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores 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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Entretenimiento rápido
6
VS
Entretenimiento rápido(Geared)
Juego inmersivo(Myst)
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores 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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores 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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
RBG8888 vs RGB4444
9
RGB8888
RGB4444
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Dithering
10
RGB8888 RGB4444 RGB4444+Dithering
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Motores
11
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Unreal Development Kit
12
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores 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://www.cocos2d-x.org
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Plantilla de Cocos2D• Instalar con script install-‐templates.sh
14
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Componentes de un videojuego 2D
15
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Estados del juego
16
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores 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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Grafo de la escena 2D
18
CCMenu CCLabel
CCSpriteCCLabel CCLayer CCAction
CCLayer
CCScene
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores 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:
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores 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]]];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores 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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Creación de fuentes bitmap• Herramienta Hiero Bitmap Font Tool
22
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores 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];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Pantalla retina• La API de Cocos2D normalmente trabaja en puntos• Independiente de la densidad de pantalla, siempre 480x320 (iPhone)
• En las imágenes si que debemos tener en cuenta la densidad• Utilizamos los siguientes sufijos
• Se pueden aplicar a cualquier recurso cargado por Cocos2D
24
Sufijo Dispositivo Ejemplo imagen Ejemplo fuente
Sin sufijo iPhone boton.png fuente.fnt
-‐hd iPhone retina boton-‐hd.png fuente-‐hd.fnt
-‐ipad iPad boton-‐ipad.png fuente-‐ipad.fnt
-‐ipadhd iPad retina boton-‐ipadhd.png fuente-‐ipadhd.fnt
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Cocos Builder• Diseñar los menús en código es complicado• Debemos posicionar los elementos y probar • Seremos más productivos si contamos con editor gráfico• Cocos Builder nos permite crear composiciones de forma visual
25
http://cocosbuilder.com
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Proyecto y ficheros• Podemos crear un proyecto CocosBuilder en cualquier directorio• El fichero principal tiene extensión .ccbproj• Cada composición se crea en un fichero .ccb• Si queremos crear una nueva pantalla, creamos nodo CCLayer
• Se puede hacer compatible con diferentes tipos de dispositivos
26
• Se pueden añadir a pantalla distintos tipos de nodos
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Nodos
• Al pulsar sobre un nodo, a la derecha vemos sus propiedades
• Podemos copiar en el directorio del proyecto recursos que podrán ser utilizados en las propiedades de los nodos (imágenes, fuentes, etc)
• Existen distintas formas de posicionamiento, que nos permiten hacerlo independiente del dispositivo
27
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Animaciones• Podemos crear animaciones mediante fotogramas clave• Añadimos fotogramas clave a distintas propiedades• Posición, escala, rotación, opacidad, etc
• Se añaden con Animation > Insert Keyframe• Podemos mover los keyframes en el tiempo• Hacer doble click sobre un keyframe para cambiar sus
propiedades en el panel derecho• Podemos cambiar la duración del timeline (por defecto 10s)
28
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Conexión con el código• Podemos relacionar la capa con una
clase de tipo CCLayer• Dicha clase se conoce como
Document root• Podemos conectar eventos de
botones con métodos del document root
• Deberemos implementar la clase
29
@interface UAMainMenuLayer : CCLayer -‐ (void)playGame:(id)sender; @end
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Videojuegos © 2012-2013 Depto. Ciencia de la Computación e IA Motores de videojuegos
Cargar pantalla en Cocos 2D• Debemos publicar las composiciones con File > Publish• Copiar los ficheros generados .ccbi al proyecto Xcode
• Añadimos librerías del lector de fichero CCB al proyecto• Se pueden encontrar en los ejemplo de Cocos Builder
• Cargamos la escena del fichero
• Podemos especificar tamaño y densidad de pantalla
30
#import "CCBReader.h"...[director runWithScene: [CCBReader sceneWithNodeGraphFromFile:@"MainMenu.ccbi"]];
#import "CCNode+CCBRelativePositioning.h"...CGSize screenSize = CGSizeMake(480.0f, 320.0f);[CCBReader setResolutionScale: 1.0f];CCScene* scene = [CCBReader sceneWithNodeGraphFromFile:@"MainMenu.ccbi" owner:NULL parentSize:screenSize];