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

3

Index

Attached Files

The following files have been attached to this tutorial:

.capx

spritefontexamples.capx

Download now 1.26 MB

Stats

16,494 visits, 37,881 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 14 Aug, 2013. Last updated 19 Feb, 2019

Why do I get this problem?

The shortest answer is the bolded text.

1. Bad Spacing Between Letters?

The letters are all the same size, so narrower letters leave more space to the right than wider letters. You can set the individual widths of each letter using the "Set Character Width" Action in the Events on the start of your Layout. Since these are adjustments made at runtime, so they won't show in the layout editor.

The "Set Character Width" Action must be set at the start of each layout for each Sprite Font object. Put all your sprite font objects that use the same font image in one family so that the widths can be set all at once. You will have to set this on the start of each layout, so you may put them on an event sheet of their own, and include that sheet at the start of each layout.

If the spacing problem is only in the layout editor, see #6 below.

2. Kan We Kern?

Kerning (mortising) is further adjustments to letter widths based on how much space "appears" to be between certain letter combinations. For example 'TA' has the space under the top line of the 'T' added to the 'A' which slopes away. Kerning rules tell the placement of the font to remove any extra space between the letters, and maybe even overlap the letters to reduce the "appearance" of too much gap. There can be hundreds of rules like this in professional True Type and Open Type fonts.

For more info on Kerning: en.wikipedia.org/wiki/Kerning

The current answer is no, Sprite Font won't close your gap with T & A.

If you really need a pair of letters to fit better, I recommend changing an unused character to be a copy of the letter, and set it's spacing different from the first.

3. Little Lines Appear Around The Font?

The Sprite Font is copying the letter off the font image resized to the scale you have chosen. It is anti-aliased to blend rough edges that appear when it's scaled. If your letter doesn't leave room around the edges for this blur effect, it will show on the letter beside it.

Meaning that little apostrophe looking line to the left of your 'G' is the added blur of your 'F's Top edge. So get the 'F' out, leave room for the expansion. (That joke replaced "Ain't nobody got time fo' yo' 'P')

4. Blurry Or Pixelated Graphics

This is usually a scaling problem. For highest quality results make your characters in the font image the largest size they will be stretched to when your project is in use. Your chosen screen size may still be stretched bigger to fit whatever screen is displaying it. In the editor my sprite font's are set to scale around 0.7 as the default, giving them space to grow.

A Sprite Font image that is too big takes up resources, so it's up to you where you balance quality of graphics versus the performance of the project.

For really big text like the title, I would make that an actual image itself.

5. The Exporter I'm Using Doesn't Support My Fonts.

Avoid the headaches, use Sprite Fonts instead.

6. The font in the layout editor is hard to position because it doesn't show the spacing.

Since the spacing is assigned at runtime, the editor doesn't know the spacing to use. You just have to place the box where you want the font and check the preview.

However there is a 3rd party version of the Spritefont plugin called "SpriteFont+" that has a place in the properties for the JSON data that the GiveYourFontsMono Tool provides, allowing the correct spacing to show during editing. You can find this plugin here:

https://spritefontplus.codeplex.com/

.CAPX

spritefontexamples.capx

Download now 1.26 MB
  • 0 Comments

Want to leave a comment? Login or Register an account!