- Home /
Web Player Dimensions and Custom Loading Screen Issue
I'm trying to set up my game's Web Player HTML file so that it will use a custom loading screen, but also fill the entire browser window (not use any pre-set resolution). So far I've been able to accomplish both of these, but not together. I'm not very experienced with HTML yet, so this is really stumping me.
I know that in order to fill the entire window and remove all pre-set dimensions, one needs to replace all said dimensions in the HTML file with "100%", and add a couple of extra lines. I'm able to do this just fine, as well as create my custom loading screen (I do have Pro).
The problem is that when combining these dimension properties with the chunk of example code I've found online for custom loading screens, it either breaks the game and tells me I need to download the Unity Web Player, or does what it's currently doing; displaying the custom loading screen, but with the game in the upper left corner of the browser window, still maintaining its dimensions.
I suspect this is because of the line: unityObject.embedUnity("unityPlayer", "Test.unity3d", 960, 540, params);
EDIT: If this is really the only thing causing the problem, then what would these two numbers need to be changed to? Does this portion of the code need to be changed completely?
But changing the width and height to "100%" here just messes up the Web Player and tells me that I need to go download it.
No matter how I arrange the code, these two just don't seem to play well together. Is it even possible to do this, or will I just have to choose one over the other?
Here's my HTML file. My apologies if it's a bit messy, as I said, I'm not very experienced with HTML just yet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity Web Player | Test</title>
<script type="text/javascript" src="http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject.js"></script>
<script type="text/javascript">
<!--
function GetUnity() {
if (typeof unityObject != "undefined") {
return unityObject.getObjectById("unityPlayer");
}
return null;
}
var params = {
backgroundcolor: "aeaeae",
bordercolor: "000000",
textcolor: "FFFFFF",
logoimage: "loading_title.png",
progressbarimage: "loading_bar_fill.png",
progressframeimage: "loading_bar_frame.png"
};
if (typeof unityObject != "undefined") {
unityObject.embedUnity("unityPlayer", "Test.unity3d", 960, 540, params);
}
-->
</script>
<style type="text/css">
<!--
var config = {
width: window.innerWidth,
height: window.innerHeight,
params: { enableDebugging:"0" }
};
-->
</script>
<style type="text/css">
<!--
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: white;
color: black;
text-align: center;
margin:0px;
padding:0px;
width:100%;
height:100%;
}
a:link, a:visited {
color: #000;
}
a:active, a:hover {
color: #666;
}
p.header {
font-size: small;
}
p.header span {
font-weight: bold;
}
p.footer {
font-size: x-small;
}
div.content {
margin: auto;
width: 100%;
height:100%;
}
div.missing {
margin: auto;
position: relative;
top: 50%;
width: 193px;
}
div.missing a {
height: 63px;
position: relative;
top: -31px;
}
div.missing img {
border-width: 0px;
}
div#unityPlayer {
cursor: default;
height: 100%;
width: 100%;
}
embed
{
width:100% !important;
}
-->
</style>
</head>
<body>
<div class="content">
<div id="unityPlayer">
<div class="missing">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
</a>
</div>
</div>
</div>
</body>
</html>
If this is possible to achieve, how could I get it working? Any help would be greatly appreciated.