build

WebGL

Build-WebGL/UFO/TemplateData/UnityProgress.js

@@ -0,0 +1,122 @@
+function UnityProgress (dom) {
+	this.progress = 0.0;
+	this.message = "";
+	this.dom = dom;
+
+	var parent = dom.parentNode;
+
+	var background = document.createElement("div");
+	background.style.background = Module["backgroundColor"] ? Module["backgroundColor"] : "#4D4D4D";
+	background.style.position = "absolute";
+	background.style.overflow = "hidden";
+	parent.appendChild(background);
+	this.background = background;
+
+	if (Module["backgroundImage"])
+	{
+		var backgroundImg = document.createElement("img");
+		backgroundImg.src = Module["backgroundImage"]; 
+		backgroundImg.style.position = "absolute";
+		backgroundImg.style.width = "100%";
+		backgroundImg.style.height = "auto";
+		backgroundImg.style.top = "50%";
+		backgroundImg.style.transform = "translate(0, -50%)";
+		background.appendChild(backgroundImg);
+	}
+
+	var logoImage = document.createElement("img");
+	var splashStyle = Module["splashStyle"] ? Module["splashStyle"] : "Light";
+	logoImage.src = "TemplateData/Logo." + splashStyle + ".png"; 
+	logoImage.style.position = "absolute";
+	parent.appendChild(logoImage);
+	this.logoImage = logoImage;
+
+	var progressFrame = document.createElement("img");
+	progressFrame.src = "TemplateData/ProgressFrame." + splashStyle + ".png"; 
+	progressFrame.style.position = "absolute";
+	parent.appendChild(progressFrame);
+	this.progressFrame = progressFrame;
+
+	var progressBar = document.createElement("div");
+	progressBar.style.position = "absolute";
+	progressBar.style.overflow = "hidden";
+	parent.appendChild(progressBar);
+	this.progressBar = progressBar;
+
+	var progressBarImg = document.createElement("img");
+	progressBarImg.src = "TemplateData/ProgressBar." + splashStyle + ".png"; 
+	progressBarImg.style.position = "absolute";
+	progressBar.appendChild(progressBarImg);
+	this.progressBarImg = progressBarImg;
+
+	var messageArea = document.createElement("p");
+	messageArea.style.position = "absolute";
+	parent.appendChild(messageArea);
+	this.messageArea = messageArea;
+
+
+	this.SetProgress = function (progress) { 
+		if (this.progress < progress)
+			this.progress = progress; 
+		this.messageArea.style.display = "none";
+		this.progressFrame.style.display = "inline";
+		this.progressBar.style.display = "inline";			
+		this.Update();
+	}
+
+	this.SetMessage = function (message) { 
+		this.message = message; 
+		this.background.style.display = "inline";
+		this.logoImage.style.display = "inline";
+		this.progressFrame.style.display = "none";
+		this.progressBar.style.display = "none";			
+		this.Update();
+	}
+
+	this.Clear = function() {
+		this.background.style.display = "none";
+		this.logoImage.style.display = "none";
+		this.progressFrame.style.display = "none";
+		this.progressBar.style.display = "none";
+	}
+
+	this.Update = function() {
+		this.background.style.top = this.dom.offsetTop + 'px';
+		this.background.style.left = this.dom.offsetLeft + 'px';
+		this.background.style.width = this.dom.offsetWidth + 'px';
+		this.background.style.height = this.dom.offsetHeight + 'px';
+
+		var logoImg = new Image();
+		logoImg.src = this.logoImage.src;
+		var progressFrameImg = new Image();
+		progressFrameImg.src = this.progressFrame.src;
+
+		this.logoImage.style.top = this.dom.offsetTop + (this.dom.offsetHeight * 0.5 - logoImg.height * 0.5) + 'px';
+		this.logoImage.style.left = this.dom.offsetLeft + (this.dom.offsetWidth * 0.5 - logoImg.width * 0.5) + 'px';
+		this.logoImage.style.width = logoImg.width+'px';
+		this.logoImage.style.height = logoImg.height+'px';
+
+		this.progressFrame.style.top = this.dom.offsetTop + (this.dom.offsetHeight * 0.5 + logoImg.height * 0.5 + 10) + 'px';
+		this.progressFrame.style.left = this.dom.offsetLeft + (this.dom.offsetWidth * 0.5 - progressFrameImg.width * 0.5) + 'px';
+		this.progressFrame.width = progressFrameImg.width;
+		this.progressFrame.height = progressFrameImg.height;
+
+		this.progressBarImg.style.top = '0px';
+		this.progressBarImg.style.left = '0px';
+		this.progressBarImg.width = progressFrameImg.width;
+		this.progressBarImg.height = progressFrameImg.height;
+
+		this.progressBar.style.top = this.progressFrame.style.top;
+		this.progressBar.style.left = this.progressFrame.style.left;
+		this.progressBar.style.width = (progressFrameImg.width * this.progress) + 'px';
+		this.progressBar.style.height = progressFrameImg.height + 'px';
+
+		this.messageArea.style.top = this.progressFrame.style.top;
+		this.messageArea.style.left = 0;
+		this.messageArea.style.width = '100%';
+		this.messageArea.style.textAlign = 'center';
+		this.messageArea.innerHTML = this.message;
+	}
+
+	this.Update ();
+}

