Why is my 'crop' setting not keeping pixel-perfect?

Get help using Construct 2

Post » Wed Oct 12, 2016 1:35 am

Trying to get a full-screen pixel-perfect setting—as in pixel art with no distortion and no black bars.

I'm trying out crop setting (for 'fullscreen in browser') which states no scaling. Scaling is at 2, sampling is point, pixel rounding is on and sprites are at integer locations.

If you watch the gif below his eye still distorts while walking. I captured in debugger so you can see x & y coordinates are at integer locations. Not sure what else can cause this...
Image


Property settings, just in case it is something else here:
Image

Any ideas what is causing this?

Any other way to get full screen, pixel-perfect? I am thinking about trying 'scale outer' then checking the size of the screen and using math (haven't figured it out yet) to set the scale so it will be back at an integer interval.

Thanks
ImageImageImage
B
44
S
26
G
11
Posts: 518
Reputation: 10,502

Post » Wed Oct 12, 2016 4:47 am

Where is the scaling set ? Layer scaling ? Could it a rounding bug ?

If you disable all scaling, and use "letterbox integer scale" as the "fullscreen in-browser" mode, it should be pixel perfect.
B
74
S
31
G
26
Posts: 994
Reputation: 20,198

Post » Wed Oct 12, 2016 11:30 am

Magistross wrote:Where is the scaling set ? Layer scaling ? Could it a rounding bug ?

If you disable all scaling, and use "letterbox integer scale" as the "fullscreen in-browser" mode, it should be pixel perfect.


It was an event, on layout start set layout scale to 2. Even with removing that event the crop setting with no scaling I can still see distortion. (on all objects, not just player)

Crop is stated as no scaling. Rounding bug? Is there a way I could tell?

I know that letterbox integer scale keeps pixel perfect. Does it make sense to do that and 'set canvas size' to browser width and height?
ImageImageImage
B
44
S
26
G
11
Posts: 518
Reputation: 10,502

Post » Wed Oct 12, 2016 12:04 pm

badmoodtaylor wrote:...Does it make sense to do that and 'set canvas size' to browser width and height?

I can't seem to get that to work—not sure if setting the canvas size in events and 'letterbox integer scale' play nicely together.
ImageImageImage
B
44
S
26
G
11
Posts: 518
Reputation: 10,502

Post » Wed Oct 12, 2016 12:19 pm

Just use letterbox integer scale. No other modes can guarantee pixel-perfect display so easily. For example if you choose crop mode on a device with a non-integral devicePixelRatio (and your screenshot looks like it uses some kind of high-DPI display), then the canvas size itself can be fractional.

(non-integral DPRs are a terrible idea, but they exist, so we have to deal with them...)
Scirra Founder
B
399
S
236
G
89
Posts: 24,529
Reputation: 195,390

Post » Wed Oct 12, 2016 2:27 pm

Ashley wrote:Just use letterbox integer scale. No other modes can guarantee pixel-perfect display so easily. For example if you choose crop mode on a device with a non-integral devicePixelRatio (and your screenshot looks like it uses some kind of high-DPI display), then the canvas size itself can be fractional.

(non-integral DPRs are a terrible idea, but they exist, so we have to deal with them...)


Thanks for the answer. I think I get what you are saying—so if my monitor is 1280.5 pixel width then everything is fractionally scaled to account for that 0.5? or would it be, on computer, if the browser window size isn't at an integer?

Would that mean on most devices/screens others would not be seeing this as most are at integral DPR?

Using the full-screen is more prioritized for me than pixel-perfect on this project as I wouldn't want to waste space on mobiles. So if I can't find a solution for both I will probably just use scale outer.

If I could get your thoughts on my two ideas for solutions to obtain both pixel-perfect and full screen:
  1. Letterbox Integer Scale
    --on layout start/browser resize -> set canvas size to browser.screenheight & browser.screenwidth
    (this didn't seem to work when I tried but just realized maybe the screen size was larger than the layout size so couldn't complete the action—don't have Construct in front of me now)
  2. Scale outer
    --set scale to canvas.width/browser.screen width so that scale reverts back to 1 or 2*(canvas.width/browser.screenwidth) if larger than certain size, etc.

Ashley wrote:...(and your screenshot looks like it uses some kind of high-DPI display)...


I haven't researched some settings enough to make educated decision—fullscreen scaling; high-dpi; downscaling—so I posted a screenshot of the properties bar in case anything else affects this or any other recommendations. So I honestly have no clue regarding this part of your comment.

Thanks again and I would appreciate your thoughts on this.
ImageImageImage
B
44
S
26
G
11
Posts: 518
Reputation: 10,502

Post » Wed Oct 12, 2016 2:58 pm

Ashley meant that you probably have a "DevicePixelRatio" that is not "1". And if that non-one value is also non-integer, your canvas size could become irrational, which would cause your entire layout to distort here and there.

The browser object can be used to inspect the DPR.
B
74
S
31
G
26
Posts: 994
Reputation: 20,198

Post » Wed Oct 12, 2016 3:10 pm

Magistross wrote:Ashley meant that you probably have a "DevicePixelRatio" that is not "1". And if that non-one value is also non-integer, your canvas size could become irrational, which would cause your entire layout to distort here and there.

The browser object can be used to inspect the DPR.


Okay, I found another explanation and think I understand now—a device's scaling from logical to physical pixels. It seems it isn't uncommon for devices to have non-integer DPR. (according to http://devicepixelratio.com/ )

So if I used 'crop' I could set scale to 1/browser.dpr to revert back to 1 and have no distortion? (then obviously upscale in integers as I please)
ImageImageImage
B
44
S
26
G
11
Posts: 518
Reputation: 10,502

Post » Thu Oct 13, 2016 11:07 am

TBH using crop mode will give you bigger problems - it doesn't do any scaling, so the game will look small on high-resolution devices. If you scale it yourself, you cannot use any fractional scales otherwise you break pixel-perfectness. If you use integer scales, then you've basically reinvented letterbox integer scale mode. Don't try messing with the canvas size or anything, just pick a 16:9 resolution and run the game in fullscreen mode, and it should be pixel perfect and fill the screen on common devices.

I've actually considered removing crop mode - I think it creates more problems than it solves, especially for games.
Scirra Founder
B
399
S
236
G
89
Posts: 24,529
Reputation: 195,390

Post » Thu Oct 13, 2016 2:09 pm

Ashley wrote:I've actually considered removing crop mode - I think it creates more problems than it solves, especially for games.

Please, kindly leave "Crop mode" in peace, okay...? It is needed and handy, in various situations.
B
29
S
8
G
7
Posts: 643
Reputation: 6,482

Next

Return to How do I....?

Who is online

Users browsing this forum: Artcadev, R0J0hound, Yahoo [Bot] and 21 guests