Sesión 5: Desarrollo de videojuegos - Experto Java · Características de los juegos • Gran...

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


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



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://code.google.com/p/cocos2d-android/

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



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



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



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



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



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



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 ...}



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



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



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



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(); }



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));}



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



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



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



¿Preguntas...?

38

Sesión 5: Desarrollo de videojuegos - Experto Java · Características de los juegos • Gran...

Documents

Transcript of Sesión 5: Desarrollo de videojuegos - Experto Java · Características de los juegos • Gran...