Unity nivel intermedio: diseño de UI

Name: Unity nivel intermedio: diseño de UI
Author: Ken Geary

Creación de pantallas de presentación de la interfaz de usuario, un menú principal y elementos superpuestos

Preview the first lesson free — get full access to all 4 lessons.

Curso: bajo demanda

Hola, bienvenido a esta lección en Unity. En estas lecciones, aprenderá cómo trabajar con el usuario. interfaces para crear un menú de inicio, pantallas de presentación y en -Superposiciones de estado del juego. Las interfaces de usuario, normalmente llamadas UI, son una parte integral de cualquier aplicación o juego interactivo. Permite al usuario seleccionar opciones de juego haciendo clic o tocando botones de menú, introducir datos o ajustar un widget, como un control deslizante. Las pantallas de interfaz de usuario también se utilizan para mostrar el título de un juego o sobre la pantalla. Crearemos un juego de estilo de plataformas básico en 2D. Inicie Unity Hub, luego seleccione Nuevo proyecto, elige 2D, verifique la ruta de su archivo, entonces llamaremos a este proyecto Platformer. Haga clic en Crear proyecto. El editor de Unity tendrá el mismo aspecto que si estuviera trabajando en un El proyecto 3D, excepto la ventana de escena, se cambia a 2D vista. Crea una carpeta de Escenas, si aún no hay uno allí. Guardaremos esta escena como UI. Exploraremos una muestra de los muchos elementos de la interfaz de usuario disponibles para crear interfaces de usuario comenzando con un juego de lienzo objeto. El lienzo es un marcador de posición invisible para la otra interfaz de usuario. elementos, como paneles, imágenes y botones. En la jerarquía, haga clic derecho, seleccione UI, luego seleccione Lienzo. Tenga en cuenta que se agrega automáticamente un sistema de eventos. En el inspector, hay varios componentes que conforman el lienzo. En el modo de renderizado, puedes hacer que el lienzo aparezca en el mundo. espacio, lo cual es útil si quisiéramos tener, por ejemplo, un juego objeto con un gráfico de información flotante que muestra el la salud del objeto. Queremos que este menú ocupe toda la pantalla del juego, por lo que déjelo en el espacio de la pantalla. Configure el escalador de lienzo para escalar con el tamaño de la pantalla, entonces, si el usuario está ejecutando el juego en un nivel inferior o superior monitor de resolución, la interfaz de usuario se escalará en consecuencia. Establezca la resolución de referencia en 960 por 540. También tenga en cuenta que en la vista de escena, el lienzo es muy grande y si alternas 3D en órbita para hacer zoom, Puedes ver lo grande que es en el espacio mundial. Unity cuando se trabaja en un espacio de pantalla 2D solo mostrará esto lienzo en pantalla completa y está bloqueado en la cámara. Podemos agregar un fondo de color simple haciendo clic derecho en Lienzo, seleccione la interfaz de usuario, y agregaremos un panel. El panel predeterminado se basa en una imagen de objeto blanco. Podemos cambiar el color y la transparencia haciendo clic en el herramienta de color en el inspector. Utilice la rueda de colores y el cuadrado para seleccionar un azul claro. De forma predeterminada, el color del componente del panel también tiene transparencia. Podemos crear un color sólido haciendo clic en el control deslizante alfa. designado por la letra A y haciéndolo 100%. Si le damos al play, veremos el panel a pantalla completa. Deja de jugar, y configuremos nuestra vista de juego para visualización HD. Haz clic en la pestaña del juego, y use el menú desplegable para configurar la pantalla en 16 por 9 aspecto. Asegúrese de que el control deslizante de escala esté configurado en 1x, para que podamos ver el juego completo en la vista de juego. Haga clic para volver a la pestaña de escena y seleccione el panel en el jerarquía. El elemento de texto de la interfaz de usuario le permite agregar, por ejemplo, títulos a tu lienzo. Asegúrese de seleccionar el panel primero, para que cada elemento aparecen sobre el lienzo. Haga clic derecho, seleccione UI, Texto, malla de texto Pro. Si Si no has usado Text Mesh Pro antes, es posible que veas una ventana emergente. ventana para instalar elementos esenciales, como fuentes, que necesitamos. Haga clic en importar. Esto instala las fuentes que necesitamos, pero no necesitamos ejemplos, así que cerraremos el panel. Ahora que tenemos una fuente para usar, en el inspector, cambie la entrada de texto a Mi juego de plataformas. Tenga en cuenta que el elemento de texto es estático y no tiene interacciones. si se hace clic durante el juego. Presione la tecla W para habilitar la herramienta de movimiento y mover el texto hacia arriba cerca de la cima. También puedes agarrar las asas laterales, arrástrelos a cualquier borde, y podemos centrar el título. También puedes golpear la alineación, haga clic en el icono para hacer una alineación central, y eso debería ser bastante bueno para nuestro título. Un interruptor es útil para los menús de juegos, donde es posible que desees usuario para habilitar o deshabilitar cosas, como sonidos. Haga clic derecho en el panel, seleccione la interfaz de usuario, palanca. Movamos esta palanca hacia arriba y hacia la izquierda del panel. Gire el interruptor abierto en la jerarquía. Seleccione la etiqueta y cambiaremos esta etiqueta a música. De forma predeterminada, la imagen utilizada en un cuadro de alternancia es una marca de verificación, pero puedes cambiar eso a cualquier otra imagen de sprite. Haz clic en reproducir. Ahora podemos hacer clic en nuestro interruptor de música y marcar y desmarcar. como si estuviéramos activando o desactivando la música. Tenga en cuenta que todavía tenemos que agregar código para trabajar con el elementos interactivos en tu juego. Un elemento deslizante es útil para los controles de la interfaz de usuario del juego, como el sonido. volumen. Seleccionar panel, hacer clic derecho, interfaz de usuario, control deslizante. Nos abriremos en la jerarquía, y puedes ver varios componentes. Todos ellos se pueden personalizar en forma y color. Movamos el control deslizante debajo del interruptor, haz clic en reproducir, y haga clic y arrastre para ajustar el control deslizante. Deja de jugar. El control deslizante también se puede reasignar para que funcione como una barra de salud, al usar código para ajustar la barra de relleno del control deslizante según la salud del jugador disminuye o aumenta. Esto ahorra tiempo al no tener que construirlo desde cero. Un elemento de botón actúa como un pulsador y reacciona cuando hizo clic. Haga clic derecho en el panel, interfaz de usuario, botón, malla de texto pro. Movamos el botón debajo del control deslizante. Gire para abrir el botón en la jerarquía, seleccione texto, y en el inspector, cambie la entrada de texto para hacer clic en mí. Presiona play. Ahora veamos cómo cambia el sombreado de color del botón a medida que hacer clic. Este le informa que se hizo clic en el botón. Deja de jugar. Puedes personalizar los colores según necesites, para cada elemento. Un elemento desplegable permite al usuario ver opciones cuando hizo clic y seleccione esa opción. Panel de clic derecho, interfaz de usuario, desplegable, malla de texto profesional. Mueva esto un poco a la derecha de nuestro último elemento, y en el inspector, desplácese hacia abajo, y la sección de opciones le permite eliminar o agregar adicionales opciones, así como cambiar el nombre de la opción y agregar un Imagen opcional. Agreguemos una opción más haciendo clic en el signo más, y le cambiaremos el nombre a la opción D. Para cambiar el nombre, haga clic en el círculo pequeño, resaltar el texto, y cambiar el nombre. Haz clic en reproducir. Haga clic en el menú desplegable, y te permite seleccionar una opción. Deja de jugar. El elemento del campo de entrada permite al usuario escribir información. durante el juego, como escribir el nombre de un jugador. Panel de clic derecho, interfaz de usuario, campo de entrada. Moveremos esto cerca de la parte inferior de la pantalla. Ahora le daremos al play, y debido a que es un campo de entrada, esto le permite escribir texto. Deja de jugar. En la próxima lección, aprenderemos cómo crear presentaciones pantallas en Unity. Gracias por ver.

