[Merged by Bors] - Optionally resize Window canvas element to fit parent element #4726

cart · 2022-05-11T22:52:31Z

Currently Bevy's web canvases are "fixed size". They are manually set to specific dimensions. This might be fine for some games and website layouts, but for sites with flexible layouts, or games that want to "fill" the browser window, Bevy doesn't provide the tools needed to make this easy out of the box.

There are third party plugins like bevy-web-resizer that listen for window resizes, take the new dimensions, and resize the winit window accordingly. However this only covers a subset of cases and this is common enough functionality that it should be baked into Bevy.

A significant motivating use case here is the Bevy WASM Examples page. This scales the canvas to fit smaller windows (such as mobile). But this approach both breaks winit's mouse events and removes pixel-perfect rendering (which means we might be rendering too many or too few pixels). bevyengine/bevy-website#371

In an ideal world, winit would support this behavior out of the box. But unfortunately that seems blocked for now: rust-windowing/winit#2074. And it builds on the ResizeObserver api, which isn't supported in all browsers yet (and is only supported in very new versions of the popular browsers).

While we wait for a complete winit solution, I've added a fit_canvas_to_parent option to WindowDescriptor / Window, which when enabled will listen for window resizes and resize the Bevy canvas/window to fit its parent element. This enables users to scale bevy canvases using arbitrary CSS, by "inheriting" their parents' size. Note that the wrapper element is required because winit overrides the canvas sizing with absolute values on each resize.

There is one limitation worth calling out here: while the majority of canvas resizes will be triggered by window resizes, modifying element layout at runtime (css animations, javascript-driven element changes, dev-tool-injected changes, etc) will not be detected here. I'm not aware of a good / efficient event-driven way to do this outside of the ResizeObserver api. In practice, window-resize-driven canvas resizing should cover the majority of use cases. Users that want to actively poll for element resizes can just do that (or we can build another feature and let people choose based on their specific needs).

I also took the chance to make a couple of minor tweaks:

Made the canvas window setting available on all platforms. Users shouldn't need to deal with cargo feature selection to support web scenarios. We can just ignore the value on non-web platforms. I added documentation that explains this.
Removed the redundant "initial create windows" handler. With the addition of the code in this pr, the code duplication was untenable.

This enables a number of patterns:

Easy "fullscreen window" mode for the default canvas

The "parent element" defaults to the <body> element.

app
  .insert_resource(WindowDescriptor {
    fit_canvas_to_parent: true,
    ..default()
  })

And CSS:

html, body {
    margin: 0;
    height: 100%;
}

Fit custom canvas to "wrapper" parent element

app
  .insert_resource(WindowDescriptor {
    fit_canvas_to_parent: true,
    canvas: Some("#bevy".to_string()),
    ..default()
  })

And the HTML:

<div style="width: 50%; height: 100%">
  <canvas id="bevy"></canvas>
</div>

IceSentry · 2022-05-11T23:31:58Z

The link to the examples page is broken, it points to https://github.com/bevyengine/bevy/pull/bevyengine.org/examples/

IceSentry

LGTM, there's a few unwrap that could probably be returned, but they would most likely just be unwrap at the call site so 🤷‍♂️ .

I really like that canvas is not behind a compile flag, it made it unnecessarily noisy.

crates/bevy_winit/src/web_resize.rs

jakobhellermann

I haven't tested the code but assuming it works the PR gets an "approve" from me 👍

infmagic2047 · 2022-05-13T09:58:10Z

This PR doesn't work for me with Firefox. Every time the window is resized, the canvas becomes 4 pixels taller, outgrowing the window (I added logging to web_resize.rs to verify this).

This is my index.html:

<!DOCTYPE html>
<html lang="en">
    <body style="margin: 0px; overflow: hidden;">
        <script type="module">
            import init from './mygame.js';
            init();
        </script>
    </body>
</html>

Reading the documentation, getBoundingClientRect() returns the size of a element's content. In this case the parent element of canvas (body) doesn't have a fixed size, so its size depends on the size of canvas, and we're essentially doing canvas.size = canvas.size + some_margin here, which certainly won't work.

cart · 2022-05-13T20:08:41Z

