GameMaker Studio / Menu inicio

Bienvenidos sean a este post, hoy veremos como crear un menu de inicio para nuestro juego.

Si bien en el proyecto anterior vimos como mostrar un mensaje ya sea para cuando debemos hacer una accion para un elemento, por ejemplo la notificacion de necesitar la llave para abrir la puerta o el mensaje de Game Over para repetir o salir, no necesariamente fue la mejor manera porque show_message no esta pensado para ser un mensaje de nuestro juego sino mas para hacer una depuracion o saber en que estado esta alguna variable, por ejemplo, del juego y si bien nos puede sacar del paso al momento de aplicarlo rompe un poco la estetica de nuestro juego, por esta razon hoy veremos como crear los menus y mas adelante veremos como crear los cuadros de texto o textboxes para poder mostrar texto pero sera en proximos posts.

Para comenzar vamos a crear dos sprites para nuestros botones, un boton para comenzar a jugar y otro para salir, la creacion es como siempre: Asset Browser, carpeta Sprites, boton derecho y seleccionan Create -> Sprite, una vez creados a uno lo llamaremos spr_Inicio y al otro spr_Salir, los dos deben ser de por lo menos 256 x 64, a su vez ambos deben tener dos subimagenes para representar cuando el boton es seleccionado y cuando no, con esto aclarado les muestro lo que yo hice

Una vez creado los sprites nuestro siguiente paso sera crear las fuentes o fonts y para ello vamos de nuevo al Asset Browser, buscamos la carpeta Fonts, hacemos click con el boton derecho sobre esta y seleccionamos Create -> Font, una vez creado nos aparecera la siguiente ventana

Basicamente aqui definiremos cual fuente usaremos, en este caso primero definimos el nombre, fnt_Menu, luego tenemos la opcion de Select Font donde tendremos todas las fuentes de nuestro sistema operativo, en esta podemos seleccionar la que queramos, si ven a la derecha tienen un ejemplo de como se ve la fuente seleccionada, tambien tenemos una opcion llamada Copy to project, donde podremos buscar una fuente de otro recurso y agregarla a nuestro proyecto pero de esto hablaremos mas adelante, un detalle a tener en cuenta es que las fuentes seleccionadas no seran incorporadas al proyecto, salvo que usemos la opcion de copiar, donde dependera de que el S.O huesped siempre contenga la fuente seleccionada, esto significa que elijan fuentes estandares del S.O y no las que tienen disponibles por disponer de algun programa que las incorpora, con esto aclarado prosigamos.

Nuestro siguiente paso sera crear un objeto al cual llamaremos obj_Inicio y lo usaremos para nuestro menu de inicio, una vez creado el objeto le agregaremos un evento Create al cual le agregaremos la siguiente linea:

eleccion = 0;

Esta variable sera la que usaremos a cual «boton» presionamos pero ya veremos pronto como es esto, nuestro siguiente paso sera agregar un nuevo evento de tipo Draw -> Draw, una vez creado el evento agregaremos estas lineas:

draw_set_font(fnt_Menu);
draw_set_alpha(1);
draw_set_color(c_white);
draw_text_transformed(
			160,
			246,
			"Salta, Pepe!!!",
			2,2,0);

Estas lineas seran para «dibujar» un texto en pantalla, esto es muy similar a cuando trabajamos con Canvas en Android, es decir que siempre dibujaremos en pantalla, salvo que la funcion permita definirlo, debemos establecer algunos parametros para poder dibujar en la misma, aunque sea un mensaje de texto, la primera linea define el tipo de fuente que usaremos en este caso es la fuente que creamos anteriormente, la siguiente sera el alpha, este parametro sirve para definir la opacidad del dibujo, su valor va desde 0 a 1; siendo 0 completamente transparente y 1 completamente opaco, valores intermedios dan niveles de transparencia, la tercer linea se encarga de definir cual sera el color que usaremos para dibujar, en este caso escribir, en pantalla, por ultimo usaremos una funcion para escribrir en pantalla donde:

• El primer valor es para el eje X
• El segundo valor es para el eje Y
• El tercer valor es para el mensaje, puede ser un literal o una variable
• El cuarto valor es para indicar la escala del largo
• El quinto valor es para la escala del alto
• El sexto valor es para indicar el angulo del texto

