Funciones de conversión: A texto (entera) y A texto (doble)

Pasa las variables Integer o Float a un widget usando las funciones de conversión ToText(Int) y ToText(Double). Las funciones de conversión "ToText" convierten una variable de tipo Integer o Float a un tipo de texto que puedes mostrar en tu widget. Una variable no se mostrará en tu widget si permanece como un tipo que no es de texto.

A continuación, se muestran dos ejemplos que ilustran el uso de ambas funciones de conversión.

• Ejemplo de A texto (entera): un widget rastreador personalizado rastrea el progreso de un jugador cuando recoge una cantidad de tocino.

• Ejemplo de A texto (doble): un widget de diálogo emergente personalizado abre un mensaje emergente con posibles respuestas a una pregunta de trivia. Se utiliza un temporizador de cuenta regresiva para cerrar el temporizador si no se seleccionó una respuesta antes de que se agote el tiempo.

A texto (entera)

En este ejemplo, se crea un widget rastreador personalizado para rastrear la cantidad de tocino que recolectó el jugador. Sigue los pasos del documento Mensajes emergentes de la IU para crear un widget de usuario y llamarlo Tracker_Widget.

Cómo configurar los widgets

Para configurar el Tracker_Widget, agrega al panel de jerarquía los siguientes widgets en el orden que se presentan a continuación:

• Superposición

• Imagen (anida debajo de la superposición y cámbiale el nombre a Fondo).

• Caja apilada (anida debajo de la superposición).

• Bloque de texto (anida debajo de la primera caja apilada y cámbiale el nombre a Título; este es el título de tu rastreador "{Tracker Title}")

• Caja apilada (anida debajo de la primera caja apilada).

• 2 X bloques de texto (anida debajo de la segunda caja apilada. Cámbiale el nombre al primer bloque de texto a CurrentValue "{Current}" y al segundo bloque de texto al texto sabroso "tocino recolectado").

Necesitas un bloque de texto que abarque la cantidad actual de tocino que recolecta el jugador. El Tracker_Widget se configura para incluir un bloque de texto TrackerTitle a fin de que la propiedad de nombre pueda pasar del modelo de vista al bloque de texto actual:

Configura tu widget utilizando el mismo

Esto es lo que el jugador ve en el juego cuando recolecta tocino:

Configuración de la función de conversión

La función de conversión A texto (entera) se utiliza para pasar la cantidad actual de tocino al dispositivo rastreador a través del bloque de texto CurrentValue.

Para configurar las funciones de conversión A texto (entera), crea una vista de vinculaciones y vincula los valores que estableces en el widget al dispositivo rastreador.

1. Abre Ventana > Vista de vinculaciones.

   

2. Selecciona el bloque de texto CurrentValue en tu widget y haz clic en + Añadir widget en la ventana Vista de vinculaciones.

   

3. En el cuadro de la izquierda de la vista de vinculaciones, selecciona CurrentValue > Texto. Esto significa que el texto pasará a la propiedad de texto del bloque de texto CurrentValue.

   

4. En el cuadro de la derecha, haz clic en el campo y selecciona Funciones de conversión > A texto (entera). Aparecen varios campos en la vinculación del bloque de texto CurrentValue.

   Para obtener más información sobre la función de cada campo, consulta la sección Propiedades de A texto (entera/doble).

   Esto ejecuta una función de conversión llamada A texto (entera) que toma un valor y devuelve una variable de tipo texto para pasar a la propiedad de texto del bloque de texto CurrentValue.

   

5. Selecciona el ícono de cadena junto a Valor y selecciona MVVM_UEFN_Tracker > Valor.

   

La variable Valor del modelo de vista del rastreador se pasa a la función de conversión A texto (entera). Esto genera la variable de valor como una propiedad de texto que, luego, se pasa a la propiedad de texto del bloque de texto CurrentValue.

Resultado final

Para utilizar tu nuevo widget, arrastra un dispositivo rastreador a tu proyecto y haz lo siguiente:

