Tutorial: UI con Plantilla

Estos pasos asumen que ya tiene instalado Unity en su equipo de desarrollo, sino es así, por favor consultar el siguiente artículo: Tutorial: Instalar Unity 2017.3.1f1.

Los pasos para crear un Menú con una plantilla en Unity son:

Paso 1: Ejecutar Unity.

Asignar nombre al proyecto
Escoger la ubicación donde desea guardar el proyecto
Dar click en el botón de Create Project

Paso 2: Descargar Assets necesarios

Una vez creado el proyecto, se debe ir al Asset Store (Window -> General -> Asset Store, o Ctrl + 9)
Buscar “Unity Sample IU”
Importar la primera opción

Paso 2.1: Organizar Imports

Una vez Importados todos los Assets necesarios, se recomienda crear una carpeta donde guardar los materiales importados. Creamos la carpeta y arrastramos los elementos importados a ésta

se recomienda usar la vista 2 by 3
Para tener una vista general de la escena y el juego

Paso 3: Agregar Prefab principal

Seguido al paso anterior, nos disponemos a ir a la carpeta Prefabs y escogemos el elemento “SF Scene Element” y lo arrastramos a la vista de la escena.
Una vez puesto en escena debería verse en el apartado Game de la siguiente manera

Paso 3.1: Arreglar vista del escenario

Después de haber puesto el elemento en su lugar se puede notar que quedó un poco desalineado de su posición correcta. Esto se solucionar yendo al apartado Inspector del objeto **Background**, el cual se encuentra dentro de **SF Scene Element,** y poner todos los campos de position X e Y en 0, y el campo Z en 80

Paso 3.2: Finalizar la configuración de la escena

Cerciorarse que la vista del juego es 16:9.
Eliminar la **Main Camera** que viene por defecto en el proyecto, seleccionarla y oprimir el botón suprimir del teclado

Paso 4: Configurar el menú del juego

NOTA: Para poder utilizar cualquier objeto UI de Unity se necesita un objeto **Canvas** por defecto

Ir a GameObject –> UI –> Canvas y seleccionar esta opción.
Agregar un Panel de la lista de objetos UI.
Al agregar el objeto Canvasal proyecto, se crea automáticamente el objeto EventSystemel cual contiene el componente EventSystemnecesario para dar interactividad al menú del proyecto.

Paso 4.1: Ajustar el Panel del Juego

Dejar los valores de esos campos tal cual como sale en la imagen

Ajustar el Panel que está dentro del canvas para que quede centrado en la mitad del menú del juego

Paso 4.2: Cambiar el background del panel

Cambiar el rectángulo que viene por defecto por el background de los imports.
Dentro del objeto Panel seleccionar la opción de SourceImage y cambiar el Background por defecto a SF Window.

Paso 4.3: Configurando color del Panel

Seleccionar la herramienta de color, esto desplegará una paleta de colores en donde debemos escribir la siguiente combinación RGB para un color azul.

RGB(65, 154, 253,255)

Paso 5: Agregar Botones

Seleccionar el Objeto Panel y renombrarlo por PanelMenuPrincipal(Click Derecho à Rename).
Doble clicken PanelMenuPrincipalpara centrarnos en el.
Luego ir a GameObject –> UI –> Button.
Asegurarse que Buttonsea hijo de MenuPanel.

Paso 5.1: Cambiar Background del botón

El botón actualmente definido no se parece en nada a lo que queremos lograr, para cambiar esto, repetimos el proceso de cambio de BackGround del Panel.
Dentro del objeto Button, ir al Inspector y seleccionar SourceImage.
Escoger la opción SF Button.

Paso 5.2: Cambiar colores del Botón

Al igual que el panel cambiamos el color por defecto del botón en la propiedad Color RGB(45, 134, 253)
Cambiamos también el HighLighted Color, esta propiedad es activada cuando se pasa el Mouse encima del botón modificando su color por RGB(69, 52, 197).
Dejamos los demás valores por defecto.

Paso 5.3: Modificar texto del Botón

