Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Android / Uso de BitmapFont en LibGDX

Uso de BitmapFont en LibGDX

Autor jc mouse lunes, septiembre 16, 2013

En este tutorial conoceremos lo que es el uso de BitmapFont en LibGDX y algún uso que le podemos dar como crear un menú, tabla de posiciones, ayuda para el usuario, etc.

BitMapFont. Consiste en dos archivos, un archivo imagen con las fuentes dibujadas en el, y un archivo con extensión *.FNT que es un archivo de texto donde se indican el nombre de la fuente, coordenadas de cada carácter de la fuente, tamaño, espaciado, etc.

Para crear estos archivos disponemos en la red de varios editores tanto para crear las fuentes desde cero o convertir una fuente TTF a *.FNT con su respectivo archivo de imagen, uno de estos editores bastante sencillo y libre es Bitmap Font Generator.

Vamos a lo nuestro, crearemos un pequeño menú para nuestro juego «Space Invaders» todo un clásico 🙂

space invader

 Herramientas

– Eclipse Indigo con Android y LibGDX instalado y configurado.

– Dos fuentes TTF que convertiremos a FNT, puedes hacer uso de estos «Space Invaders Fonts»

– Lógicamente Bitmap Font Generator. Descargalo y aprende como usarlo, te tomara 5 minutos 🙂

Tiempo: 20 minutos

Nivel: Java intermedio, android básico. Es recomendable que si es tu primera ves en esta web, leas los post anteriores sobre LibGDX ya que obviaremos muchas cosas, esto para no estar repitiendo lo mismo en cada post.

1.Crea un nuevo Application Android Project con la siguiente configuración:

Application Name: LibGDX Fonts

Project Name: LibGDXFonts

Package Name: com.bolivia.libgdxfonts

Activity: Blank Activity

Activity Name: MainActivity.java

Layout Name: activity_main.xml

2. Añade las siguientes librerías y carpetas a la carpeta LIBS/ del proyecto después actualiza para hacer efectivos los cambios (Refresh o F5).
– gdx.jar- gdx-backend-android.jar- armeabi-v7a/- armeabi/Selecciona gdx.jar y gdx-backend-android.jar con el mouse, clic derecho -> Build Path -> Add to build path para agregar las librerías al proyecto.

3. Una vez que tengamos nuestras fuentes TTF convertidas a FNT, debemos añadir los archivos a la carpeta ASSETS de preferencia en una carpeta FONTS/

- assets/
--- fonts/
----------- mercutio_basic_0.png
----------- mercutio_basic.fnt
----------- Thirteen-Pixel-Fonts_0.png
----------- Thirteen-Pixel-Fonts.fnt

Los nombres son solo de referencia, pueden tener el nombre que tu quieras.

4. Crea una nueva clase en el paquete com.bolivia.libgdxfonts, la clase se llamara «MyGame.java«.

01 package com.bolivia.libgdxfonts;
02 import com.badlogic.gdx.ApplicationListener;
03 import com.badlogic.gdx.Gdx;
04 import com.badlogic.gdx.graphics.GL10;
05 import com.badlogic.gdx.graphics.OrthographicCamera;
06 import com.badlogic.gdx.graphics.g2d.BitmapFont;
07 import com.badlogic.gdx.graphics.g2d.SpriteBatch;
08 
09 public class MyGame implements ApplicationListener {
10  
11  BitmapFont font_a;
12  BitmapFont font_b;
13  CharSequence[] str_a = new CharSequence[3];
14  CharSequence[] str_b = new CharSequence[3];
15  
16  SpriteBatch spriteBatch;
17  private OrthographicCamera camera;
18  private float game_ancho = 480;
19  private float game_alto = 800;
20  
21    
22  @Override
23  public void create() {  
24   camera = new OrthographicCamera();
25   camera.setToOrtho(false, game_ancho,game_alto);
26   //El texto que se usara en el juego
27   str_a[0] = "ESPACE";
28   str_a[1] = "INVADER";
29   str_a[2] = "Start";
30   
31   str_b[0] = "created by jc Mouse";
32   str_b[1] = "BOLIVIA";
33   str_b[2] = "Just user your mouse to play!";
34 
35   spriteBatch = new SpriteBatch();
36   //se cargan las fuentes
37   font_a = new BitmapFont(Gdx.files.internal("fonts/Thirteen-Pixel-Fonts.fnt"),
38   Gdx.files.internal("fonts/Thirteen-Pixel-Fonts_0.png"), false);
39   
40   font_b = new BitmapFont(Gdx.files.internal("fonts/mercutio_basic.fnt"),
41      Gdx.files.internal("fonts/mercutio_basic_0.png"), false);
42   
43  }
44 
45  @Override
46  public void dispose() {
47   spriteBatch.dispose();
48   font_a.dispose();
49   font_b.dispose();
50  }
51 
52  @Override
53  public void pause() {/*...*/}
54 
55  @Override
56  public void render() {
57   Gdx.gl.glClearColor( 0, 0, 0, 1);
58   Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
59   // 
60   spriteBatch.setProjectionMatrix( camera.combined );
61   
62   //colores de la fuente
63   font_a.setColor(0, 1f, 0, 1.0f);
64   font_b.setColor(1f, 0.1f, 0, 1.0f);
65   
66   spriteBatch.begin();   
67   font_a.draw(spriteBatch, str_a[0], getFontX( font_a, str_a[0]) , 600);
68   font_a.draw(spriteBatch, str_a[1], getFontX( font_a, str_a[1]), 520);
69   
70   font_b.draw(spriteBatch, str_b[0], getFontX( font_b, str_b[0]), 460);
71   font_b.draw(spriteBatch, str_b[1], getFontX( font_b, str_b[1]), 400);
72   
73   font_a.draw(spriteBatch, str_a[2], getFontX( font_a, str_a[2]), 260);
74   font_b.draw(spriteBatch, str_b[2], getFontX( font_b, str_b[2]), 200);
75   spriteBatch.end();
76  }
77 
78  @Override
79  public void resize(int arg0, int arg1) {/*...*/}
80 
81  @Override
82  public void resume() {/*...*/}
83  
84  /**
85  * Retorna la coordenada en X del texto segun el tipo de fuente y la longitud del texto
86  * @param BitmapFont font Tipo de fuente
87  * @param CharSequence str Texto Ej. "Hola mundo"
88  * */
89  private float getFontX( BitmapFont font , CharSequence str )
90  {
91   float ancho_str = font.getBounds( str ).width;
92   float fontX = game_ancho/2 - ancho_str/2;
93   return fontX;
94  }
95 }
#11…#14 Declaramos tanto los BitmapFont que usaremos en la aplicación así como los CharSequence donde estará el texto que haremos uso, bien podríamos hacer uso de uno solo, pero para dejar las cosas más claras usaremos una para cada bitmapfont
#18,#19 Nuestro juego tendra como dimensiones 480 de ancho y 800 de altura
#37…#41 Cargamos las dos fuentes tanto el archivo *.fnt como la imagen.
#56…#76 En el método render() pintaremos nuestros textos, indicando tambien las coordenas (x,y) recordemos que el eje de coordenadas en LibGDX tiene como (0,0) la esquina inferior izquierda.
#89 Para centrar nuestro texto en pantalla, definimos un método llamado getFontX() el cual obtendrá el ancho de una linea de texto y calculara su posicion respecto al ancho de la pantalla.
5. Ejecuta
space invader
Descargate el proyecto completo en este enlace hecho a la rápida y sin ganas
Enjoy!!! 🙂

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Envio de correo gmail con PHPMailer

