LÖVE

Posted: **Sun Feb 18, 2024 10:20 am**

Hi, I recently started studying LOVE, and have already studied a lot of materials, including forum entries. But I still couldn't figure out why the text is rendered blurry. No advice helps:

1) Round the value of the text coordinates: math.floor(x) math.floor(y) — This does not work, the result has not changed
2) Use a larger font — It doesn't work, the letters are blurred
3) Enable filtering mode: love.graphics.setDefaultFilter("nearest","nearest") — no result
4) Apply a new filtering mode to the Text object:

Code: Select all

font = love.graphics.newFont("Inter-Regular.ttf", 12)
font:setFilter("nearest","nearest")

And this is also absolutely useless, there are no changes. This is very important to me, because there will be a lot of text in my game, it's almost a text quest.

In this picture, you can better see how the text "Press Me!" is blurred.

Please tell me how to make the image as clear as possible so that each pixel is distinguishable?

I decided to make exactly the same button in Gamemaker, the window sizes are identical (800x600), but why is the result so different? Why is the LOVE window bigger than the gamemaker window? Could this be the reason for the blur?

Posted: **Mon Feb 19, 2024 10:55 am**

Your code, show it.

Posted: **Mon Feb 19, 2024 3:25 pm**

BrotSagtMist wrote: ↑Mon Feb 19, 2024 10:55 am Your code, show it.

main.lua

Code: Select all

c_white = {1, 1, 1, 1}
c_black = {0, 0, 0, 1}


function new_button(title, fore_color, back_color, stroke_color, with, height)
    return {
        title = love.graphics.newText(font or love.graphics.getFont(), title or ""),
        fore_color = fore_color or c_black,
        back_color = back_color or c_white,
        stroke_color = stroke_color or c_black,
        with = with or 80,
        height = height or 30
    }
end


function draw_button(button, x, y)
    local r, g, b, a = love.graphics.getColor()

    love.graphics.setColor(button.back_color)
    love.graphics.rectangle("fill", x, y, button.with, button.height, 5,5,10)

    love.graphics.setColor(button.stroke_color)
    love.graphics.rectangle("line", x, y, button.with, button.height, 5, 5, 10)

    love.graphics.setColor(button.fore_color)
    love.graphics.draw(button.title, math.floor(x+12), math.floor(y+8))

    love.graphics.setColor(r,g,b,a)
end



function love.load()
    font = love.graphics.newFont("Inter-Regular.ttf", 12)
    font:setFilter("nearest","nearest")

    love.graphics.setBackgroundColor(0.96,0.91,0.85)
    
    my_button = new_button("Press Me!", c_black, c_white, c_black, 80, 30)
end



function love.draw()
    draw_button(my_button, 50, 50)
end

conf.lua

Code: Select all

function love.conf(t)
    t.window.width = 800
    t.window.height = 600
end

Project folder contents:

main.lua

conf.lua

Inter-Regular.ttf

Posted: **Mon Feb 19, 2024 6:49 pm**

Sharp here

: shot-2024-02-19_19-43-46.png (7.51 KiB) Viewed 3469 times

Might be a dpi setting?
check https://love2d.org/wiki/love.window.getDPIScale

Posted: **Mon Feb 19, 2024 7:13 pm**

Looks sharp to me as well, though a bit small. I used this font: https://github.com/rsms/inter/releases/ ... er-4.0.zip (after unzipping, it's the one in extras/ttf/Inter-Regular.ttf)

Are you sure that's all the code? Aren't you using love.graphics.scale or anything? I used this (copied directly from the snippets you have pasted):

Code: Select all

font = love.graphics.newFont("Inter-Regular.ttf", 12)
font:setFilter("nearest","nearest")

c_white = {1, 1, 1, 1}
c_black = {0, 0, 0, 1}


function new_button(title, fore_color, back_color, stroke_color, with, height)
    return {
        title = love.graphics.newText(font or love.graphics.getFont(), title or ""),
        fore_color = fore_color or c_black,
        back_color = back_color or c_white,
        stroke_color = stroke_color or c_black,
        with = with or 80,
        height = height or 30
    }
