Configuración de la calidad de representación de las fuentes - Lumberyard Guía del usuario

Si proporcionásemos una traducción de la versión en inglés de la guía, prevalecerá la versión en inglés de la guía si hubiese algún conflicto. La traducción se proporciona mediante traducción automática.

Configuración de la calidad de representación de las fuentes

El sistema de interfaz de usuario integrado en Lumberyard, LyShine, representa el texto por medio de texturas de fuentes. La calidad del texto en pantalla se ve afectada por el tamaño de la textura de la fuente, el número de slots de caracteres en la textura de la fuente y el tamaño del texto en sí mismo cuando se representa en pantalla.

Siga los procedimientos de esta sección para configurar el tamaño y la textura de las fuentes con el fin de conseguir una buena calidad en la representación del texto.

Atributos de ancho y alto de la textura de las fuentes

Las fuentes se definen en XML mediante archivos *.font. El XML en un archivo .font define varios parámetros, como la ruta de acceso al activo TTF/OTF de origen e importantes propiedades de representación. El archivo de fuente Engine/Fonts/default-ui.font que se incluye en el proyecto de Lumberyard presenta el siguiente contenido:

<fontshader> <font path="Vera.ttf" w="512" h="256"/> <effect name="default"> <pass> </pass> </effect> <effect name="drop_shadow"> <pass> </pass> <pass> <color r="0" g="0" b="0" a="1"/> <pos x="1" y="1"/> </pass> </effect> </fontshader>

La resolución de la textura de la fuente se controla mediante la siguiente línea:

<font path="Vera.ttf" w="512" h="256"/>

En este ejemplo, la textura de la fuente tiene una resolución de 512 x 256. Este tamaño de resolución (junto con el número de slots de caracteres) es un valor importante para determinar la calidad de representación de la fuente.

Slots de caracteres

En Lumberyard, una textura de fuentes se divide lógicamente en slots de un tamaño igual. Cada slot incluye una cantidad uniforme de espacio para cada carácter (glifo). De forma predeterminada (sin una configuración adicional), existen 128 caracteres únicos (16 filas * 8 columnas).

Si se admite un idioma con muchos caracteres únicos, como por ejemplo, el chino, el japonés o el coreano, es posible que el número predeterminado de slots (128) no se ajuste a sus necesidades; en este caso, necesitará una configuración adicional. De lo contrario, 128 caracteres únicos serán apropiados para la mayoría de los idiomas. La siguiente información sobre los slots de caracteres describe en más detalle la canalización de representación de fuentes en Lumberyard.

Cuando representa una cadena de caracteres, el número de caracteres únicos en una cadena es diferente del número de caracteres en una cadena (su longitud). El número de slots de caracteres en una textura de fuente impone un límite solo en el número de caracteres únicos que se pueden representar en solo fotograma.

Por ejemplo, a continuación mostramos una definición que establece la textura de la fuente con el slot de textura 1 (1x1).

<font path="Vera.ttf" w="512" h="512" widthslots="1" heightslots="1"/>

Los valores predeterminados para widthslots y heightslots son 16 y 8, respectivamente. No obstante, tal y como se muestra en el ejemplo anterior, el número de slots de caracteres se puede configurar (1). Esta fuente puede representar un solo carácter único en la pantalla, el número de veces necesario, como la siguiente cadena:

AAAA

El número de caracteres únicos en AAAA es 1, mientras que la longitud de la cadena es de 4. Esta configuración de textura de fuente puede representar este carácter un número ilimitado de veces (es decir, una cadena de longitud variable) siempre que la cadena contenga tan solo un único carácter. Sin embargo, esta fuente no podía representar la cadena siguiente:

AABB

Dado que solo un existe un slot de carácter en la textura, no puede almacenar ambos glifos para la letra mayúsculas "A" y la letra mayúscula "B" y representarlos a los dos en un fotograma. Para representar esta cadena, debe aumentar el número de slots mediante los parámetros widthslots y heightslots.

Este es otro ejemplo.

