Programación Gráfica II - WordPress.com · En esta clase veremos cómo diseñar menús simples,...
Transcript of Programación Gráfica II - WordPress.com · En esta clase veremos cómo diseñar menús simples,...
![Page 1: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/1.jpg)
Programación Gráfica II
4. Diseño de menús.
![Page 2: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/2.jpg)
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..
![Page 3: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/3.jpg)
Ejemplos: Menú Principal
![Page 4: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/4.jpg)
Ejemplos: Menú Principal
![Page 5: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/5.jpg)
Ejemplos: Menú Principal
![Page 6: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/6.jpg)
Ejemplos: Menú Principal
![Page 7: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/7.jpg)
Ejemplos: Menú Principal
![Page 8: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/8.jpg)
Ejemplos: Menú Principal
![Page 9: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/9.jpg)
Ejemplos: Menú Principal
![Page 10: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/10.jpg)
Manejo de estados.
![Page 11: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/11.jpg)
Máquinas de estados: La teoría
Recordemos cómo manejar los diferentes estados que
puede tener un videojuego (formalmente llamado
“autómatas finitos”)
![Page 12: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/12.jpg)
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.
![Page 13: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/13.jpg)
Estados principales del videojuego
![Page 14: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/14.jpg)
Enumeremos los estado
En el manejador principal del videojuego debemos
enumerar los estado, en nuestro caso GameManager.
![Page 15: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/15.jpg)
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.
![Page 16: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/16.jpg)
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:
![Page 17: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/17.jpg)
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.
![Page 18: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/18.jpg)
DarkGDK
![Page 19: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/19.jpg)
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
![Page 20: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/20.jpg)
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
![Page 21: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/21.jpg)
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.
![Page 22: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/22.jpg)
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 )
![Page 23: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/23.jpg)
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 )
![Page 24: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/24.jpg)
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 ( )
![Page 25: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/25.jpg)
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.
![Page 26: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/26.jpg)
¿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));
![Page 27: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/27.jpg)
¿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);
![Page 28: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/28.jpg)
¿Estamos sobre el Sprite?
![Page 29: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/29.jpg)
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 )
![Page 30: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/30.jpg)
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
![Page 31: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/31.jpg)
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.
![Page 32: Programación Gráfica II - WordPress.com · 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](https://reader035.fdocuments.es/reader035/viewer/2022063014/5fce9cde7a635a70723532a3/html5/thumbnails/32.jpg)