Home Explore Help
Sign In
Godot
/
godot-demo-projects
mirror of https://github.com/godotengine/godot-demo-projects.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Merge pull request #582 from Calinou/deploy-html5-demos

Deploy exported HTML5 demos to GitHub Pages
Aaron Franke 4 years ago
parent
fc032119ca 36db05c3b9
commit
c0d9e483c2
6 changed files with 249 additions and 0 deletions
Unified View Show Diff Stats
  1. 0 0
      .github/dist/.nojekyll
  2. 23 0
      .github/dist/export_presets.cfg
  3. 19 0
      .github/dist/footer.html
  4. 106 0
      .github/dist/header.html
  5. 99 0
      .github/workflows/export_html5.yml
  6. 2 0
      .gitignore

+ 0 - 0
.github/dist/.nojekyll
View File


+ 23 - 0
.github/dist/export_presets.cfg
View File 

@@ -0,0 +1,23 @@
 
+[preset.0]
 
+
 
+name="HTML5"
 
+platform="HTML5"
 
+runnable=true
 
+custom_features=""
 
+export_filter="all_resources"
 
+include_filter=""
 
+exclude_filter=""
 
+export_path=""
 
+script_export_mode=1
 
+script_encryption_key=""
 
+
 
+[preset.0.options]
 
+
 
+custom_template/debug=""
 
+custom_template/release=""
 
+variant/export_type=0
 
+vram_texture_compression/for_desktop=true
 
+vram_texture_compression/for_mobile=false
 
+html/custom_html_shell=""
 
+html/head_include=""
 
+html/full_window_size=true

+ 19 - 0
.github/dist/footer.html
View File 

@@ -0,0 +1,19 @@
 
+        <!-- The list of demos will be inserted above by the CI process. -->
 
+    </ul>
 
+    <h2>Unavailable demos</h2>
 
+    <ul>
 
+        <li><code>2d/hdr/</code>: Not supported on HTML5 yet.
 
+        <li><code>3d/voxel/</code>: Not supported on HTML5 yet.
 
+        <li><code>audio/device_changer/</code>: Not supported on HTML5 due to browser limitations.
 
+        <li><code>loading/background_load/</code>: Not supported on HTML5 yet.
 
+        <li><code>loading/multiple_threads_loading/</code>: Not supported on HTML5 yet.
 
+        <li><code>loading/threads/</code>: Not supported on HTML5 yet.
 
+        <li><code>misc/matrix_transform/</code>: Results are only visible in the editor.
 
+        <li><code>mobile/android_iap/</code>: Only relevant on native Android.
 
+        <li><code>mobile/sensors/</code>: Not supported on HTML5 yet.
 
+        <li><code>mono/*/</code>: Not available yet (requires Mono-enabled HTML5 build).</li>
 
+        <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>
 
+        <li><code>plugins/*/</code>: Only effective within the editor.</li>
 
+    </ul>
 
+</body>
 
+</html>

+ 106 - 0
.github/dist/header.html
View File 

@@ -0,0 +1,106 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="utf-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+	<title>Godot demos exported to HTML5</title>
 
+	<style>
 
+		:root {
 
+			--background-color: #fff;
 
+			--text-color: #222;
 
+			--link-color: hsl(220, 100%, 45%);
 
+			--link-underline-color: hsla(220, 100%, 45%, 0.3);
 
+		}
 
+
 
+		@media (prefers-color-scheme: dark) {
 
+			:root {
 
+				--background-color: #222;
 
+				--text-color: #eee;
 
+				--link-color: hsl(200, 100%, 70%);
 
+				--link-underline-color: hsla(200, 100%, 70%, 0.3);
 
+			}
 
+		}
 
+
 
+		*:focus {
 
+			/* More visible outline for better keyboard navigation. */
 
+			outline: 0.125rem solid hsl(220, 100%, 62.5%);
 
+			/* Make the outline always appear above other elements. */
 
+			position: relative;
 
+		}
 
+
 
