TUTORIAL #2: How to properly create a sprite font

3

Attached Files

The following files have been attached to this tutorial:

.capx

tutorial-2.capx

Download now 172.18 KB

Stats

7,170 visits, 9,197 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 8 Feb, 2018. Last updated 19 Feb, 2019

Sprite fonts, are certainly tricky to use. But, they aren't impossible to make.

After awhile, once you use these tips, you will be able to make sprite fonts easily.

They are relatively simple to learn, but hard to master.

This tutorial was made for people who need to know how to utilize sprite fonts. Unless if you want to use Arial-font text to make your game text more fitting, you'll need this tutorial to make your own fonts.

So, lets make a sprite font.

First of course, lets place a sprite font.

Now, for this example, lets use the following characters:

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

Notice the "Character Set" property in the sprite font properties.

That is used to select what characters you want in your sprite font.

The set of characters you get with them isn't the ones you can only use.

If you would want to add characters to your sprite font, you would need to make custom sprites for them. But we'll get to that in a moment.

Next, you would want to change the size of your characters.

So, go to the properties "Character Height" and "Character Width"

They will determine the sizes of your sprites for your sprite font.

For this example, the width and height ratio will be 7:15.

Lets get to making our sprite font now.

Set the sprite font text to ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz. We can use this to preview our sprite font as we work on it.

Now, your sprite font may appear broken. But don't worry! Because now we're going to make our own font.

Lets open up the sprite font sprite sheet. And get drawing.

First step, lets clear the sheet so that there is nothing on the sheet.

Now lets change the size of the sprite sheet to suit our needs.

Since we are using 52 characters, we will want the space on drawing our characters.

So, lets make a grid on where we will make our font.

Since our character size is 7 x 15, and since we have 52 characters, we will need to make 52 7 x 15 boxes to fit our characters.

Make sure all the boxes are put in different colors in a checkered pattern.

I'm making my sprite sheet into 8 boxes for each row, and for the colors to be red and blue.

When you are done, it should look like this:

The size of this grid is 56 x 108. Lets shrink it down to size.

How sprite fonts work, is that the characters are selected in the order of the character set, in a horizontal layout.

Lets just say that the first row will be ABCDEFGH. Then the next row will be IJKLMNOP. And so on and so forth, until all the character sprites are done.

EXAMPLE:

Now that we have our grid set up, we can begin working on our sprite font.

Make your characters in whatever way you want. Just, make sure they are in these boxes.

Here's my sprite sheet.

Now, lets get rid of that grid and erase it.

And now, your sprite font is finished! You can use it like any other font. It takes practice, but it is beneficial to anyone's games and projects.

If there is anything I missed out on, please leave in the comments below.

Other than that, that's all!

I'll try to stay more active, I guess :3

.CAPX

tutorial-2.capx

Download now 172.18 KB
  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Thanks for this. I have created using your guide, but do not know what gone wrong. I can not make it appear in the right way.

    How about sizes and spacing data...