TEMA 7 INTERFAZ GRÁFICA

Sin valoraciones

TEMA 7 INTERFAZ GRÁFICA

En esta lección repasamos las herramientas UI (User Interface) de Unity para crear un menú principal y un menú de pausa y aprovecharemos el Game Manager visto en la lección anterior para conectar los estados de juegos con dichos menús.

TEMA 7 INTERFAZ GRÁFICA

Lo que vamos es a crear una nueva escena llamada MainMenu que es don­de colocaremos nuestros elementos para que aparezca el menú principal y el menú de pausa. Vamos a reutilizar elementos que ya hemos creado con ante­rioridad.

Así que nos venimos a la carpeta Scenes y duplicamos la escena Town

TEMA 7 INTERFAZ GRÁFICA

Lo renombramos como MainMenu

TEMA 7 INTERFAZ GRÁFICA

Ahora deberemos irnos a la carpeta de los ScriptableObjects y dentro de la carpeta Scenes tenemos que crear un nuevo objeto programable de la escena y lo llamaremos MainMenu

TEMA 7 INTERFAZ GRÁFICA

TEMA 7 INTERFAZ GRÁFICA

Y dentro del MainMenu desde el inspector le asignamos el mismo nombre al apartado de Scene Information

TEMA 7 INTERFAZ GRÁFICA

Abrimos de nuevo la carpeta de escenas y arrastramos la escena MainMenu a la ventana de BuildSettings que se abre desde el menu File>BuildSettings

TEMA 7 INTERFAZ GRÁFICA

Abrimos el MainMenu desde la carpeta de escenas y como es duplicada es identica a la anterior y empezamos a borrar los siguientes elementos

TEMA 7 INTERFAZ GRÁFICA

Ahora modificaremos el objeto LevelInitializer

TEMA 7 INTERFAZ GRÁFICA

Clic derecho elegimos la opción de Prefab>Unpack Completely

TEMA 7 INTERFAZ GRÁFICA

Y renombramos este objeto como MenuIniatilizer

TEMA 7 INTERFAZ GRÁFICA

Nos volvemos a Jerarquía y este objeto lo arrastramos a la carpeta de prefabs para convertirlo en uno

TEMA 7 INTERFAZ GRÁFICA

Con esto ya tendríamos un nuevo prefab para usarlo cuando queramos. Luego desde el inspector borraremos el apartado de las dependencias ya que no lo necesitamos. Pulsando en – lo quitamos.

TEMA 7 INTERFAZ GRÁFICA

Y ahora le decimos que aplique este cambio al prefab también. Pulsando en la opción de Overrides>MenuInitatilizer>ApplyAll

TEMA 7 INTERFAZ GRÁFICA

Nos volvemos a la ventana de la Jerarquía y abrimos el objeto Grid de aquí deberemos cargarnos el tilemaps de las Collisions ya que no lo vamos a necesitar en nuestro MainMenu

TEMA 7 INTERFAZ GRÁFICA

Y por último vamos a editar el prefab de nuestra cámara porque no va­mos ni a necesitar en Confiner, la camara virtual o el cinemachine. Para ello pulsamos en botón derecho encima del objeto GameCameras >Pre- fab>Unpack Completely

TEMA 7 INTERFAZ GRÁFICA

Ahora que lo hemos convertido a un objeto unico, sacamos el objeto MainCamera del grupo y eliminamos el objeto GameCameras

TEMA 7 INTERFAZ GRÁFICA

Y al MainCamera vamos a quitarle el componente CinemachineBrain desde el inspector.

TEMA 7 INTERFAZ GRÁFICA

El siguiente paso es añadirle un script, que se encuentra dentro de la carpeta Utils de la carpeta raíz Scripts, llamado CameraRandomPan

TEMA 7 INTERFAZ GRÁFICA

Este script lo que hará es que moverá la camara aleatoriamente por nuestra pantalla en los ejes de la horizontal y la vertical poniendole nosotros unos mínimos y máximos de movimiento en esos ejes

TEMA 7 INTERFAZ GRÁFICA

Pondremos los siguientes valores que harán que nuestra camara se mueva desde el extremo izquierdo al derecho de nuestro mapa

TEMA 7 INTERFAZ GRÁFICA

 

Crear una interfaz gráfica (GUI) en Unity implica utilizar el sistema de interfaz de usuario (UI) proporcionado por el motor:

1. Canvas:

1.1. Añadir Canvas:

  • En la jerarquía, haz clic derecho, selecciona «UI» y elige «Canvas».
  • Este será el contenedor principal para tu interfaz gráfica.

1.2. Configurar Render Mode:

  • Selecciona el Canvas y ajusta el «Render Mode» según tus necesidades (por ejemplo, Overlay para una superposición en pantalla).

2. UI Elements:

2.1. Añadir Texto:

  • Añade un elemento de texto al canvas para mostrar información como la puntuación, la salud, etc.
  • Selecciona el Canvas, haz clic derecho, selecciona «UI» y elige «Text».

2.2. Añadir Imágenes:

  • Añade imágenes para botones, iconos, fondos, etc.
  • Selecciona el Canvas, haz clic derecho, selecciona «UI» y elige «Image».

2.3. Añadir Botones:

  • Añade botones para acciones del jugador.
  • Selecciona el Canvas, haz clic derecho, selecciona «UI» y elige «Button».

3. Diseño y Posicionamiento:

3.1. Posicionamiento:

  • Ajusta la posición y escala de los elementos UI según tus necesidades.
  • Puedes utilizar el modo de diseño del Canvas para organizar los elementos.

3.2. Alineación y Distribución:

  • Utiliza los componentes de diseño para alinear y distribuir elementos.

4. Estilo Visual:

4.1. Añadir Estilo:

  • Utiliza imágenes y colores para dar estilo a tu interfaz gráfica.
  • Puedes añadir sombras, resaltar elementos al pasar el ratón, etc.

5. Scripting y Funcionalidad:

5.1. Asociar Scripts:

  • Crea scripts de C# para controlar la funcionalidad de la interfaz.
  • Asocia estos scripts a los elementos de UI que los necesiten.
csharp
using UnityEngine; using UnityEngine.UI; public class UIManager : MonoBehaviour { publicText scoreText; void Start() { UpdateScore(0); } public void UpdateScore(int score) { scoreText.text = "Score: " + score; } }

6. Asignar Referencias:

6.1. Asignar Texto:

  • Arrastra el objeto de texto al campo público «scoreText» en el inspector del script.

7. Interactividad:

7.1. Añadir Interactividad:

  • Utiliza eventos de botón, desencadenadores de colisión, etc., para activar acciones en respuesta a la interacción del jugador.

8. Animaciones:

8.1. Añadir Animaciones:

  • Utiliza el sistema de animación de Unity para añadir transiciones y animaciones a los elementos UI.

Compártelo en tus redes

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Valore este curso

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumimos que estás de acuerdo. VER