Las pantallas de selección de misión suelen aparecer al principio de una partida para ofrecer a los jugadores la elección de una misión. A veces aparece una pantalla de selección de misión después de un tutorial rápido que familiariza a los jugadores con las reglas y la mecánica del juego.
La selección de misión inicia el juego y lleva a los jugadores a un punto de partida específico de la isla para esa misión. Estas pantallas pueden incluir detalles sobre las estadísticas de las misiones, proporcionar información sobre el tipo de misiones entre las que puede elegir el jugador o simplemente introducir jugadores en la misión seleccionada.
El siguiente tutorial te enseñará a crear una pantalla de misión que lleve a los jugadores a la misión seleccionada.
Paso 1: Busca estilos de selección de misión
Hay varias formas de diseño una pantalla de selección de menú, dependiendo de la cantidad de información que quieras proporcionar a los jugadores. La información puede ser en forma de descripciones de misiones o de imágenes de texturas del nivel de la misión. En este ejemplo verás ejemplos de ambos para ver el impacto que puedes crear solo con materiales o añadiendo texturas estratégicamente a tu diseño.
Las texturas utilizan mucha memoria y pueden consumir una parte significativa del recuento total de memoria de la isla.
Decidir la cantidad de información que se va a incluir en la pantalla de selección de misión beneficia a la fase de diseño.
Paso 2: Diseña la disposición
Diseña la disposición de la pantalla de la misión antes de abrir UMG. Las elecciones de diseño que hagas en este momento no son permanentes y pueden rediseñarse sin romper ninguna función de la interfaz de usuario. La disposición de la pantalla depende de lo que se incluya en la pantalla de selección de misión.
Estas son 4 decisiones iniciales de disposición que debes tomar en esta fase:
Esquema de color: utiliza la regla 60/30/10 cuando utilices colores en la IU.
Elección de fuente: actualmente hay dos opciones de fuente; Burbank y HeadingNow.
Materiales: utiliza los materiales de la plantilla de funciones de interfaz de usuario para crear un aspecto único propio para tu interfaz de usuario.
Imágenes/texturas: las texturas deben reservarse para el arte complicado que no se pueda recrear fácilmente con materiales, como personajes o contenedores artísticos.
La regla 60/30/10 significa que el 60 % del color utilizado en el diseño de tu IU debe ser el color principal, el 30 % el color secundario y el 10 % el color de acento. Esto hace que tu IU sea más fácil de leer y navegar.
Cuando te hayas decidido por una combinación de colores, crea materiales e instancias de material para utilizarlos en el diseño de tu interfaz de usuario.
Para este ejemplo, el diseño es sencillo. Hay una llamada a la acción en la parte superior de la pantalla que dice a los jugadores que «elijan su misión», seguida de tres imágenes etiquetadas como Misión 1, 2 y 3, y cada una de ellas con un botón INICIAR.
Paso 3: Diseña la disposición del widget
Hay 4 partes principales en el ejemplo de disposición del widget:
Diseño de fondo
Diseño de estela - Misión 1
Diseño de estela - Misión 2
Diseño de estela - Misión 3
Para crear un widget que tenga botones funcionales, tienes que utilizar un widget Variante de diálogo modal. Hay un Viewmodel especial que se utiliza con el widget Variante de diálogo modal y que permite vincular botones a dispositivos.
Dentro de la carpeta, crea un widget Variante de diálogo modal.
Nombra el widget Mission_Select_UI.
Haz doble clic en el widget Mission_Select_UI para abrir el editor de widgets.
Diseño de fondo
En este ejemplo, el diseño del fondo de la pantalla de selección de misión implica el uso de materiales para añadir bloques de color al fondo, una llamada a la acción en la parte superior de la pantalla y la imagen de textura de un personaje.
En el editor de widgets, haz lo siguiente:
Desde el panel Paleta, arrastra un widget Superposición hasta el grafo de widgets. Este widget se convierte en el widget raíz y actúa como la pantalla donde aparece la IU.
En el grafo de widgets, expande el widget Superposición hasta que su tamaño sea 1920 x 1080.
En el panel Jerarquía, haz clic derecho en el widget Superposición para abrir el menú contextual. Selecciona Cambiar nombre en el menú desplegable y dale al widget el nombre Raíz. Este widget engloba todos los widgets que componen la pantalla de selección de misión.
Cambia la disposición del grafo a Deseado. Esto te permite establecer la interfaz de usuario al tamaño exacto que quieres que aparezca en cualquier pantalla.
Puedes ver cómo cambia tu IU según la plataforma seleccionando una pantalla en el menú desplegable de tamaño de la pantalla.
Arrastra un panel Superposición desde el panel Paleta debajo del widget Raíz y cámbiale el nombre Contenedor principal. Este widget Superposición alojará todas las partes de la pantalla de selección de misión.
Este widget debe ser del mismo tamaño que el widget Raíz.
Cambia las opciones de alineación del widget Contenedor principal a Relleno horizontal y Relleno vertical.
Arrastra un widget Imagen desde el panel Paleta al panel Jerarquía, debajo del widget Contenedor principal.
Haz clic con el botón derecho del ratón en el widget Imagen para abrir el menú contextual. Selecciona Cambiar nombre del menú desplegable y dale al widget el nombre Color de fondo de la interfaz de usuario.
Selecciona el widget Color de fondo de la interfaz de usuario en el panel Jerarquía para abrir sus opciones en el panel Detalles.
En las opciones de Ranura (ranura de superposición), utiliza los siguientes ajustes de alineación:
Alineación horizontal = Relleno horizontal
Alineación vertical = Relleno vertical
En las opciones de Apariencia, utiliza el menú desplegable Pincel > Imagen para seleccionar tu material de color principal. Esto hace que el widget Imagen sea del color del material.
Arrastra un widget Panel de cuadrícula desde el panel Paleta hasta el widget Contenedor principal y cámbiale el nombre a Cuerpo. El panel Cuadrícula actúa como contenedor de todo el contenido de la interfaz de usuario. También añade una cuadrícula flexible a la disposición que organiza sus widgets hijos en filas y columnas. En este ejemplo, el contenido de la pantalla de la misión y la imagen del personaje.
En las opciones de Ranura (ranura de superposición), utiliza los siguientes ajustes:
Alineación horizontal = Alineación centrada
Alineación vertical = Alineación centrada
Relleno = 64.0
Arrastra una caja apilable al widget Cuerpo y cámbiale el nombre a Contenido. Una caja apilable utiliza la alineación horizontal o vertical para disponer sus widgets hijos.
Cambia la configuración de alineación del widget Contenido a Relleno horizontal y Relleno vertical.
En la opción Comportamiento, cambia el ajuste de Orientación a Vertical.
Cómo añadir texto de llamada
Arrastra un widget Cuadro de texto desde el panel paleta y anídalo debajo de Contenido. Se convierte en el texto de llamada que incita a los jugadores a elegir una misión.
Cambia el nombre del cuadro de texto a Elige tu misión.
Selecciona el widget Elige tu misión del panel Jerarquía para abrir sus opciones en el panel Detalles.
En las opciones de Ranura (ranura de superposición), utiliza los siguientes ajustes:
Tamaño = Automático
Alineación horizontal = Alineación a la izquierda
Alineación vertical = Relleno vertical
Haz clic en el campo de texto, elimina el texto predeterminado y escribe Elige tu misión.
En las opciones de Apariencia, utiliza los siguientes ajustes:
Color y opacidad = Hex Linear E0137CFF
Familia de fuentes = HeadingNow
Tipo de letra = 86Bold
Tamaño = 85
Tamaño del contorno = 2
Esquinas angulosas = Seleccionado
V = Hex Linear FFFFFFFF
Arrastra un widget Imagen al widget Contenido y cámbiale el nombre a Separador. Este widget se utiliza como separador para colocar un espacio entre la llamada y las teselas de la misión.
Cómo añadir espacio en las teselas de la misión
Arrastra un widget Superposición al widget Contenido y nómbralo Teselas.
Arrastra un widget Imagen al widget Teselas y cámbiale el nombre a TileBG.
Selecciona el widget TileBG en el panel Jerarquía para abrir sus opciones en el panel Detalles.
En las opciones de Ranura (ranura de superposición), utiliza los siguientes ajustes:
Alineación horizontal = Relleno horizontal
Alineación vertical = Relleno vertical
En las opciones de Apariencia, utiliza los siguientes ajustes.
Pincel > Imagen = material de fondo secundario
Tamaño de la imagen:
X = 1200
Y = 32.0
Arrastra un widget Caja apilable al widget Teselas y cámbiale el nombre a Teselas de la misión. Esta caja apilable ordenará las teselas de la misión de izquierda a derecha.
La disposición del fondo está completa. La pantalla de selección de misión debería parecer bastante vacía ahora.
A continuación, dispondrás las tres teselas de selección de misión y las construirás dentro del widget Caja apilable. También añadirás una textura de personaje al diseño para añadir interés visual. Diseño de teselas de misión 1
El diseño de las teselas de misión puede proporcionar información sobre el nivel y los objetivos y presentar estadísticas sobre los objetivos del jugador, e incluso puede hacer un seguimiento el progreso del jugador en esos objetivos. Este ejemplo de teselas es un diseño más simple. Hay una textura de fondo que muestra una representación del nivel, un número de misión y un botón de inicio. El uso de una serie de cajas apilables permite disponer los widgets de izquierda a derecha o de arriba abajo. Cuando tienes una disposición vertical u horizontal, una caja apilable ayuda a mantener la coherencia en la disposición. Las tres teselas de misión siguen el mismo patrón de diseño. Sigue las instrucciones que aparecen a continuación para construir las tres teselas.
Arrastra un widget Superposición al panel de cuadrícula del panel Jerarquía y cámbiale el nombre a Misión 1. Se convierte en un cubo que contiene todos los elementos de diseño de la tesela de misión 1.
Selecciona el widget Misión 1 en el panel Jerarquía para abrir sus opciones en el panel Detalles.
En la opción Ranura (ranura de superposición), utiliza los siguientes ajustes de Relleno:
Izquierda = 0.0
Superior = 0.0
Derecha = 24.0
Inferior = 0.0
Arrastra un widget Imagen al widget Misión 1 en el panel Jerarquía y cámbiale el nombre a Mission1Image. Este widgets es la representación visual de Misión 1.
Selecciona Mission1Image en el panel Jerarquía para abrir sus opciones en el panel Detalles.
En las opciones de Ranura (ranura de caja apilable), utiliza los siguientes ajustes:
Alineación horizontal = Horizontal completa
Alineación vertical = Vertical completa
En las opciones de Apariencia, cambia los siguientes ajustes:
Imagen = Textura Misión 1
Tamaño de la imagen:
X = 256.0
Y = 256.0
Ajustar el tamaño de la imagen proporciona otra capa de control sobre el diseño.
Cómo ordenar el contenido de las teselas
Arrastra un widget Caja apilable al widget Misión 1 y nómbralo M1Content.
Selecciona M1Content en el panel Jerarquía para abrir sus opciones en el panel Detalles.
En las opciones de Ranura (ranura de superposición), cambia los siguientes ajustes:
Alineación horizontal = Alineación centrada
Alineación vertical = Alineación centrada
Esto hace que todos los widgets Caja apilable hijos se alineen en el centro.
En la opción Comportamiento , establece Orientación en Vertical. Esto hace que todos los widgets hijos se apilen verticalmente.
Arrastra un widget Superposición a M1Content y cámbiale el nombre a M1Header. Esta superposición actúa como un cubo para todos los recursos de encabezado y les da formato según la configuración de la superposición.
Selecciona M1Header en el panel Jerarquía para abrir sus opciones en el panel Detalles.
En Ranura (ranura de caja apilable), cambia las siguientes opciones:
Relleno:
Izquierda = 0.0
Superior = 0.0
Derecha = 0.0
Inferior = 128.0
Tamaño = Automático
Alineación horizontal = Alineación centrada
Alineación vertical = Vertical completa
La configuración única de relleno proporciona relleno en el lado derecho de la tesela Misión 1.
Cómo aplicar estilo al texto de la tesela de misión
Arrastra un widget Imagen a M1Header y cámbiale el nombre a M1Stroke.
Selecciona M1Stroke en el panel Jerarquía para abrir sus opciones en el panel Detalles.
En Ranura (ranura de superposición), establece la alineación en Horizontal completa y Vertical completa.
En las opciones de Apariencia, utiliza los siguientes ajustes:
Imagen = Trozo de material
Tamaño de la imagen:
X = 200.0
Y = 32.0
Arrastra un cuadro de texto al widget M1Header y renombra el widget Mission_1.
Selecciona el widget de texto Misión 1 en el panel Jerarquía para abrir sus opciones en el panel Detalles.
En las opciones de Ranura (ranura de superposición), utiliza los siguientes ajustes de alineación:
Alineación horizontal = Alineación centrada
Alineación vertical = Alineación superior
Cambia el texto a Misión 1.
En la herramienta Pincel > Imagen, abre el Selector de color y elige el color de acento para el texto.
En Fuente, establece las siguientes opciones:
Tipo de letra = Negrita
Tamaño = 25.0
Espaciado = 65
Cantidad de distorsión = 0.28
En Configuración del contorno, establece las siguientes opciones:
Tamaño del contorno = 1
Relleno alfa separado = Seleccionado
Aplicar contorno para mostrar sombra = Seleccionado
Color del contorno = Selecciona tu color principal en la herramienta Selector de color.
Cambia Color de sombra a tu color principal desde la herramienta Selector de color. La fuente debe parecer ligeramente 3D y tener un estilo distinto del texto de la llamada.
Cómo añadir un botón de inicio
Arrastra un widget Botón de silencio al widget M1Content y cámbiale el nombre a START_M1_Button.
Selecciona START_M1_Button el panel Jerarquía para abrir sus opciones en el panel Detalles.
Cambia el texto del botón a INICIAR.
En las opciones de Ranura (ranura de la caja apilable), establece Altura mínima en 56. Esto reduce la altura del botón.
Marca Selección > Seleccionable. Esto hace que el botón pueda ser seleccionado por el jugador.
En Entrada, configura las siguientes opciones:
Método táctil = Desactivado
Método de pulsación = Pulsación de botón
Sigue los pasos para construir la disposición de Misión 2 y Misión 3.
Antes de añadir las teselas de la misión 2 y la misión 3, el diseño debe ser como el de la siguiente imagen.
Una vez completados todas las teselas de misión, añadir un personaje al diseño para dar a la interfaz de usuario cierto interés visual.
Cómo una textura de personaje
Añadir una textura de personaje a la interfaz de usuario toma todos los colores elegidos para el diseño y añade estilo visual a la interfaz de usuario. Recuerda utilizar la potencia de dos y asegúrate de que la textura que utilizas es de una calidad alta que puede escalar a cualquier tamaño.
Arrastra un widget Imagen al widget Cuerpo y cámbiale el nombre a Personaje.
Selecciona el widget Personaje en el panel Jerarquía para abrir sus opciones en el panel Detalles.
En Apariencia, utiliza los siguientes ajustes:
Pincel > Imagen = Textura de personaje
Tamaño de la imagen:
X = 700
Y = 700
En las opciones de Ranura (ranura de cuadrícula), utiliza los siguientes ajustes:
Alineación horizontal = Alineación a la derecha
Alineación vertical = Vertical completa
Empujón = Utiliza las herramientas del eje x y el eje Y para colocar con precisión la textura del personaje.
Una vez finalizada la sección de la misión, todo estará listo para conectar la función de los botones de la IU.
Paso 4: Añade un Viewmodel
Un Viewmodel controla la información del jugador a través de una lista de funciones y proporciona una forma específica de vincular los widgets de UMG a los dispositivos del modo Creativo. Hay un Viewmodel específico que funciona con botones, el CreativeModalDialogViewmodel. Este Viewmodel solo funciona con el widget Variante de diálogo modal y proporciona numerosas funciones de botón.
Para utilizar el Viewmodel, haz lo siguiente:
Abra el menú Ventanas desde la barra del menú principal.
Selecciona Viewmodels en el menú desplegable. El panel CreativeModalDialogViewModel aparece automáticamente en la ventana del editor de widgets.
Todas las funciones de los botones se añaden al widget. Ahora tienes que añadir las vinculaciones para que los botones funcionen.
Paso 5: Añade dispositivos
Una vez configuradas las zonas de la misión, cada zona necesita su propio dispositivo Teletransportador configurado para recibir al jugador. Un dispositivo Diálogo emergente toma el widget Variante de diálogo modal y muestra la interfaz de usuario del widget cuando se activa.
Dispositivo Diálogo emergente
Empieza añadiendo un dispositivo Diálogo emergente al proyecto. Modifica sus opciones, y a continuación, añade el widget Variante de diálogo modal al dispositivo.
Arrastra un dispositivo Diálogo emergente al visor.
En el panel Detalles, establece las siguientes opciones de usuario:
Descripción = Pantalla de selección de misión
Visualización automática = Inicio de la partida
Tipo de respuesta = 3 botones
Estas opciones identifican el widget, determinan cuándo se muestra la IU en el HUD y el número de botones asociados al widget.
En las opciones avanzadas, establece las siguientes opciones:
Botón de retroceso predeterminado = Ninguno
Texto del botón 1 = INICIAR
Texto del botón 2 = INICIAR
Texto del botón 3 = INICIAR
Ocultar fondo = Seleccionado
Habilitado durante fase = Solo jugabilidad
Desplázate hacia abajo hasta Widget modal > Clase de anulación de plantilla y selecciona tu widget Mission_Select_UI en el menú desplegable.
Desplázate hasta Opciones de usuario - Funciones y, en Mostrar, abre un elemento de matriz.
Añade la plataforma de aparición del jugador 1 al campo superior.
Selecciona Al aparecer un jugador para la función de la plataforma de aparición.
Dispositivos Teletransportador
Para reducir el tiempo de desarrollo, crea el primer dispositivo Teletransportador y modifica sus opciones, luego copia el dispositivo y coloca los dispositivos adicionales en sus respectivas zonas de la misión.
Arrastra un dispositivo Teletransportador al visor.
En el panel Detalles, en las opciones de usuario, desmarca Grieta de teletransportador visible y Reproducir elementos visuales.
Desplázate hasta Opciones de usuario - Funciones y, en Teletransportar, abre un elemento de matriz.
Añade el diálogo emergente al campo superior.
Selecciona Al responder con el botón 1.
Duplica el dispositivo Teletransportador 2 veces.
En cada una de las funciones adicionales del dispositivo Teletransportador - Funciones > Teletransportar > Dispositivo Diálogo emergente, cambia la función al botón correspondiente (Al responder con el botón 2, Al responder con el botón 3).
Para iniciar una misión, el jugador hace clic en el botón asociado a una zona de misión y se teletransporta a la zona de misión seleccionada. Para crear esta función, vincularás la función del botón a los botones de la pantalla de selección.
Paso 6: Vinculaciones de vistas
Las vinculaciones de vistas añaden la lógica que vincula la función del dispositivo y del widget.
En este ejemplo, los botones se vinculan a los dispositivos Teletransportador mediante la función Teletransportar. Cuando el jugador selecciona una misión, al hacer clic en el botón INICIAR se activa el teletransportador conectado y teletransporta al jugador a la zona de esa misión.
Todos los botones añadidos a la jerarquía están numerados. Esto facilita la vinculación de la función del botón al dispositivo.
Para añadir las vinculaciones, haz lo siguiente:
Selecciona Start_Mission_1_Button en el panel Jerarquía para resaltarlo y, a continuación, selecciona Vinculaciones de vistas en la barra de herramientas inferior. Se abre la ventana Vinculaciones de vistas con el botón de silencio ya seleccionado.
Selecciona +Añadir widget Start_Mission_1_Button. Esto crea una vista de vinculación debajo.
Selecciona el campo de la izquierda que contiene el botón Start_Mission_1 y selecciona Al hacer clic > Evento en el menú desplegable. El evento Al hacer clic se añade al botón de silencio.
Selecciona el campo de la derecha a continuación y selecciona CreativeModalDialogViewmodel > Respuesta > Seleccionar en el menú desplegable. Esto añade una función de respuesta al evento Al hacer clic del botón.
En el menú desplegable Respuesta, selecciona Botón 1. La función está vinculada al primer botón de silencio.
Repite estos pasos para enlazar los dos botones siguientes.
En este punto, todos los botones deben estar vinculados a los teletransportadores, y la pantalla de selección de misión debe mostrarse cuando el jugador aparezca en la partida al inicio.
Resultado
El último paso es hacer una prueba de juego del proyecto para asegurarte de que la IU funciona según lo previsto. Inicia una sesión; la pantalla de selección de misión debería mostrarse después de que el jugador aparezca en la isla, y el jugador debe teletransportarse a la misión seleccionada en la interfaz de usuario.
Por tu cuenta
Hay varias formas de cambiar el diseño de la pantalla de selección de misión para que sea única en tu proyecto.
Podrías cambiar la tesela de misión de fondo por un material en lugar de una textura. Esto puede darle a la pantalla de la misión un aspecto diferente.
Podrías añadir un rastreador a cada misión para consultar las estadísticas de los jugadores o los objetos recogidos.
Podrías añadir un dispositivo de ajustes de la ronda para hacer reaparecer a los jugadores y recuperar la pantalla de selección de misión para que los jugadores puedan seleccionar las otras misiones que no hayan jugado todavía, y hacer que las misiones seleccionadas no estén disponibles una vez completadas con éxito.
