Rendering problems? Drawing with vectors - some lines are blury or/and fatter than others

[fjofuzz]

I draw some simple 1px lines to separate my ui elements. Problem is that they are never perfectly 1px as some lines appear to be blurry and fatter than others. Coming from flash I know that if vector object is not placed on a whole pixel, it will be blurry, so to position my lines I used :

math.floor()   

to position with whole numbers…but with no success.

I’m wondering is that a rendering issue … is there any workaround for this. Would it be not preferable to draw ui elements with vectors?

[fjofuzz]

Here is the screenshot:

You all separating lines are the same 1px, but as you can see , some of them are distorted - they appear blurred and fatter

[roaminggamer]

On the device or on the simulator?

If  you see this on the simulator, it is to be expected.  Why?  Because, your app is getting upscaled or downscaled depending on your design resolution, the size of the simulator a window and your monitor resolution.  At tje end of all this, there are sometimes precision and sub-pixel rounding errors, resulting in widths greater or less than expected by a small amount.

You may also see this to some extent of the device, but generally I find lines to be rendered more cleanly there, especially on late model iOS devices.

[fjofuzz]

It’s the same on the simulator and on the device… I guess I’ll have to prepare spritesheets with 1px lines and use pngs instead of vectors… that seems kind of awkward but I really need that precision in the design… and sadly using vectors is not the option…

[roaminggamer]

Hi.  What design resolution are you using (settings in conflig.lua)?  The issue is probably coming from two things:

1. The lines are getting scaled up or down to fit the true resolution of the device.

2. The lines are resting on an odd or perhaps a sub-pixel position, further complicating the stroke width calculation.

I suggest trying sub-pixel widths to see if you can fix the problem before going to images.

local tmp = display.newLine( 10, 0, 10, 100 ) tmp.strokeWidth = 1.25 

Also, can you say what device(s) you’ve seen this on?  Design resolution and devices will be useful for future readers and folks who might have suggestions on a fix.

PS - I do want to say, at the end of the day, I have always found that images look better than vectors.   However, I too want to figure out how to use vectors if possible.  Sometimes, when I make a minimalistic app, using vectors would be a lot faster than making images.

Thanks!

[fjofuzz]

Here are my settings:

 width = 320,         height = 480,          scale = "letterBox",         fps = 60,         xAlign = "center",         yAlign = "center",  

The glitch happens on every android device I have tested on - besides I have drawn this grid which is inside scrollview and as you scroll glitches are changing too - jumping from one line to another, that could be maybe explained that lines are not positioned on a whole pixels as they are being scrolled, but even if I place them on a whole pixels without scrolling, I still get that glitch - so for me it seems that it doesn’t matter if you place vectors on whole pixels or not - you still would get that glitch…

So I guess it’s because of what you said   -   it happens due to the fact that application is being scaled up or down to match the resolution of a device…

Also I have drawn crossed lines, which appear to be jagged 

Lesson learned - will have to use spritesheets … 

[fjofuzz]

Here is the screenshot:

You all separating lines are the same 1px, but as you can see , some of them are distorted - they appear blurred and fatter

[roaminggamer]

On the device or on the simulator?

If  you see this on the simulator, it is to be expected.  Why?  Because, your app is getting upscaled or downscaled depending on your design resolution, the size of the simulator a window and your monitor resolution.  At tje end of all this, there are sometimes precision and sub-pixel rounding errors, resulting in widths greater or less than expected by a small amount.

You may also see this to some extent of the device, but generally I find lines to be rendered more cleanly there, especially on late model iOS devices.

[fjofuzz]

It’s the same on the simulator and on the device… I guess I’ll have to prepare spritesheets with 1px lines and use pngs instead of vectors… that seems kind of awkward but I really need that precision in the design… and sadly using vectors is not the option…

[roaminggamer]

Hi.  What design resolution are you using (settings in conflig.lua)?  The issue is probably coming from two things:

1. The lines are getting scaled up or down to fit the true resolution of the device.

2. The lines are resting on an odd or perhaps a sub-pixel position, further complicating the stroke width calculation.

I suggest trying sub-pixel widths to see if you can fix the problem before going to images.

local tmp = display.newLine( 10, 0, 10, 100 ) tmp.strokeWidth = 1.25 

Also, can you say what device(s) you’ve seen this on?  Design resolution and devices will be useful for future readers and folks who might have suggestions on a fix.

PS - I do want to say, at the end of the day, I have always found that images look better than vectors.   However, I too want to figure out how to use vectors if possible.  Sometimes, when I make a minimalistic app, using vectors would be a lot faster than making images.

Thanks!

[fjofuzz]

Here are my settings:

 width = 320,         height = 480,          scale = "letterBox",         fps = 60,         xAlign = "center",         yAlign = "center",  

The glitch happens on every android device I have tested on - besides I have drawn this grid which is inside scrollview and as you scroll glitches are changing too - jumping from one line to another, that could be maybe explained that lines are not positioned on a whole pixels as they are being scrolled, but even if I place them on a whole pixels without scrolling, I still get that glitch - so for me it seems that it doesn’t matter if you place vectors on whole pixels or not - you still would get that glitch…

So I guess it’s because of what you said   -   it happens due to the fact that application is being scaled up or down to match the resolution of a device…

Also I have drawn crossed lines, which appear to be jagged 

Lesson learned - will have to use spritesheets …