In this case the parent element of canvas (body) doesn't have a fixed size, so its size depends on the size of canvas, and we're essentially doing canvas.size = canvas.size + some_margin here, which certainly won't work.

Hmm worth calling out (this case definitely slipped by me), but I'm not sure theres a good way to work around "parent size relies on child size" problems. The point of the feature is to inherit the parent's size. If the parent size relies on the child's size, this is clearly a feedback loop. The "fix" is to set a specific size for the parent element (ex: set the body height to a percentage or fixed size, or create a new wrapper element / create your own canvas instead of the default) .

I think we should still move forward with this feature and just call out this case in the docs for fit_canvas_to_parent.

crates/bevy_window/src/window.rs

crates/bevy_winit/src/web_resize.rs

crates/bevy_winit/src/lib.rs

alice-i-cecile

Some nits, but I'm happy with it. In the future, do try to use the PR template: I want to get automatic parsing set up based on those headings to make the release note process less painful.

crates/bevy_winit/src/lib.rs

crates/bevy_window/src/window.rs

FraserLee · 2022-05-17T21:40:37Z

Since the "wrapper" example in the PR selects the canvas by an ID, you might want to edit

canvas: Some("bevy".to_string()),

to instead be "#bevy". As is, the current example won't find the div.

cheers

Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>

crates/bevy_window/src/window.rs

cart · 2022-05-20T23:13:33Z

bors r+

