How To Use & Make Your Own
How do I use Sprite Fonts?
To use a Sprite Font, add the Object to your project and load the SpriteFont image when the Image editor pops up. (Or use the default one.)
Set the properties window to match your loaded font size and characters, as shown in the illustration above.
For a list of each property setting, see the manual here: https://www.scirra.com/manual/166/sprite-font
Adjustments to the widths are made in the startup/creation events.
Jump ahead to the section: "Manually Setting The Widths"
How do I make my own?
First you will need an image editing software like Photohop, the free Gimp
, or whatever your favorite is. The final image should be a power of 2 width, and have space around each letter in it's grid space to avoid "Why" problem 3 on the next page. And choose a size that balances quality versus performance, as in "Why" problem 4 on the next page. (See the contents index on the left.)
Turn on your image editor's grid feature, and set it to the max width you want your letter plus a pixel or two on all sides. You will need the width & height of the grid opening for each letter for the "Character Width" and "Character Height" properties of the Sprite Font.
Decide which letters you will need and choose the order they will appear. You will need the list of characters in a single string for the "Character Set" property in the Sprite Font. (Store them however you want but I wouldn't recommend writing them on the palm of your mouse hand.)
Choose a font with rights for its use, if you aren't hand drawing each letter.
Draw or place each letter in it's own grid opening, leaving room around the edge for anti-aliasing to happen when it scales. You won't add the Space character here, it is however added in the Events Width Action later.
Save the final image as a transparent 24 bit PNG. Construct will optimize the PNG when it exports your project.
Import the image into a Sprite Font in Construct2, and fill in the "Character Set" and sizes you saved earlier.
Manually Setting The Widths
The next part requires a bit of trial & error to get all the sizes the way you like. Put all the characters in the Sprite Font "Text field" showing on screen, so you can see them next to each other when previewed.
Add an Action to the "On Start of Layout" Event. Select your Sprite font and it's "Set Character Width" action. In the "Character" box enter all the lowercase letters except for the narrow and wide characters.
Fill the width box with a number about half the font's width. Now look at the preview and judge if those particular letters need to be closer or farther away from the letter to the right of them. Adjust this to the point most of them look right. You may have to take letters out of that Action that don't work at that size.
Add another Action just like the first, and put the wide letters in it. Set the width a little wider, and test until it's right.
You should be getting the idea by now. After you have several sizes set up, you can move letters back and forth between Actions trying them at different sizes.
Add a Space character to one of the narrower Width Actions. It doesn't have to be in the image or the "Character Set" property, (less overhead if it isn't,) but it will use the full width of the Sprite Font if you don't set it here.
When you look at the preview you will see the letters you still need to adjust.
To make it easier, start with even numbers, it halves the numbers you need to work with. You can always fine tune with single digit Actions when you are done.
Tips for Sprite Fonts
Put all your sprite font objects that use the same font image in a family, so the "Set Width" Action can be used on the family, and it will apply to all of them.
The Font Widths will have to be reset on each Layout. You could put all the Width Actions in their own event sheet, and include it in each layout.
You can leave out unused letters, save space if you can make the image smaller, and there is a bit less to process. Maybe even a few bytes. (Sorry, hexadecimal humor)
If the Sprite Font is over a moving background it will be rebuilt and re-drawn each time it changes, which could be every tick. So if you score is floating over a Parallax background, make the sky stationary and keep the text over that.