search

NiklasEi / bevy_game_template

Template for a Bevy game including CI/CD for web, Windows, Linux, macOS, iOS and Android
https://niklasei.github.io/bevy_game_template/
Creative Commons Zero v1.0 Universal
844 stars 89 forks source link

Centre Bevy window in HTML webpage #31

Closed FreddyWordingham closed 2 years ago

FreddyWordingham commented 2 years ago

Thanks for the fantastic template! In particular, the GitHub actions are great - I like how you can manually trigger the deployments with a workflow_dispatch trigger :)

This is a minor suggestion that should help developers customise the frontend webpage that the WASM window gets embedded within. Currently the Bevy app loads into a <canvas> (with no settable id) which is injected into the <body> - which means you can't place it before loading, and it has no identifier to help you find it afterwards.

This PR adds a script setup_display.js which waits for the Bevy <canvas> to load, and then moves it into a div with id="wasm-window", which means you can design the web page by styling the wasm-window element.

By default the template webpage's <div id="wasm-window"> is placed within a <div class="container"> which will centre the game window within the middle of the page:

Screenshot 2022-07-22 at 17 14 16

It should then be straightforward to further customise the index.html page.

NiklasEi commented 2 years ago

Nice idea, thank you. I think we can do this without javascript though. Bevy's WindowDescriptor resource has a canvas field for the web target. It gives you control over the position of the canvas element in your document.

FreddyWordingham commented 2 years ago

That is a more elegant solution :)

I can't seem to find anything in the Bevy WindowDescriptor docs and don't see a web/canvas feature flag,

Please could you point me in the right direction for more info on the WindowDescriptor.canvas web target settings?

NiklasEi commented 2 years ago

For version 0.7, you can find the field (without docs) here: window.rs. To set it, you will have to use the same #[cfg(target_arch = "wasm32")] attribute.

Some helpful documentation can be found on main, where the attribute will no longer be needed.

FreddyWordingham commented 2 years ago

Thanks very much @NiklasEi

NiklasEi commented 2 years ago

Are you planning on opening another PR for this or would you be OK with me implementing it and adding you as a co-author?