Pantalla de selección de misión

Las pantallas de selección de misión suelen aparecer al principio de la partida para ofrecer a los jugadores opciones de misión. A veces, aparece una pantalla de selección de misión después de un tutorial rápido del juego para que los jugadores se familiaricen 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 en la isla para esa misión. Estas pantallas pueden incluir detalles sobre las estadísticas de la misión, ofrecer información sobre el tipo de misiones entre las que puede elegir el jugador o simplemente colocar a los jugadores en la misión seleccionada.

En el siguiente tutorial, te enseñamos cómo crear una pantalla de misión que lleve a los jugadores a la misión seleccionada.

Paso 1: Investiga los estilos de selección de la misión

 Hay varias formas de diseñar una pantalla de selección de menú, según la cantidad de información que desees proporcionar a los jugadores. La información puede estar en forma de descripciones de la misión o imágenes de textura del nivel de la misión. En este caso, verás ejemplos de ambos para ver el impacto que puedes crear solo con materiales o al añadir estratégicamente texturas a tu diseño.

Decidir la cantidad de información que se incluirá en la pantalla de selección de misión resulta beneficioso para la fase de diseño.

Paso 2: Elabora el diseño

Elabora el diseño de la pantalla de la misión antes de abrir UMG. Las elecciones de diseño que realices en este momento no son permanentes y se pueden rediseñar sin interrumpir ninguna funcionalidad de la IU. El diseño de la pantalla depende de lo que se incluya en la pantalla de selección de misión.

Estas son cuatro decisiones iniciales de diseño que debes tomar en esta etapa:

• Esquema de color: usa la regla 60/30/10 cuando uses colores en la IU.

• Elección de la fuente: actualmente hay dos opciones de fuente; Burbank y HeadingNow.

• Materiales: utiliza los materiales de la plantilla de funciones de IU a fin de crear tu propia apariencia única para tu IU.

• Imágenes/texturas: las texturas deben reservarse para el arte complicado que no se puede recrear fácilmente con materiales, como personajes o contenedores artísticos.

Cuando hayas decidido el esquema de colores, crea materiales e instancias de material para utilizarlos en el diseño de tu IU.

Para este ejemplo, el diseño es simple. Hay un requerimiento de acción en la parte superior de la pantalla que dice a los jugadores que “elijan su misión”, seguido de tres imágenes etiquetadas como Misión 1, 2 y 3, y cada una con un botón de inicio.

Paso 3: Elabora el diseño de los widgets

Hay 4 partes principales en el ejemplo de diseño de widgets:

1. Diseño de fondo

2. Diseño de cuadro de la misión 1

3. Diseño de cuadro de la misión 2

4. Diseño de cuadro de la misión 3

Para crear un widget que tenga botones que funcionen, debes usar un widget de variante de modo de diálogo. Se utiliza un modelo de vista especial con el widget de variante de modo de diálogo que ofrece una forma de vincular botones a dispositivos.

1. Crea y abre una carpeta de interfaz de usuario.

2. Dentro de la carpeta, crea un widget de variante de modo de diálogo.

3. Asigna el nombre Mission_Select_UI al widget.

4. 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 de fondo de la pantalla de selección de misión implica utilizar materiales para añadir bloques de color al fondo, así como añadir un requerimiento de acción en la parte superior de la pantalla y una imagen de textura de un personaje.

En el editor de widgets, haz lo siguiente:

1. Desde el panel Paleta, arrastra un widget de superposición hasta el gráfico de widgets. Este widget se convierte en el widget raíz y actúa como la pantalla donde aparece la IU.

2. En el gráfico de widgets, expande el widget de superposición hasta que su tamaño sea de 1920 x 1080.

   

3. En el panel Jerarquía, haz clic derecho en el widget de superposición para abrir el menú contextual. Selecciona Cambiar nombre en el menú desplegable y asigna el nombre Raíz al widget. Este widget abarca todos los widgets que componen la pantalla de selección de misión.

   

4. Cambia el diseño del gráfico a Deseado. Esto te permite definir la IU en el tamaño exacto que deseas que aparezca en cualquier pantalla.

   

   Puedes ver cómo cambia la IU según la plataforma si seleccionas una pantalla en el menú desplegable Tamaño de pantalla.

   

5. Arrastra un panel de superposición desde el panel Paleta debajo del widget Raíz y renómbralo como Contenedor base. En este widget de superposición, se alojarán todas las partes de la pantalla de selección de misión.

   

   Este widget debe tener el mismo tamaño que el widget raíz. 