Currently Bevy's web canvases are "fixed size". They are manually set to specific dimensions. This might be fine for some games and website layouts, but for sites with flexible layouts, or games that want to "fill" the browser window, Bevy doesn't provide the tools needed to make this easy out of the box. There are third party plugins like [bevy-web-resizer](https://github.com/frewsxcv/bevy-web-resizer/) that listen for window resizes, take the new dimensions, and resize the winit window accordingly. However this only covers a subset of cases and this is common enough functionality that it should be baked into Bevy. A significant motivating use case here is the [Bevy WASM Examples page](https://bevyengine.org/examples/). This scales the canvas to fit smaller windows (such as mobile). But this approach both breaks winit's mouse events and removes pixel-perfect rendering (which means we might be rendering too many or too few pixels). bevyengine/bevy-website#371 In an ideal world, winit would support this behavior out of the box. But unfortunately that seems blocked for now: rust-windowing/winit#2074. And it builds on the ResizeObserver api, which isn't supported in all browsers yet (and is only supported in very new versions of the popular browsers). While we wait for a complete winit solution, I've added a `fit_canvas_to_parent` option to WindowDescriptor / Window, which when enabled will listen for window resizes and resize the Bevy canvas/window to fit its parent element. This enables users to scale bevy canvases using arbitrary CSS, by "inheriting" their parents' size. Note that the wrapper element _is_ required because winit overrides the canvas sizing with absolute values on each resize. There is one limitation worth calling out here: while the majority of canvas resizes will be triggered by window resizes, modifying element layout at runtime (css animations, javascript-driven element changes, dev-tool-injected changes, etc) will not be detected here. I'm not aware of a good / efficient event-driven way to do this outside of the ResizeObserver api. In practice, window-resize-driven canvas resizing should cover the majority of use cases. Users that want to actively poll for element resizes can just do that (or we can build another feature and let people choose based on their specific needs). I also took the chance to make a couple of minor tweaks: * Made the `canvas` window setting available on all platforms. Users shouldn't need to deal with cargo feature selection to support web scenarios. We can just ignore the value on non-web platforms. I added documentation that explains this. * Removed the redundant "initial create windows" handler. With the addition of the code in this pr, the code duplication was untenable. This enables a number of patterns: ## Easy "fullscreen window" mode for the default canvas The "parent element" defaults to the `<body>` element. ```rust app .insert_resource(WindowDescriptor { fit_canvas_to_parent: true, ..default() }) ``` And CSS: ```css html, body { margin: 0; height: 100%; } ``` ## Fit custom canvas to "wrapper" parent element ```rust app .insert_resource(WindowDescriptor { fit_canvas_to_parent: true, canvas: Some("#bevy".to_string()), ..default() }) ``` And the HTML: ```html <div style="width: 50%; height: 100%"> <canvas id="bevy"></canvas> </div> ```

bors · 2022-05-20T23:39:42Z

Pull request successfully merged into main.

Build succeeded:

…gine#4726) Currently Bevy's web canvases are "fixed size". They are manually set to specific dimensions. This might be fine for some games and website layouts, but for sites with flexible layouts, or games that want to "fill" the browser window, Bevy doesn't provide the tools needed to make this easy out of the box. There are third party plugins like [bevy-web-resizer](https://github.com/frewsxcv/bevy-web-resizer/) that listen for window resizes, take the new dimensions, and resize the winit window accordingly. However this only covers a subset of cases and this is common enough functionality that it should be baked into Bevy. A significant motivating use case here is the [Bevy WASM Examples page](https://bevyengine.org/examples/). This scales the canvas to fit smaller windows (such as mobile). But this approach both breaks winit's mouse events and removes pixel-perfect rendering (which means we might be rendering too many or too few pixels). bevyengine/bevy-website#371 In an ideal world, winit would support this behavior out of the box. But unfortunately that seems blocked for now: rust-windowing/winit#2074. And it builds on the ResizeObserver api, which isn't supported in all browsers yet (and is only supported in very new versions of the popular browsers). While we wait for a complete winit solution, I've added a `fit_canvas_to_parent` option to WindowDescriptor / Window, which when enabled will listen for window resizes and resize the Bevy canvas/window to fit its parent element. This enables users to scale bevy canvases using arbitrary CSS, by "inheriting" their parents' size. Note that the wrapper element _is_ required because winit overrides the canvas sizing with absolute values on each resize. There is one limitation worth calling out here: while the majority of canvas resizes will be triggered by window resizes, modifying element layout at runtime (css animations, javascript-driven element changes, dev-tool-injected changes, etc) will not be detected here. I'm not aware of a good / efficient event-driven way to do this outside of the ResizeObserver api. In practice, window-resize-driven canvas resizing should cover the majority of use cases. Users that want to actively poll for element resizes can just do that (or we can build another feature and let people choose based on their specific needs). I also took the chance to make a couple of minor tweaks: * Made the `canvas` window setting available on all platforms. Users shouldn't need to deal with cargo feature selection to support web scenarios. We can just ignore the value on non-web platforms. I added documentation that explains this. * Removed the redundant "initial create windows" handler. With the addition of the code in this pr, the code duplication was untenable. This enables a number of patterns: ## Easy "fullscreen window" mode for the default canvas The "parent element" defaults to the `<body>` element. ```rust app .insert_resource(WindowDescriptor { fit_canvas_to_parent: true, ..default() }) ``` And CSS: ```css html, body { margin: 0; height: 100%; } ``` ## Fit custom canvas to "wrapper" parent element ```rust app .insert_resource(WindowDescriptor { fit_canvas_to_parent: true, canvas: Some("#bevy".to_string()), ..default() }) ``` And the HTML: ```html <div style="width: 50%; height: 100%"> <canvas id="bevy"></canvas> </div> ```

Optionally resize window canvas element to fit parent element

550bba3

cart added C-Enhancement A new feature O-Web Specific to web (WASM) builds labels May 11, 2022

cart changed the title ~~Optionally resize window canvas element to fit parent element~~ Optionally resize Window canvas element to fit parent element May 11, 2022

IceSentry approved these changes May 11, 2022

View reviewed changes

jakobhellermann suggested changes May 12, 2022

View reviewed changes

crates/bevy_winit/src/web_resize.rs Outdated Show resolved Hide resolved

Select any canvas with data-raw-handle attribute

4c17893

jakobhellermann approved these changes May 12, 2022

View reviewed changes

This was referenced May 15, 2022

document canvas field on window in wasm #4683

Closed

[Merged by Bors] - Add documentation to the WindowDescriptor struct. #4764

Closed

alice-i-cecile reviewed May 16, 2022

View reviewed changes

crates/bevy_window/src/window.rs Outdated Show resolved Hide resolved

alice-i-cecile reviewed May 16, 2022

View reviewed changes

crates/bevy_window/src/window.rs Outdated Show resolved Hide resolved

alice-i-cecile reviewed May 16, 2022

View reviewed changes

crates/bevy_window/src/window.rs Outdated Show resolved Hide resolved

alice-i-cecile reviewed May 16, 2022

View reviewed changes

crates/bevy_winit/src/web_resize.rs Outdated Show resolved Hide resolved

alice-i-cecile reviewed May 16, 2022

View reviewed changes

crates/bevy_winit/src/lib.rs Outdated Show resolved Hide resolved

alice-i-cecile approved these changes May 16, 2022

View reviewed changes

alice-i-cecile added the S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it label May 16, 2022

DJMcNab reviewed May 16, 2022

View reviewed changes

crates/bevy_winit/src/lib.rs Show resolved Hide resolved

sixfold-origami reviewed May 16, 2022

View reviewed changes

crates/bevy_window/src/window.rs Outdated Show resolved Hide resolved

mockersf approved these changes May 17, 2022

View reviewed changes

cart and others added 6 commits May 20, 2022 15:26

Update crates/bevy_window/src/window.rs

1ccae7e

Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>

Update crates/bevy_window/src/window.rs

2134a55

Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>

Update crates/bevy_window/src/window.rs

2e1dbf6

Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>

Add selector doc link

62d8511

remove braces

6425b71

pub(crate)

0f982ff

cart added 3 commits May 20, 2022 15:40

add window init comment

813ca0b

warn about size feedback loops

ec89303

link format / update doc

bca8826

mockersf reviewed May 20, 2022

View reviewed changes

crates/bevy_window/src/window.rs Outdated Show resolved Hide resolved

bors bot changed the title ~~Optionally resize Window canvas element to fit parent element~~ [Merged by Bors] - Optionally resize Window canvas element to fit parent element May 20, 2022

bors bot closed this May 20, 2022

micahscopes mentioned this pull request May 29, 2022

Depth texture overflows device limits #4869

Open

hymm mentioned this pull request Jun 8, 2022

Button web example on bevyengine.org clickable area is wrong (Regression?) #4963

Closed

mockersf mentioned this pull request Jun 8, 2022

Canvas scaling on the example pages breaks mouse click events bevyengine/bevy-website#371

Open

cart mentioned this pull request Aug 7, 2022

Example canvas now grows on each resize bevyengine/bevy-website#432

Closed

rparrett mentioned this pull request Oct 3, 2022

Implemented support for creating a render surface from a canvas or offscreencanvas #6147

Draft

claudijo mentioned this pull request Oct 16, 2023

Update html template css to better handle full screen canvas window bevyengine/bevy_github_ci_template#44

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Merged by Bors] - Optionally resize Window canvas element to fit parent element #4726