Build-WebGL/UFO/TemplateData/style.css

@@ -0,0 +1,22 @@
+
+/****************************************
+  ==== RESETS
+****************************************/
+
+html,body,div,canvas { margin: 0; padding: 0; }
+::-moz-selection { color: #333; text-shadow: none; }
+::selection {  color: #333; text-shadow: none; }
+.clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
+.clear { display: inline-table; clear: both; }
+/* Hides from IE-mac \*/ * html .clear { height: 1%; } .clear { display: block; } /* End hide from IE-mac */
+
+/****************************************
+  ==== LAYOUT
+****************************************/
+
+html, body { width: 100%; height: 100%; font-family: Helvetica, Verdana, Arial, sans-serif; }
+div.logo { width: 204px; height: 38px; float: left; background: url(logo.png) 0 0 no-repeat; position: relative; z-index: 10; }
+div.title { height: 38px; line-height: 38px; padding: 0 10px; margin: 0 1px 0 0; float: right; color: #333; text-align: right; font-size: 18px; position: relative; z-index: 10; }
+.template-wrap { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
+.template-wrap canvas { margin: 0 0 10px 0; position: relative; z-index: 9; box-shadow: 0 10px 30px rgba(0,0,0,0.2); -moz-box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
+.fullscreen { float: right; position: relative; z-index: 10; }

Build-WebGL/UFO/index.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Unity WebGL Player | UFO Game</title>
+    <link rel="stylesheet" href="TemplateData/style.css">
+    <link rel="shortcut icon" href="TemplateData/favicon.ico" />
+    <script src="TemplateData/UnityProgress.js"></script>
+  </head>
+  <body class="template">
+    <div class="template-wrap clear">
+      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>
+      <br>
+      <div class="logo"></div>
+      <div class="fullscreen"><img src="TemplateData/fullscreen.png" width="38" height="38" alt="Fullscreen" title="Fullscreen" onclick="SetFullscreen(1);" /></div>
+      <div class="title">UFO Game</div>
+    </div>
+    <script type='text/javascript'>
+  var Module = {
+    TOTAL_MEMORY: 268435456,
+    errorhandler: null,			// arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
+    compatibilitycheck: null,
+    backgroundColor: "#222C36",
+    splashStyle: "Light",
+    dataUrl: "Release/UFO.data",
+    codeUrl: "Release/UFO.js",
+    asmUrl: "Release/UFO.asm.js",
+    memUrl: "Release/UFO.mem",
+  };
+</script>
+<script src="Release/UnityLoader.js"></script>
+
+  </body>
+</html>