+		html {
 
+			background-color: var(--background-color);
 
+			color: var(--text-color);
 
+		}
 
+
 
+		body {
 
+			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
+			max-width: 50rem;
 
+			margin: 0 auto;
 
+			padding: 0.75rem;
 
+			line-height: 1.618rem;
 
+		}
 
+
 
+		h2 {
 
+			margin-top: 2.5rem;
 
+		}
 
+
 
+		a {
 
+			color: var(--link-color);
 
+			text-decoration-color: var(--link-underline-color);
 
+			text-decoration-thickness: 0.125rem;
 
+		}
 
+
 
+		a:hover {
 
+			filter: brightness(117.5%);
 
+		}
 
+
 
+		a:active {
 
+			filter: brightness(82.5%);
 
+		}
 
+
 
+		ul {
 
+			padding-left: 0;
 
+		}
 
+
 
+		li {
 
+			display: block;
 
+		}
 
+
 
+		li a {
 
+			display: inline-block;
 
+			width: 100%;
 
+			height: 4rem;
 
+			margin-left: 0.5rem;
 
+		}
 
+
 
+		li a:hover {
 
+			background-color: hsla(0, 0%, 50%, 0.1);
 
+		}
 
+	</style>
 
+</head>
 
+<body>
 
+	<h1>Godot demo projects</h1>
 
+	<p>
 
+		This page lists
 
+		<a href="https://github.com/godotengine/godot-demo-projects">official Godot demo projects</a>
 
+		exported to HTML5 for testing purposes. These projects are deployed automatically
 
+		on every commit on the <code>master</code> branch of the repository.
 
+	</p>
 
+	<p>
 
+		The HTML5 exports on this page are provided for demonstration purposes only.
 
+		Some of these demos may not function or render correctly on HTML5,
 
+		especially on mobile devices.
 
+		For best performance, it's recommended to
 
+		<a href="https://godotengine.org/download">download</a> a native editor
 
+		and run the demo project by importing its files in the project manager.
 
+	</p>
 
+	<p>
 
+		See the
 
+		<a href="https://docs.godotengine.org/en/stable/getting_started/workflow/export/exporting_for_web.html">Exporting for the Web</a>
 
+		documentation for information on exporting your own projects to HTML5.
 
+	</p>
 
+
 
+	<h2>List of demos</h2>
 
+	<ul>
 
+		<!-- The list of demos will be inserted below by the CI process. -->

+ 99 - 0
.github/workflows/export_html5.yml
View File 

@@ -0,0 +1,99 @@
 
+name: Export projects to HTML5 and deploy to GitHub Pages
 
+on:
 
+  push:
 
+    branches:
 
+      - master
 
+
 
+env:
 
+  GODOT_VERSION: 3.2.3
 
+
 
+jobs:
 
+  export-html5:
 
+    name: Export projects to HTML5 and deploy to GitHub Pages
 
+    runs-on: ubuntu-20.04
 
+    container:
 
+      image: barichello/godot-ci:3.2.3
 
+    steps:
 
+      - name: Checkout
 
+        uses: actions/[email protected]
 
+
 
+      - name: Setup
 
+        run: |
 
+          mkdir -p ~/.local/share/godot/templates/
 
+          mv /root/.local/share/godot/templates/$GODOT_VERSION.stable ~/.local/share/godot/templates/$GODOT_VERSION.stable
 
+
 
+      - name: Export projects to HTML5
 
+        run: |
 
+          apt-get update -qq && apt-get install -qqq imagemagick
 
+
 
+          # Don't export Mono demos (not supported yet), demos that can't be run in HTML5
 
+          # since they're platform-specific or demos that are currently broken in HTML5.
 
+          # Remember to update `.github/dist/footer.html` when updating the list of excluded demos.
 
+          rm -rf \
 
+            2d/hdr/ \
 
+            3d/voxel/ \
 
+            audio/device_changer/ \
 
+            loading/background_load/ \
 
+            loading/multiple_threads_loading/ \
 