Intermedio Proveedor : Ken Geary 4 lecciones · 34m en Árabe, Alemán, Inglés, Español, Francés, Portugués, Chinese

Descripción del curso

En estas lecciones, aprenderá a usar los componentes de la interfaz de usuario (UI), incluyendo la creación de pantallas de presentación, un menú principal y una superposición de estado y recogidas.

Usará los componentes de la interfaz de usuario (UI) para mejorar el diseño de su juego de plataformas en 2D, aprenderá sobre los componentes de una interfaz de usuario, como un lienzo, un panel, botones, entradas de texto y controles deslizantes. Creará una secuencia de pantalla de presentación que se puede usar para presentar el juego.

Estas lecciones también explicarán el marco para un menú principal interactivo, incluyendo la superposición de elementos del panel, la adición de botones y la adición de efectos como sombras.

Una parte importante de un juego de plataformas en 2D es que la información en pantalla se muestre durante el juego. Diseñará un indicador de nivel de salud mediante un elemento de interfaz de usuario de control deslizante modificado, que luego se vinculará al código del jugador. También agregará un contador de recogida en pantalla que usa un elemento de texto básico, donde el texto se actualizará por código de jugador a medida que el jugador recopile prefabricados de recolección.

Lo que aprenderás

Identificar los diferentes tipos de componentes de UI, incluyendo lienzo, panel, botones, entradas de texto y controles deslizantes
Crear una secuencia de pantalla de presentación para introducir el juego
Construir un menú principal interactivo por capas de elementos de panel, agregando botones y aplicando efectos como sombras proyectadas
Diseñar un indicador de nivel de salud usando un elemento modificado de control deslizante de UI
Agregar un contador de recogida en pantalla usando un elemento de texto básico actualizado por código de jugador

