Creating nice fonts in love

[Lafolie]

I don't have an example image (never used image fonts) but I can offer this: ImageFontFormat. Actually, the format is really, really flexible due to the whole upper-left pixel as separator concept. Neat as.

[silver_hawk]

Ye, I think I just might gonna give it a go and try and see what will happen

[Inny]

You can use this as a starting point for imagefonts, I made it by basically copying the letters in from those cga/ega ibm fonts you can find everywhere. The arrangements of the symbols might not match the ordering of letters in my last post's code sample, you'll have to double check that and rearrange them if you're going to use it. Protip: rearranging the letters in the code is easier than rearranging the letters in the image.

Edit: phpBB might have mangled the image when I uploaded it. I also uploaded it to imgur here: http://imgur.com/rRnK3

[Jasoco]

You can use this as a starting point for imagefonts, I made it by basically copying the letters in from those cga/ega ibm fonts you can find everywhere. The arrangements of the symbols might not match the ordering of letters in my last post's code sample, you'll have to double check that and rearrange them if you're going to use it. Protip: rearranging the letters in the code is easier than rearranging the letters in the image.

Edit: phpBB might have mangled the image when I uploaded it. I also uploaded it to imgur here: http://imgur.com/rRnK3

You should also offer the text string to use when creating this font to make it easier.

The string is:

Code: Select all

 !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~

Note the space at the beginning. Very important. Also remember to escape certain characters like the double quotes (Or single quotes depending on which one you use to wrap the string) and the backslash.

[silver_hawk]

Thank you very much for the example and explanation, my new fonts will be ready anytime soon

Also is it better to create larger images and then scale them down, when printing smaller fonts? rather than scale up to create larger fonts?
(because of they are getting more pixel like?)

Have a GREAT day! <3

[T-Bone]

Depends on what effect you're after. I always make mine low-res and scale up because I like the pixel look. But optimally, you should draw it in the resolution you're going to be using it with. In my game, which can run in several different resolutions to support almost all Android phones, I have two different fonts in different sizes, and I pick the one that fits the best at run time.

[silver_hawk]

Hi i tried creating an image font
but something goes wrong when i try and use it....

I used a slightly modified code by Inny:

Code: Select all

function loadImageFont(name)
	local fontset =
		[=[!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~]=]
	local fontimg = gfx.newImage(name)
	fontimg:setFilter("nearest", "nearest")
	font = gfx.newImageFont(fontimg, fontset)
	local fontHeight = fontimg:getHeight()
	font:setLineHeight( fontHeight )
	return font
end

gfx is equalt to love.graphics, and i used this call to call it:

Code: Select all

bigfont = loadImageFont('fonts/fontwithcolor.png')

here is the image i tried to use:

v1pYD.png (16.16 KiB) Viewed 189 times

but somehow nothing happens when i try and use it, but I don't get any errors either, can explain why?

[Jasoco]

There's no separator color between each letter.

Also, I'm not familiar with using fonts with that many colors in it, but I believe you should make the separator between each character in the image a single color that can't be found anywhere else in the image. It should also be as high as the image itself from the top to the bottom of the image.

[Inny]

The pixel at (0,0) is the separator color. Don't use that color anywhere else in the image. I used black with white text over alpha background. You might want to use magenta (#FF00FF) as your separator, as thats a rarely used color. Also, there's a single error with my code, a missing local keyword before the first usage of the font variable.

As an aside, I like to use solid white for my text color with the pure alpha background, because then I can use love.graphics.setcolor to change the text color dynamically. If you want smooth looking letters, you can use monochrome for the antialiasing.

[Jasoco]

Yeah, I agree with magenta. It was the color DOOM used for its sprites and textures to signify transparency too. It rarely ever gets used. But if you need to use it, then pick another color you're not going to.

Is there a tolerance with how Löve uses these colors? Like for instance, if you have #FF00FF as the separator, can you have a pixel elsewhere that is #FF00FE and have it not be considered part of the separator set? Or will it still see that as magenta even though it's slightly less blue? I've just been curious about that and never thought to look into it.

Also, white fonts rule. You can make them whatever color you want. Really nice.