Programación Gráfica II

4. Diseño de menús.

Objetivo

En esta clase veremos cómo diseñar menús simples,

esto quiere decir menús 2D utilizando sólo botones.

Modelaremos los estados en un videojuego.

Crearemos el menú de entrada al videojuego y el menú

de pause.

Para esto usaremos la librería de Sprites, Input y Sonido

de DarkGDK..

Ejemplos: Menú Principal

Ejemplos: Menú Principal

Ejemplos: Menú Principal

Ejemplos: Menú Principal

Ejemplos: Menú Principal

Ejemplos: Menú Principal

Ejemplos: Menú Principal

Manejo de estados.

Máquinas de estados: La teoría

Recordemos cómo manejar los diferentes estados que

puede tener un videojuego (formalmente llamado

“autómatas finitos”)

Estados principales del videojuego

Estados en el videojuego:

Inicio.

Menú principal.

Loop Principal.

Pausa.

Salir (Créditos).

Podemos notar que cada estado tiene sub-estados, pero

los modelaremos cuando llegue el momento.

Estados principales del videojuego

Enumeremos los estado

En el manejador principal del videojuego debemos

enumerar los estado, en nuestro caso GameManager.

Manejo de estados

Un videojuego debe tener unas funciones principales

que sean las que se llamen cada vez que se genera un

nuevo elemento. Por ejemplo: cargar data, eliminar data

y el game loop de éste.

Manejo de estados

Además cada estado debería tener asignadas funciones para

cada uno de los eventos, en nuestro caso que carguen,

eliminen y actualicen sus datos.

Por ejemplo, para el estado StartGame tenemos las

siguientes funciones:

Manejo de estados

Finalmente cada función principal

de las que habíamos creado

debería llamar a las funciones que

se encargan de manejar los

eventos de cada uno de los

estados.

DarkGDK

Sprites

Crear un Sprite Animado.

void dbCreateAnimatedSprite ( int iSprite, char* szFilename,

int iAcross, int iDown, int iImage )

iSprite = id del sprite.

szFilename = ruta de la imagen.

iAcross = frames hacia la derecha

iDown = frames hacia la izquierda.

iImage = id de la Imagen.

iAcross

iDown

Sprites

Obtener posición.

Posición X int dbSpriteX ( int iSprite )

Posición en Y int dbSpriteY ( int iSprite )

Obtener posición.

Ancho int dbSpriteWidth ( int iSprite )

Largo

int dbSpriteHeight ( int iSprite ) (x,y) width

height

Sprites

Animar

void dbPlaySprite ( int iSprite, int iStart, int iEnd, int iDelay )

iStart = número inicial del frame de la animación.

iEnd = número final del frame de la animación.

iDelay = tiempo entre sprites.

Sprites

Mover

Para posicionar al sprite en una posición (x,y)

void dbSprite ( int iSprite, int iX, int iY, int iImage )

Para desplazar al sprite

void dbOffsetSprite ( int iSprite, int iX, int iY )

Para mover de forma top-down

void dbMoveSprite ( int iNUmber, float fVelocity )

Sprites

Efectos

Transludo void dbSetSpriteAlpha ( int iSprite, int iAlpha )

Color difuso void dbSetSpriteDiffuse ( int iSprite, int iRed, int iGreen, int iBlue )

Modificar visión UV void dbSetSpriteTextureCoord ( int iSprite, int iVertex, float fU, float fV )

Mouse

Obtener la posición del mouse int dbMouseX ( )

int dbMouseY ( )

int dbMouseZ ( )

Posicionar el mouse

void dbPositionMouse ( int iX, int iY )

Mostrar/ocultar el puntero

void dbShowMouse ( )

void dbHideMouse ( )

Mouse

Obtener botón presionado int dbMouseClick ( )

Posibles valores Izquierdo (L) = 1

Derecho (R) = 2

Other 3 (O3) = 4

Other 4 (O4) = 8

Combinaciones de los botones !!!

Trabaja en forma binaria.

Por lo que si queremos ver las posibles combinaciones realizamos

operaciones binarias.

¿Cómo usar un sprite de puntero?

Supongamos que tenemos un sprite con id=1

Lo único que debemos hace es posicionar al sprite donde se

ubica el mouse.

dbSprite(1, dbMouseX(), dbMouseY(), dbSpriteImage(1));

¿Cómo animar un sprite si el mouse está sobre él?

Supongamos que tenemos un sprite con id=1 y la animación

va de 1 a 4.

if (dbMouseUpSprite(1))

dbPlaySprite(1,1,4,200);

else

dbSetSpriteFrame(1,1);

¿Estamos sobre el Sprite?

Music Cargar un sonido de background

void dbLoadMusic ( char* szFilename, int iMusic )

Reproducir una canción

void dbPlayMusic ( int iMusic )

Reproducir continuamente

void dbLoopMusic ( int iMusic )

Parar

void dbStopMusic ( int iMusic )

Eliminar

void dbDeleteMusic ( int iMusic )

Secrets of Great Menu Design

Una buena lectura para conocer más sobre el diseño de

menús en videojuegos.

http://www.edge-online.com/features/secrets-great-

menu-design

Tareas

1. Diseñar el inicio del videojuego, y el final mostrando los

créditos.

2. Diseñar el manejo de estados dentro del videojuego.

3. Diseñar el menú principal del videojuego, mostrando

con algún sprite que se ha ingresado al loop principal.