Sprite Fonts: How do I properly work with Spacing Data?

Post reply

❤Follow Topic(3)

0 favourites

7 posts

From the Asset Store

Antidote Horror Pixel Font Sprite Font

$2.49 USD

Horror Halloween Pixel Art Sprite Font Space Data included

Antidote Studios

- pcfernandesjr
- - Joined 12 Dec, 2012
  - 31 topics • 127 posts
- 1
- 3 May, 2020
- Quote
Hi guys, I need some help understanding what I'm missing while configuring the character spacing for sprite fonts.

- This is the array I configured for Spacing Data:

[[14, "ÆŒ"], [13, "æœ"], [12, "@"], [11, "€©®"], [10,"MWmw#$¢Ð"], [9, "ABCDGHKNOPQRSTUVXYZ0123456789&£ÀÁÂÃÄÅÇÑÒÓÔÕÖØÙÚÛÜÝÞþß"], [8, "Eabcdeghknopqrsuvxyz~ÈÉÊËàáâãäåçèéêëðñòóôõöøùúûüýÿ"], [7, "FIJL%ÌÍÎÏ"], [6, "jt?-_\"()[]{}=*¿"], [5, "^°+<>"], [4, ",;/\\"], [3, "il.:!'¡|`ìíîï"]]

I added an extra blackslash for both " and \. But even that didn't solve the problem.

- Do I need to define a specific Character width/height beforehand? Or Spacing Data is supposed to override these settings?

Thanks in Advance.

Paulo.
Tagged:

font
spacing-data
spritefont
- dop2000
- - Joined 26 May, 2016
  - 139 topics • 12,609 posts
- 1
- 4 May, 2020
- Quote
Have you tried these tools? They should generate the correct spacing data:

construct.net/en/forum/game-development/tools-and-resources-27/sprite-font-generator-v3-64038
construct.net/en/forum/construct-3/general-discussion-7/spritefont-spacing-editor-150213
- pcfernandesjr
- - Joined 12 Dec, 2012
  - 31 topics • 127 posts
- 1
- 4 May, 2020
- Quote
Have you tried these tools? They should generate the correct spacing data:

https://www.construct.net/en/forum/game-development/tools-and-resources-27/sprite-font-generator-v3-64038

https://www.construct.net/en/forum/construct-3/general-discussion-7/spritefont-spacing-editor-150213

Thanks for the suggestions. I will check it out as a last resort.

I tried to configure the character widths using events as well, but they're not working as well.

Does the .png file dimensions somehow break the functionality?

For the sake of clarification, Here is what I am trying to configure, without success:

Font .png image:

Character Set:

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,;:?!-_~#"'&()[]{}^|`/@°+=*%€$£¢<>©®ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØŒÙÚÛÜÝÞàáâãäåæçèéêëìíîïðñòóôõöøœùúûüýþßÿ¿¡

Character Width adjustment event

Result:
- dop2000
- - Joined 26 May, 2016
  - 139 topics • 12,609 posts
- 1
- 4 May, 2020
- Quote
Can you share your project file? Or a blank project with this sprite font added and configured?

Also, what exactly is the problem - is the spacing data not working for all characters? or some characters?
- pcfernandesjr
- - Joined 12 Dec, 2012
  - 31 topics • 127 posts
- 1
- 4 May, 2020
- Quote
Can you share your project file? Or a blank project with this sprite font added and configured?

Also, what exactly is the problem - is the spacing data not working for all characters? or some characters?

Sure! Also, edited the previous post with an image of the result.

you can download the .c3p file here: drive.google.com/file/d/1UqeAyb4ihZ0R1wGJE7QrPe9lHs_HuPFK/view
- dop2000
- - Joined 26 May, 2016
  - 139 topics • 12,609 posts
- 1
- 4 May, 2020
- Quote
I never thought about this before, but I think all characters in the sprite font image need to be the same width. Spacing data is not used to determine character position in the image. It is only used to remove extra empty space from the right if the character is smaller than the default width.

So think of the sprite font image as a tilemap - each character needs to be inside its own tile.

I highly recommend using Spritefont Generator tool - it will format the image and generate the spacing data for you.
Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads
- pcfernandesjr
- - Joined 12 Dec, 2012
  - 31 topics • 127 posts
- 1
- 4 May, 2020
- Quote
I never thought about this before, but I think all characters in the sprite font image need to be the same width. Spacing data is not used to determine character position in the image. It is only used to remove extra empty space from the right if the character is smaller than the default width.

So think of the sprite font image as a tilemap - each character needs to be inside its own tile.

I highly recommend using Spritefont Generator tool - it will format the image and generate the spacing data for you.

I just placed the characters manually into a 15x15 grid, and yeah. It is just as you said. Now is works perfectly fine.

Thanks for the help. I'll have a look at the tool you suggested earlier. I'd still like to play around with font designing and something that makes this part faster would be pretty handy.