El cuarto valor se usan para definir con cual tamaño se mostrara el texto, siendo 1 para usar la misma escala, 0.5 para mostrar a la mitad de su tamaño y yo lo use para que sea el doble, con estos valores pueden jugar como lo deseen y por ultimo el angulo corresponde a como se vera en pantalla, por ejemplo con 0 se mostrara de izquierda a derecha pero con 180 lo mostrara espejado, con esto aclarado vamos a agregar el siguiente condicional:

if (keyboard_check_pressed(vk_up))
{
	eleccion = 0;
} 
else if (keyboard_check_pressed(vk_down))
{
	eleccion = 1;
} 

Este condicional usara a keyboard_check_pressed para verificar si presionamos en alguna de las dos teclas indicadas, en este caso usaremos la flecha hacia arriba (vk_up) y la flecha para abajo (vk_down), en ambos casos lo unico que modificara sera el valor de eleccion, siendo 0 para arriba y 1 para abajo, a continuacion agregaremos el siguiente bloque:

switch(eleccion)
{
	case 0:
		draw_sprite(spr_Inicio,0,128,371);
		draw_sprite(spr_Salir,1,128,471);
		break;
	case 1:
		draw_sprite(spr_Inicio,1,128,371);
		draw_sprite(spr_Salir,0,128,471);
		break;
}

En esta oportunidad agregamos un switch que verifica el valor de eleccion, en caso ser 0, dibujara los dos sprites que creamos por medio de draw_sprite; primero pasamos el sprite, luego el indice de subimagen, despues el eje X donde ira el sprite y despues el eje Y, estos ultimos dos datos son con respecto al room o nivel, en el case para el valor 1 es lo mismo pero alterna los valores del indice, en mi caso particular establece que la primera imagen, es decir el indice 0, sera para mostrar cuando seleccionamos el sprite y la segunda imagen sera para cuando no esta elegido, con esto tendriamos una menu creado que se mostrara en pantalla y si tocamos algunas de las flechas se modificara para mostrar el cambio de opcion, nuestra siguiente modificacion se en el condicional anterior donde agregaremos el siguiente bloque:

else if (keyboard_check_pressed(vk_enter))
{
	switch(eleccion)
	{
		case 0:
			room_goto(rm_main);
			break;
		case 1:
			game_end();
			break;
	}
}

En este caso agregamos otro else if pero que chequea si presionamos Enter, en caso de ser verdadero verifica a eleccion por medio de un switch y si el valor es 0, usa la funcion que teniamos antes para ir al rm_main o lo mismo que decir que inicia el juego, en cambio si el valor es 1 procede a llamar a game_end y finaliza el juego, con esto tenemos el objeto ya creado nos mostrara un mensaje y los dos «botones», despues por medio de los eventos y del codigo podremos entrar al juego o salir del mismo, nuestra siguiente modificacion sera en el room rm_setup donde eliminaremos o comentaremos la siguiente linea:

room_goto(rm_main);

Obviamente porque nosotros ya tenemos esta accion en el objeto anterior, y hablando de dicho objeto debemos proceder a agregarlo dentro de este room, les sugiero por un tema de ubicacion de elementos (aunque no creo que afecte) pongan al objeto obj_Inicio en el rincon superior izquierdo o lo mismo que 0,0 y solo nos resta una modificacion mas, en este caso deben modificar el fondo del room, si se fijan a la izquierda tienen dos opciones una llamada instances (para arrojar los elementos en el room) y otro llamado background donde les sugiero elijan un color de fondo, cualquier color menos blanco, con esto quedara de la siguiente forma

Recuerden que si no asignamos un sprite a nuestro objeto se vera con un signo de interrogacion, con esto realizado podemos probarlo y se debera ver como la siguiente imagen

Con esto podemos ver como quedo nuestro menu, vamos a compilarlo y probarlo para ver como funciona mediante el siguiente video

En resumen, hoy hemos visto como trabajar con un menu de inicio para poder empezar con nuestro juego o bien salir del mismo, hemos visto como se debe crear, como generar unos «botones» para poder realizar las acciones, todas las funciones necesarias para poder generar este efecto, espero les haya gustado sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.