libGDX Example Code : Text and line Animation
In this section we will write a code which will animate a Text String on libGDX screen .
There are 2 ways to render Text on the Screen
- Using Bitmap Font
- Using Freetype Fonts
To Create render a text using Bitmap font easy we just need to first have .png and .fnt files for the font which we need to render on the screen . Creation of .png and .fnt files is easy and can be done easily using heiro .. Get Heiro clicking here Hiero
Once we have .png and .fnt files . Keep them in the assests directory and use below code to render text on screen
Declare variables at class level
private BitmapFont font; private SpriteBatch batch; public static String str; private GlyphLayout; float w, h; // width and height computations for font public static final int WIDTH=480; // total width of screen public static final int HEIGHT=600; // total height of screen
Inside Create Method
Gdx.gl.glClearColor(0, 0.2f, 0.4f, 1); // clear screen with almost bluish colour
batch = new SpriteBatch();
str = "Hello World!";
font = new BitmapFont(Gdx.files.internal("chiller_50.fnt"),Gdx.files.internal("chiller_50.png"), false);font = new BitmapFont(Gdx.files.internal("chiller_50.fnt"),Gdx.files.internal("chiller_50.png"), false);
font.setColor(Color.FIREBRICK);
font.getData().setScale(2.0f, 2.0f); // make font size big
GlyphLayout glyphLayout = new GlyphLayout();
glyphLayout.setText(font, str);
w = glyphLayout.width; //Get width of Total Text for this font size
h = glyphLayout.height; // Get Height of Total Text for this font size
Inside Render method
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); batch.begin(); font.draw(batch, str, WIDTH / 2 - w / 2, HEIGHT / 2 + h / 2); // draw sting on screen at center batch.end();
The above piece of code will render Hello World at the center of the screen using the Bitmap fonts with files of .png and .fnt
Now To animate have animation to render this Text on screen with one Character at a time . Lets add following to this code
Class Level Variables
public static final float TIMEPERCHAR = 0.1f; // play with this for dif speeds float ctimeperchar = 0; int numchars = 0; float delta; // To get delta time
Inside Render Method
get detla timedelta = Gdx.graphics.getDeltaTime(); // get detla time
batch.begin();
str = "Hello World!";
if (numchars < str.length()) { // if num of chars are lesser than string // length , if all chars are not parsed
ctimeperchar += delta; // character time per char to be added with // delta
if (ctimeperchar >= TIMEPERCHAR) { // if c time ie greater than time // for 1 char
ctimeperchar = 0; // make ctimeper char again 0
numchars++; // go to next character , to be printed
}
}
font.draw(batch, str, WIDTH / 2 - w / 2, HEIGHT / 2 + h / 2); // draw sting on screen at center
batch.end();
This code will Print one character by character with animation .
Now , we can see that Text is rendering nicely , but this text doesnt have nice affects like bold , shadow , border colour , shadow offset etc . To include that we should use Freetype Fonts i.e. ttf files fonts . Free and popular .ttf files can be downloaded here
To include these free type fonts in the code , we first need to include FreeType extension when creating project from libGDX setup app . For already created projects , gradle dependency can be added as mentioned here
Full documentation about this can be found at this github repository : freetype fonts
Below is the full code which shows Animated Text rendering for both BitMap fonts and Freetype fonts with a line rendered below the text once text rendering is complete
libGDX Text Animation Demo
package com.vpb.freetextanimation;package com.vpb.freetextanimation;
import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.GlyphLayout;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.freetype.FreeTypeFontGenerator;
import com.badlogic.gdx.graphics.g2d.freetype.FreeTypeFontGenerator.FreeTypeFontParameter;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType;
public class FreeTextAnimation extends ApplicationAdapter {
private SpriteBatch batch;
private BitmapFont font,font12;
private FreeTypeFontGenerator generator;
private FreeTypeFontParameter parameter;
public static final int WIDTH=480;
public static final int HEIGHT=600;
public static String str;
public static final float TIMEPERCHAR = 0.1f; // play with this for dif speeds
float ctimeperchar = 0; // time per character for draw
int numchars = 0; // for parsing all chars in string
float delta; // get delta time
float w, h,w1,w2,h1; // width and height computations for font
private GlyphLayout glyphLayout1;
//get .ttf fonts here //https://www.fontsquirrel.com/fonts/list/popular
//create chiller_50.fnt and chiller_50.png here
//heiro .. get it from https://libgdx.badlogicgames.com/tools.html
public ShapeRenderer srend;
@Override
public void create() {
Gdx.gl.glClearColor(0, 0.2f, 0.4f, 1); // clear screen with almost bluish colour
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch = new SpriteBatch();
srend = new ShapeRenderer();
srend.setColor(Color.FIREBRICK);
generator = new FreeTypeFontGenerator(Gdx.files.internal("AlexBrush-Regular.ttf"));
parameter = new FreeTypeFontParameter();
parameter.size = 80;
parameter.color = Color.FIREBRICK;
parameter.borderWidth = 2;
parameter.borderColor = Color.BLACK;
parameter.borderStraight= true;
parameter.shadowOffsetX= 10;
parameter.shadowOffsetY= 10;
parameter.shadowColor= new Color(0, 0, 0.1f, 0.75f);
parameter.flip = false;
font12 = generator.generateFont(parameter); // font size
str = "Hello World!";
font = new BitmapFont(Gdx.files.internal("chiller_50.fnt"),Gdx.files.internal("chiller_50.png"), false);
font.setColor(Color.FIREBRICK);
font.getData().setScale(2.0f, 2.0f); // make font size big
GlyphLayout glyphLayout = new GlyphLayout();
glyphLayout.setText(font, str);
w = glyphLayout.width;
h = glyphLayout.height;
glyphLayout1 = new GlyphLayout();
glyphLayout1.setText(font12, str);
w1 = glyphLayout1.width;
h1 = glyphLayout1.height;
} @Override
public void render() {
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
delta = Gdx.graphics.getDeltaTime(); // get delta time
batch.begin();
str = "Hello World!";
if (numchars < str.length()) { // if num of chars are lesser than string length , if all chars are not parsed
ctimeperchar += delta; // character time per char to be added with delta
if (ctimeperchar >= TIMEPERCHAR) { // if c time ie greater than time for 1 char
ctimeperchar = 0; // make ctimeper char again 0
numchars++; // go to next character , to be printed
}
}
str = str.substring(0, numchars); // get string to be printed
font.draw(batch, str, WIDTH / 2 - w / 2, HEIGHT / 2 + h / 2); // draw sting on screen at center
font12.draw(batch, str, WIDTH / 2 - w1 / 2, HEIGHT / 4 + h1 / 2); // draw sting on screen at center
batch.end();
if (str == "Hello World!"){
srend.begin(ShapeType.Filled);
glyphLayout1.setText(font12, str);
w2 = glyphLayout1.width;
srend.rect((int)WIDTH / 2 - w / 2, (int)HEIGHT / 2 - h ,w , 5); //x start ,y start , length, height
srend.end();
}
}
@Override public void dispose() {
batch.dispose();
font.dispose();
generator.dispose(); // dispose to avoid memory leaks!
font12.dispose(); }
}