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

Se habilitara una nueva casilla, en donde pasaremos el parámetro deseado para que cambie de escena al oprimir el botón, en este caso poner 1 como parámetro.

Paso 17:  Desactivar panel principal al oprimir botón ayuda

Agregar elemento con + en el apartado On Click () –> arrastrar panelMenuPrincipal –> en function dentro del panel On Click(), escoger GameObject.SetActive

Paso 18:  Agregar evento a botón ayuda

Agregar elemento con + en el apartado On Click () –> arrastrar panelAyuda –> en function dentro del panel On Click(), escoger GameObject.SetActive
–> Marcar la casilla para activar el panel ayuda

Paso 19: Agregar evento a botón audio

Repetimos el procedimiento anterior que se realizo con el botón ayuda, esta vez con el panel audio

Paso 20:  Agregar evento a botón atrás del panel ayuda

De manera similar como agregamos los eventos anteriormente, se hace en este caso.

Paso 21: Agregar evento a botón atrás del panel audio

Paso 22: Agregar evento a botón salir, menú principal

Seleccionar BotonSalir –> en inspector presionar el botón Add Component –> nombramos el script SalirOnClick, new script –> Create and Add
Arrastrar el script SalirOnClick a la carpeta Scripts
Abrir script recién creado y escribir el siguiente código
Agregar elemento con + en el apartado On Click () –> arrastrar Salir On Click (Script) –> en function dentro del panel On Click(), escoger SalirOnClick.Salir

Paso 23: Controlar menú por teclado o gamePad

Seleccionar panelMenuPrincipal –> en inspector Add Component –> New Script SeleccionOnClick
Guardar el Script SeleccionOnClick en la carpeta Scripts que se creo anteriormente, y abrir el script con su editor de preferencia
–> Escribir el código que aparece en la figura
Con el script creado, ir a PanelMenuPrincipal à inspector à apartado Selección On click (Script) à arrastrar EventSystem y BotonInicio en las casillas como se muestra en la figura
Realizar la configuración anterior para el panel audio
Realizar la configuración anterior para el panel ayuda
  • En este punto el menú quedara terminado.

Deja un comentario