Envio de correo gmail con PHPMailer

En este tutorial utilizaremos la librería PHPMailer para enviar correo electrónico utilizando el servidor de GMail de Go...

Autenticación en php con MySql y POO

Autenticación en php con MySql y POO

Autenticación en una pagina web es el proceso de confirmar que un usuario es quien dice ser, asi de simple. En el siguie...

Blog MVC – Carga de páginas estáticas [p4]

Blog MVC – Carga de páginas estáticas [p4]

Cuarta parte de esta pequeña serie de tutoriales sobre [Crea tu blog con el patrón MVC y php] En esta cuarta entrega ver...

Convertir imágenes JPG a PDF

Convertir imágenes JPG a PDF

En este post vemos un ejemplo de como convertir un archivo de imagen JPG en un archivo PDF utilizando para ellos la libr...

Crear XML desde una base de datos con jDom

Crear XML desde una base de datos con jDom

Un post cortito de fin de semana 🙂 , este trata de la forma de extraer la información de una base de datos formar una es...

«Hola Mundo» con Android Studio y Kotlin

«Hola Mundo» con Android Studio y Kotlin

Kotlin es un lenguaje de programación relativamente nuevo que ha ido ganando terreno en el desarrollo de aplicaciones pa...

12 comentarios en “Uso de BitmapFont en LibGDX”

  1. phpero dice:

    Cómo hago para detener la música que suena cada vez que abro la página? Es muy molesto, no encuentro una opción para detenerla y tengo que bajar el volumen para no escucharla…

    1. Mouse dice:

      :/ cual musica?????????

  2. Juan Luis Olguin dice:

    No se puede descargar tu ejemplo hermano, como me lo puedes mandar?
    ahi esta mi correo

  3. Joao dice:

    Me funciono muy bien!! Gracias

  4. Juan Carlos Garcia Bonilla dice:

    Lo que yo busco es crear archivos txt, no solo leerlos

  5. Livio dice:

    Hola!, alguna idea de como meter un JtextArea y respete formato de texto (negritas, curisvas, etc) enu njTAble?

  6. jaime dice:

    hola puedes subir el link nuevamente? gracias

  7. VladElf dice:

    MUY bueno JC, excelente la presentacion

  8. cindy dice:

    necesito ayuda para hacer un rompecabeza en visual basic! 😉

  9. alex dice:

    Tengo un error al correrlo al parecer la etiqueta con el nombre registro solo lo permite hacerlo una vez y con un registro en la base de datos , pero si agrego un segundo registro en la base de datos me lanza el siquiente error

    org.jdom2.IllegalAddException: The Content already has an existing parent «registro»

  10. alex dice:

    Tengo un problema y no se solucionarlo me da el siquiente error, cuando la tabla tiene mas de dos regisrtros:

    «main» org.jdom2.IllegalAddException: The Content already has an existing parent «registro»

  11. Diana dice:

    Hola, después de terminar el instalador o la interfaz en java que haces para empaquetarlo y hacer el instalador ?? lo vuelves a realizar en visual studio?? o se utiliza otro programa

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

En este post realizaremos un proyecto en VUE que se conectara a un REST API  y utilizara un servicio del mismo para obte...

En este post realizaremos una aplicación que pueda capturar nuestra voz y convertir en texto Pasar voz a texto con Andro...

Los JavaBeans son clases que encapsulan objetos en un solo objeto (beans). Son fáciles de crear y pueden contener muchos...

Basic 4 Android es un IDE (Entorno de Desarrollo Integrado) para Android basado en Basic (no es Visual Basic, pero se pa...

Herramientas

Generador de Enlaces a Whatsapp