Sprite Fonts, The How, What, When, & Where

Favourite 102 favourites
Tutorial written by ParadoxOriginally published on 14th, August 2013 - 6 revisions

Everything you always wanted to know about Sprite Fonts, and the ways and tools to create them. Yes, and free example fonts too.
[Latest update is the FAQ #6 which details an alternative plugin allowing correct spacing while editing.]

Who

Who Wrote This?

Paradox (a.k.a. Brian Kissinger) Started it, but others are welcome to expand, clarify, or update any part. (at least PM me if you see a typo.)
My qualifications? While I have made a few True Type fonts before, I made hundreds of hand drawn Commodore 64 8 bit fonts. If you remember Q-Link before it became AOL, I made the custom fonts for the chat rooms. But since that was before the Internet, it probably doesn't count.

The tool, "GiveYourFontsMono" mentioned under "Where" on page 2 was written by Blackhornet.

What

What Is A Sprite Font?

A Sprite Font is an alternative to using the normal text objects. It allows the use of image based fonts which offer complete artistic control and less possibility that they may not work as expected.

This Is a SpriteFont
See "How" on page 3 for their use.
Click here to download the example capx.
(it is using the latest beta r141)

When

When Is It Better To Use A Spritefont?

Using fonts can be rather inconsistent, as they differ slightly browser to browser. Spritefonts on the other hand, are graphics in your project. Also while fonts can change single colors easier, the Spritefonts can be full color images that match the theme of your project.

1. If you need things to align precisely and look the same in all browsers, use Sprite Font.
2. If you need graphic fades, outlines, drop shadows, or other static effects, use a Sprite Font.
3. If you need a wide range of sizes, bold, italic, color changes that don't require filters, then Sprite fonts will not work.
4. If you are presenting a story for the reader, or full pages of text, it might be more efficient with a regular font.
5. If you are having trouble getting regular fonts to work in different exporters, or offline, try switching to a Sprite Font.

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

10
makotto 6,614 rep

Great tutorial!!! There's a lot a of tutorials for Construct2 but yours is so well organized and straight to the point. I think most writers would benefit if they would follow the structure that you used to write this tutorial.

Wednesday, August 14, 2013 at 2:11:36 PM
4
tumira 13.1k rep

Thank you for the tutorial.

Wednesday, August 14, 2013 at 3:25:23 PM
4
ghost 2,866 rep

I'd aad that Blackhornet's tool exports a txt with all the needed widths

Wednesday, August 14, 2013 at 4:23:09 PM
3
Lordshiva1948 44.3k rep

Great tutorial I like it. Thanks

Wednesday, August 14, 2013 at 4:51:07 PM
3
Paradox 41.8k rep

@Ghost It does mention the text file, and the JSON trick to make a single copy & paste rather than 50.
That tool is like the other half of the Sprite Font Plugin.

Wednesday, August 14, 2013 at 8:56:47 PM
3
AbelaNET 14.9k rep

Thanks for this cool tutorial. Its very helpful. Thanks once again.

Wednesday, August 14, 2013 at 11:14:39 PM
3
BLACKMASK CEO 8,728 rep

My God.... I've been looking for a tutorial like this one for a good month!!! Thank you for the upload, and the link to the other by BlackHornet! I'm probably shooting myself in the foot here, and again I apologize for it in advance, but I'm really an "old school" kinda guy and I'm desperate for a tutorial on adding a gamepad function to my game with a complete run down on mapping commands to the buttons via the event sheet(s)... Again, I'm sorry for the manner of the how I asked for this favor...

Wednesday, August 14, 2013 at 11:21:02 PM
1
Paradox 41.8k rep

Sorry @Blackmask CEO, I don't know about that myself. maybe someone else who see's this can put something together?

Here was a thread from when it was in beta, maybe it can offer some insight?
www.scirra.com/forum/help-test-the-new-gamepad-object_topic49061.html

Thursday, August 15, 2013 at 9:39:39 PM
3
visionarybeast 1,438 rep

Thanks for the tutorial!

Thursday, August 22, 2013 at 2:42:06 AM
3
iso250 1,279 rep

This is not only a VERY helpful tutorial (I'll be utilising its information today) but the presentation was top notch. Thank you very much for this!!

Tuesday, September 03, 2013 at 11:33:31 PM
3
JudyScott 8,724 rep

LOL "Ain't nobody got time fo' yo' 'P'" -thats funny

Thursday, September 05, 2013 at 10:25:11 AM
3
DUTOIT 12.8k rep

Thank you. Thank you. Thank you :) And GiveYourFontsMono (Tool) is AWESOME

Friday, September 20, 2013 at 9:22:12 AM
3
thehorseman007 14.8k rep

Great tutorials, thanks for giving time to make it happen.

Tuesday, October 01, 2013 at 5:13:11 PM
3
clrammer 5,355 rep

@Paradox thank you for the great tutorial!

I just wanted to add a tip about WebGL effects with sprite fonts since we ran into this with a project I worked on.

When applying WebGL effects (such as Color), we got far better results in both appearance and performance when we applied the effect to a layer and just moved the sprite font to that layer when we wanted it to have the effect. The layer should disable the effect when there are no sprite font objects on it for performance reasons.

Hope this helps!

Sunday, February 09, 2014 at 4:40:55 PM
4
TiAm 9,732 rep

This is a great tutorial. I actually hadn't been using spritefonts because I wasn't aware that widths could be adjusted to circumvent monospacing. Between blackhornets GiveYourFontsMono and this tutorial getting fonts into construct is a piece of cake! Cheers, T

Thursday, February 27, 2014 at 10:39:11 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.