end


function draw_button(button, x, y)
    local r, g, b, a = love.graphics.getColor()

    love.graphics.setColor(button.back_color)
    love.graphics.rectangle("fill", x, y, button.with, button.height, 5,5,10)

    love.graphics.setColor(button.stroke_color)
    love.graphics.rectangle("line", x, y, button.with, button.height, 5, 5, 10)

    love.graphics.setColor(button.fore_color)
    love.graphics.draw(button.title, math.floor(x+12), math.floor(y+8))

    love.graphics.setColor(r,g,b,a)
end



function love.load()
    font = love.graphics.newFont("Inter-Regular.ttf", 12)
    font:setFilter("nearest","nearest")

    love.graphics.setBackgroundColor(0.96,0.91,0.85)
    
    my_button = new_button("Press Me!", c_black, c_white, c_black, 80, 30)
end



function love.draw()
    draw_button(my_button, 50, 50)
end

Posted: **Mon Feb 19, 2024 8:13 pm**

pgimeno wrote: ↑Mon Feb 19, 2024 7:13 pm Are you sure that's all the code? Aren't you using love.graphics.scale or anything?

That's all the code I used, but I have a 14" monitor with a resolution of 1920x1080. To ensure that all screen elements are not displayed too small, the scaling of 125% is specified in the Windows 11 screen settings.

For the sake of experiment, I set the screen scale to 100% and now everything is rendered perfectly, without blurring. But the question arises, why did Game Maker ignore the scaling of the screen and give the correct result?

All other programs also display correctly when zooming, with the exception of some older ones. I'll try some more ways to solve the problem.

Posted: **Mon Feb 19, 2024 8:31 pm**

pgimeno wrote: ↑Mon Feb 19, 2024 7:13 pm Are you sure that's all the code? Aren't you using love.graphics.scale or anything?

The issue has been resolved. I scaled down Windows 11 from 125% to 120%, LOVE began to display beautifully, besides all other programs also became clearer. The most amazing thing is that the Game Maker window is now exactly the same as LOVE's. I can't figure out why, by reducing the Windows zoom by only 5%, the LOVE window has decreased so dramatically.

Unfortunately, now the text in the system is smaller than we would like)

It’s not so clear in the screenshot, but on my computer now everything renders perfectly

Posted: **Tue Feb 20, 2024 8:05 am**

This?
Windows Global Scale viewtopic.php?t=90052

And also for frames image with 9 tiles, the middle can be stretched:
9 patch viewtopic.php?t=94687

Posted: **Tue Feb 20, 2024 8:31 am**

darkfrei wrote: ↑Tue Feb 20, 2024 8:05 am This?
Windows Global Scale viewtopic.php?t=90052

And also for frames image with 9 tiles, the middle can be stretched:
9 patch viewtopic.php?t=94687

Thank you, as I wrote above, LOVE displays the window correctly, even with Windows scaling. In my case, the window is rendered correctly at a scale of 120%, but at 125% it is already greatly enlarged.

Posted: **Tue Feb 20, 2024 11:25 am**

zakhar9lov wrote: ↑Tue Feb 20, 2024 8:31 am
Thank you, as I wrote above, LOVE displays the window correctly, even with Windows scaling. In my case, the window is rendered correctly at a scale of 120%, but at 125% it is already greatly enlarged.

You and right, but you still must to show us how the window with Windows global scale = 100%, just to be sure that we really have other problem, not problem with Windows scaling.

LÖVE

I can't get rid of the blurred text

I can't get rid of the blurred text

Re: I can't get rid of the blurred text

Re: I can't get rid of the blurred text

Re: I can't get rid of the blurred text

Re: I can't get rid of the blurred text

Re: I can't get rid of the blurred text

Re: I can't get rid of the blurred text

Re: I can't get rid of the blurred text

Re: I can't get rid of the blurred text

Re: I can't get rid of the blurred text