This project is read-only.

SpriteFont+ is a Construct 2 plugin that extends the existing Sprite Font native plugin to include richer support for individual character widths during editing and runtime. You can use it in the free edition as well as all paid editions. The license is totally open so feel free to use it in your commercial or personal projects, etc. No attribution necessary.

Installation is really easy (drag and drop the c2addon directly onto Construct 2). You can find a more detailed guide here: Installation.

SpriteFont+ does everything the native Sprite Font does (all expressions, conditions and actions). To find out more about these you can check out the official manual over on Scirra.

Char width JSON

This new property is where you will specify custom character widths. You can do this with the simple JSON format of [[WIDTH,”ABC”],[WIDTH,”DEF”]]. Here are my custom character widths for the font Andy:

[[5,".:!"],[6,"1"],[7,"i|"],[8,"I,;'`"],[9,"l"],[12,"t["],[13,"]"],[14,"°<>"],[15,"\"("],[16,"fry-)"],[17,"ac9+=*"],[18,"ejopsv#"],[19,"gknux07?\/"],[20,"Ybdhq5"],[21,"wz48"],[22,"FH36~@"],[23,"DOUV2"],[24,"LT%"],[25,"KPQSX$£"],[26,"CE€"],[27,"AJZ"],[28,"Nm"],[29,"BGR&"],[30,"W"],[31,"M"],[36,"©"],[49,"_"]]

The main thing to note above is that you will have to escape the double quote character with \” (you can see it in the example above with a width of 15).

However, the far easier way is to use blackhornet’s excellent Sprite Font Generator Give Your Fonts Mono(spacing). In this linked forum post blackhornet outlines how to use the tool to take one of your fonts, generate the png and also the necessary JSON information regarding custom widths. Here’s an example with the font Andy:

image

When I hit save I’ll be given 3 files: The PNG of each character, a Text File and an XML File. You can use the PNG file as your SpriteFont+ texture in Construct 2 and you’ll end up with something similar to this (Looks identical to a native sprite font object using the same texture):

image

First thing you’re going to want to do is open up that text file from Give Your Fonts Mono(spacing). Copy those Character Width, Character height and Character Set values into the corresponding properties in Construct 2.

image

The 2 sprite font objects are still acting exactly the same. With a normal sprite font object you’d have to implement a couple of events to intialize a new array object using the JSON provided in the file then looping through it to set character widths. You can find out more about this technique in that blackhornet post linked above. This works perfectly. The problem is that your runtime will look totally different from your edit window which can make things difficult. It also requires the overhead of adding an array object and the same events everytime you use a sprite font. Here’s what those events look like for my Andy font:

image

To do the same thing with SpriteFont+, just take that same JSON from the Give Your Fonts Mono(spacing) text file and paste it into the Char width JSON property:

image

You’ll notice the edit window immediately updates with the custom widths in place. The space used will also match the runtime exactly. Now to fix that space width…

Space char width

The Space char width property is optional. When set to the default of –1, it is ignored entirely. When you set it, it will set the width of the space character. So for the example above I set it to something like 9:

image

The changes will be immediately updated in the edit window and again the space used will match the runtime exactly.

Summary

That’s it for now! The difference primarily comes down to a better editing experience and removal of runtime setup events. Here’s how the 2 plugins look in the edit window versus runtime when the events as described above are used for the native sprite font object:

image

They end up looking the same but the native plugin is a lot harder to work with when using custom character widths.

Last edited Nov 18, 2013 at 11:12 PM by thechriskent, version 5