lunes, 14 de agosto de 2017

Tutorial de plataformas 2D en Unity (VIII)








11.       Creando el menú de inicio:



Lo primero que vamos a hacer en este capítulo es buscar una fuente que nos guste para mostrar los textos del juego, en mi caso me descargaré una de la página web http://www.dafont.com









Una vez descargada la fuente la descomprimimos, y la copiamos en una carpeta llamada fuentes de nuestro proyecto:








Ahora vamos a nuestra carpeta “Escenas” y con el clic derecho crearemos una nueva escena llamada “Menu”. Tras abrirla veremos como ya estamos en esta nueva escena, aunque aún esté vacía.

Para crear el menú clicaremos con el botón derecho en “Hierarchy” > “UI” > “Canvas”.

 El siguiente paso será crear una carpeta llamada “Menu” donde colocaremos la imagen que queramos poner de fondo.








Luego en el “Canvas” crearemos una “Image”.










Con el objeto “Image” seleccionado, vamos a su “Inspector” y procederemos a arrastrar nuestra imagen de fondo al apartado “Source Image”.










La escalamos hasta que ocupe todo el canvas y ya tendremos nuestro fondo de pantalla del menú de inicio.










El siguiente paso será crear los botones de “Nueva Partida” y de “Salir”. Para ello dentro del “Canvas” crearemos un “Button”.











A este primer botón lo llamaremos “Nueva partida”. Dentro de su “Inspector”, en el menú “Source Image” colocaremos la imagen que queramos para nuestro botón, ya sea dibujada por nosotros o descargada de internet.

Desde “Photoshop” editaremos la imagen que hayamos seleccionada del botón, bajándole el brillo y guardándola como “Botón presionado”.











Luego repetimos el proceso, pero subiéndole el brillo y llamando al archivo “Botón cursor”.
Una vez tengamos los tres botones dentro de nuestra carpeta “Menu” clicamos en el desplegable “Transition” dentro del “Inspector” del “Button” que creamos antes y seleccionamos “Sprite Swap”.










Ahora ponemos en el orden que más nos guste las 3 imágenes en los distintos apartados, esto hará que cuando pasemos el ratón o cliquemos sobre el botón cambiará de una imagen a otra.










Ahora en el apartado “Text” dentro del botón “Nueva Partida” escribimos el texto, seleccionamos la fuente y el color que queramos que muestre en el interior de nuestro botón, como veis en mi caso, es “Nueva Partida”.


Una vez hayamos acabado con este botón y para evitar repetir todo el proceso de nuevo, clicamos sobre él y apretamos “Control + D”, de este modo se nos clonará el botón, solo tenemos que colocar el nuevo botón en la posición que queramos, cambiarle el nombre y el texto que vaya a mostrar.












Cuando ya tengamos los botones, procederemos a programarlos, para ello vamos a nuestra carpeta “Scripts” y creamos un nuevo script llamado “Botones”.

Necesitaremos importar una librería nueva para poder acceder al controlador de escenas de Unity, para ello en la parte superior escribimos la siguiente línea de código.


using UnityEngine.SceneManagement;











Ahora vamos a crear dos funciones públicas nuevas, una para cada botón.
La primera es:


public void NewGame()
    {
        SceneManager.LoadScene("Escena1");
    }


Siendo Escena1 el nombre que hayamos dado a la escena del juego.










La siguiente función es:

public void Exit()
    {
        Application.Quit();
       
    }


El script finalmente quedaría así:










Cuando lo tengamos, lo guardamos y se lo asignamos a nuestro “Canvas”. 










Ahora volvemos a clicar sobre el botón “Nueva Partida” y buscamos en su “Inspector” el apartado “On Click ( )”, aquí se deben poner las órdenes que va a ejecutar el botón cuando pinchemos sobre él con el ratón. En nuestro caso la orden está en “Canvas” ya que es donde hemos asignado nuestro script, por lo que clicamos al signo “+” y arrastramos el “Canvas” hasta aquí.












Ahora debemos seleccionar el desplegable “No Function” para asignar la función a la que queramos que acceda al clicar el botón, en nuestro caso la función se llamaba “NewGame”.











Repetimos el proceso con el botón “Salir”:













Por último, para que Unity reconozca las distintas escenas, tenemos que asignarlas desde el menú “File” > “Build Settings”.











En la ventana que se abrirá debemos añadir todas las escenas que vaya a tener nuestro proyecto. Por ahora solo serán dos:












Para añadirlas, basta con tener la escena abierta, y clicar sobre “Add Open Scenes”.

Cuando hayamos terminado, vemos que si abrimos nuestra escena “Menu” y clicamos sobre el botón “Nueva Partida”, se abrirá la escena de nuestro juego y podremos comenzar a jugar.











El botón “Salir” no funciona desde aquí, no os preocupéis, si queréis probarlo tendréis que compilar el juego. Para comprobar que funciona correctamente vais al menú “File” > “Build & Run”. Luego pincháis sobre “Build & Run” seleccionáis la carpeta donde queréis que se compile vuestro juego y cuando termine lo ejecutáis.

Al compilarlo, puede que veáis que el menú no ocupa toda la pantalla, esto se soluciona yendo a “Canvas” y en el “Inspector” seleccionar “Screen with Screen Size”.










Si volvéis a compilar y probar el juego, veréis que ya ocupa toda la pantalla.





Esto es todo por ahora, recordad que podéis preguntar cualquier duda tanto en los comentarios, como en Twitter: @Lepra_Games o en la página de Facebook:  Lepra Games.

No hay comentarios:

Publicar un comentario