Fuentes

Por defecto Slick2D dibuja textos usando una letra de máquina de escribir, aunque podemos cargar nuestras propias fuentes usando bitmapfonts con la herramienta BMFont.

Este curso ha sido marcado como anticuado y no está siendo revisado de forma activa. Es posible que la información pueda estar desactualizada o que los enlaces se hayan roto.

Cuando trabajamos con Sleek 2D, por defecto podemos dibujar texto en pantalla usando el método DrawString de la clase Graphics. Sin embargo, esta forma utiliza siempre la misma fuente monoespaciada, que aunque funcional, puede no encajar con el diseño que queremos para nuestro juego. Por eso, Sleek nos ofrece varias clases para cargar y mostrar fuentes personalizadas, permitiéndonos usar tipografías distintas y darle un toque más personal a nuestros textos.

En Sleek, la interfaz principal para manejar fuentes es Font, que define métodos como DrawString para mostrar caracteres. Hay tres clases que implementan esta interfaz: TrueTypeFont, que está obsoleta y ha sido reemplazada por UnicodeFont; y AngelCodeFont, que funciona con fuentes basadas en imágenes.

Empecemos por UnicodeFont, que nos permite cargar fuentes en formato TTF. Podemos cargar estas fuentes desde un archivo en nuestra carpeta de trabajo o desde las fuentes instaladas en el sistema operativo. Para usarla, primero importamos la clase java.awt.Font para manejar la fuente AWT, ya que Sleek trabaja como intermediario para cargar texturas en OpenGL y necesita que cada carácter se convierta en una textura.

Al crear un objeto UnicodeFont, le indicamos el nombre de la fuente, el estilo (como negrita, cursiva o normal) y el tamaño en puntos. Por ejemplo, para cargar una fuente llamada Sans en tamaño 24 y estilo normal, haríamos algo así:

java.awt.Font awtFont = new java.awt.Font("Sans", java.awt.Font.PLAIN, 24);
UnicodeFont fuenteWT = new UnicodeFont(awtFont);

Pero aquí no termina el proceso. Debido a que Unicode tiene una codificación muy amplia (más de 65.000 caracteres), no podemos cargar todos los glifos porque consumiría demasiada memoria y tiempo. Por eso, debemos especificar qué caracteres queremos cargar. Para ello, UnicodeFont ofrece métodos como addGlyphs para añadir caracteres específicos, o addASCIIGlyphs para cargar directamente los caracteres ASCII más comunes.

Por ejemplo, si solo necesitamos los caracteres ASCII, podemos hacer:

fuenteWT.addASCIIGlyphs();

Después de añadir los glifos, debemos cargar los efectos visuales que queremos aplicar a la fuente. Al menos, necesitamos definir el color con el que se mostrará el texto. Sleek ofrece la clase ColorEffect para esto, que utiliza colores del paquete AWT. Así, para poner el texto en blanco, haríamos:

ColorEffect colorEffect = new ColorEffect(java.awt.Color.WHITE);
fuenteWT.getEffects().add(colorEffect);

Una vez configurados los glifos y los efectos, la fuente está lista para usarse. Para dibujar texto en pantalla con UnicodeFont, usamos su método drawString, que tiene un orden distinto al de Graphics. Aquí primero indicamos las coordenadas y luego la cadena a mostrar:

fuenteWT.drawString(60, 60, "Hola mundo");

Pasando a AngelCodeFont, este tipo de fuente funciona con imágenes que contienen todos los caracteres, junto con un archivo de control que indica las coordenadas de cada glifo dentro de la imagen. Para crear estas fuentes, usamos un programa llamado BMFont, que nos permite seleccionar la tipografía, el tamaño, y qué caracteres queremos incluir. BMFont genera dos archivos: uno con extensión .fnt que es el archivo de control, y otro con la imagen en formato PNG o TGA que contiene los caracteres.

Por ejemplo, si queremos crear una fuente con BMFont usando la tipografía Unifont a 32 píxeles, seleccionamos los caracteres que necesitamos (como letras y números), y guardamos los archivos unifont.fnt y unifont.png.

Para cargar esta fuente en Sleek, creamos un objeto AngelCodeFont pasando el archivo de control y la imagen:

AngelCodeFont fuenteAngel = new AngelCodeFont("unifont.fnt", "unifont.png");

Luego, para mostrar texto, simplemente usamos:

fuenteAngel.drawString(120, 120, "Texto con AngelCodeFont");

Es importante asegurarse de que la imagen esté en un formato compatible, preferiblemente PNG, ya que Sleek puede tener problemas con algunos archivos TGA.

Con estas dos opciones, UnicodeFont para fuentes TTF y AngelCodeFont para fuentes basadas en imágenes, tenemos cubiertas la mayoría de necesidades para mostrar texto personalizado en nuestros juegos con Sleek 2D. Si queremos algo más especial, siempre podemos recurrir a mostrar imágenes directamente con etiquetas personalizadas, pero para la mayoría de casos estas dos clases son más que suficientes.

Además, al trabajar con fuentes en Sleek, es fundamental entender cómo se gestionan los glifos y los efectos para optimizar el rendimiento y la apariencia del texto en pantalla. Así, podemos cargar solo los caracteres que realmente necesitamos y aplicar efectos visuales que mejoren la legibilidad y el estilo de nuestro juego.

Lista de reproducción
  1. 1
    Instalando las herramientas Java
    11 minutos
  2. 2
    Instalando Slick2D
    26 minutos
  3. 3
    Estados e imágenes
    23 minutos
  4. 4
    Respuesta de usuario
    24 minutos
  5. 5
    Colisiones
    25 minutos
  6. 6
    Matemáticas y física
    13 minutos
  7. 7
    SpriteSheet
    13 minutos
  8. 8
    Tilemaps básicos
    23 minutos
  9. 9
    Escalas
    11 minutos
  10. 10
    Animaciones (parte 1)
    14 minutos
  11. 11
    Animaciones (parte 2)
    15 minutos
  12. 12
    Radiografía de un estado
    12 minutos
  13. 13
    Mover con el ratón (parte 1)
    11 minutos
  14. 14
    Mover con el ratón (parte 2)
    13 minutos
  15. 15
    Sonido
    13 minutos
  16. 16
    Música
    14 minutos
  17. 17
    Fuentes
    19 minutos
  18. 18
    Instalar Slick en NetBeans
    6 minutos