6. Cambia las opciones de alineación del widget Contenedor base a Rellenar horizontalmente y Rellenar verticalmete.

   

7. Arrastra un widget de imagen desde el panel Paleta al panel Jerarquía en el widget Contenedor base.

8. Haz clic derecho en el widget de imagen para abrir el menú contextual. Selecciona Cambiar nombre en el menú desplegable y asigna el nombre Color de fondo de la IU al widget.

   

9. Selecciona el widget Color de fondo de la IU en el panel Jerarquía para abrir sus opciones en el panel de detalles.

10. En las opciones Ranura (ranura de superposición), utiliza la siguiente configuración de alineación:

    1. Alineación horizontal = Rellenar horizontalmente

    2. Alineación vertical = Rellenar verticalmente

    

11. En las opciones de Apariencia, usa el menú desplegable Pincel > Imagen para seleccionar el material de color primario. Esto hace que el widget de imagen sea del color del material.

    

12. Arrastra un widget del Panel de cuadrícula desde el panel Paleta hacia el widget Contenedor base y asígnale el nombre nuevo de Cuerpo. El panel de cuadrícula actúa como un contenedor para todo el contenido de la IU. También añade una cuadrícula flexible al diseño que organiza en filas y columnas sus widgets derivados. En este ejemplo, el contenido de la pantalla de la misión y la imagen del personaje.

    

13. En las opciones Ranura (ranura de superposición), utiliza la siguiente configuración:

    1. Alineación horizontal = Alineación central

    2. Alineación vertical = Alineación central

    3. Relleno = 64.0

    

14. Arrastra un widget de cajas apiladas al widget Cuerpo y cámbiale el nombre a Contenido. Una caja apilada utiliza alineación horizontal o vertical para diseñar sus widgets derivados.

    

15. Cambia la configuración de alineación del widget Contenido a Rellenar horizontalmente y Rellenar verticalmente.

    

16. En la opción Comportamiento, cambia la configuración de Orientación a Vertical.

    

Cómo añadir texto de llamada

1. Arrastra un widget de Caja de texto desde el panel Paleta y anídalo bajo Contenido. Esto se convierte en el texto de llamada que incita a los jugadores a elegir una misión.

2. Cambia el nombre de la Caja de texto a Elige tu misión.

   

3. Selecciona el widget Elige tu misión en el panel Jerarquía para abrir sus opciones en el panel de detalles.

4. En las opciones de Ranura (ranura de superposición), utiliza la siguiente configuración:

   1. Tamaño = Automático

   2. Alineación horizontal = Alineación a la izquierda

   3. Alineación vertical = Rellenar verticalmente

   

5. Haz clic en el campo de texto, elimina el texto predeterminado y escribe Elige tu misión.

   

6. En las opciones de Apariencia, utiliza la siguiente configuración: 

   1. Color y opacidad = Línea hexadecimal E0137CFF

   2. Familia de fuentes = HeadingNow

   3. Tipografía = 86Bold

   4.  Tamaño = 85

   5. Tamaño del contorno = 2

   6. Esquinas a 45 grados = Marcar

   7. Color del contorno = Línea hexadecimal FFFFFFFF

   

7. Arrastra un widget de imagen al widget Contenido y cámbiale el nombre a Espaciador. Este widget se utiliza como espaciador para poner un espacio entre la llamada y los cuadros de misión.

   

Cómo añadir el espacio del cuadro de misión

1. Arrastra un widget de superposición al widget Contenido y cámbiale el nombre a Cuadros.

   

2. Arrastra un widget de imagen al widget Cuadros y cámbiale el nombre a TileBG.

   

3. Selecciona el widget TileBG en el panel Jerarquía para abrir sus opciones en el panel de detalles.

4. En las opciones de Ranura (ranura de superposición), utiliza la siguiente configuración:

   1. Alineación horizontal = Rellenar horizontalmente 

   2. Alineación vertical = Rellenar verticalmente

   

5. En las opciones de Apariencia, utiliza la siguiente configuración:

   1. Pincel > Imagen = Material de fondo secundario

   2. Tamaño de imagen:

      1. X = 1200

      2. Y = 32.0

   

6. Arrastra un widget de cajas apiladas al widget Cuadros y cámbiale el nombre a Cuadros de misión. Esta caja apilada ordenará los cuadros de misión de izquierda a derecha.

   

El diseño de fondo está completo. La pantalla de selección de misión debería verse bastante vacía en esta etapa.

A continuación, dispondrás los tres cuadros de selección de misión y los construirás dentro del widget de cajas apiladas. También añadirás una textura de personaje al diseño para añadir interés visual. Diseño de cuadro de la misión 1

