Pixel font

[qrux]

Hi, i have a question about pixel fonts. Right now my pixel font is a .ttf file and is loaded simply with love.graphics.newFont and then initialized with love.graphics.setFont. However, it looks very bad and not very "pixely", i think this is because of LÖVE's anti-aliasing, am i right? How can i fix this?
Thanks!

[tentus]

I'm not sure that you can get around the aliasing on fonts right now. I tried an elaborate scaling system (see below) but the results still don't look very pixely, as you say.


Useless code:

Code: Select all

function love.load()
	original = love.image.newImageData("imagefont.png")
	scaled = love.image.newImageData((original:getWidth() * 2), (original:getHeight() * 2))
	for x=0, original:getWidth() - 1 do
		for y=0, original:getHeight() - 1 do
			r, g, b, a = original:getPixel(x, y)
			nx = x * 2
			ny = y * 2
			scaled:setPixel(nx, ny, r, g, b, a)
			scaled:setPixel(nx+1, ny, r, g, b, a)
			scaled:setPixel(nx+1, ny+1, r, g, b, a)
			scaled:setPixel(nx, ny+1, r, g, b, a)
		end
	end
	final = love.graphics.newImage(scaled)
	final:setFilter("nearest", "nearest")
	font = love.graphics.newImageFont(final, " abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,!?-+/():;%&`'*#=[]\"")
	love.graphics.setFont(font)
end

function love.draw()
	love.graphics.print("This is some text", 100, 100)
end

[Taehl]

Aren't TTF fonts supposed to state how they should be rendered, antialiased, etc.? Maybe something is wrong with the font itself?

[qrux]

Aren't TTF fonts supposed to state how they should be rendered, antialiased, etc.? Maybe something is wrong with the font itself?

No, i don't think so as i have tested with multiple TTF fonts and they all give the same result.

[Boolsheet]

How can i fix this?

Can you give us an example what LÖVE produces and a image of what you would expect it to look like?
We can then give you more accurate information how to get there.

[Jasoco]

I just make my own pixel fonts in PhotoShop and use them as image fonts. They end up looking much nicer than any TTF font that's supposed to be blocky.

Just do that with PS or Gimp or your preferred image editor with transparency PNG support.

If you want to use mine, here you go. You can give me credit if you use them and want to, but they're really simple fonts that may have been replicated many times before. Includes code to implement and linehight recommended. They don't have every character though so you might need to add some.

Screen Shot 2011-11-13 at 6.32.00 PM.PNG (9.96 KiB) Viewed 5302 times

Code: Select all

font["mono16"] = love.graphics.newImageFont("resources/fonts/font1.png", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 :-!.,\"?>_", 0)
font["mono16"]:setLineHeight(1)

font["dialog"] = love.graphics.newImageFont("resources/fonts/font2.png", " abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,!?-+/():;%&`_*#=[]'{}", 0)
font["dialog"]:setLineHeight(.6)

font["tiny"] = love.graphics.newImageFont("resources/fonts/font3.png", " 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.-,!:()[]{}<>", 0)
font["tiny"]:setLineHeight(.8)

Fonts.zip

Fonts!!! Tiny, Mono16 and Dialog

(20.41 KiB) Downloaded 331 times

[coffee]

I haven´t used yet image fonts in LOVE. There are advantages in use image fonts instead of TTF concerning memory resources or speed of execution?
Perhaps a wiki page for LOVE image fonts resources could be useful for distribution of fonts like the ones from Jasoco. BTW thank you Jasoco.

[Jasoco]

I just wish ImageFonts had letter spacing back. Especially negative letter spacing. I don't understand why it was removed.

[qrux]

How can i fix this?

Can you give us an example what LÖVE produces and a image of what you would expect it to look like?
We can then give you more accurate information how to get there.

Sure. Here's an image of what it looks like in LÖVE

3zY96.png (311 Bytes) Viewed 604 times

As you can see, the edges are kind of round and not pixely at all. (i'm not possible to get an screenshot out of LÖVE right now, but you get the idea).

Also, some of you suggested i should use a image font. Is there a converter or something like that for TTF to ImageFont?
Thanks!

[Boolsheet]

Can you show us the code how you generate the image?