1. En el panel de detalles del dispositivo rastreador, establece el campo de widget del HUD en tu Track_Widget.

   El rastreador se puede utilizar para rastrear la estadística de puntuación. Puedes utilizar los objetos recolectables en tu nivel para probar esta funcionalidad.

Cada vez que el jugador recolecta tocino en el juego, el rastreador aumenta automáticamente según el valor de puntuación que se estableció para cada tocino.

A texto (doble)

En este ejemplo, utiliza el flujo de trabajo de la variante de diálogo modal del documento Ventanas emergentes de la IU para crear un widget de diálogo emergente personalizado llamado Trivia_Widget. El Trivia_Widget muestra preguntas de trivia de Fortnite que deben responderse antes de que se agote el límite de tiempo.

Cómo configurar los widgets

1. Haz clic derecho en el explorador de contenido para abrir el menú contextual.

   

2. En el menú contextual, selecciona Interfaz de usuario > Blueprint de widgets > Variante de diálogo modal.

   

3. Abre tu widget y añade los siguientes contenedores al panel de jerarquía en el orden que se muestra en la imagen:

   1. Superposición

   2. Imagen

   3. Cajas apiladas X 3

   Una superposición abarca todo el widget como contenedor principal. A continuación, utiliza un widget de imagen para el fondo y, por último, varias cajas apiladas anidadas para incluir todo el contenido, como los textos y los botones.

   

4. Añade bloques de texto y botones a tus cajas apiladas como se muestra a continuación.

   

   Ajusta los bloques de texto TimeLeft y TimeFlavorText en una caja apilada para que el TimeLeft se actualice de forma dinámica a través de un enlace de vista a la variable de tiempo restante para el tiempo de espera en el modelo de vista del diálogo emergente.

   

   Si necesitas ajustar un widget con un contenedor en una estructura existente, no tienes que rehacer todo el widget. Haz clic derecho en el widget y selecciona Ajustar con… o Reemplazar por… para añadir con facilidad un nuevo panel dentro de un contenedor.

   

5. Añade los botones como una cuadrícula de 2 x 2. Como los botones están en una cuadrícula de 2 x 2, utiliza un panel de cuadrícula uniforme en lugar de una caja apilada. Haz clic con el botón derecho en Container_Buttons > Reemplazar por… > Panel de cuadrícula uniforme.

   El panel de cuadrícula uniforme te permite organizar con facilidad los widgets derivados en un patrón de cuadrícula. También puedes configurar con facilidad el relleno de la ranura para cada elemento derivado.

   

6. Selecciona cada botón por separado en la jerarquía a fin de resaltar el botón en la vista principal del diseñador.

7. En la vista principal del diseñador, haz clic en las flechas que rodean el botón a fin de moverlo a la fila o columna donde quieras que esté.

   En el siguiente ejemplo, el diseño de los botones es de izquierda a derecha y de arriba a abajo. Se cambió el nombre de los botones a Button1, Button2, Button3 y Button4.

   

8. En el panel de detalles, establece Diseño del elemento derivado > Relleno de la ranura en 16 px para los Container_Buttons.

   Modifica este valor como creas conveniente a fin de crear tu propio diseño.

   

9. En la caja apilada de contenido, añade un botón de silencio con el objetivo de utilizarlo como botón Cerrar más adelante.

   

10. Añade algunos espaciadores entre los contenedores a fin de que el contenido sea más legible. Puedes hacerlo añadiendo un widget de imagen donde quieras que estén los espacios y, luego, en el panel de detalles, usa las siguientes opciones:

    1. Pincel > Dibujar como… = Ninguno

    2. Tamaño de la imagen (valores X e Y) = 35 (puede ser mayor o menor según el diseño).

    Esta es una forma fácil de manejar el espaciado entre los elementos de la IU sin depender del relleno.

    

    

    

    Dibuja como imagen

    Dibuja como ninguno

11. Edita el texto del botón a fin de identificar con facilidad cada uno.

    

12. Abre las carpetas Fortnite > IU y crea una instancia de material de M_UI_Rectangle a fin de crear un material de fondo para la ventana emergente de tu trivia.

    

