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

Added splash image support and new progress bar for web export

patwork 1 year ago
parent
e0f58a3194
commit
7c8a4a9dab
2 changed files with 65 additions and 142 deletions
Unified View Show Diff Stats
  1. 64 142
      misc/dist/html/full-size.html
  2. 1 0
      platform/web/export/export_plugin.cpp

+ 64 - 142
misc/dist/html/full-size.html
View File 

@@ -2,135 +2,95 @@
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
 
 		<title>$GODOT_PROJECT_NAME</title>
 
 		<title>$GODOT_PROJECT_NAME</title>
 
 		<style>
 
 		<style>
 
-body {
 
-	touch-action: none;
 
+html, body, #canvas {
 
 	margin: 0;
 
 	margin: 0;
 
-	border: 0 none;
 
 	padding: 0;
 
 	padding: 0;
 
-	text-align: center;
 
+	border: 0;
 
+}
 
+
 
+body {
 
+	color: white;
 
 	background-color: black;
 
 	background-color: black;
 
+	overflow: hidden;
 
+	touch-action: none;
 
 }
 
 }
 
 
 
 #canvas {
 
 #canvas {
 
 	display: block;
 
 	display: block;
 
-	margin: 0;
 
-	color: white;
 
 }
 
 }
 
 
 
 #canvas:focus {
 
 #canvas:focus {
 
 	outline: none;
 
 	outline: none;
 
 }
 
 }
 
 
 
-.godot {
 
-	font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
 
-	color: #e0e0e0;
 
-	background-color: #3b3943;
 
-	background-image: linear-gradient(to bottom, #403e48, #35333c);
 
-	border: 1px solid #45434e;
 
-	box-shadow: 0 0 1px 1px #2f2d35;
 
-}
 
-
 
-/* Status display */
 
-
 
-#status {
 
+#status, #status-splash, #status-progress {
 
 	position: absolute;
 
 	position: absolute;
 
 	left: 0;
 
 	left: 0;
 
-	top: 0;
 
 	right: 0;
 
 	right: 0;
 
+}
 
+
 
+#status, #status-splash {
 
+	top: 0;
 
 	bottom: 0;
 
 	bottom: 0;
 
+}
 
+
 
+#status {
 
+	background-color: #38363A;
 
 	display: flex;
 
 	display: flex;
 
+	flex-direction: column;
 
 	justify-content: center;
 
 	justify-content: center;
 
 	align-items: center;
 
 	align-items: center;
 
-	/* don't consume click events - make children visible explicitly */
 
 	visibility: hidden;
 
 	visibility: hidden;
 
 }
 
 }
 
 
 
-#status-progress {
 
-	width: 366px;
 
-	height: 7px;
 
-	background-color: #38363A;
 
-	border: 1px solid #444246;
 
-	padding: 1px;
 
-	box-shadow: 0 0 2px 1px #1B1C22;
 
-	border-radius: 2px;
 
-	visibility: visible;
 
-}
 
-
 
-@media only screen and (orientation:portrait) {
 
-	#status-progress {
 
-		width: 61.8%;
 
-	}
 
+#status-splash {
 
+	max-height: 100%;
 
+	max-width: 100%;
 
+	margin: auto;
 
 }
 
 }
 
 
 
-#status-progress-inner {
 
-	height: 100%;
 
-	width: 0;
 
-	box-sizing: border-box;
 
-	transition: width 0.5s linear;
 
-	background-color: #202020;
 
-	border: 1px solid #222223;
 
-	box-shadow: 0 0 1px 1px #27282E;
 
-	border-radius: 3px;
 
+#status-progress, #status-notice {
 
+	display: none;
 
 }
 
 }
 
 
 
-#status-indeterminate {
 
-	height: 42px;
 
-	visibility: visible;
 
-	position: relative;
 
-}
 
-
 
-#status-indeterminate > div {
 
-	width: 4.5px;
 
-	height: 0;
 
-	border-style: solid;
 
-	border-width: 9px 3px 0 3px;
 
-	border-color: #2b2b2b transparent transparent transparent;
 
-	transform-origin: center 21px;
 
-	position: absolute;
 
+#status-progress {
 
+	bottom: 10%;
 
+	width: 50%;
 
+	margin: 0 auto;
 
 }
 
 }
 
 
 
-#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
 
-#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
 
-#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
 
-#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
 
-#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
 
-#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
 
-#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
 
-#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
 
-
 
 #status-notice {
 
 #status-notice {
 