El diseño del cuadro de la misión puede proporcionar información sobre el nivel y los objetivos, así como presentar estadísticas sobre los objetivos del jugador, e incluso puede rastrear el progreso del jugador en esos objetivos. Este ejemplo de cuadro ofrece 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 apiladas proporciona una forma de diseñar widgets de izquierda a derecha o hacia arriba o hacia abajo. Cuando tienes un diseño vertical u horizontal, una caja de pila ayuda a mantener la coherencia del diseño. Los tres cuadros de misión siguen el mismo patrón de diseño. Sigue las instrucciones que aparecen a continuación para construir los tres cuadros de selección.

1. Arrastra un widget de superposición al panel de cuadrícula en el panel Jerarquía y cámbiale el nombre a Misión 1. Esto se convierte en un depósito que contiene todos los elementos de diseño para el cuadro de la Misión 1.

   

2. Selecciona el widget Misión 1 en el panel Jerarquía para abrir sus opciones en el panel de detalles.

3. En la opción Ranura (ranura de cajas apiladas), utiliza la siguiente configuración de Relleno:

   1. Izquierda = 0.0

   2. Superior = 0.0

   3. Derecha = 24.0

   4. Inferior = 0.0

   

4. Arrastra un widget de imagen al widget Misión 1 en el panel Jerarquía y cámbiale el nombre a Mission1Image. Este widget es la representación visual de Mission1.

   

5. Selecciona Mission1Image en el panel Jerarquía para abrir sus opciones en el panel de detalles.

6. En las opciones de Ranura (ranura de cajas apiladas), utiliza la siguiente configuración:

   1. Alineación horizontal = Totalmente horizontal 

   2. Alineación vertical = Totalmente vertical

   

7. En las opciones de Apariencia, cambia la configuración siguiente:

   1. Imagen = textura de Misión 1

   2. Tamaño de imagen:

      1. X = 256.0

      2. Y = 256.0

   

   Si estableces el tamaño de la imagen, obtienes otra capa de control sobre el diseño del cuadro.

Cómo ordenar el contenido del cuadro

1. Arrastra un widget de cajas apiladas al widget Misión 1 y cámbiale el nombre a M1Content.

   

2. Selecciona M1Content en el panel Jerarquía para abrir sus opciones en el panel de detalles.

3. En las opciones de Ranura (ranura de superposición), cambia la siguiente configuración:

   1. Alineación horizontal = Alineación central

   2. Alineación vertical = Alineación central

   

   Esto hace que todos los widgets derivados de cajas apiladas se alineen en el centro.

4. En la opción Comportamiento , establece Orientación en Vertical. Esto hace que todos los widgets derivados se apilen verticalmente.

   

5. Arrastra un widget de superposición a M1Content y cámbiale el nombre a M1Header. Esta superposición actúa como un depósito para todos los recursos de encabezado y les aplica formato según la configuración de la superposición.

   

6. Selecciona M1Header en el panel Jerarquía para abrir sus opciones en el panel de detalles.

7. En Ranura (ranura de cajas apiladas), cambia las siguientes opciones:

   1. Relleno:

      1. Izquierda = 0.0

      2. Superior = 0.0

      3. Derecha = 0.0

      4. Inferior = 128.0

   2. Tamaño = Automático

   3. Alineación horizontal = Alineación central

   4. Alineación vertical = Totalmente vertical

   

   La configuración de relleno exclusivo proporciona relleno en el lado derecho del cuadro de Misión 1.

Cómo aplicar estilo al texto del cuadro de la misión

1. Arrastra un widget de imagen a M1Header y cámbiale el nombre a M1Stroke.

   

2. Selecciona M1Stroke en el panel Jerarquía para abrir sus opciones en el panel de detalles.

3. En Ranura (ranura de superposición), establece la alineación en Totalmente horizontal y Totalmente vertical.

   

4. En las opciones de Apariencia, utiliza la siguiente configuración:

   1. Imagen = Material segmentado

   2. Tamaño de imagen:

      1. X = 200.0

      2. Y = 32.0

   

5. Arrastra un cuadro de texto al widget M1Header y cambia el nombre del widget a Mission_1.

   

6. Selecciona el widget de texto Mission_1 en el panel Jerarquía para abrir sus opciones en el panel de detalles.

7. En las opciones de Ranura (ranura de superposición), utiliza la siguiente configuración de alineación:

   1. Alineación horizontal = Alineación central

   2. Alineación vertical = Alineación superior

   

