-
Notifications
You must be signed in to change notification settings - Fork 47
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.
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
Web exports guide #15
Merged
Merged
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,162 @@ | ||
<!-- | ||
~ This Source Code Form is subject to the terms of the Mozilla Public | ||
~ License, v. 2.0. If a copy of the MPL was not distributed with this | ||
~ file, You can obtain one at https://mozilla.org/MPL/2.0/. | ||
--> | ||
|
||
# Export to Web | ||
|
||
Web builds are a fair bit more difficult to get started with compared to native builds. | ||
This will be a complete guide on how to get things compiled. | ||
However, setting up a web server to host and share your game is considered out of scope of this guide, and is best explained elsewhere. | ||
|
||
```admonish warning | ||
Web support with gdext is experimental and should be understood as such before proceeding. | ||
``` | ||
|
||
|
||
## Installation | ||
|
||
Install a nightly build of `rustc`, the `wasm32-unknown-emscripten` target for `rustc`, and `rust-src`. | ||
The reason why nightly `rustc` is required is the unstable flag to build `std` ([`-Zbuild-std`][flag-build-std]). | ||
Assuming that Rust was installed with `rustup`, this is quite simple. | ||
|
||
|
||
```sh | ||
rustup toolchain install nightly | ||
rustup component add rust-src --toolchain nightly | ||
rustup target add wasm32-unknown-emscripten --toolchain nightly | ||
``` | ||
|
||
Next, install Emscripten. The simplest way to achieve this is to install [`emsdk` from the git repo][emsdk-git]. | ||
We recommended version 3.1.39 for now.[^1] | ||
|
||
```sh | ||
git clone https://github.com/emscripten-core/emsdk.git | ||
cd emsdk | ||
./emsdk install 3.1.39 | ||
./emsdk activate 3.1.39 | ||
source ./emsdk.sh (or ./emsdk.bat on windows) | ||
``` | ||
|
||
It would also be **highly** recommended to follow the instructions in the terminal to add `emcc`[^2] to your `PATH`. | ||
If not, it is necessary to manually `source` the `emsdk.sh` file in every new terminal prior to compilation. | ||
This is platform-specific. | ||
|
||
[flag-build-std]: https://doc.rust-lang.org/cargo/reference/unstable.html#list-of-unstable-features | ||
[emsdk-git]: https://github.com/emscripten-core/emsdk#readme | ||
|
||
|
||
## Project Configuration | ||
|
||
Enable the [`experimental-wasm`][api-cargo-features] feature on gdext in the `Cargo.toml` file. | ||
It is also recommended to enable the [`lazy-function-tables`][api-cargo-features] feature to avoid long compile times with release builds | ||
(this might be a bug and not necessary in the future). Edit the line to something like the following: | ||
|
||
```toml | ||
[dependencies.godot] | ||
git = "https://github.com/godot-rust/gdext" | ||
branch = "master" | ||
features = ["experimental-wasm", "lazy-function-tables"] | ||
``` | ||
|
||
If you do not already have a `.cargo/config.toml` file, do the following: | ||
|
||
- Create a `.cargo` directory at the same level as your `Cargo.toml`. | ||
- Inside that directory, create a `config.toml` file. | ||
|
||
This file needs to contain the following: | ||
|
||
```toml | ||
[target.wasm32-unknown-emscripten] | ||
rustflags = [ | ||
"-C", "link-args=-sSIDE_MODULE=2", | ||
"-C", "link-args=-pthread", # was -sUSE_PTHREADS=1 in earlier emscripten versions | ||
"-C", "target-feature=+atomics,+bulk-memory,+mutable-globals", | ||
"-Zlink-native-libraries=no" | ||
] | ||
``` | ||
|
||
Edit the project's `.gdextension` file to include support for web exports. | ||
This file will probably be at `godot/{YourCrate}.gdextension`. | ||
The format will be similar to the following: | ||
|
||
```ini | ||
[libraries] | ||
... | ||
web.debug.wasm32 = "res://../rust/target/wasm32-unknown-emscripten/debug/{YourCrate}.wasm" | ||
web.release.wasm32 = "res://../rust/target/wasm32-unknown-emscripten/release/{YourCrate}.wasm" | ||
``` | ||
|
||
[api-cargo-features]: https://godot-rust.github.io/docs/gdext/master/godot/#cargo-features | ||
|
||
|
||
## Compile the Project | ||
|
||
Verify `emcc` is in the `PATH`. This can be as simple as doing the following: | ||
|
||
```sh | ||
emcc --version | ||
``` | ||
|
||
Compile the code. | ||
It is necessary to both use the nightly compiler and specify to build std[^3], along with specifying the Emscripten target. | ||
|
||
```sh | ||
cargo +nightly build -Zbuild-std --target wasm32-unknown-emscripten | ||
``` | ||
|
||
|
||
## Godot editor setup | ||
|
||
Add a web export in the Godot Editor. In the top menu bar, go to `Project > Export...` and configure it there. | ||
Make sure to turn on the `Extensions Support` checkbox. | ||
|
||
![Example of export screen](images/web-export.png) | ||
|
||
If instead, the bottom on the export popup contains this error in red: | ||
|
||
> No export template found at expected path: | ||
|
||
Then click on `Manage Export Templates` next to the error message, and then on the next screen select `Download and Install`. | ||
See [Godot tutorial][godot-export-templates] for further information. | ||
|
||
|
||
### Running the webserver | ||
|
||
Back at the main editor screen, there is an option to run the web debug build (_not_ a release build) locally | ||
without needing to run an export or set up a web server. | ||
At the top right, choose `Remote Debug > Run in Browser` and it will automatically open up a web browser. | ||
|
||
![Location of built-in web server](images/web-browser-run.png) | ||
|
||
|
||
```admonish warning title="Known Caveats" | ||
- Godot 4.1.3+ or 4.2+ is necessary. | ||
- Only Chromium-based browsers (Chrome or Edge) appear to be supported by GDExtension at the moment; Firefox and Safari don't work yet. | ||
Info about browser support can be found [here](https://github.com/godotengine/godot-cpp/pull/1247#issuecomment-1742197814). | ||
``` | ||
|
||
If your default browser is not Chromium-based, you will need to copy the URL (which is usually `http://localhost:8060/tmp_js_export.html`) | ||
and open it in a supported browser such as Google Chrome or Microsoft Edge. | ||
|
||
[godot-export-templates]: https://docs.godotengine.org/en/stable/tutorials/export/exporting_projects.html#export-menu | ||
|
||
|
||
## Debugging | ||
|
||
Currently, the only option for WASM debugging is | ||
[this extension](https://chromewebstore.google.com/detail/cc++-devtools-support-dwa/pdcpmagijalfljmkmjngeonclgbbannb?pli=1) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Could you add the name of the extension in the link text, and use the |
||
for Chrome. It adds support for breakpoints and a memory viewer into the F12 menu. | ||
|
||
|
||
<br> | ||
|
||
--- | ||
|
||
[^1]: Note: Due to a bug with `emscripten`, the maximum version of `emcc`[^2] that can one compile `Godot` with is `3.1.39`. gdext itself should be able to support the latest version of `emcc`, however, it may be a safer bet to stick to version `3.1.39`. | ||
|
||
[^2]: `emcc` is the name of Emscripten's compiler. | ||
|
||
[^3]: The primary reason for this is it is necessary to compile with `-sSHARED_MEMORY` enabled. The shipped `std` does not, so building `std` is a requirement. Related info on about WASM support can be found [here](https://github.com/rust-lang/rust/issues/77839). | ||
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we mention to download export templates if they are not yet configured?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think you get a prompt if it's missing to download it, and should be downloaded at the same time you'd download templates for any other export. I'd have to intentionally trigger that and see about that.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
From the last time I tried it in my VM, I believe the Export window displays some red text at the bottom suggesting you need Export Templates, but I think you still need to click some buttons to prompt the download. Could be useful to list the steps needed, but very briefly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see. It's fine to not explicitly mention it then.