Init

Build/SheBeiChuZhuang1_0.json

@@ -0,0 +1,16 @@
+{
+"companyName": "DefaultCompany",
+"productName": "tougeChaKong",
+"productVersion": "0.1",
+"dataUrl": "SheBeiChuZhuang1_0.data.unityweb",
+"wasmCodeUrl": "SheBeiChuZhuang1_0.wasm.code.unityweb",
+"wasmFrameworkUrl": "SheBeiChuZhuang1_0.wasm.framework.unityweb",
+"graphicsAPI": ["WebGL 2.0","WebGL 1.0"],
+"webglContextAttributes": {"preserveDrawingBuffer": false},
+"splashScreenStyle": "Dark",
+"backgroundColor": "#231F20",
+"cacheControl": {"default": "must-revalidate"},
+"developmentBuild": false,
+"multithreading": false,
+"unityVersion": "2019.4.17f1c1"
+}

StreamingAssets/build_info

@@ -0,0 +1 @@
+Build from CQ at 2021/12/22 17:08:15

TemplateData/css/style.css

@@ -0,0 +1,239 @@
+body{
+	margin:0px;
+	padding:0px;
+	position: absolute; 
+	height:100%;
+	width:100%;
+	background-size:cover;
+	font-style: regular;
+	font-family:"Myriad Pro", Myriad,"Helvetica Neue", Helvetica, Arial, sans-serif;
+	background-color:#f0f0f1;
+  	overflow-x: hidden; 
+  	overflow-y: hidden;
+}
+
+.webgl-content,#loadingBlock,#errorBrowserBlock{
+	padding:0px;
+	position:absolute;
+	height:100vh;
+	width:100vw;
+	background-color:#ffffff;
+}
+
+#gameContainer, canvas {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: #f0f0f1;
+}
+
+#fullScreenButton{
+	height:30px;
+	width:30px;
+	position:absolute;
+	z-index:1;
+	bottom:5px;
+	right:5px;
+	background-color:transparent;
+	background-image:url("../img/fullScreen_on.png");
+	background-size:30px 30px;
+	border:none;
+	cursor: pointer;
+}
+
+.subtitle{
+	color:#333333;
+	font-size:16px;
+	padding-bottom:3vh;
+	padding-top: 3vh;
+	display: block;
+	height:15vh;
+	width:40vw;
+	margin:auto;
+	text-align: center;
+}
+
+.logo{
+	height:8vh;
+	width:auto;
+	display: block;
+	margin:auto;
+	margin-top:10%;
+}
+
+#loadingBlock,#errorBrowserBlock{
+	background-image:url("../img/background.png");
+	background-size:cover;
+}
+
+#emptyBar{
+	background: url("../img/progressEmpty.png") no-repeat right;
+	float: right; 
+	width: 60%; 
+	height: 100%; 
+	display: inline-block;
+}
+
+#fullBar{
+	background: url("../img/progressFull.png") no-repeat right;
+	float: left; 
+	width: 40%; 
+	height: 100%; 
+	display: inline-block;
+}
+
+#progressBar,#warningBrowserBlock,#warningMobileBlock,#errorContent{
+	height:25vh;
+	width:40vw;
+	margin:auto;
+	text-align: center;
+}
+
+#progressBar{
+	height:8vh;
+	color:#999999;
+	font-size:18px;
+}
+
+#warningBrowserBlock,#warningMobileBlock,#errorContent{
+	margin-top:15vh;
+	color:#666666;
+	font-size:2.3vh;
+}
+
+.browserIcons{
+	display: inline-flex;
+	margin-top:2vh;
+}
+
+.browserIcons a{
+	width:150px;
+}
+
+#errorContent{
+	font-size:3vh;
+	margin-top:5vh;
+}
+
+.centered{
+	height: 100%;
+	max-width:770px;
+	margin-left:auto;
+	margin-right:auto;
+}
+
+
+/* When aspect-ratio is smaller than 4/3*/
+
+/*@media (max-aspect-ratio: 4/3){
+	
+	.webgl-content{
+		-webkit-transform: translate(0%, 0%); transform: translate(0%, 0%);
+		-webkit-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
+		-moz-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
+		box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
+	}
+	
+	.keepRatio{
+		width:100%;
+		padding-top: 75%;
+		position: relative;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	.webgl-content,#loadingBlock,#errorBrowserBlock{
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+	}
+
+	.logo{
+		width:25vw;
+		height:auto;
+		margin-top:1vh;
+	}
+	
+	.subtitle{
+		font-size:2vw;
+		height:10vw;
+		padding-bottom:1vw;
+		padding-top: 1vw;
+	}
+
+	.subtitle,#progressBar,#warningBrowserBlock,#warningMobileBlock,#errorContent{
+		width:80vw;
+	}
+	
+	#progressBar{
+		height:6vw;
+		margin-top: 2vw;
+		font-size:3vw;
+	}
+	
+	#emptyBar,#fullBar{
+		height: 2vw; 
+	}
+	
+	#warningBrowserBlock,#warningMobileBlock,#errorContent{
+		margin-top:3vw;
+		font-size:2vw;
+	}
+	
+	.browserIcons{
+		margin-top:1vw;
+	}
+	
+	.browserIcons a{
+		width:15vw;
+	}
+	
+	.browserIcons a img{
+		width:8vw;
+	}
+	
+	.webgl-content,#loadingBlock,#errorBrowserBlock{
+		border:1px solid #c6c9ca;
+		width:calc(100% - 2px);
+		height:auto;
+	}
+}*/
+
+
+/* When aspect-ratio is bigger than 16/9*/
+
+@media (min-aspect-ratio: 16/9){
+	body{
+		display:flex;
+		flex-wrap:wrap;
+		justify-content:space-between;
+      	min-height:300px;
+	}
+	
+	.keepRatio{
+		width:100%;
+		height:100%;
+		margin:0 auto;
+	}
+	
+	.webgl-content,#gameContainer,canvas,#loadingBlock,#errorBrowserBlock{
+		width: inherit;
+	}
+	
+	.webgl-content{
+	-webkit-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
+		-moz-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
+		box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
+	}
+	
+	.subtitle,#progressBar,#warningBrowserBlock,#warningMobileBlock,#errorContent{
+		width:100vh;
+	}
+	
+	.webgl-content,#loadingBlock,#errorBrowserBlock{
+		border:1px solid #c6c9ca;
+		height:calc(100% - 2px);
+	}
+}