8. Cambia el texto a Misión 1.

   

9. Desde la herramienta Pincel > Imagen, abre el selector de color y elige el color de detalle para el texto.

10. En Fuente, define las siguientes opciones:

    1. Tipografía = Negrita

    2. Tamaño = 25.0

    3. Espaciado entre letras = 65

    4. Grado de inclinación = 0.28

    

11. En Ajustes de contorno, establece las siguientes opciones:

    1. Tamaño del contorno = 1

    2.  Canal alfa de relleno separado = Marcar

    3. Aplicar contorno a sombra paralela = Marcar

    4. Color del contorno = Selecciona tu color principal de la herramienta Selector de color

    

12. Cambia el Color de sombra a tu color principal con la herramienta Selector de color. La fuente debe verse ligeramente en 3D y tener un estilo distinto del texto de la llamada.

    

Cómo agregar un botón de inicio

1. Arrastra un widget de botón de silencio al widget M1Content y cámbiale el nombre a START_M1_Button.

   

2. Selecciona START_M1_Button en el panel Jerarquía para abrir sus opciones en el panel de detalles.

3. Cambia el Texto del botón a INICIO.

   

4. En las opciones de Ranura (ranura de cajas apiladas), establece la Altura mínima en 56. Esto acorta la altura del botón.

   

5. Marca Selección > Seleccionable. Esto hace que el jugador pueda seleccionar el botón.

   

6. En Entrada, establece las siguientes opciones:

   1. Método táctil = Abajo

   2. Método de pulsación = Pulsación de botón

   

7. Usa los pasos para crear el diseño de la Misión 2 y la Misión 3.

Antes de añadir los cuadros de Misión 2 y Misión 3, el diseño debería ser como el que se muestra a continuación.

Una vez que se hayan completado todos los cuadros de misión, añade un personaje al diseño para darle cierto interés visual a la IU.

Cómo añadir una textura de personaje

Al añadir una textura de personaje a la IU, se extraen todos los colores elegidos para el diseño y se añade estilo visual a la IU. Recuerda utilizar la potencia de dos y asegúrate de que la textura que utilices sea de alta calidad y pueda ampliarse a cualquier tamaño.

1. Arrastra un widget de imagen al widget Cuerpo y cámbiale el nombre a Personaje.

   

2. Selecciona el widget Personaje en el panel Jerarquía para abrir sus opciones en el panel de detalles.

3. En Apariencia, utiliza la siguiente configuración:

   1. Pincel > Imagen = Textura de personaje

   2. Tamaño de imagen:

      1. X = 700

      2. Y = 700

   

4. En las opciones de Ranura (ranura de cuadrícula), utiliza la siguiente configuración:

   1. Alineación horizontal = Alineación a la derecha

   2. Alineación vertical = Totalmente vertical

   3. Empuje suave = Utiliza las herramientas de los ejes X e Y para colocar con precisión la textura de personaje en su lugar.

   

Una vez completada la sección de la misión, podrás conectar la funcionalidad de los botones en la IU.

Paso 4: Añade un modelo de vista

Un modelo de vista controla la información del jugador a través de una lista de funciones y ofrece una forma específica de vincular widgets de UMG a dispositivos del modo Creativo. Existe un modelo de vista específico que funciona con botones, el CreativeModalDialogViewmodel. Este modelo de vista solo funciona con el widget de variante de modo de diálogo y proporciona numerosas funciones de botón.

Para utilizar el modelo de vista, haz lo siguiente:

1. Abre el menú Ventanas desde la barra de menús principal.

   

2. Selecciona Modelos de vista en el menú desplegable. El panel CreativeModalDialogViewmodel se documenta 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 que se configuran las áreas de la misión, cada área necesita su propio dispositivo teletransportador configurado para recibir al jugador. Un dispositivo de diálogo emergente toma el widget de variante de modo de diálogo y muestra la IU del widget cuando se activa.

Dispositivo de diálogo emergente

Para comenzar, añade un dispositivo de diálogo emergente al proyecto. Modifica sus opciones y, luego, añade el widget de variante de modo de diálogo al dispositivo.

1. Arrastra un dispositivo de diálogo emergente al visor.

2. En el panel de detalles, establece las siguientes opciones de usuario:

   1. Descripción = Pantalla de selección de misión

   2. Visualización automática = Inicio del juego

   3. Tipo de respuesta = 3 botones

   

   Estas opciones identifican el widget, determinan cuándo se muestra la IU en el HUD y la cantidad de botones asociados al widget.

