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

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...

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

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

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.

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?

...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.

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...)

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:

• 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)
• 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.

...(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.

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.

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)

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.

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.

...then you've basically reinvented letterbox integer scale mode.

But without any black borders on unexpected resolutions, no?

I'm trying to invent an 'integer scale outer' mode. Am I mistaken in my thinking here?

Did the image origin move?

Did the image origin move?

I believe origins can't be between pixels (only at integer values) so wouldn't affect this

Setting the scale to integer/browser.DevicePixelRatio did restore pixel-perfect under crop setting.

Ashley despite the warning it still seems as the crop setting would be the easiest way to create a 'integer scale outer' so to speak. As now that I have it with pixel-perfect all I need to do is check the screen size and set to desired integer, which right now I'm only seeing that 1 and 2 will be needed

Setting the scale to integer/browser.DevicePixelRatio did restore pixel-perfect under crop setting.

Ashley despite the warning it still seems as the crop setting would be the easiest way to create a 'integer scale outer' so to speak. As now that I have it with pixel-perfect all I need to do is check the screen size and set to desired integer, which right now I'm only seeing that 1 and 2 will be needed

Is this the only way of up scaling the game and maintaining the sub pixel smoothing? Cause using a small division of HD and using integer scaling wrecks sub pixel smoothness (obviously) when all I really need is square pixels by using a scale value in magicam.