Creación Menú Desde Cero

Paso 1: Ejecutar Unity

sss

En esta ventana, hacer clic en new

Paso 2. En esta ventana, diligenciar el nombre del proyecto, los demás valores se dejan por defecto

Dar clic en Create project

Ventana del editor de Unity

Paso 3. Dar clic en Save Project As

Paso 4. Dar nombre a la escena, con un nombre adecuado de acuerdo con el proyecto

Dar clic en Guardar

Paso 6. Dar clic en el botón 2D

Paso 7. Dar clic en el botón Game

Paso 8 . Verificar que se  seleccione la opción Standalone (1024*768)

Esta opción permite que el menú se ajuste a la pantalla del dispositivo (Responsive)

Paso 9. Crear un canvas: Dar clic en Create, UI y canvas

Paso 10. Se recomienda poner la ventana de unity de la siguiente manera: Al lado izquierdo tener la Scene y al lado derecha la vista de Game, para poder observar los cambios que se le van haciendo al canvas

Para poner la vista game a mano derecha, se mantiene clic izquierdo sostenido y se arrastra al área deseada.

Paso 11: Dar clic en canvas, y observar que a mano derecha de la pantalla se activa la pestaña Inspector

  1. En UI Scale Mode seleccionar: Scale with Screen Size
  2. Se activara 2 casillas (Reference Resolution) e introducir los valores de 1024*768
  3. En Match colocar 0,5
  4. Ctrl + s para guardar el proyecto 

Paso 12: Clic en file y build settings o presionar Ctrl + Shift + B

Paso 13: Nos paramos sobre el canvas ya creado, dar clic derecho , UI y Canvas

Hasta este punto, nuestra escena se debe de observar de la siguiente manera

Tener en cuenta que el canvas creado debe de quedar dentro del primer canvas

Paso 14: Nos paramos sobre el ultimo canvas creado, y presionamos F2 para renombrar el archivo, colocar “MenuPrincipal”

Paso 15: En este paso, se crearan los botones que tendrá el menú principal



  1. Nos paramos en Menu principal
  2. Clic derecho
  3. Seleccionar UI
  4. Dar clic en button

Paso 16: Creamos 3 botones, repitiendo el paso anterior

Paso 17: Es aconsejable, renombrar los botones, como se observa en la siguiente figura. (Recuerde que se para encima del botón y oprime F2 para renombrarlo).

Paso 18: En este paso, se renombrara los texto de los botones, damos clic en cada botón para que se despliegue las opciones, como se observa en la siguiente figura.

Paso 19: Al dar clic en Text, a mano derecha se abre el inspector, en el campo Text se coloca el texto del botón 

Paso 20: Repetir el paso anterior para los otros 2 botones, y se observara de la siguiente manera.

Es recomendable, que el texto del botón sea igual al nombre del mismo.

Paso 21: Creamos un botón de salir, el cual nos permitirá salir de la aplicación.

Paso 22: Ahora, en el mismo canvas, crearemos la sección de opciones

Lo que haremos será, copiar “Menuprincipal”, pegarlo y cambiar su nombre por “Menudeopciones”

Paso 23: Borraremos el botón de créditos en la sección “menuprincipal” y lo ubicaremos en la sección “menudeopciones”

Paso 24: En nuestra sección de “opciones”, tendremos los botones de “gráficos” y “créditos”, además que el botón de salir, será cambiado por el botón “atrás”

Paso 25: Nos devolvemos al “Menuprincipal”, en el cual asignaremos el menú creado anteriormente, por lo cual asignaremos 2 acciones en el inspector del botón “opciones

Paso 26: Asignaremos a cada acción creada anteriormente, los 2 menús que tenemos, “menuprincipal” y “menudeopciones”

Paso 27: En cuanto a las funciones, usaremos la clase “GameObject”, y el método “SetActive”, este método recibe un dato de tipo booleano, que nos indicara si el menú esta activo o no, esto se realizara para ambas acciones

