Write a Flappy Bird clone using Basic4Android and LibGDX–Part 7

In this section we’ll handle displaying text on the screen. In a previous tutorial we updated the score variable, but as yet we’re not drawing that on the screen.

Download the source code here:

https://dl.dropboxusercontent.com/u/8673694/you%20tube%20files/basic4android/CloneyBirdTutorial/Part7.zip

LibGDX uses what are called Bitmap Fonts to display text. What this means ion practice is that we need some font files that are basically just graphics files that have the alphabet, numbers and special characters in them.

These font files can be generated using a free tool like BMFont by AngelCode.

image

The BMFont main screen looks like the above image, this screen shows you all the characters that are going to be saved into your font file.

The “Font Settings” menu option allows you to set which font to use, the size, etc… I’ve added a screenshot showing the settings I’ve used for our Flappy Bird Clone.

image

Once you’ve copied those settings, open the export options menu item and copy the following settings:

image

Now simply go to the options menu again and select “Save bitmap font as…”

Then save it into your files folder in your Flappy bird project folder.

It’s probably worth saving the settings using the menu option “Save configuration as….” to save the settings for later use.

Now have our font files ready for use, we can use them in our game.

Returning to your B4A window, add the following code into your globals section:

Dim bitmapfont As lgBitmapFont

This declares an object called bitmapfont that we can use with libGDXs font functions to draw the score and any other text we want to the screen.

In order to work, we also need to tell it what the font file is called for it load it into memory, add the following to your LG_Create section:

bitmapfont.Initialize2(lGdx.Files.internal(“bmfont.fnt”)) ‘ load bitmap font file

Assuming you called your font that name, then this will work, otherwise change the filename to match what you saved your font as from the BMFont application.

We’re almost ready to draw our score. The only problem is the command to draw text to the screen is a little complex if you want to use it many times, like say to draw multiple lines of text for a title screen. The solution is to write a small function that handles it for us so we can just use a short simple command whenever we want to write some text. Add the following command at the very bottom of your source code:

Sub shadowtext(text As String, x As Int, y As Int)
    bitmapfont.Draw2(Batch,text,x-(bitmapfont.GetBounds(text).Width/2),y,bitmapfont.Color.black)
    bitmapfont.Draw2(Batch,text,x-(bitmapfont.GetBounds(text).Width/2)-2dip,y-2dip,bitmapfont.Color.white)
End Sub

This is a function that will accept a string and a set of x and y coordinates. It then uses the bitmapfont.draw2 method to write text to the screen. It also draws the text on the screen with a little offset on x and y to give a shadow effect.

This means we can draw text to the screen by using this function like this: shadowtext(“hello world”,50,,50), which is much easier than having to write bitmapfont.Draw2(Batch,”hello world”,50,50,bitmapfont.Color.black) when ever you want to write text to the screen.

Going back to the LG_Render method, add the following line to draw the score after the command to draw the bird:

shadowtext(“”&score,vpW*0.50,vpH*0.90)

We’ll call that it for this tutorial, in the next tutorial we’ll add sound effects before we add the highscore and title screen. The next tutorial will be the final part.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s