<font path="NotoSansSC-Regular.otf" w="4096" h="4096" widthslots="128" heightslots="128"/>

En este ejemplo, el tamaño de la textura de la fuente es 4096x4096 y hay un número total de 128x128 (16 384) slots de caracteres. Para determinar el tamaño disponible para cada carácter, divida el tamaño de la textura (4096 x 4096) por el número de slots (128 x 128) para conseguir un espacio de 32 x 32 píxeles para cada carácter. Esta configuración le permite representar más de 16 000 caracteres únicos con un tamaño de 32 píxeles en un único fotograma.

Tamaño de fuente

Dado que una textura de fuente se divide en una cuadrícula lógica, con un sencillo cálculo se determina cuántos activos puede utilizar cada carácter en la fuente:

  • Ancho de la textura de la fuente / widthslots = ancho del slot

  • Alto de la textura de la fuente / heightslots = alto del slot

Donde widthslots es el número de slots de caracteres en el ancho (eje X) de la textura de la fuente y heightslots es el número de slots de caracteres en la altura (eje Y) de la textura de la fuente.

En el ejemplo default-ui.font de la sección anterior, la textura de la fuente tenía un tamaño de 512 x 256. Se presupone que los slots de caracteres están establecidos en sus valores predeterminados (16 x 8):

  • 512/16 = 32 (ancho del slot)

  • 256/8 = 32 (alto del slot)

Para una textura de fuente con tamaño 512 x 256, podrá representar caracteres con pixelado perfecto en 32 x 32 píxeles.

Estos cálculos le ayudarán a determinar el tamaño de la textura de fuente adecuada para la interfaz de usuario del juego.

Para determinar el tamaño de la textura de fuente adecuado para la interfaz de usuario del juego

  1. Cree el archivo de fuentes .font para la fuente que desea utilizar.

  2. Elija un tamaño arbitrario de textura de fuente para empezar, como el tamaño 512 x 256 del ejemplo anterior.

  3. Utilice UI Editor para replicar lienzos con elementos que tienen componentes de texto que utilizan su archivo de fuentes .font.

  4. En el panel Properties (Propiedades) de UI Editor, bajo Text (Texto) y Font Size (Tamaño de fuente), pruebe los diferentes tamaños de fuente para encontrar el idóneo en su caso.

  5. Una vez que haya determinado el tamaño adecuado que desea, utilice la siguiente fórmula para determinar el ancho y el alto de la textura de la fuente.

    • Ancho de la textura = Tamaño de fuente * widthslots

    • Alto de la textura = Tamaño de fuente * heightslots

    nota

    El valor predeterminado para widthslots y heightslots es 16 y 8, respectivamente, lo que proporciona 128 caracteres en total. Si necesita representar más de 128 caracteres únicos en la pantalla en un solo fotograma (por ejemplo, si el juego admite el chino, el japonés o el coreano), ajuste estos valores como corresponda.

  6. Edite la fuente .font para utilizar el tamaño de la textura de fuente calculado.

nota
  • Los tamaños de textura de fuente no tienen por qué ser una potencia de 2: 128, 256, 512, 1024, 2048, etc. Sin embargo, la anchura debe ser múltiplo de widthslots (el valor predeterminado es 16) y la altura debe ser múltiplo de heightslots (el valor predeterminado es 8).

  • Puede multiplicar varios archivos de fuente .font que hagan referencia al mismo archivo TTF/OTF pero que tengan diferentes tamaños de textura de fuente.

    Por ejemplo, es posible que quiera incluir un texto de subtítulos solo aparecen en un tamaño de fuente pequeño, pero que haya otras pantallas (por ejemplo, una pantalla de menú) donde quiera el texto con el mismo aspecto utilizando la misma fuente. Sin embargo, tiene que ser mayor y, por tanto, necesita una textura de fuente de mayor resolución. Puede conseguir esto con otros archivos .font para cada caso de uso, donde se configuren las opciones de la textura para que la calidad de representación sea la idónea.