Text Blurry When Upscaing

General discussion about LÖVE, Lua, game development, puns, and unicorns.
Post Reply
Magikarp
Prole
Posts: 1
Joined: Mon Oct 03, 2016 3:28 am

Text Blurry When Upscaing

Post by Magikarp »

I've run into a problem when scaling test.
When I scale it, it become rough and blurry around the edges like in the screenshot (the text is scaled by 2 on X and Y).
Capture.PNG
Capture.PNG (4.65 KiB) Viewed 9168 times
I use

Code: Select all

love.graphics.print("Choose your preferred background colour", (love.graphics.getWidth()/2)-135, 100, 0, 2, 2)
to print the text adn i'm using the latest version of Love.

Is there anything that I'm missing?
Should I be using a different function?
Is my font formatted improperly?
(I'm using the arial.ttf font, which is bundled with windows)
User avatar
veethree
Inner party member
Posts: 877
Joined: Sat Dec 10, 2011 7:18 pm

Re: Text Blurry When Upscaing

Post by veethree »

Instead of scaling it, Create the font with a larger size.

Code: Select all

font = love.graphics.newFont("arial.ttf", 64)
User avatar
D0NM
Party member
Posts: 250
Joined: Mon Feb 08, 2016 10:35 am
Location: Zabuyaki
Contact:

Re: Text Blurry When Upscaing

Post by D0NM »

Magikarp:
here is the solution I prefer to use.

Code: Select all

local myFont = love.graphics.newFont( "arial.ttf", 8 )
myFont:setFilter( "nearest", "nearest" )
Read more about "setFilter" yourself ^_-
Our LÖVE Gamedev blog Zabuyaki (an open source retro beat 'em up game). Twitter: @Zabuyaki.
:joker: LÖVE & Lua Video Lessons in Russian / Видео уроки по LÖVE и Lua :joker:
wizbiz
Prole
Posts: 3
Joined: Tue Nov 01, 2016 4:42 pm

Re: Text Blurry When Upscaing

Post by wizbiz »

I'm having trouble as well getting the font to be nice and clear. I'm porting my lua app to love2d and here's a sample of the results. love2d on the left, original on the right. The do use different fonts so they won't be exactly the same but I think love2d has room to get much better quality than it's getting.

Image

I've debugged this kind of font problem in other engines and it usually comes down to the texture coordinate generation for the glyphs. Could someone with more experience with love help me verify what the font texture and coordinates.

If I could get access to the texture the font is using as well as some sample glyph data we could create a better apples to apples comparison by rendering out some letters by hand and comparing them to the built in love.graphics.print routine.
User avatar
Nixola
Inner party member
Posts: 1949
Joined: Tue Dec 06, 2011 7:11 pm
Location: Italy

Re: Text Blurry When Upscaing

Post by Nixola »

How are you drawing the text? You shouldn't be scaling it, you should create a new Font object and set that instead. Please provide a .love file, as it will help us help you.
lf = love.filesystem
ls = love.sound
la = love.audio
lp = love.physics
lt = love.thread
li = love.image
lg = love.graphics
wizbiz
Prole
Posts: 3
Joined: Tue Nov 01, 2016 4:42 pm

Re: Text Blurry When Upscaing

Post by wizbiz »

Here's the code that I'm using:

Code: Select all

local font = love.graphics.newFont( "Consolas.ttf", 12 )

local base00    =  {101, 123, 131, 255}  -- body text / default code / primary content
local base3     =  {253, 246, 227, 255}  -- background

love.graphics.setFont( font )
love.graphics.setBackgroundColor( base3 )

function love.draw()

  love.graphics.setColor( base00 )
  love.graphics.print('Hello Font (consolas)', 10,10)

end
Attachments
betterfont.love
(59.48 KiB) Downloaded 217 times
wizbiz
Prole
Posts: 3
Joined: Tue Nov 01, 2016 4:42 pm

Re: Text Blurry When Upscaing

Post by wizbiz »

I played around with highdpi setting and scaling the font. This is the best I can get it. love2d is on the left

Image

Code: Select all

local love = love

love.window.setMode(800,600, {highdpi = true})

local fs = 2
local ps = love.window.getPixelScale()

local font = love.graphics.newFont( "Consolas.ttf", 12 * fs )

local base00    =  {101, 123, 131, 255}  -- body text / default code / primary content
local base3     =  {253, 246, 227, 255}  -- background

love.graphics.setFont( font )
love.graphics.setBackgroundColor( base3 )

function love.draw()

  love.graphics.setColor( base00 )
  love.graphics.print('[Results]', 10,10, nil, ps / fs, ps / fs)

end
Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests