koobas.hobune.stream
How do I make the Unity web player resize at runtime?
I'm trying to make a web game that fills the user's browser window, and updates if the user re-sizes the browser window, like this:
This is the HTML that I'm using:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Game Title</title>
<script type='text/javascript' src='https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/jquery.min.js'></script>
<script type="text/javascript">
<!--
var unityObjectUrl = "http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js";
if (document.location.protocol == 'https:')
unityObjectUrl = unityObjectUrl.replace("http://", "https://ssl-");
document.write('<script type="text\/javascript" src="' + unityObjectUrl + '"><\/script>');
-->
</script>
<script type="text/javascript">
<!--
var config = {
width: window.innerWidth,
height: window.innerHeight,
params: { enableDebugging:"0" }
};
var u = new UnityObject2(config);
jQuery(function() {
var $missingScreen = jQuery("#unityPlayer").find(".missing");
var $brokenScreen = jQuery("#unityPlayer").find(".broken");
$missingScreen.hide();
$brokenScreen.hide();
u.observeProgress(function (progress) {
switch(progress.pluginStatus) {
case "broken":
$brokenScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$brokenScreen.show();
break;
case "missing":
$missingScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$missingScreen.show();
break;
case "installed":
$missingScreen.remove();
break;
case "first":
break;
}
});
u.initPlugin(jQuery("#unityPlayer")[0], "BoobieClicker.unity3d");
});
function GetUnity ()
{
var unity = document.getElementById("UnityObject");
if(unity == null) {
unity = document.getElementById("UnityEmbed");
}
return unity;
}
function resizeUnity()
{
var minW = 990;
var w;
if(document.all)
{
w = document.body.offsetWidth;
}
else
{
w = window.innerWidth;
}
if(w < minW)
w = minW;
var unity = GetUnity();
unity.style.width = w;
}
-->
</script>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
div#unityPlayer {
cursor: default;
height: 100%;
width: 100%;
}
-->
</style>
</head>
<body onLoad="resizeUnity()" onResize="resizeUnity()">
<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>
The body tag is supposed to call resizeUnity() whenever the window is re-sized, but it doesn't seem to be working.
I've tested in Firefox and Chrome.
What am I doing wrong? :(
Best Answer
You don't need to resize it every time. This people have done awesome job. Check it here.
They are setting height of html and body element to 100% and making the height and width of the player 100% in teh config. Just go through the link and download the templates.
Thank you! You are a gentleman, a scholar, and a livesaver!