Renombramos el objeto Buttonpor StartButton
Expandimos su contenido y adentro está el objeto Text, lo seleccionamos y en el inspector modificamos los siguiente elementos.

Text: Start

Font: Jupiter(Incluido en los Imports)

Font Size: 32

Horizontal Overflow: Overflow

Vertical Overflow: OverlFlow

Color: White

Paso 5.4: Agregar un Layout

Agregamos un Vertical Layout en el objeto MenuPanel en el apartado AddComponent

Paso 5.4.1: Modificamos sus propiedades

El Vertical Layout es un contenedor que permitirá definir la organización de los elementos dentro del Panel.

Padding:

Left: 90

Right: 90

Top: 65

Bottom: 65

Child Aligment: Middle Center

Child Control size: seleccionar widht and height

Child Force Expand: seleccionar widht and height

Paso 5.5: Agregamos más botones al menú

Seleccionarmos el Objeto StartButton y lo duplicamos 3 veces con (Ctrl + D) o (Command + D) en IMAC .
Renombramos los objetos nuevos y el texto en su interior.

Paso 6: Duplicar panel principal

Click sobre PanelMenuPrincipaly CTRl + D
Solo se tendrá un botón en este panel, asi que eliminamos el resto .
Renombramos el panel a PanelAudio.
Renombramos el botón: BotonAtrasy Text: Atras.

Paso 7: Agregar labels a panel audio

Copiamos el Text que esta dentro del Boton a nivel de PanelAudio.
Renombramos el label arrastrado a: AudioLabel.
Duplicamos AudioLabel a: MasterVolLabel.
Cambiamos el texto de cada label y el tamaño de la fuente como esta en la figura.

Paso 8: Agregar slider al PanelAudio

Ir a Project –> Assets –> Prefabs –> SF Slider, y arrastramos debajo del label MasterVolLabel.

Paso 9: Duplicar label y slide

Duplicar el label MasterVolLabely renombrarlo : MusicVolLabel.
Duplicar el SF Slider y ubicar debajo del label MusicVolLabel.
Realizar el mismo procedimiento para crear otro label llamado SFX VolLabely otro slider para este label, como se muestra en la figura.

Paso 10: Resultado Slider

NOTA: si no aparecen los sliders, seleccionar canvas –> Inspector –> CanvasScaler (Script) –> UI ScaleMode –> ScaleWithScreenSize.
Reference Resolution : x: 1980 y:1080

Paso 11: Crear Panel ayuda

Duplicar panel Audio, dejamos solamente AudioLabel y Master VolLabel, las renombremos y cambiamos su texto por defecto como esta en la imagen.
En el segundo label del panel da ayuda colocar un párrafo por defecto.

Horizontal Overflow: wrap

Vertical Overflow: Truncate

Para centrar el párrafo

Paso 12: Agregar interactividad a los botones del Menú Principal

Primero seleccionamos el objeto del panel principal y habilitamos la vista solamente de este panel, los demás se desmarcan.

Paso 13: Agregar interactividad a los botones del Menú Principal

Guardamos la escena actual en **File –> Save Scene As –>** dentro de la carpeta **Assests –>** crear carpeta **Scenes –>** nombrar escena –> **Guardar**

Ir Assets –> Scenes –> arrastrar el objeto Controls.
El índex que asigna a la escena MenuPrincipal es 0, es decir esta va a ser la que primero se carga en la ejecución de la aplicación.

Paso 15: Agregar Script a botón inicio

Crear nueva carpeta dentro de Assets –> renombrarla Scripts –> arrastrar el script LoadScenesOnClick a la carpeta Scripts.

Abrir Script LoadSceneOnCliclen su editor de texto de preferencia y dejarlo tal cual esta en la imagen.
Alli se crea un método publico muy sencillo, que permitirá cambiar de escena con un index que llega como parámetro.

Con el objetivo de crear el nuevo evento para el botón inicio.
Ir a Inspector –> OnClick () –> click en + –> arrastrar Load SceneOnClick (Script) a la nueva casilla que se agrego en OnClick ().

Paso 16: Agregar función a el evento del botón inicio