index.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title></title>
+    <link rel="shortcut icon" href="TemplateData/img/favicon.ico">
+    <link rel="stylesheet" href="TemplateData/css/style.css">
+    <script src="Build/UnityLoader.js"></script>
+	<script>
+	
+		/*function ToggleFullScreen() {
+			var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
+			(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
+			(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
+			(document.msFullscreenElement && document.msFullscreenElement !== null);
+			
+			var element = document.body.getElementsByClassName("webgl-content")[0];
+			
+			if (!isInFullScreen) {
+				document.getElementById("fullScreenButton").style.backgroundImage="url('TemplateData/img/fullScreen_off.png')";
+				return (element.requestFullscreen ||
+				element.webkitRequestFullscreen ||
+				element.mozRequestFullScreen ||
+				element.msRequestFullscreen).call(element);
+			}
+			else {
+				document.getElementById("fullScreenButton").style.backgroundImage="url('TemplateData/img/fullScreen_on.png')";
+				if (document.exitFullscreen) {
+					document.exitFullscreen();
+				} else if (document.webkitExitFullscreen) {
+					document.webkitExitFullscreen();
+				} else if (document.mozCancelFullScreen) {
+					document.mozCancelFullScreen();
+				} else if (document.msExitFullscreen) {
+					document.msExitFullscreen();
+				}
+			}
+		}*/
+		
+		function CheckCompatibility(gameInstance, onsuccess, onerror)
+		{
+			if (!UnityLoader.SystemInfo.hasWebGL) {
+				document.getElementById("errorBrowserBlock").style.display = "inherit";
+				onerror();
+			} else if (UnityLoader.SystemInfo.mobile) {
+				document.getElementById("warningMobileBlock").style.display = "inherit";
+				onsuccess();
+			} else if (["Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1) {
+				document.getElementById("warningBrowserBlock").style.display = "inherit";
+				onsuccess();
+			} else {
+				onsuccess();
+			}
+		}
+		
+		function RuntimeInitialized(){
+		}
+		
+		function UnityProgress(gameInstance, progress) {
+			if (!gameInstance.Module)
+			return;
+			document.getElementById("loadingBlock").style.display = "inherit";	 	
+			document.getElementById("fullBar").style.width = (100 * progress) + "%";
+			document.getElementById("emptyBar").style.width = (100 * (1 - progress)) + "%";
+			if (progress == 1)
+			{
+				setTimeout(function(){ document.getElementById("loadingBlock").style.display = "none"; }, 3000);
+			}	
+		}
+		
+		var gameInstance = UnityLoader.instantiate("gameContainer", "Build/SheBeiChuZhuang1_0.json", {
+			onProgress: UnityProgress,
+			compatibilityCheck:CheckCompatibility,
+			Module: {
+				//TOTAL_MEMORY: 268435456,
+				onRuntimeInitialized:RuntimeInitialized,
+			},		
+		});
+		
+	  //注册web端消息监听
+	  window.addEventListener('message',receiveMessage,false);
+		
+	  function receiveMessage(event){
+	    console.log("receive web message ",event.data);
+	    gameInstance.SendMessage("WebConnecter","RecData",event.data);
+	  }
+	  
+	  //发送消息给web端
+	  function SendToWeb(param){
+	     console.log("receive unity message ",param);
+	     window.parent.postMessage(param,'*');
+	  }
+    </script>
+  </head>
+  <body>
+  
+    <div class="keepRatio">
+  
+		<div class="webgl-content">
+			<!--<button id="fullScreenButton" onclick="ToggleFullScreen()"></button>-->
+			<div id="gameContainer"></div>
+		</div>
+		
+		
+		<div id="loadingBlock">
+			<img class="logo" src="TemplateData/img/Logo.png"></img>
+			<span class="subtitle">  <br>
+			头歌为可编程的虚拟仿真课程提供开发和运行环境。
+			</span>
+			
+			<div id="progressBar">
+				<div>加载中...</div><br>
+				<div class="centered">
+					<div id="emptyBar"></div>
+					<div id="fullBar"></div>
+				</div>
+			</div>
+			
+			<div id="warningBrowserBlock" style="display:none;">
+				<div class="warningBrowserText">
+					Your browser may not be compatible with this website. For an optimal experience, we suggest you to download one of this popular web browsers.
+				</div>
+				<div class="browserIcons">
+					<a href="https://www.mozilla.org/firefox" target="_blank"><img src="TemplateData/img/browser-firefox.png" alt="Firefox browser"></a>
+					<a href="https://www.google.com/chrome" target="_blank"><img src="TemplateData/img/browser-chrome.png" alt="Chrome browser"></a>
+					<a href="https://www.apple.com/safari/" target="_blank"><img src="TemplateData/img/browser-safari.png" alt="Safari browser"></a>
+				</div>
+			</div>
+			<div id="warningMobileBlock" style="display:none;">
+				<div class="warningBrowserText">
+					Please note that Unity WebGL is not currently supported on mobiles.
+				</div>
+			</div>
+			
+		</div>
+		
+		<div id="errorBrowserBlock" style="display:none;">
+			<img class="logo" src="TemplateData/img/Logo.png"></img>
+            <span class="subtitle">
+                <br>
+                头歌为可编程的虚拟仿真课程提供开发和运行环境。
+            </span>
+			
+			<div id="errorContent">
+				<div id="errorBrowserText">
+					Your browser does not support WebGL. <br> You can download one of this popular web browsers.
+				</div>
+				<div class="browserIcons">
+					<a href="https://www.mozilla.org/firefox" target="_blank"><img src="TemplateData/img/browser-firefox.png" alt="Firefox browser"></a>
+					<a href="https://www.google.com/chrome" target="_blank"><img src="TemplateData/img/browser-chrome.png" alt="Chrome browser"></a>
+					<a href="https://www.apple.com/safari/" target="_blank"><img src="TemplateData/img/browser-safari.png" alt="Safari browser"></a>
+				</div>
+			</div>
+		</div>
+		
+	</div>
+	
+  </body>
+</html>