presentación de...

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


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



Historia

3

1997 20102001 2003 2005 2007 2008 2011

1997

Del Snake ...

2010

... a Infinity Blade



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



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



Entretenimiento rápido

6

VS

Entretenimiento rápido(Geared)

Juego inmersivo(Myst)



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



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



RBG8888 vs RGB4444

9

RGB8888

RGB4444



Dithering

10

RGB8888 RGB4444 RGB4444+Dithering



Motores

11



Unreal Development Kit

12



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

http://www.cocos2d-iphone.org

http://www.cocos2d-iphone.org

http://code.google.com/p/cocos2d-android/

http://code.google.com/p/cocos2d-android/

http://jmonkeyengine.com

http://jmonkeyengine.com





http://www.andengine.org

http://www.andengine.org



Plantilla de Cocos2D• Instalar con script install-‐templates.sh

14



Componentes de un videojuego 2D

15



Estados del juego

16



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];



Grafo de la escena 2D

18

CCMenu CCLabel

CCSpriteCCLabel CCLayer CCAction

CCLayer

CCScene



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:



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]]];



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];



Creación de fuentes bitmap• Herramienta Hiero Bitmap Font Tool

22



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];



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



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

http://cocosbuilder.com/

http://cocosbuilder.com/



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



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



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



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



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];



¿Preguntas...?

31

presentación de...

Documents