+            loading/threads/ \
 
+            misc/matrix_transform/ \
 
+            mobile/android_iap/ \
 
+            mobile/sensors/ \
 
+            mono/ \
 
+            networking/ \
 
+            plugins/
 
+
 
+          for panorama in 3d/material_testers/backgrounds/*.hdr; do
 
+            # Decrease the resolution to get below the 20 MB per-file limit.
 
+            # Otherwise, the website can't be deployed as files larger than 20 MB
 
+            # can't be pushed to GitHub anymore.
 
+            mogrify -resize 75% "$panorama"
 
+          done
 
+
 
+          BASEDIR="$PWD"
 
+
 
+          # Use absolute paths so that we can `cd` without having to go back to the parent directory manually.
 
+          for demo in */*/; do
 
+            echo ""
 
+            echo "================================"
 
+            echo "Exporting demo $demo..."
 
+            echo "================================"
 
+
 
+            mkdir -p "$BASEDIR/.github/dist/$demo"
 
+            cd "$BASEDIR/$demo"
 
+
 
+            # Copy an export template preset file configured for HTML5 exporting.
 
+            # This way, we don't have to commit `export_presets.cfg` for each project.
 
+            cp "$BASEDIR/.github/dist/export_presets.cfg" .
 
+            godot --export "HTML5" "$BASEDIR/.github/dist/$demo/index.html"
 
+
 
+            # Replace the WASM file with a symbolic link to avoid duplicating files in the pushed branch.
 
+            # (WASM files are identical across projects, but not PCK or HTML files.)
 
+            mv -f "$BASEDIR/.github/dist/$demo/index.wasm" "$BASEDIR/.github/dist/index.wasm"
 
+            # The symlink must be relative as it needs to point to a file within the pushed repository.
 
+            ln -s "../../index.wasm" "$BASEDIR/.github/dist/$demo/index.wasm"
 
+
 
+            # Append the demo to the list of demos for the website.
 
+            PROJECT_NAME=$(cat project.godot | grep "config/name" | cut -d '"' -f 2 | tr -d "\n")
 
+            echo "<li><a href='$demo'><img width="64" height="64" src="$demo/favicon.png" alt=""> $PROJECT_NAME</a></li>" >> "$BASEDIR/.github/dist/demos.html"
 
+          done
 
+
 
+          cat "$BASEDIR/.github/dist/header.html" "$BASEDIR/.github/dist/demos.html" "$BASEDIR/.github/dist/footer.html" > "$BASEDIR/.github/dist/index.html"
 
+
 
+          # Clean up files that don't need to be deployed.
 
+          rm -f "$BASEDIR/.github/dist/header.html" "$BASEDIR/.github/dist/demos.html" "$BASEDIR/.github/dist/footer.html" "$BASEDIR/.github/dist/export_presets.cfg"
 
+
 
+      # Installing rsync is needed in order to deploy to GitHub Pages. Without it, the build will fail.
 
+      - name: Install rsync 📚
 
+        run: |
 
+          apt-get update -qq && apt-get install -qqq rsync
 
+      - name: Deploy to GitHub Pages 🚀
 
+        uses: JamesIves/github-pages-deploy-action@releases/v3
 
+        with:
 
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
+          # The branch the action should deploy to.
 
+          BRANCH: gh-pages
 
+          # The folder the action should deploy.
 
+          FOLDER: .github/dist
 
+          # Artifacts are large; don't keep the branch's history.
 
+          SINGLE_COMMIT: true

+ 2 - 0
.gitignore
View File 

@@ -5,6 +5,8 @@
 
 .import/
 
 .import/
 
 export.cfg
 
 export.cfg
 
 export_presets.cfg
 
 export_presets.cfg
 
+# Dummy HTML5 export presets file for continuous integration
 
+!.github/dist/export_presets.cfg
 
 
 
 # Imported translations (automatically generated from CSV files)
 
 # Imported translations (automatically generated from CSV files)
 
 *.translation
 
 *.translation