Font Styling Question

Audio and Graphics
#1

Hi,

I am working with a pretty basic pixel font, Boxy Bold (https://opengameart.org/content/boxy-bold-truetype-font). The font .ttf file is just an outline, and the inside is transparent.

As seen in the images, the font is shown as a black outline with white inside lettering. This in the font file, however, are simply the borders with transparent insides (where the white would be in the screenshot). In Corona when setting the fill color of the font, it only affects the outline of the font (black part in the screenshot), and leaves the inside transparent.

Is there any way to make it with display.newText so that the outside has the black border and the inside is white (just as seen in the screenshot in the link above).

If not, is there a way to splice together the letters as individual images to make my own font system, or would this use too much graphic power (as I will be spawning bits of text very very frequently).

If anybody has any thoughts as to how I can accomplish this it would be very much appreciated.

Thanks

#2

Think of fonts like white bitmaps.  Setting the fill ‘colors’ the white parts.  

There is is not concept of inside outside or stroke for fonts.  At least not the way you’re thinking of them above.

The only ways I know of to gain control of the ‘fill’ and ‘stroke’ the way you are thinking is to:

  1. Use a fully filled font (not outlined with transparent inner fill). Then make two letters where the letter behind is slightly larger and colored differently.  - Problem: Not great because using different font sizes means you must make text letter by letter and manually line up the letters.

  2. Use a bit-mapped font + library that supports strokes.  The library will do basically what I said above, but at least someone has coded it.

#3

Hi Ed, thanks for the reply.

Being that I have a lot of text being made in a lot of ways, I think that the bit-mapped font may be the easier route for my game. I found this library on GitHub, https://github.com/ponywolf/ponyfont, and am working to get it set up in my game. The font I downloaded already has a .png file of all the letters (which to my research is required for bitmap fonts), but also appears to require a .FNT file.

Unfortunately, with the links provided on that program’s README, the applications required to make the .FNT are Windows-only (I’m on a Mac). Do you know if there’s any other file for Corona that doesn’t need the .FNT file?

Thanks

#4

If you ever want your game translated into foreign languages they stay away from bitmap fonts.  Generally avoid stroked fonts or anything to arty too. Stick with something simple that will render on all devices on all languages - like Arial, Proxima Nova, etc.

#5

I really don’t have a specific answer for you on that.  I’m a Windows user almost exclusively (I only use Mac to publish).

I’d do these searches and see what comes up:  

Here are some (possible) leads:

I’m sure there will be some nuggets there.   Also, if this thread stays active long enough there should be others who have solutions.  

#6

Think of fonts like white bitmaps.  Setting the fill ‘colors’ the white parts.  

There is is not concept of inside outside or stroke for fonts.  At least not the way you’re thinking of them above.

The only ways I know of to gain control of the ‘fill’ and ‘stroke’ the way you are thinking is to:

  1. Use a fully filled font (not outlined with transparent inner fill). Then make two letters where the letter behind is slightly larger and colored differently.  - Problem: Not great because using different font sizes means you must make text letter by letter and manually line up the letters.

  2. Use a bit-mapped font + library that supports strokes.  The library will do basically what I said above, but at least someone has coded it.

#7

Hi Ed, thanks for the reply.

Being that I have a lot of text being made in a lot of ways, I think that the bit-mapped font may be the easier route for my game. I found this library on GitHub, https://github.com/ponywolf/ponyfont, and am working to get it set up in my game. The font I downloaded already has a .png file of all the letters (which to my research is required for bitmap fonts), but also appears to require a .FNT file.

Unfortunately, with the links provided on that program’s README, the applications required to make the .FNT are Windows-only (I’m on a Mac). Do you know if there’s any other file for Corona that doesn’t need the .FNT file?

Thanks

#8

If you ever want your game translated into foreign languages they stay away from bitmap fonts.  Generally avoid stroked fonts or anything to arty too. Stick with something simple that will render on all devices on all languages - like Arial, Proxima Nova, etc.

#9

I really don’t have a specific answer for you on that.  I’m a Windows user almost exclusively (I only use Mac to publish).

I’d do these searches and see what comes up:  

Here are some (possible) leads:

I’m sure there will be some nuggets there.   Also, if this thread stays active long enough there should be others who have solutions.