Fonts - Again!

[Mr. Strange]

Alright, after getting lots of good font-stuff working, I now want to delve deeper.

I want to make a font which included non-traditional characters. Love has "image fonts" supported, but the examples a too short to be useful, and the referenced images do not exist.

I want a font which is a regular true type font plus a string of symbols. My hope is that I can then assign specific strings to those symbols, and use them within text. For example, I might add a smiley symbol, and give it the name ":)" - then when I draw text to the screen, all instances of ":)" would be replaced my my new image in the font.

The "glyphs" functionality seems (in my imagination) to give me this sort of flexability. But I need a working example of the function in action, along with a loadable font.

[mike]

There is no way to make two characters represent a single glyph. If you want to use a smiley face, perhaps you should initialize the image font with the "☺" character and use that for every smile?

Note: Font is bad and broken and bitter. It is going to be re-done.

[qubodup]

Note: Font is bad and broken and bitter. It is going to be re-done.

By chance I just found QuesoGLC, perhaps it might be useful.

QuesoGLC is a free implementation of the OpenGL Character Renderer (GLC). QuesoGLC is based on the FreeType library, provides Unicode support and is designed to be easily ported to any platform that supports both Freetype and OpenGL.

[Mr. Strange]

There is no way to make two characters represent a single glyph. If you want to use a smiley face, perhaps you should initialize the image font with the "☺" character and use that for every smile?

Note: Font is bad and broken and bitter. It is going to be re-done.

I would love to "initialize the image font with the "☺" character" if I had any idea how to do that!

Even though font is bad, could I just get a quick heads-up on how it works? I promise to love the eventual successor much more!

--Mr. Strange

[mike]

Sorry for the lack of good documentation. Anyway, you create an image font with this line:

Code: Select all

var = love.graphics.newImageFont( filename, glyphs )

So, for the image I attached you should use the following line when creating it:

Code: Select all

fawnt = love.graphics.newImageFont("img_font.png", "ABCD☺")

Which would result in it making a smiley face whenever you use the smiley face character ( ☺ ).

I just tested it and my program (Notepad++) didn't like the ☺ character so I instead replaced it with *, which is fine as long as I don't intend to use the * for anything.The following code works:

Code: Select all

function load()
	fawnt = love.graphics.newImageFont("img_font.png", "ABCD*")
	love.graphics.setFont(fawnt)
	love.graphics.setBackgroundColor(255,255,255) -- the glyphs are black and we want to see them
end

function draw()
	love.graphics.draw("***", 100, 100) -- 3 badly made smileys
end

[Mr. Strange]

Alright, I was able to get your example to work.

What are the limits on a font? how does love know how wide the "letters" are in your example? Do they need to be greyscale? Black and White? Do those yellow lines need to be evenly spaced? Do they need to be yellow?

Hopefully, you're just following a standard that you can point me at. I've tried some experiments, with very erratic results.

--Mr. Strange

[mike]

The yellow lines are the spacer lines and the color shouldn't be used anywhere else in the font, the idea is to make an image which is like this:

Code: Select all

|AAA|BBB|CCC|DDD|EEE|FFF|

The | signifies spacer colors (in my example being yellow) where the characters are glyphs, which could be whatever you want. You make an image that has a spacer line in the front and back (left and right side) and a line between the glyphs. The spacing in:

Code: Select all

love.graphics.newImageFont( filename, glyphs, spacing )

Is what the line width is multiplied by to determine the spacing, so if you have a 1pixel wide line between the glyphs and a spacing of 2, it would result in a 2pixel wide spacing between the glyphs.

The glyphs can be any color you choose (as long as it is not the color used in the spacer lines) and can be as wide as you want (irrelevant of each other, so your A could be thin while your B is HUGE).

Did this make sense? I feel that my explanation was all over the place..

[Mr. Strange]

That was pretty clear - thank you.

For the spcing line - it can be any color, so long as that color is not used elsewhere in the image? And it is identified as the color at the start and end of the image?

--Mr. Strange

[mike]

Yes. It is customary to use a very ugly shade of yellow, because I say so. If you forget to put the line at the front and back then things will go awry, so remember them.