Hairlines disappearing.. Config problem?

[philipfuchs]

Hej all,

I am working on an App with loads of tiny little details and Hairlines (1px lines), but on some devices it seems that they are disappearing on certain rows.

It seems that something is wrong with my config file.

Any ideas on how this should be adapted?

local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 800 or math.ceil( 1200 / aspectRatio ), height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ), scale = "letterBox", --fps = 60, imageSuffix = { ["@2x"] = 1.3, }, },

[James_Sherburne]

Phillip, have you actually deployed to different devices and seen this behavior? If you are seeing this on the Simulator only, it may just be your monitor resolution and nothing more.

[rob]

The problem with 1px images has to do with how Corona scales the screen.

Imagine your content area is defined at 800x1200 and your 1px image looks good there.  Now put this on a 640x960 device.   Those 800 vertical lines have to be squeezed into 640, which means throwing away about 20% of the lines on the screen. Those extra lines lost can cause 1px lines to get list.

This is one of the reasons to support the 320x based content area.  On larger screens they will scale up.

Rob

[philipfuchs]

@James, yes I am testing on actual devices not the simulator.

@Rob, interesting. Aiming for mostly newer devices like Iphone 5 - 6+ is it sill a good idea to go with 320? Also would that mean, that on a 640 device a 1px line would be seen as 2px then? 

Cheers

[thomas6]

hi Philip,

I think Rob is suggesting designing for a minimum screen size of 320 pixels wide, but that would indeed mean that your beautiful 1 pixel hairlines will be scaled to be thicker.

[philipfuchs]

Ok, so how would a config file look like without scaling? One way I could imagine would be to script everything in relative screen space rather than absolut pixel values, so everything gets aligned accordingly and not scaled?! 

How does xCode deal with all their different screen sizes and aspect ratios?

[philipfuchs]

this is something I came across trying the idea of pixel perfection. Still seems to scale it though.

http://spiralcodestudio.com/corona-sdk-pro-tip-of-the-day-36/

Rob, what do you think of that?

[philipfuchs]

A good read, for everybody who comes across this entry:

https://coronalabs.com/blog/2014/10/28/resolution-independence-adaptive-content-scaling-in-corona/

[rob]

If you’re building business apps, you probably should use the “adaptive” scaling mentioned in Walter’s post:  https://coronalabs.com/blog/2014/10/28/resolution-independence-adaptive-content-scaling-in-corona/

This is still a 320px based scale, which is what Apple is clearly still wanting people to do and Android’s 160ppi works out to 320px based scale in most cases.

But yes, on a 640px device using a 320px content area would result in a 2px line.   You can use 640px as the base and on the bigger screens, it should create a line bigger than 1px which shouldn’t disappear.

Rob

[thomas6]

My guess is you could surely calculate a scaleFactor that gives you a multiplier for your lineWidth on any given device, to get effective 1 pixel lines.

[James_Sherburne]

Phillip, have you actually deployed to different devices and seen this behavior? If you are seeing this on the Simulator only, it may just be your monitor resolution and nothing more.

[rob]

The problem with 1px images has to do with how Corona scales the screen.

Imagine your content area is defined at 800x1200 and your 1px image looks good there.  Now put this on a 640x960 device.   Those 800 vertical lines have to be squeezed into 640, which means throwing away about 20% of the lines on the screen. Those extra lines lost can cause 1px lines to get list.

This is one of the reasons to support the 320x based content area.  On larger screens they will scale up.

Rob

[philipfuchs]

@James, yes I am testing on actual devices not the simulator.

@Rob, interesting. Aiming for mostly newer devices like Iphone 5 - 6+ is it sill a good idea to go with 320? Also would that mean, that on a 640 device a 1px line would be seen as 2px then? 

Cheers

[thomas6]

hi Philip,

I think Rob is suggesting designing for a minimum screen size of 320 pixels wide, but that would indeed mean that your beautiful 1 pixel hairlines will be scaled to be thicker.

[philipfuchs]

Ok, so how would a config file look like without scaling? One way I could imagine would be to script everything in relative screen space rather than absolut pixel values, so everything gets aligned accordingly and not scaled?! 

How does xCode deal with all their different screen sizes and aspect ratios?

[philipfuchs]

this is something I came across trying the idea of pixel perfection. Still seems to scale it though.

http://spiralcodestudio.com/corona-sdk-pro-tip-of-the-day-36/

Rob, what do you think of that?

[philipfuchs]

A good read, for everybody who comes across this entry:

https://coronalabs.com/blog/2014/10/28/resolution-independence-adaptive-content-scaling-in-corona/

[rob]

If you’re building business apps, you probably should use the “adaptive” scaling mentioned in Walter’s post:  https://coronalabs.com/blog/2014/10/28/resolution-independence-adaptive-content-scaling-in-corona/

This is still a 320px based scale, which is what Apple is clearly still wanting people to do and Android’s 160ppi works out to 320px based scale in most cases.

But yes, on a 640px device using a 320px content area would result in a 2px line.   You can use 640px as the base and on the bigger screens, it should create a line bigger than 1px which shouldn’t disappear.

Rob

[thomas6]

My guess is you could surely calculate a scaleFactor that gives you a multiplier for your lineWidth on any given device, to get effective 1 pixel lines.