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

DisplayMode.FitScreen is just … weird #2076

Closed
0xEAB opened this issue Nov 1, 2021 · 3 comments · Fixed by #2093
Closed

DisplayMode.FitScreen is just … weird #2076

0xEAB opened this issue Nov 1, 2021 · 3 comments · Fixed by #2093

Comments

@0xEAB
Copy link

0xEAB commented Nov 1, 2021 •
edited
Loading

Steps to Reproduce

Been experimenting with your hello world thingy…
Wouldn’t see the paddle, other weird things going on.
Well, after getting more and more confused, I realized it’s just DisplayMode being horribly broken.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8"/>
    <title>…</title>
    <style>
        body {
            background: #000;
            color: #F8F9FA;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <script src="dist/bundle.js"></script>
</body>
</html>
import {Actor, CollisionType, Color, DisplayMode, Engine, Resolution, vec} from 'excalibur'

async function main() {
    const game = new Engine({
        viewport: {width: 1000, height: 1000,},
        resolution: {width: 1000, height: 1000,},
        displayMode: DisplayMode.FitScreen,
    });

    await game.start();

    const paddle = new Actor({
        x: 220,
        y: 220,
        width: 400,
        height: 400,
        color: Color.White,
    });

    console.log('Game:', game.drawWidth, '·', game.drawHeight);
    console.log('Canv:', game.canvasWidth, '·', game.canvasHeight);

    game.add(paddle);

}

main().then(() => {
    console.log('Promise from main()');
});

Expected Result

displayMode: DisplayMode.Fixed

Screenshot from 2021-11-01 02-53-22

Actual Result

Fullscreen window (F11)

Screenshot from 2021-11-01 02-47-51

Non fullscreen

Screenshot from 2021-11-01 02-48-00

Non fullscreen with console open

Screenshot from 2021-11-01 02-48-14

Variation I 
- viewport: {width: 1000, height: 1000,},
- resolution: {width: 1000, height: 1000,},
+ viewport: {width: 2000, height: 2000,},
+ resolution: {width: 2000, height: 2000,},

Screenshot from 2021-11-01 02-57-26

Variation II 
- viewport: {width: 1000, height: 1000,},
- resolution: {width: 1000, height: 1000,},
+ viewport: {width: 500, height: 500,},
+ resolution: {width: 500, height: 500,},
  • Screenshot from 2021-11-01 03-05-13
  • Screenshot from 2021-11-01 03-05-22
  • Screenshot from 2021-11-01 03-05-38
  • displayMode: DisplayMode.Fixed – as expected :) Screenshot from 2021-11-01 03-08-19

Environment

  • browsers and versions: Firefox (93.0)
  • operating system: Ubuntu 20.04 (Linux 5.4.0-89 x86_64 GNU/Linux)
  • Excalibur versions: 0.25.0
  • Screen resolution: 3440x1440

Maybe I got wrong, what DisplayMode.FitScreen is supposed to do. But its docs are rather cryptic (without any images!) and in my experiment it was just incomprehensible and weird.

Current Workaround

displayMode: DisplayMode.Fixed
@eonarheim
Copy link
Member

eonarheim commented Nov 2, 2021 •
edited
Loading

@0xEAB Thanks for the issue, we'll get on the docs with some images/examples...that definitely needs improvement.

FitScreen is intended to fit the game to the available screen real estate while preserving the defined pixel resolution (aspect ratio), it will change the viewport dynamically to make that happen.

Based on the screen shots you've provided I'm guessing the white box is not where you expect it to be on screen. Correct me if I'm wrong.

Running this locally it appears to be a bug (maybe 2) in excalibur:

  1. Camera initialization bug, be default excalibur tries to center the camera in the current space, it seems to be using the center of the viewpoint as world coordinates which is definitely not right. Which I think explains most of the issues you're seeing

    Forcibly setting the camera position to the center of the screen should correct it as a workaround for now.

    // after await game.start()
game.currentScene.camera.pos = game.screen.center;

  2. At extra high resolutions the canvas seems to be displaying incorrectly (setting 3000x3000 seemed to be the start of things going wrong for me). It's possible we are bumping up against gpu limits at that size with hidpi scaling (which doubles the internal resolution to 6000x6000) in webgl and it's manifesting in an odd way. I need to do a little more research on this.

    image

    Suppressing the hidpi scaling seems to correct it as a workaround, at high resolutions like that hidpi blurring will be less of an issue.

    const game = new ex.Engine({
    width: 3000,
    height: 3000,
    suppressHiDPIScaling: true,
    displayMode: ex.DisplayMode.FitScreen,
});

    image

eonarheim added a commit that referenced this issue Nov 2, 2021
@eonarheim
fix: [#2076] Defer initialization until after final resolution calcul…
684ebac 
…ated

TODO:
* [ ] WebGL will silently fail at high resolutions which is easy to get to with hidpi scaling
* [ ] Warn when l.drawingBufferHeight/l.drawingBufferWidth don't match height/width
* [ ] Fix tests
@eonarheim eonarheim mentioned this issue Nov 2, 2021
Merged
9 tasks
@eonarheim
Copy link
Member

@0xEAB We've updated the screen & viewport docs let me know if you have any additional feedback!

https://excaliburjs.com/docs/screens

eonarheim added a commit that referenced this issue Nov 6, 2021
@eonarheim
fix: [#2076] Defer initialization until after final resolution calcul…
e603adb 
…ated (#2093)

===:clipboard: PR Checklist :clipboard:===

- [x] :pushpin: issue exists in github for these changes
- [x] :microscope: existing tests still pass
- [x] :see_no_evil: code conforms to the [style guide](https://github.com/excaliburjs/Excalibur/blob/main/STYLEGUIDE.md)
- [x] 📐 new tests written and passing / old tests updated with new scenario(s)
- [x] 📄 changelog entry added (or not needed)

==================

TODO:
* [x] WebGL will silently fail at high resolutions which is easy to get to with hidpi scaling
* [x] Warn when l.drawingBufferHeight/l.drawingBufferWidth don't match height/width
* [x] Documentation improvement for original issue for different displaymodes
* [x] Fix tests

Closes #2076

## Changes:

- Deferred initialization of scene/camera until final resolution is calculated
@0xEAB
Copy link
Author

0xEAB commented Nov 7, 2021

Thank you for your explanations :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: [#2076] Defer initialization until after final resolution calculated excaliburjs/Excalibur
2 participants
@eonarheim @0xEAB