Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: engine.screenshot does not work in webgl context. #2203

Closed
vbalien opened this issue Jan 28, 2022 · 1 comment · Fixed by #2208
Closed

Bug: engine.screenshot does not work in webgl context. #2203

vbalien opened this issue Jan 28, 2022 · 1 comment · Fixed by #2208
Assignees
@eonarheim
Labels
bug This issue describes undesirable, incorrect, or unexpected behavior

Comments

@vbalien
Copy link

vbalien commented Jan 28, 2022 •
edited
Loading

Steps to Reproduce

To take a screenshot, I did the following:

this.engine.screenshot()

Expected Result

A screenshot should be returned.

Actual Result

Returns an blank image.

Environment

  • browsers and versions: Chrome (97.0.4692.71), Firefox (96.0.2)
  • operating system: Linux 5.16
  • Excalibur versions: 0.25.2
  • (anything else that may be relevant)

Current Workaround

Use useCanvasGraphicsContext.
@vbalien vbalien changed the title engine.screenShot does not work in webgl context. Bug: engine.screenShot does not work in webgl context. Jan 28, 2022
@vbalien vbalien changed the title Bug: engine.screenShot does not work in webgl context. Bug: engine.screenshot does not work in webgl context. Jan 28, 2022
@eonarheim eonarheim added the bug This issue describes undesirable, incorrect, or unexpected behavior label Jan 28, 2022
@eonarheim eonarheim self-assigned this Jan 28, 2022
@eonarheim
Copy link
Member

@vbalien Thanks for the issue, definitely a bug 👍

eonarheim added a commit that referenced this issue Jan 28, 2022
@eonarheim
fix: [#2203] Screenshot does not work in WebGL implementation
dedec55
@eonarheim eonarheim mentioned this issue Jan 28, 2022
Merged
5 tasks
eonarheim added a commit that referenced this issue Jan 28, 2022
@eonarheim
fix: [#2203][#1528] Screenshots work in webgl and return the right Hi…
e83027c 
…DPI size (#2208)

Closes #2203
Closes #1528

This PR fixes an issue where screenshots did not work in the WebGL implementation, this is because internally the draw buffer is cleared when compositing is finished. One possible solution was to add `preserveDrawingBuffer: true` to the webgl context but this forces the browser to copy instead of swap internally which can negatively impact performance on certain platforms.

In order to grab the draw buffer while intact before the browser clears it, you must `await screenshot()` which will grab the next frame as an image.

In addition the default behavior is to have the screenshot pixel perfect match the display canvas resolution, optionally you can request the full scaled image on a HiDPI display with `screenshot(true)`

## Changes:

- Smallish breaking change to `screenshot()` making it async
- Default behavior is now to match the image screen shot to the game resolution in the hidpi case by default
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@eonarheim eonarheim

Labels
bug This issue describes undesirable, incorrect, or unexpected behavior
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: [#2203][#1528] Screenshots work in webgl and return the right HiDPI size excaliburjs/Excalibur
2 participants
@eonarheim @vbalien