dxDrawImage blurring

[Decro]

Hello there.

I'm trying to create some relative UI, but any elements drawn by dxDrawImage() function becomes blurred on lower resolutions. How to avoid it?

Code:
 

scx,scy = guiGetScreenSize()
px = scx/1920

function draw()
  dxDrawImage(300*px,300*px,256*px,256*px,"image.png")
end

Spoiler

How it looks in 1920x1080

Lower resolution

 

[#BrosS]

use this

scx,scy = guiGetScreenSize()


function draw()
  dxDrawImage(0,0,scx,scy,"image.png")
end

 

[coNolel]

Hello Decro , true to use the argument PostGUI 

postGUI: A bool representing whether the image should be drawn on top of or behind any ingame GUI (rendered by CEGUI).

not sure ,

btw , nice design ^^

[Decro]

It seems to me that you misunderstood me.

I'm talking about the images "losing quality", become's a bit blurred or something like this on low screen resolutions. Is there a way to fix this?

[#BrosS]

29 minutes ago, Decro said:

It seems to me that you misunderstood me.

I'm talking about the images "losing quality", become's a bit blurred or something like this on low screen resolutions. Is there a way to fix this?

use the image as a shader

well find a shader that looks like blur something , define it and dxDrawimage it

Edited March 7, 2017 by #BrosS

[Decro]

37 minutes ago, #BrosS said:

use the image as a shader

well find a shader that looks like blur something , define it and dxDrawimage it

eh, i'm not looking for a way to BLUR something. I'm trying to fix images LOSING QUALITY when drawn on a screen with resolutions.

Just look at the screenshots inside spoiler.

Edited March 7, 2017 by Decro

[Citizen]

By doing this:

scx,scy = guiGetScreenSize()
px = scx/1920

You are calculating a ratio for the X axis on the screen for the current resolution. That ratio has to be used to convert a value that is good for a 1920px wide resolution (for example width: 256px) into a value that will be good for another resolution. The ratio on the X axis you calculated will only be good for values on that X axis (so only for posX and width arguments of the dxDrawImage function).

As you don't have the same amount of pixels on the Y axis than on the X axis, you have to calculate another ratio but for that Y axis too. And then use that ratio to convert the posY and height arguments that are good for a 1080px tall resolution:

scx,scy = guiGetScreenSize()
px = scx/1920 -- ratio X
py = scy/1080 -- ratio Y

function draw()
    dxDrawImage(300*px,300*py,256*px,256*py,"image.png")
end

Also, even with that fix, you might still experience some blur according to the wiki page:

Quote

Image files should ideally have dimensions that are a power of two, to prevent possible blurring.
Power of two: 2px, 4px, 8px, 16px, 32px, 64px, 128px, 256px, 512px, 1024px...

(We are talking here about the image source file, not the width and height arguments of that function.)

So if you still see some small blurs (on the text especially), try to edit your image.png to apply that best practice.

Edited March 7, 2017 by Citizen

[Decro]

13 hours ago, Citizen said:

By doing this:

scx,scy = guiGetScreenSize()
px = scx/1920

You are calculating a ratio for the X axis on the screen for the current resolution. That ratio has to be used to convert a value that is good for a 1920px wide resolution (for example width: 256px) into a value that will be good for another resolution. The ratio on the X axis you calculated will only be good for values on that X axis (so only for posX and width arguments of the dxDrawImage function).

As you don't have the same amount of pixels on the Y axis than on the X axis, you have to calculate another ratio but for that Y axis too. And then use that ratio to convert the posY and height arguments that are good for a 1080px tall resolution:

scx,scy = guiGetScreenSize()
px = scx/1920 -- ratio X
py = scy/1080 -- ratio Y

function draw()
    dxDrawImage(300*px,300*py,256*px,256*py,"image.png")
end

Also, even with that fix, you might still experience some blur according to the wiki page:

(We are talking here about the image source file, not the width and height arguments of that function.)

So if you still see some small blurs (on the text especially), try to edit your image.png to apply that best practice.

Thank's a lot.

I'm not using ratio Y just to keep image original ratio(by multiplying both sizes to similiar value). Course if you'r trying to draw some square on 16:9 - you would get an rectangle on 4:3, image loses own shapes and proportions this way