Funciones de conversión: To Text (Int) y To Text (Double)

Pasa variables Int o Float a un widget utilizando las funciones de conversión To Text(Int) y To Text(Double). Las funciones de conversión «To Text» convierten una variable de tipo Integer o Float a un tipo Text que se puede 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 To Text (Int): un widget Rastreador personalizado registra el progreso de un jugador cuando recoge una cantidad de tiras de beicon.

• Ejemplo de To Text (Double): un widget Diálogo emergente personalizado abre una ventana emergente con posibles respuestas a una pregunta de conocimientos. Se utiliza un cronómetro de cuenta atrás para cerrar el cronómetro si no se ha seleccionado una respuesta antes de que se acabe el tiempo.

To Text (Int)

En este ejemplo, se crea un widget Rastreador personalizado para saber cuánto beicon ha recogido el jugador. Utiliza los pasos del documento Ventanas emergentes de la IU para crear un widget de usuario y nómbralo Tracker_Widget.

Configuración de widgets

Para configurar el Tracker_Widget, añade los siguientes widgets en el orden presentado a continuación al panel Jerarquía:

• Superposición

• Imagen (anídalo bajo la superposición y cámbiale el nombre a Fondo).

• Caja apilable (anídala bajo la superposición).

• Bloque de texto (anídalo bajo la primera caja apilable y cambia el nombre a Título, este es tu título de rastreador «{Tracker Title}»)

• Caja apilable (anídala bajo la primera caja apilable).

• 2 bloques de texto (anídalos bajo la segunda caja apilable. Cambia el nombre del primer bloque de texto a CurrentValue «{Current}» y el segundo bloque de texto al texto «Beicon recogido»).

Necesitas un bloque de texto que acepte el número actual de beicon que recoge el jugador. Tracker_Widget está configurado para incluir un bloque de texto TrackerTitle para que la propiedad Name pueda pasar del modelo de vista al bloque de texto Current:

Configura tu widget utilizando el mismo enfoque.

Esto es lo que ve el jugador en la partida cuando recoge bacon:

Configuración de función de conversión

La función de conversión To Text (Int) se utiliza para pasar la cantidad actual de beicon al dispositivo Rastreador a través del bloque de texto CurrentValue.

Para configurar las funciones de conversión To Text (Int), crea vinculaciones de vistas y vincula los valores que establezcas en el widget al dispositivo Rastreador.

1. Abre Ventana > Vinculaciones de vistas.

   

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

   

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

   

4. En el cuadro de la derecha, haz clic en el campo y selecciona Funciones de conversión > To Text (Integer). En el enlace del bloque de texto CurrentValue aparecen varios campos.

   Para obtener más información sobre la función de cada campo, consulta la sección Propiedades de To Text (Int/Double).

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

   

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

   

La variable Value del modelo de vista del rastreador se pasa a la función de conversión To Text (Integer). Esto genera la variable Valor como una propiedad Text que luego se pasa a la propiedad Text del bloque de texto CurrentValue.

Resultado final

Para utilizar tu nuevo widget, arrastra un dispositivo Rastreador a tu proyecto y, a continuación, haz lo siguiente:

1. En el panel Detalles del dispositivo Rastreador, establece el campo del widget del HUD en tu Track_Widget.

   El rastreador puede utilizarse para registrar estadísticas de puntuación y utiliza los objetos recopilables de tu nivel para probar esta funcionalidad.

Cada vez que el jugador recoge bacon en la partida, el rastreador aumenta automáticamente según el valor de puntuación establecido para cada unidad de bacon.

To Text (Double)

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 denominado Trivia_Widget. Trivia_Widget muestra preguntas de conocimientos de Fortnite que deben responderse antes de que se agote el tiempo límite.

Configuración de widgets

1. Haz clic con el botón derecho en el explorador de contenido para abrir el menú contextual.

   

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

   

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

   1. Superposición

   2. Imagen

   3. 3 cajas apilables

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

   

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

   

   Envuelve los bloques de texto TimeLeft y TimeFlavorText en una caja apilable para que TimeLeft se actualice dinámicamente mediante una vinculación de vista con la variable TimeLeft de Timeout en el modelo de vista del diálogo emergente.

   

   Si necesitas envolver un widget con un contenedor en una estructura existente, no tienes que rehacer todo el widget. Haz clic con el botón derecho en el widget y selecciona Envolver con... o Reemplazar por... para añadir fácilmente un nuevo panel dentro de un contenedor.

   

