Investigate Unintended Screenshot Antialiasing

[eonarheim]

Steps to Reproduce

See discussion thread: #2415

Excalibur screen shots seem to apply an AA effect that wasn't present on the game screen at the time the screenshot is taken.

Before screenshot, crisp pixels

After screenshot, some unexpected AA effect.

Seems to only affect the moving Actor in this example?

Expected Result

The screenshot should look exactly like the frame as it was displayed, including any relevant AA settings.

Actual Result

Some unintended AA is being applied.

Environment

• browsers and versions: Chrome 103
• operating system: Win
• Excalibur versions: 0.27.0

Current Workaround

None

[mattjennings]

Here's a repro: https://codesandbox.io/s/excalibur-antialias-screenshot-zbw94v

At the bottom you'll see new ScreenShotter({ hires: false }) - changing that to true will fix the antialiasing. I think this is probably not a bug though. It only happens if the character is on a half-pixel. If engine.screenshot(false) produces a screenshot at game resolution, then it makes sense that it gets antialiased.

The workaround is to take the screenshot at hires so it matches the canvas resolution, but you just have to do a bit of extra work when drawing to scale it back down according to window.devicePixelRatio (as shown in the repro).

Anyway, all that to say I don't think there's anything to do here, I just hit an edge case with an acceptable workaround.

[eonarheim]

@mattjennings I've found that matching the internal screenshot canvas to the current screen smoothing seems to produce more desirable results out of the box (#2428). I think this makes the workaround unnecessary?

Let me know what you think! I'm still poking around, it is also resisting being tested for some reason

[mattjennings]

@eonarheim oh! very interesting. I just gave it a try and I'm not seeing any antialiasing like before, so I would say this is a good fix!

[eonarheim]

Thanks for checking it out! I'll have some time today to hopefully get it merged 👍