Crea un videojuego con Unity3d (Programación VIII de la GUI Segunda Parte)

Bueeeno, hoy vamos a ir a la escena "en blanco" que tenemos para hacer un menú sencillo y que entendáis cómo hacer botones en Unity3d. 

Antes de nada quiero explicar que ni los gráficos ni la calidad del minijuego que estamos haciendo es demasiado buena, las texturas son modulares de otros artistas y el menú que vamos ha hacer hoy dista mucho de los menús profesionales de los juegos que conocemos todos.

¿Por que?

Pues porque tengo otra vida!! Soy batman por las noches....No, ahora en serio, estoy trabajando para varios proyectos (no precisamente pocos) que consumen mi tiempo de una forma muy bárbara y no puedo dedicar el tiempo que me gustaría dedicarle al diseño/arte de este juego.

Por eso vamos un poco al grano y nos centramos en acabar el prototipo, quiero que al acabar esta serie de tutoriales tengáis nociones muy básicas de programación, de cómo hacer un videojuego en unity3d y que entendáis un poco "la complejidad" de este mundillo.

Dicho esto:

Aquí tenéis como siempre el primer artículo de los tutoriales: Crea un videojeugo con Unity3d Introducción

Al lío pues!

Lo primero será hacer el mismo proceso que en el artículo anterior, para crear un Canvas y una imagen:

 La opción que está marcada en rojo debemos apretar Alt+Shift y el cuadro grande, en él marcamos la opción del recuadro pequeño para ampliar la imagen y el ancor por partes iguales de una forma más rápida.

Cambiamos el color de la imagen y de la misma forma agregamos un botón:

La edición del botón la podéis ver aquí muy bien explicada:

Video aquí

Si necesitáis algún consejo o cualquier pregunta la podéis dejar en los comentarios, en facebook o en twitter

Mientras estabais viendo el vídeo, yo he aprovechado para hacer las tres imágenes que irán en el lugar del botón.
Para eso debemos marcar en el botón la opción "Sprite Swap" en el apartado "Transition":

 Acto seguido, podemos arrastrar las imagenes en la posición que deseemos, PERO si no os deja arrastrar es por que antes tenéis que seleccionar las imágenes que queráis y en el Texture Type  poner la opción "Sprite (2d and UI)" 

Una vez hecho esto, podemos coger cada imagen y ponerla en el lugar que le corresponde; dependiendo si queremos que sea la imagen fija, la que se muestra cuando hacemos click en el botón o la que se muestra cuando pasamos el ratón por encima del botón:

Aquí la demostración

La penúltima parte del proceso de implementación de la GUI  es el código, podemos dar gracias al nuevo sistema por que es muy sencillo e intuitivo...antes teníamos que crear cada botón, imagen y demás cosas mediante código...ahora solamente debemos ahcer una script con funciones PÚBLICAS que expresen lo que queremos que el botón haga al ser presionado:

 La expresión Application.Quit () hace que se cierre el juego. IMPORTANTE:
No saldrá de la aplicación mientras estemos en unity3d, SÓLO LO HARÁ CUANDO TENGAMOS LA BUILD HECHA! Así que no esperéis que funcione si no recopiláis el juego.

Por último necesitamos un objeto (en nuestro caso se lo he puesto a la cámara) al que añadir la script.
Dicho objeto lo arrastramos donde vemos en la imagen:

 Y para acabar, decimos que función queremos que haga (que contenga el objeto añadido y sea pública) cuando el botón es pulsado de la siguiente forma:

Si habéis seguido los pasos hasta aquí, casi podemos dar el minijuego por concluido, ya tenemos menú inicial y juego durante un minuto.

Pero ahora falta ponerlo un poco más bonito y ver si la semana que viene nos ponemos con el tema de juntar ambas escenas y hacer nuestra primera build.

ANTERIOR ARTÍCULO DE PROGRAMACIÓN,     SIGUIENTE