3. En las opciones avanzadas, define las siguientes opciones:

   1. Botón Atrás predeterminado = Ninguno

   2. Texto del botón 1 = INICIO

   3. Texto del botón 2 = INICIO

   4. Texto del botón 3 = INICIO

   5. Oscurecer fondo = Marcar

   6. Habilitado durante fase = Solo durante el juego

   

   

4. Desplázate hacia abajo hasta Widget modal > Clase de anulación de plantilla y selecciona el widget Mission_Select_UI en el menú desplegable.

   

5. Desplázate hasta Opciones de usuario: funciones y, en Mostrar, abre un elemento de la matriz.

6. Añade la plataforma de aparición del jugador 1 al campo superior.

7. Selecciona Cuando aparece el jugador para la función Plataforma de aparición.

   

Dispositivos teletransportadores

Para reducir el tiempo de desarrollo, crea el primer dispositivo teletransportador y modifica sus opciones. A continuación, copia el dispositivo y coloca los dispositivos adicionales en sus respectivas zonas de misión. 

1. Arrastra un dispositivo teletransportador hacia el interior del visor.

2. En el panel de detalles, en Opciones de usuario, desmarca Grieta de teletransportador visible y Reproducir efectos visuales.

   

3. Desplázate hacia abajo hasta Opciones de usuario: funciones y, en Teletransportar, abre un elemento de la matriz.

4. Añade el diálogo emergente al campo superior.

5. Selecciona Al responder con el botón 1.

   

6. Duplica el dispositivo teletransportador 2 veces.

7. En cada una de las funciones adicionales del teletransportador, Opciones de usuario: funciones > Teletransportar > Dispositivo de 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 comenzar una misión, el jugador hace clic en el botón asociado con un área de misión y luego es teletransportado al área de misión seleccionada. Para crear esta funcionalidad, vincularás la funcionalidad del botón a los botones en la pantalla de selección.

Paso 6: Añade vinculaciones de vista

Las vinculaciones de vista añaden la lógica que vincula el dispositivo con la función del widget. 

En este ejemplo, los botones se vinculan a los dispositivos teletransportadores a través de la función Teletransportar. Cuando el jugador selecciona una misión, al hacer clic en el botón INICIO se activa el teletransportador conectado y el jugador se teletransporta a esa zona de misión.

Para añadir las vinculaciones, haz lo siguiente:

1. Selecciona Start_Mission_1_Button en el panel Jerarquía para resaltarlo y, luego, selecciona Vinculaciones de vista en la barra de herramientas inferior. Se abrirá la ventana Vinculaciones de vista con el botón Silencio ya seleccionado.

   

2. Selecciona +Añadir widget Start_Mission_1_Button. Esto crea internamente una vista vinculada.

   

3. Selecciona el campo izquierdo que contiene Start_Mission_1_Button y selecciona Al hacer clic > Evento en el menú desplegable. El evento Al hacer clic se añade al botón de silencio.

   

4. Selecciona el campo de la derecha a continuación y, luego, selecciona CreativeModalDialogViewmodel > Respuesta > Seleccionar en el menú desplegable. Esto añade una función de respuesta al evento Al hacer clic del botón.

   

5. En el menú desplegable Respuesta, selecciona Botón 1. La función está vinculada al primer botón de silencio.

   

6. Repite estos pasos para vincular los siguientes dos botones.

   

En este punto, todos los botones deberían estar vinculados a los teletransportadores, y la pantalla de selección de misión debería mostrarse cuando el jugador aparece en el juego al comienzo de la partida.

Resultado

El último paso es realizar una prueba de juego del proyecto para asegurarte de que la IU funcione según lo previsto. Inicia una sesión. La pantalla de selección de misión debe mostrarse después de que el jugador aparece en la isla, y el jugador debe teletransportarse a la misión seleccionada en la IU.

Hazlo por tu cuenta

Hay varias formas de cambiar el diseño de la pantalla de selección de misión para que se adapte específicamente a tu proyecto. 

• Podrías cambiar el cuadro de misión de fondo a un material en lugar de una textura. Esto puede dar a la pantalla de la misión un aspecto diferente.

  

• Podrías añadir un rastreador a cada misión para rastrear las estadísticas de los jugadores o los objetos recolectados.

• Podrías añadir un dispositivo de configuración de ronda para hacer reaparecer a los jugadores y traer de vuelta la pantalla de selección de misión para que puedan seleccionar las otras misiones que no han jugado todavía, y hacer que las misiones seleccionadas no estén disponibles después de completarse satisfactoriamente.