Introduction
The SpriteFont+ plugin extends the existing Sprite Font native plugin to include richer support for individual character widths during editing and runtime.
The primary benefit is being able to use custom character widths without any extra events and full support while editing. Here’s how the 2 plugins look in the edit window versus runtime when the extra events as described in the documentation are used for the native sprite font object:
They end up looking the same but the native plugin is a lot harder to work with when using custom character widths.
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 entry. This tutorial will just cover the additional properties added by SpriteFont+ and how to get the most of them.
Getting the Plugin
You can find the plugin on the SpriteFont+ CodePlex site. There you'll find full documentation, the most recent release and a spot to submit bugs, etc. You can also check the original forum post for this plugin for more details.
Installation is really easy (drag and drop the c2addon directly onto Construct 2). You can find a more detailed guide here: Installation
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:
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):
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.
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:
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:
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:
The changes will be immediately updated in the edit window and again the space used will match the runtime exactly.