-	margin: 0 100px;
 
+	background-color: #5b3943;
 
+	border-radius: 0.5rem;
 
+	border: 1px solid #9b3943;
 
+	color: #e0e0e0;
 
+	font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
 
 	line-height: 1.3;
 
 	line-height: 1.3;
 
-	visibility: visible;
 
-	padding: 4px 6px;
 
-	visibility: visible;
 
+	margin: 0 2rem;
 
+	overflow: hidden;
 
+	padding: 1rem;
 
+	text-align: center;
 
+	z-index: 1;
 
 }
 
 }
 
 		</style>
 
 		</style>
 
 		$GODOT_HEAD_INCLUDE
 
 		$GODOT_HEAD_INCLUDE
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 		<canvas id="canvas">
 
 		<canvas id="canvas">
 
-			HTML5 canvas appears to be unsupported in the current browser.<br >
 
-			Please try updating or use a different browser.
 
+			Your browser does not support the canvas tag.
 
 		</canvas>
 
 		</canvas>
 
+
 
+		<noscript>
 
+			Your browser does not support JavaScript.
 
+		</noscript>
 
+
 
 		<div id="status">
 
 		<div id="status">
 
-			<div id="status-progress" style="display: none;" oncontextmenu="event.preventDefault();">
 
-				<div id ="status-progress-inner"></div>
 
-			</div>
 
-			<div id="status-indeterminate" style="display: none;" oncontextmenu="event.preventDefault();">
 
-				<div></div>
 
-				<div></div>
 
-				<div></div>
 
-				<div></div>
 
-				<div></div>
 
-				<div></div>
 
-				<div></div>
 
-				<div></div>
 
-			</div>
 
-			<div id="status-notice" class="godot" style="display: none;"></div>
 
+			<img id="status-splash" src="$GODOT_SPLASH" alt="">
 
+			<progress id="status-progress"></progress>
 
+			<div id="status-notice"></div>
 
 		</div>
 
 		</div>
 
 
 
 		<script src="$GODOT_URL"></script>
 
 		<script src="$GODOT_URL"></script>
 
