No description
Find a file
Carter Anderson fed93a0edc Optionally resize Window canvas element to fit parent element (#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).  https://github.com/bevyengine/bevy-website/issues/371

In an ideal world, winit would support this behavior out of the box. But unfortunately that seems blocked for now: https://github.com/rust-windowing/winit/pull/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>
```
2022-05-20 23:13:48 +00:00
.cargo Change path to zld on MacOS fast build example (#4778) 2022-05-17 16:00:17 +00:00
.github add timeout to miri job in CI (#4743) 2022-05-14 02:01:38 +00:00
assets Fixing confusing near and far fields in Camera (#4457) 2022-05-16 16:37:33 +00:00
benches bench: add bevy_reflect::{List, Map, Struct} benchmarks (#3690) 2022-05-17 04:16:53 +00:00
crates Optionally resize Window canvas element to fit parent element (#4726) 2022-05-20 23:13:48 +00:00
docs Add alsa-lib-devel to OpenSUSE dependencies (#4635) 2022-05-01 01:00:27 +00:00
errors ParamSet for conflicting SystemParam:s (#2765) 2022-03-29 23:39:38 +00:00
examples Migrate to encase from crevice (#4339) 2022-05-18 21:09:21 +00:00
src Add missing closing ticks for inline examples and some cleanup (#3573) 2022-01-07 09:25:12 +00:00
tests Allow closing windows at runtime (#3575) 2022-05-05 13:35:43 +00:00
tools Migrate to encase from crevice (#4339) 2022-05-18 21:09:21 +00:00
.gitattributes Enforce linux-style line endings for .rs and .toml (#3197) 2021-11-26 21:05:35 +00:00
.gitignore add .cargo/config.toml to .gitignore 2020-12-12 17:17:35 -08:00
Cargo.toml helper tool to build examples in wasm (#4776) 2022-05-17 19:04:08 +00:00
CHANGELOG.md Add changelog for 0.7 (#4480) 2022-04-15 17:19:39 +00:00
clippy.toml Enable the doc_markdown clippy lint (#3457) 2022-01-09 23:20:13 +00:00
CODE_OF_CONDUCT.md Update CODE_OF_CONDUCT.md 2020-08-19 20:25:58 +01:00
CONTRIBUTING.md Remove strong language from CONTRIBUTING.md (#4755) 2022-05-15 20:00:55 +00:00
CREDITS.md Add the license for the FiraMono font (#3589) 2022-05-06 19:29:43 +00:00
deny.toml Migrate to encase from crevice (#4339) 2022-05-18 21:09:21 +00:00
LICENSE Add the license for the FiraMono font (#3589) 2022-05-06 19:29:43 +00:00
README.md Make a note about the MSRV (#4274) 2022-03-21 16:20:34 +00:00
rustfmt.toml Cargo fmt with unstable features (#1903) 2021-04-21 23:19:34 +00:00

Bevy

Crates.io MIT/Apache 2.0 Crates.io Rust iOS cron CI Discord

What is Bevy?

Bevy is a refreshingly simple data-driven game engine built in Rust. It is free and open-source forever!

WARNING

Bevy is still in the very early stages of development. APIs can and will change (now is the time to make suggestions!). Important features are missing. Documentation is sparse. Please don't build any serious projects in Bevy unless you are prepared to be broken by API changes constantly.

MSRV: Bevy relies heavily on improvements in the Rust language and compiler. As a result, the Minimum Supported Rust Version (MSRV) is "the latest stable release" of Rust.

Design Goals

  • Capable: Offer a complete 2D and 3D feature set
  • Simple: Easy for newbies to pick up, but infinitely flexible for power users
  • Data Focused: Data-oriented architecture using the Entity Component System paradigm
  • Modular: Use only what you need. Replace what you don't like
  • Fast: App logic should run quickly, and when possible, in parallel
  • Productive: Changes should compile quickly ... waiting isn't fun

About

  • Features: A quick overview of Bevy's features.
  • News: A development blog that covers our progress, plans and shiny new features.

Docs

  • The Bevy Book: Bevy's official documentation. The best place to start learning Bevy.
  • Bevy Rust API Docs: Bevy's Rust API docs, which are automatically generated from the doc comments in this repo.
  • Official Examples: Bevy's dedicated, runnable examples, which are great for digging into specific concepts.
  • Community-Made Learning Resources: More tutorials, documentation, and examples made by the Bevy community.

Community

Before contributing or participating in discussions with the community, you should familiarize yourself with our Code of Conduct.

  • Discord: Bevy's official discord server.
  • Reddit: Bevy's official subreddit.
  • GitHub Discussions: The best place for questions about Bevy, answered right here!
  • Bevy Assets: A collection of awesome Bevy projects, tools, plugins and learning materials.

If you'd like to help build Bevy, check out the Contributor's Guide. For simple problems, feel free to open an issue or PR and tackle it yourself!

For more complex architecture decisions and experimental mad science, please open an RFC (Request For Comments) so we can brainstorm together effectively!

Getting Started

We recommend checking out The Bevy Book for a full tutorial.

Follow the Setup guide to ensure your development environment is set up correctly. Once set up, you can quickly try out the examples by cloning this repo and running the following commands:

# Switch to the correct version (latest release, default is main development branch)
git checkout latest
# Runs the "breakout" example
cargo run --example breakout

Fast Compiles

Bevy can be built just fine using default configuration on stable Rust. However for really fast iterative compiles, you should enable the "fast compiles" setup by following the instructions here.

Libraries Used

Bevy is only possible because of the hard work put into these foundational technologies:

  • wgpu: modern / low-level / cross-platform graphics library inspired by Vulkan
  • glam-rs: a simple and fast 3D math library for games and graphics
  • winit: cross-platform window creation and management in Rust
  • spirv-reflect: Reflection API in rust for SPIR-V shader byte code

Bevy Cargo Features

This list outlines the different cargo features supported by Bevy. These allow you to customize the Bevy feature set for your use-case.

Third Party Plugins

Plugins are very welcome to extend Bevy's features. Guidelines are available to help integration and usage.

Thanks and Alternatives

Additionally, we would like to thank the Amethyst, macroquad, coffee, ggez, Fyrox, and Piston projects for providing solid examples of game engine development in Rust. If you are looking for a Rust game engine, it is worth considering all of your options. Each engine has different design goals, and some will likely resonate with you more than others.

License

Bevy is free and open source! All code in this repository is dual-licensed under either:

at your option. This means you can select the license you prefer! This dual-licensing approach is the de-facto standard in the Rust ecosystem and there are very good reasons to include both.

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.