13. En UMG, abre tu widget de usuario y selecciona el widget de imagen de fondo. Luego, en el campo Pincel > Imagen, selecciona la instancia de material que acabas de crear.

    

14. Añade 32 px de relleno en la caja apilada de contenido a fin de que la ventana emergente sea más legible.

    

Configuración de la función de conversión

1. Abre Ventana > Vista de vinculaciones.

   

2. En el panel de jerarquía, selecciona el widget de bloque de texto TimeLeft. En la ventana Vista de vinculaciones, haz clic en +Añadir widget.

   

3. En el cuadro de la izquierda, selecciona TimeLeft > Texto. Esto transfiere algún tipo de valor a la propiedad de texto de TimeLeft.

   

4. En el cuadro de la derecha, selecciona CreativeModalDialogViewmodel > Tiempo restante del tiempo de espera. Luego, selecciona Funciones de conversión > A texto (doble).

   Al pasar el cursor sobre la variable, se revela que este es un valor float. La función de conversión A texto (doble) brinda una forma de convertir un valor doble/float a una variable de texto, y los muestra en su IU.

   

   Aparecerán varios campos en la ventana Vista de vinculaciones.

   Para obtener más información sobre ellos, consulta la sección Propiedades de A texto (int/doble) del documento.

5. Haz clic en el ícono de cadena junto a Valor y selecciona CreativeModalDialogViewmodel > Tiempo restante del tiempo de espera > Seleccionar.

   

La variable de tiempo restante para el tiempo de espera se pasa a la función de conversión A texto (doble) que genera el valor float en un formato de texto que puede leer la IU. Tu IU muestra con precisión el tiempo restante antes de que se cierre el widget de diálogo emergente.

Resultado final

Arrastra un dispositivo de diálogo emergente a tu proyecto y haz lo siguiente:

1. En un dispositivo de diálogo emergente, establece la clase de anulación de la plantilla en el Trivia_Widget que creaste.

2. Revisa el tiempo de espera de uso de diálogo.

3. Establece la duración del tiempo de espera en 6 segundos o el tiempo que creas necesario para que los jugadores lean el diálogo emergente.

Cuando aparezca el widget de diálogo emergente, podrás ver el cronómetro que marca cada segundo dentro de la ventana emergente.

Propiedades de A texto (int/doble)

Existen varios campos disponibles en la función de conversión A texto (int). La función A texto (doble) comparte los mismos campos a menos que se especifique lo contrario:

• Valor: la variable entera se usa a fin de pasar a la función de conversión.

• Siempre usar un signo: añade un signo positivo o negativo al prefijo de la salida de texto que indique si el valor es positivo o negativo. Si el valor es positivo, el texto se genera como +{Value}. Si es negativo, el texto se genera como -{Value}.

• Usar agrupación: determina si los valores se agrupan juntos, pero se separan cuando el valor es superior a los 1000. Se utilizará la configuración cultural de tu computadora a fin de establecer el indicador de agrupación. Si está activada, genera el texto como 1000. Si está desactivada, genera el texto como 1000.

• Dígitos enteros mínimos: el número mínimo de dígitos enteros que se muestran en el texto. El valor predeterminado es 1. Si se establece el mínimo por encima de 1, se mostrará 0 para los enteros con un número de dígitos menor que los dígitos enteros mínimos. Por ejemplo, si el número mínimo de dígitos enteros se establece en 3 y el valor actual es 5, el texto se generará como 005.

• Dígitos enteros máximos: el número máximo de dígitos enteros que se muestran en el texto. El valor predeterminado es 354. Esto restringe el texto con el objetivo de que solo muestre un número máximo de dígitos.

• Dígitos fraccionarios mínimos (solo para A texto (doble)): el número mínimo de dígitos que se mostrarán después del punto decimal. El valor por defecto es 0.

• Dígitos fraccionarios máximos (solo para A texto (doble)): el número máximo de dígitos que se mostrarán después del punto decimal. El valor predeterminado es 3.

• Modo de redondeo (solo para A texto (doble)): determina cómo el valor float/doble se redondea al número más cercano.