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!
Pixel font
Forum rules
Before you make a thread asking for help, read this.
Before you make a thread asking for help, read this.
- tentus
- Inner party member
- Posts: 1060
- Joined: Sun Oct 31, 2010 7:56 pm
- Location: Appalachia
- Contact:
Re: Pixel font
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:
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
Kurosuke needs beta testers
- Taehl
- Dreaming in associative arrays
- Posts: 1025
- Joined: Mon Jan 11, 2010 5:07 am
- Location: CA, USA
- Contact:
Re: Pixel font
Aren't TTF fonts supposed to state how they should be rendered, antialiased, etc.? Maybe something is wrong with the font itself?
Earliest Love2D supporter who can't Love anymore. Let me disable pixel shaders if I don't use them, dammit!
Lenovo Thinkpad X60 Tablet, built like a tank. But not fancy enough for Love2D 0.10.0+.
Lenovo Thinkpad X60 Tablet, built like a tank. But not fancy enough for Love2D 0.10.0+.
Re: Pixel font
No, i don't think so as i have tested with multiple TTF fonts and they all give the same result.Taehl wrote:Aren't TTF fonts supposed to state how they should be rendered, antialiased, etc.? Maybe something is wrong with the font itself?
Re: Pixel font
Can you give us an example what LÖVE produces and a image of what you would expect it to look like?qrux wrote:How can i fix this?
We can then give you more accurate information how to get there.
Shallow indentations.
- Jasoco
- Inner party member
- Posts: 3725
- Joined: Mon Jun 22, 2009 9:35 am
- Location: Pennsylvania, USA
- Contact:
Re: Pixel font
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.
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.
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)
Re: Pixel font
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.
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
- Inner party member
- Posts: 3725
- Joined: Mon Jun 22, 2009 9:35 am
- Location: Pennsylvania, USA
- Contact:
Re: Pixel font
I just wish ImageFonts had letter spacing back. Especially negative letter spacing. I don't understand why it was removed.
Re: Pixel font
Sure. Here's an image of what it looks like in LÖVE 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).Boolsheet wrote:Can you give us an example what LÖVE produces and a image of what you would expect it to look like?qrux wrote:How can i fix this?
We can then give you more accurate information how to get there.
Also, some of you suggested i should use a image font. Is there a converter or something like that for TTF to ImageFont?
Thanks!
Who is online
Users browsing this forum: Ahrefs [Bot] and 1 guest