@@ -140,58 +100,25 @@ const GODOT_THREADS_ENABLED = $GODOT_THREADS_ENABLED;
 
 const engine = new Engine(GODOT_CONFIG);
 
 const engine = new Engine(GODOT_CONFIG);
 
 
 
 (function () {
 
 (function () {
 
-	const INDETERMINATE_STATUS_STEP_MS = 100;
 
+	const statusOverlay = document.getElementById('status');
 
 	const statusProgress = document.getElementById('status-progress');
 
 	const statusProgress = document.getElementById('status-progress');
 
-	const statusProgressInner = document.getElementById('status-progress-inner');
 
-	const statusIndeterminate = document.getElementById('status-indeterminate');
 
 	const statusNotice = document.getElementById('status-notice');
 
 	const statusNotice = document.getElementById('status-notice');
 
 
 
 	let initializing = true;
 
 	let initializing = true;
 
-	let statusMode = 'hidden';
 
-
 
-	let animationCallbacks = [];
 
-	function animate(time) {
 
-		animationCallbacks.forEach((callback) => callback(time));
 
-		requestAnimationFrame(animate);
 
-	}
 
-	requestAnimationFrame(animate);
 
-
 
-	function animateStatusIndeterminate(ms) {
 
-		const i = Math.floor((ms / INDETERMINATE_STATUS_STEP_MS) % 8);
 
-		if (statusIndeterminate.children[i].style.borderTopColor === '') {
 
-			Array.prototype.slice.call(statusIndeterminate.children).forEach((child) => {
 
-				child.style.borderTopColor = '';
 
-			});
 
-			statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
 
-		}
 
-	}
 
+	let statusMode = '';
 
 
 
 	function setStatusMode(mode) {
 
 	function setStatusMode(mode) {
 
 		if (statusMode === mode || !initializing) {
 
 		if (statusMode === mode || !initializing) {
 
 			return;
 
 			return;
 
 		}
 
 		}
 
-		[statusProgress, statusIndeterminate, statusNotice].forEach((elem) => {
 
-			elem.style.display = 'none';
 
-		});
 
-		animationCallbacks = animationCallbacks.filter(function (value) {
 
-			return (value !== animateStatusIndeterminate);
 
-		});
 
-		switch (mode) {
 
-		case 'progress':
 
-			statusProgress.style.display = 'block';
 
-			break;
 
-		case 'indeterminate':
 
-			statusIndeterminate.style.display = 'block';
 
-			animationCallbacks.push(animateStatusIndeterminate);
 
-			break;
 
-		case 'notice':
 
-			statusNotice.style.display = 'block';
 
-			break;
 
-		case 'hidden':
 
-			break;
 
-		default:
 
-			throw new Error('Invalid status mode');
 
+		if (mode === 'hidden') {
 
+			statusOverlay.remove();
 
+			initializing = false;
 
+			return;
 
 		}
 
 		}
 
+		statusOverlay.style.visibility = 'visible';
 
+		statusProgress.style.display = mode === 'progress' ? 'block' : 'none';
 
+		statusNotice.style.display = mode === 'notice' ? 'block' : 'none';
 
 		statusMode = mode;
 
 		statusMode = mode;
 
 	}
 
 	}
 
 
 
@@ -217,6 +144,7 @@ const engine = new Engine(GODOT_CONFIG);
 
 	const missing = Engine.getMissingFeatures({
 
 	const missing = Engine.getMissingFeatures({
 
 		threads: GODOT_THREADS_ENABLED,
 
 		threads: GODOT_THREADS_ENABLED,
 
 	});
 
 	});
 
+
 
 	if (missing.length !== 0) {
 
 	if (missing.length !== 0) {
 
 		if (GODOT_CONFIG['serviceWorker'] && GODOT_CONFIG['ensureCrossOriginIsolationHeaders'] && 'serviceWorker' in navigator) {
 
 		if (GODOT_CONFIG['serviceWorker'] && GODOT_CONFIG['ensureCrossOriginIsolationHeaders'] && 'serviceWorker' in navigator) {
 
 			// There's a chance that installing the service worker would fix the issue
 
 			// There's a chance that installing the service worker would fix the issue
 
@@ -242,25 +170,19 @@ const engine = new Engine(GODOT_CONFIG);
 
 			displayFailureNotice(missingMsg + missing.join('\n'));
 
 			displayFailureNotice(missingMsg + missing.join('\n'));
 
 		}
 
 		}
 
 	} else {
 
 	} else {
 
-		setStatusMode('indeterminate');
 
+		setStatusMode('progress');
 
 		engine.startGame({
 
 		engine.startGame({
 
 			'onProgress': function (current, total) {
 
 			'onProgress': function (current, total) {
 
-				if (total > 0) {
 
-					statusProgressInner.style.width = `${(current / total) * 100}%`;
 
-					setStatusMode('progress');
 
-					if (current === total) {
 
-						// wait for progress bar animation
 
-						setTimeout(() => {
 
-							setStatusMode('indeterminate');
 
-						}, 500);
 
-					}
 
+				if (current > 0 && total > 0) {
 
+					statusProgress.value = current;
 
+					statusProgress.max = total;
 
 				} else {
 
 				} else {
 
-					setStatusMode('indeterminate');
 
+					statusProgress.removeAttribute('value');
 
+					statusProgress.removeAttribute('max');
 
 				}
 
 				}
 
 			},
 
 			},
 
 		}).then(() => {
 
 		}).then(() => {
 
 			setStatusMode('hidden');
 
 			setStatusMode('hidden');
 
-			initializing = false;
 
 		}, displayFailureNotice);
 
 		}, displayFailureNotice);
 
 	}
 
 	}
 
 }());
 
 }());

+ 1 - 0
platform/web/export/export_plugin.cpp
View File 

@@ -170,6 +170,7 @@ void EditorExportPlatformWeb::_fix_html(Vector<uint8_t> &p_html, const Ref<Edito
 
 	replaces["$GODOT_PROJECT_NAME"] = GLOBAL_GET("application/config/name");
 
 	replaces["$GODOT_PROJECT_NAME"] = GLOBAL_GET("application/config/name");
 
 	replaces["$GODOT_HEAD_INCLUDE"] = head_include + custom_head_include;
 
 	replaces["$GODOT_HEAD_INCLUDE"] = head_include + custom_head_include;
 
 	replaces["$GODOT_CONFIG"] = str_config;
 
 	replaces["$GODOT_CONFIG"] = str_config;
 
+	replaces["$GODOT_SPLASH"] = p_name + ".png";
 
 
 
 	if (p_preset->get("variant/thread_support")) {
 
 	if (p_preset->get("variant/thread_support")) {
 
 		replaces["$GODOT_THREADS_ENABLED"] = "true";
 
 		replaces["$GODOT_THREADS_ENABLED"] = "true";