• Sponsored Links

libGDX Example Code : Text and line Animation

Share this :

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

  1. Using  Bitmap Font
  2. 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

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(); } }

Leave a Reply

Your email address will not be published. Required fields are marked *

− 2 = 8