Paso 28: Al asignar estos métodos, se desplegara un checkbox, debemos dejar seleccionado solo el segundo, pues el primero al no estar seleccionado, se desactivara al momento de clicarse el botón y el segundo al estar seleccionado, se activara, mostrando “menudeopciones”

Paso 29: Ahora le daremos acciones al botón “atrás”, para esto asignaremos 2 acciones, como anteriormente se ha realizado

Recuerde que este proceso se debe hacer en el botón al cual se le quiere asignar acciones.

Paso 30: Asignamos los menús asignados anteriormente, con la única diferencia de que el seleccionado será el primero, lo que significa, que al clicar sobre el botón “atrás”, se desactive “menudeopciones” y se active “menuprincipal”

Paso 31: Ahora nos centraremos en hacer la vista de créditos, para ello, copiaremos “menudeopciones” y borraremos botones, dejando únicamente el botón “atrás”, a esta sección la llamaremos “menucreditos”

Paso 32: Cambiamos el nombre del botón por “atrasmenudeopciones”.

Paso 33: Dado que tenemos cargadas las acciones del botón “atrás” de “atrasmenudeopciones”, lo que haremos es cambiar los menus por “menudeopciones” y “menucreditos”, dejamos activo “menudeopciones” y dejamos inactivo “menucreditos” lo que nos enviara al menú anteriormente revisado.

Paso 34: Ahora configuraremos el botón “créditos” de la sección “menudeopciones”, para ello asignamos 2 acciones al botón “créditos”, en las cuales activaremos “menucreditos” y desactivaremos “menudeopciones”

Paso 35: Ingresamos a “menúcreditos” y creamos un objeto UI, el cual será un “Text”

Paso 36: En la sección “Text” escribiremos lo que queremos mostrar, en este caso mostraremos al creador y al modelador

Paso 37: En la parte de Character, podemos asignar tamaños y el estilo de la fuente, para nuestro ejemplo usaremos un tamaño 30, además de tener una alineación centrada, tanto vertical como horizontalmente.

Paso 38: Ahora crearemos nuestro menú de graficos, para eso, copiaremos “menudeopciones” lo pegamos y cambiamos su nombre por “menudegraficos”

Paso 39: Ahora reasignamos las acciones del botón “atrás” para el “menugraficos”

Paso 40: Ahora, crearemos 6 botones, con los que controlaremos la definición en nuestro juego, la cual puede ser, bajo semibajo, medio, normales, alto y ultra.

Paso 41: Ahora crearemos un script que nos controle los gráficos de la aplicación, hacemos clic derecho, vamos a créate y luego clicamos en JavaScript.

Paso 42: Ahora crearemos el siguiente código en el script creado anteriormente.

Paso 43: Ahora, asignamos el script creado, a nuestro GameObject “scripts”.

Paso 44: Ahora, en cada botón asignaremos cada uno de los métodos creado en el script, entonces arrastramos nuestro GameObject “script” al primer botón.

Paso 45: Luego, asignamos el método “Graficos1()”, al botón. Y hacemos el mismo proceso para los 5 botones restantes, solo que asignaremos los métodos según el botón al que queramos poner acción.

Paso 46: Para realizar el diseño del menú vamos a utilizar adobe Photoshop, entonces creamos el documento

Paso 47: Ajustes de la imagen que va ser de Anchura 1024-Altura 768 y Resolución 72 y hacer click en Ok

Paso 48: Resultado final de las dimensiones

Paso 49: Agregamos la imagen que se desea poner en el fondo

Paso 50: Colocación del titulo del menú

Paso 51: Agregamos la carpeta con las imágenes, botones y demás

Paso 52: Agregamos el color a los botones, arrastrándolo

Paso 53: Agregar colores a los botones a eleccion

Paso 54: Agregar una imagen de fondo con los botones, para estor ir a UI y raw image

Paso 55: Agregar la imagen que escogimos y la arrastramos en textura como en la imagen

Paso 56: Ahora solo falta dejarlo de primeras como en la siguiente imagen, y se repite en cada menu

Paso 57: Por ultimo el menú quedaría así ejecutado

Deja un comentario