Puntos clave

El curso utiliza componentes de Unity UI para mejorar el diseño de un juego de plataforma 2D.
Una UI se compone de componentes como un lienzo, panel, botones, entradas de texto y controles deslizantes.
Un menú principal interactivo se puede construir por capas de elementos de panel, agregando botones y agregando efectos como sombras proyectadas.
El indicador de nivel de salud es un elemento modificado de control deslizante de UI que se vincula posteriormente al código del jugador.
El contador de recogida utiliza un elemento de texto básico que se actualiza por código de jugador a medida que el jugador recoge prefabs de recogida.

Preguntas frecuentes

¿Qué aprenderé en este curso?

Aprenderás sobre el uso de componentes de interfaz de usuario (UI), incluyendo la creación de pantallas de presentación, un menú principal y una superposición de salud y recogidas, y cómo usar estos componentes para mejorar tu diseño de juego de plataforma 2D.

¿Qué componentes de UI cubre este curso?

Cubre los componentes que conforman una UI, como un lienzo, panel, botones, entradas de texto y controles deslizantes.

¿Qué lecciones se incluyen?

Las lecciones son Entendiendo los Componentes de UI, Creando Pantallas de Presentación, Creando el Menú Principal, y Creando Elementos de UI de Juego.

¿Qué habilidades construiré?

Construirás habilidades en Interfaz de Usuario Codificada (UI), Diseño de Interfaz, Componentes de UI, Escritura de UI/UX, Interfaz de Usuario (UI), y Diseño de Interfaz de Usuario (UI).

¿Cómo maneja este curso la información del juego en pantalla?

Diseñarás un indicador de nivel de salud usando un elemento modificado de control deslizante de UI y agregarás un contador de recogida en pantalla usando un elemento de texto básico que se actualiza por código de jugador a medida que el jugador recoge prefabs de recogida.