Skip to content

Commit 36db05c

Browse files
CalinouCalinou
committed
Deploy exported HTML5 demos to GitHub Pages
This makes it possible for users to test Godot's features without having to download anything.
1 parent 99ad90b commit 36db05c

File tree

6 files changed

+249
-0
lines changed

6 files changed

+249
-0
lines changed

‎.github/dist/.nojekyll‎

Whitespace-only changes.

‎.github/dist/export_presets.cfg‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
[preset.0]
2+
3+
name="HTML5"
4+
platform="HTML5"
5+
runnable=true
6+
custom_features=""
7+
export_filter="all_resources"
8+
include_filter=""
9+
exclude_filter=""
10+
export_path=""
11+
script_export_mode=1
12+
script_encryption_key=""
13+
14+
[preset.0.options]
15+
16+
custom_template/debug=""
17+
custom_template/release=""
18+
variant/export_type=0
19+
vram_texture_compression/for_desktop=true
20+
vram_texture_compression/for_mobile=false
21+
html/custom_html_shell=""
22+
html/head_include=""
23+
html/full_window_size=true

‎.github/dist/footer.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!-- The list of demos will be inserted above by the CI process. -->
2+
</ul>
3+
<h2>Unavailable demos</h2>
4+
<ul>
5+
<li><code>2d/hdr/</code>: Not supported on HTML5 yet.
6+
<li><code>3d/voxel/</code>: Not supported on HTML5 yet.
7+
<li><code>audio/device_changer/</code>: Not supported on HTML5 due to browser limitations.
8+
<li><code>loading/background_load/</code>: Not supported on HTML5 yet.
9+
<li><code>loading/multiple_threads_loading/</code>: Not supported on HTML5 yet.
10+
<li><code>loading/threads/</code>: Not supported on HTML5 yet.
11+
<li><code>misc/matrix_transform/</code>: Results are only visible in the editor.
12+
<li><code>mobile/android_iap/</code>: Only relevant on native Android.
13+
<li><code>mobile/sensors/</code>: Not supported on HTML5 yet.
14+
<li><code>mono/*/</code>: Not available yet (requires Mono-enabled HTML5 build).</li>
15+
<li><code>networking/*/</code>: Doesn't make sense to be hosted on a static host, as the server must be hosted on the same origin due to the browser's same-origin policy.</li>
16+
<li><code>plugins/*/</code>: Only effective within the editor.</li>
17+
</ul>
18+
</body>
19+
</html>

‎.github/dist/header.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Godot demos exported to HTML5</title>
7+
<style>
8+
:root {
9+
--background-color: #fff;
10+
--text-color: #222;
11+
--link-color: hsl(220, 100%, 45%);
12+
--link-underline-color: hsla(220, 100%, 45%, 0.3);
13+
}
14+
15+
@media (prefers-color-scheme: dark) {
16+
:root {
17+
--background-color: #222;
18+
--text-color: #eee;
19+
--link-color: hsl(200, 100%, 70%);
20+
--link-underline-color: hsla(200, 100%, 70%, 0.3);
21+
}
22+
}
23+
24+
*:focus {
25+
/* More visible outline for better keyboard navigation. */
26+
outline: 0.125rem solid hsl(220, 100%, 62.5%);
27+
/* Make the outline always appear above other elements. */
28+
position: relative;
29+
}
30+
31+
html {
32+
background-color: var(--background-color);
33+
color: var(--text-color);
34+
}
35+
36+
body {
37+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
38+
max-width: 50rem;
39+
margin: 0 auto;
40+
padding: 0.75rem;
41+
line-height: 1.618rem;
42+
}
43+
44+
h2 {
45+
margin-top: 2.5rem;
46+
}
47+
48+
a {
49+
color: var(--link-color);
50+
text-decoration-color: var(--link-underline-color);
51+
text-decoration-thickness: 0.125rem;
52+
}
53+
54+
a:hover {
55+
filter: brightness(117.5%);
56+
}
57+
58+
a:active {
59+
filter: brightness(82.5%);
60+
}
61+
62+
ul {
63+
padding-left: 0;
64+
}
65+
66+
li {
67+
display: block;
68+
}
69+
70+
li a {
71+
display: inline-block;
72+
width: 100%;
73+
height: 4rem;
74+
margin-left: 0.5rem;
75+
}
76+
77+
li a:hover {
78+
background-color: hsla(0, 0%, 50%, 0.1);
79+
}
80+
</style>
81+
</head>
82+
<body>
83+
<h1>Godot demo projects</h1>
84+
<p>
85+
This page lists
86+
<a href="https://github.com/godotengine/godot-demo-projects">official Godot demo projects</a>
87+
exported to HTML5 for testing purposes. These projects are deployed automatically
88+
on every commit on the <code>master</code> branch of the repository.
89+
</p>
90+
<p>
91+
The HTML5 exports on this page are provided for demonstration purposes only.
92+
Some of these demos may not function or render correctly on HTML5,
93+
especially on mobile devices.
94+
For best performance, it's recommended to
95+
<a href="https://godotengine.org/download">download</a> a native editor
96+
and run the demo project by importing its files in the project manager.
97+
</p>
98+
<p>
99+
See the
100+
<a href="https://docs.godotengine.org/en/stable/getting_started/workflow/export/exporting_for_web.html">Exporting for the Web</a>
101+
documentation for information on exporting your own projects to HTML5.
102+
</p>
103+
104+
<h2>List of demos</h2>
105+
<ul>
106+
<!-- The list of demos will be inserted below by the CI process. -->

