Welcome to part 2 of my series on making games using the LÖVE engine. If you missed part 1, or need a refresher then it’s available here.
One of my measurements of how easy / simple a game framework is, is to just print text. Despite the fact that it’s a core component of a game that we rarely consider, it’s actually usually quite a non-trivial task.
Let’s see how “easy” it is to actually do in LÖVE
(hint: to remove all of your stress, just remember this is our 2nd tutorial – which should give away how easy it is to do with LÖVE)
We’re going to go through a few “common” text display techniques – all of which are handled by the LÖVE engine.
Create a new project folder and
main.lua, or just add to the existing one you put together for a previous tutorial.
Using the system font
Out of the box, the LÖVE engine supports a basic system font called
Bitstream Vera Sans. Let’s take a look at making use of this.
Open up your
main.lua and update your
function love.load() -- the number denotes the font size font = love.graphics.newFont(48) -- tell love to use the font we setup love.graphics.setFont(font) end
From within the
love.load() function, we’re referencing the built-in system font support by using
love.graphics.newFont() – the number we’re passing into the function is just the font size we want to use.
The use of
love.graphics.setFont() is our way to let the LÖVE engine know which font we want to use.
One last step here is to actually draw our text! Let’s go back into
function love.draw() love.graphics.print("My cats breath smells like cat food", 100, 100) end
Save and close the file. Run it with
love . and you should see…
Play around for a bit with the
newFont() size. Try out different font sizes to see what you like the most.
Let’s draw multiple lines now. We just need to use the
\n line break characters in our
function love.draw() love.graphics.print("My cats breath\n smells like\n cat food", 100, 100) end
Now when you save and run, you should see…
Nice. Now let’s explore the use of color. We’re probably not always going to be using white text.
Let’s make use of a graphics function called
setColor. The function as input takes in Red, Green, and Blue (RGB) values from
0 - 1 . If you’re not used to working with this range, we just need to divide each color value by
Note: prior versions of LÖVE accepted
(0 - 255)as color values, so the conversion wasn’t necessary.
fr = 255 / 255 fg = 255 / 255 fb = 0 love.graphics.setColor(fr, fg, fb) love.graphics.print("My cats breath\n smells like\n cat food", 100, 100)
Here’s some simple colors to get you started and thinking about color…
255, 0, 0 -- red 0, 255, 0 -- green 0, 0, 255 -- blue 255, 255, 0 -- yellow 0, 0, 0 -- black 255, 255, 255 -- white
Note: On the subject of colors,
setBackgroundColor() is also available, and takes the same 3 color component value range.
Working with True Type Font
Back to the subject of fonts, another common feature / ability of engine frameworks is the ability to work with TrueType Font files (TTF).
The LÖVE framework also supports the use of TrueType Font files and makes their use quite trivial.
All we need to do is to supply the TTF file, and update our
function love.load() -- the number denotes the font size -- font = love.graphics.newFont(48) font = love.graphics.newFont("04b03.ttf", 48) -- tell love to use the font we setup love.graphics.setFont(font) end
After saving and running, you’ll see the updated font in action…
Instead of using the system file with font size
48, we’re going to be loading a TrueType Font from a file. I’ve included a popular one, but you can use another one of your choosing…
That’s pretty much all you need to worry about for TTF support. Play around with different TTF files, font sizes and colors to see how the font is interacting with LÖVE.
Working with font image files
One other popular technique for using and drawing fonts, is the use of a bitmap font file. While not seemingly as trivial as using the previous font techniques, it offers support for you to handle a custom font face and/or format.
One major difference between using a bitmap image for the font vs. a system or True Type Font, is that with the bitmap image you cannot specify the font size within your code. The size of the bitmap images that you’re loading is pretty much the same size you’re going to see in your game.
The procedure is a bit more involved.
First you need to load the bitmap font text as an image file. This file MUST be in a specific format. You can list the characters in any order you want, but they need to be all in a single row in the file.
Next, you need to let the font engine know which characters you’ve got in your font image file. In this specific case, we have the characters
z followed by
Z. Next, we have the numbers
9, followed by some special characters.
Put it together, and the
love.load() can look like the following
function love.load() -- the number denotes the font size -- font = love.graphics.newFont(48) -- font = love.graphics.newFont("04b03.ttf", 48) font = love.graphics.newImageFont("bitmapfont.png", " abcdefghijklmnopqrstuvwxyz" .. "ABCDEFGHIJKLMNOPQRSTUVWXYZ0" .. "123456789.,!?-+/():;%&`'*#=\"") -- tell love to use the font we setup love.graphics.setFont(font) end
You might spot the
.. characters. This is a LUA specific syntax for string concatenation.
head = "hello" tail = "world" print(head .. " " .. tail)
The LUA snippet above should display
hello world when run.
That’s it for this tutorial!
Hopefully you’ve picked up more pieces of the LÖVE engine, specifically around drawing text and working with your favorite fonts.