5. Añade los botones como una cuadrícula de 2x2. Como los botones están en una cuadrícula de 2x2, 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 permite organizar fácilmente tus widgets hijos en un patrón de cuadrícula. También puedes configurar fácilmente el relleno de la ranura para cada hijo.

   

6. Selecciona cada botón individualmente en la jerarquía para resaltar el botón en la vista principal del diseñador.

7. Desde la vista principal del diseñador, haz clic en las flechas que rodean al botón para mover el botón a una fila o columna específica donde quieras que esté el botón.

   En el ejemplo siguiente, los botones están dispuestos de izquierda a derecha y de arriba abajo. Los botones han pasado a llamarse Botón1, Botón2, Botón3 y Botón4.

   

8. En el panel Detalles, establece Disposición hija > Relleno de espacio a 16 píxeles para los Container_Buttons.

   Modifica este valor como mejor te parezca para tu propio diseño.

   

9. En la caja apilable de contenido, añade un botón silencioso para utilizarlo como botón de cierre más adelante.

   

10. Añade algunos espaciadores entre los contenedores para que el contenido sea más legible. Para ello, añade un widget Imagen donde quieras que estén los espacios y, a continuación, en el panel Detalles utiliza 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 tu diseño).

    Se trata de una manera fácil de gestionar el espaciado entre los elementos de la IU sin depender del relleno.

    

    

    

    Dibujar como > Imagen

    Dibujar como > Ninguno

11. Edita el texto del botón para identificar fácilmente cada botón.

    

12. Abre las carpetas Fortnite > IU y crea una Instancia de Material de M_UI_Rectangle para hacer un material de fondo para tu ventana emergente de preguntas de conocimientos.

    

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

    

14. Añade 32 píxeles de relleno en la caja apilable de contenido para que la ventana emergente sea más legible.

    

Configuración de función de conversión

1. Abre Ventana > Vinculaciones de vistas.

   

2. En el panel Jerarquía, selecciona el widget de bloque de texto TimeLeft. En la ventana Vinculaciones de vistas, haz clic en +Añadir widget.

   

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

   

4. En el cuadro de la derecha, selecciona CreativeModalDialogViewmodel > Tiempo restante para el tiempo de espera. A continuación, selecciona Funciones de conversión > To Text (Double).

   Si pasas el ratón por encima de la variable, verás que este valor es un valor Float. La función de conversión To Text (Double) permite convertir un valor Double/Float en una variable de texto, y los muestra en tu IU.

   

   En la ventana Vinculaciones de vistas aparecen varios campos.

   Para obtener más información sobre estos campos, consulta la sección Propiedades de To Text (Int/Double) del documento.

5. Haz clic en el icono de cadena situado junto a Valor y selecciona CreativeModalDialogViewModel > Tiempo restante para el tiempo de espera > Seleccionar.

   

La variable Tiempo restante para tiempo de espera se pasa a la función de conversión To Text (Double) que emite el valor Float en un formato de texto legible para la IU. Tu IU muestra con precisión el tiempo que queda antes de que se cierre el widget Diálogo emergente.

Resultado final

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

1. En un dispositivo Diálogo emergente, establece Clase de anulación de plantilla en el Trivia_Widget que has creado.

2. Selecciona Usar tiempo agotado de los diálogos.

3. Establece la duración del tiempo de espera en 6 segundos o el tiempo que creas que dará a los jugadores tiempo suficiente para ver la ventana emergente y leerla.

Ahora, cuando aparezca el widget Diálogo emergente, verás que el cronómetro marca cada segundo dentro de la ventana emergente.

Propiedades de To Text (Int/Double)

Hay una serie de campos disponibles en la función de conversión To Text (Int). ToText (Double) comparte los mismos campos a menos que se especifique lo contrario:

• Valor: la variable Int que se pasa a la función de conversión.

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

• Utilizar agrupación: determina si los valores se agrupan pero se separan cuando el valor es superior a 1000. Utilizará la configuración cultural de tu ordenador para el indicador de agrupación. Si está activado, genera el texto como 1.000. Si está desactivado, genera el texto como 1000.

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

• Máximo de dígitos enteros: el número máximo de dígitos enteros que se mostrarán en el texto. El valor predeterminado es 354. Esto restringe tu texto para que solo muestre un número máximo de dígitos.

• Mínimo de dígitos fraccionarios (solo para To Text (Double)): el número mínimo de dígitos que se mostrarán después del punto decimal. El valor predeterminado es 0.

• Máximo de dígitos fraccionarios (solo para To Text (Double)): 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 _To Text (Double)): determina cómo el valor Float/Double se redondea al número más cercano.