‎.github/workflows/export_html5.yml‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
name: Export projects to HTML5 and deploy to GitHub Pages
2+
on:
3+
push:
4+
branches:
5+
- master
6+
7+
env:
8+
GODOT_VERSION: 3.2.3
9+
10+
jobs:
11+
export-html5:
12+
name: Export projects to HTML5 and deploy to GitHub Pages
13+
runs-on: ubuntu-20.04
14+
container:
15+
image: barichello/godot-ci:3.2.3
16+
steps:
17+
- name: Checkout
18+
uses: actions/[email protected]
19+
20+
- name: Setup
21+
run: |
22+
mkdir -p ~/.local/share/godot/templates/
23+
mv /root/.local/share/godot/templates/$GODOT_VERSION.stable ~/.local/share/godot/templates/$GODOT_VERSION.stable
24+
25+
- name: Export projects to HTML5
26+
run: |
27+
apt-get update -qq && apt-get install -qqq imagemagick
28+
29+
# Don't export Mono demos (not supported yet), demos that can't be run in HTML5
30+
# since they're platform-specific or demos that are currently broken in HTML5.
31+
# Remember to update `.github/dist/footer.html` when updating the list of excluded demos.
32+
rm -rf \
33+
2d/hdr/ \
34+
3d/voxel/ \
35+
audio/device_changer/ \
36+
loading/background_load/ \
37+
loading/multiple_threads_loading/ \
38+
loading/threads/ \
39+
misc/matrix_transform/ \
40+
mobile/android_iap/ \
41+
mobile/sensors/ \
42+
mono/ \
43+
networking/ \
44+
plugins/
45+
46+
for panorama in 3d/material_testers/backgrounds/*.hdr; do
47+
# Decrease the resolution to get below the 20 MB per-file limit.
48+
# Otherwise, the website can't be deployed as files larger than 20 MB
49+
# can't be pushed to GitHub anymore.
50+
mogrify -resize 75% "$panorama"
51+
done
52+
53+
BASEDIR="$PWD"
54+
55+
# Use absolute paths so that we can `cd` without having to go back to the parent directory manually.
56+
for demo in */*/; do
57+
echo ""
58+
echo "================================"
59+
echo "Exporting demo $demo..."
60+
echo "================================"
61+
62+
mkdir -p "$BASEDIR/.github/dist/$demo"
63+
cd "$BASEDIR/$demo"
64+
65+
# Copy an export template preset file configured for HTML5 exporting.
66+
# This way, we don't have to commit `export_presets.cfg` for each project.
67+
cp "$BASEDIR/.github/dist/export_presets.cfg" .
68+
godot --export "HTML5" "$BASEDIR/.github/dist/$demo/index.html"
69+
70+
# Replace the WASM file with a symbolic link to avoid duplicating files in the pushed branch.
71+
# (WASM files are identical across projects, but not PCK or HTML files.)
72+
mv -f "$BASEDIR/.github/dist/$demo/index.wasm" "$BASEDIR/.github/dist/index.wasm"
73+
# The symlink must be relative as it needs to point to a file within the pushed repository.
74+
ln -s "../../index.wasm" "$BASEDIR/.github/dist/$demo/index.wasm"
75+
76+
# Append the demo to the list of demos for the website.
77+
PROJECT_NAME=$(cat project.godot | grep "config/name" | cut -d '"' -f 2 | tr -d "\n")
78+
echo "<li><a href='$demo'><img width="64" height="64" src="$demo/favicon.png" alt=""> $PROJECT_NAME</a></li>" >> "$BASEDIR/.github/dist/demos.html"
79+
done
80+
81+
cat "$BASEDIR/.github/dist/header.html" "$BASEDIR/.github/dist/demos.html" "$BASEDIR/.github/dist/footer.html" > "$BASEDIR/.github/dist/index.html"
82+
83+
# Clean up files that don't need to be deployed.
84+
rm -f "$BASEDIR/.github/dist/header.html" "$BASEDIR/.github/dist/demos.html" "$BASEDIR/.github/dist/footer.html" "$BASEDIR/.github/dist/export_presets.cfg"
85+
86+
# Installing rsync is needed in order to deploy to GitHub Pages. Without it, the build will fail.
87+
- name: Install rsync 📚
88+
run: |
89+
apt-get update -qq && apt-get install -qqq rsync
90+
- name: Deploy to GitHub Pages 🚀
91+
uses: JamesIves/github-pages-deploy-action@releases/v3
92+
with:
93+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
94+
# The branch the action should deploy to.
95+
BRANCH: gh-pages
96+
# The folder the action should deploy.
97+
FOLDER: .github/dist
98+
# Artifacts are large; don't keep the branch's history.
99+
SINGLE_COMMIT: true

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
.import/
66
export.cfg
77
export_presets.cfg
8+
# Dummy HTML5 export presets file for continuous integration
9+
!.github/dist/export_presets.cfg
810

911
# Imported translations (automatically generated from CSV files)
1012
*.translation

0 commit comments

Comments
 (0)