| Tabla de contenidos |

Tutorial 1: Pantalla de texto.

Tipografías

Lo próximo será preparar una tipografía para mostrar textos. En el menú Tools seleccionamos Compose Font Files. Esto nos abrirá una caja de diálogo para ayudarnos a crear un tipo de letra utilizable en Xitai Engine.

Las tipografías están compuestas de dos archivos. Uno es un archivo de imagen normal y corriente, que contiene la imagen de todos los caracteres usados, y otro, con extensión .fm5, que define la métrica de los caracteres.

El archivo de la imagen tiene una restricción en sus dimensiones: deben ser potencias de 2, por ejemplo 64, 128, 256, 512, 1024.

Para crear una tipografía debemos seleccionar antes alguna de las que estén instaladas en el sistema con el botón [...] que hay en la parte superior de la caja de diálogo. Debemos también elegir un tamaño adecuado. Si la imagen es de 512x512 (recomendado) el tamaño del tipo de letra puede ser de 40 puntos, aproximadamente. Eso depende de la tipografía. Cada vez que cambiemos los parámetros se recargará la imagen, a escala, en el visualizador.

Cuando usemos el botón Create, se crearán el archivo de métricas y uno o dos archivos de imagen. Desmarquemos la opción TGA ya que no la necesitamos por ahora. Así sólo tendremos un archivo de imagen de tipo PNG.

Pulsemos Create. Si todo fue bien se crearon dos archivos the_font.fm5 y the_font.png con los caracteres escritos en el texto editable del centro de la caja de diálogo. El nombre de base de los archivos se puede editar en File. Se creará un archivo adicional con extensión ".meta" que le servirá al editor como recordatorio de la forma en que se creó la tipografía.

Para un óptimo aprovechamiento del espacio y mejor resolución, elegiremos un tamaño de tipografía que cubra la máxima superficie posible. Podemos repetir la operación cuantas veces queramos hasta que estemos satisfechos con el resultado.

Creando objetos nuevos

Asegurémonos de que tenemos seleccionado el editor de pantallas Screen. Durante la prueba (RUN) las siguientes operaciones están restringidas.

Importaremos la tipografía resultante. Para ello utilizaremos el botón del Object Browser para crear un objeto nuevo. Ello nos mostrará el selector de clase:

Elegimos la categoría Text y dentro de ésta la clase PM5Font. Acto seguido se nos pedirá un archivo de tipo .fm5 que indicaremos.

En la ventana Object Inspector veremos los atributos del objeto recién creado. Si necesitamos usar la misma tipografía con diferentes tamaños, solamente debemos crear otros PM5Font con el mismo archivo y elegir el tamaño en el atributo scale del objeto creado.

Para poder usar esta tipografía debemos definir un estilo de texto. Para ello creamos un objeto de clase TextStyle (categoría Text) que es el que van a utilizar los elementos gráficos en último término. Asignamos al atributo font el objeto PM5Font creado anteriormente. Como sólo hay uno posible en la aplicación es seleccionado automáticamente al pulsar el botón del atributo.

El nombre de los objetos se elige automáticamente al crearlos. Nosotros podemos renombrarlos luego con una doble pulsación sobre su nombre y editarlos.

A continuación creamos otro objeto de clase TextWidget de la categoría Widget. Los widgets son áreas rectangulares en los que se pueden representar, dinámicamente, una gran variedad de contenidos. Generalmente el rectángulo ocupado por un widget está contenido en el rectángulo del padre. Aunque no siempre es así. De esta clase de objetos están compuestas las pantallas.

Seleccionaremos el TextStyle creado anteriormente en el atributo text_style. Ahora podemos escribir "¡Hola mundo!" en el atributo text y observaremos el resultado en el editor de pantallas.

Completamos el tutorial en el siguiente paso:

Tutorial 1: Finalización

 
Tutorial 1: Creación del proyecto   Tutorial 1: Finalización


(C) Paco Suárez (pacosu@xitai,es). 2020.
XITAI