[Merged by Bors] - Optionally resize Window canvas element to fit parent element #4726

cart commented May 11, 2022 •

edited

Loading

IceSentry commented May 11, 2022 •

edited

Loading

IceSentry left a comment •

edited

Loading

jakobhellermann left a comment

infmagic2047 commented May 13, 2022

cart commented May 13, 2022

alice-i-cecile left a comment

FraserLee commented May 17, 2022

cart commented May 20, 2022

bors bot commented May 20, 2022

[Merged by Bors] - Optionally resize Window canvas element to fit parent element #4726

[Merged by Bors] - Optionally resize Window canvas element to fit parent element #4726

Conversation

cart commented May 11, 2022 • edited Loading

Easy "fullscreen window" mode for the default canvas

Fit custom canvas to "wrapper" parent element

IceSentry commented May 11, 2022 • edited Loading

IceSentry left a comment • edited Loading

Choose a reason for hiding this comment

jakobhellermann left a comment

Choose a reason for hiding this comment

infmagic2047 commented May 13, 2022

cart commented May 13, 2022

alice-i-cecile left a comment

Choose a reason for hiding this comment

FraserLee commented May 17, 2022

cart commented May 20, 2022

bors bot commented May 20, 2022

cart commented May 11, 2022 •

edited

Loading

IceSentry commented May 11, 2022 •

edited

Loading

IceSentry left a comment •

edited

Loading