koobas.hobune.stream
Unity 3.0 Webplayer at 100%
I have run into a problem when I change the 800 and 600 to 100%. It does not properly size the window to full screen. Instead I get a squashed screen.
html code:
unityObject.embedUnity("unityPlayer", "WebPlayer.unity3d", 800, 600, params);
My solution to this problem was to use a small piece of javascript to find the dimentions of the webpag, before creating the unity object, then using thes values as the height and width.
Chriz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Unity Web Player | WebPlayer
if (typeof unityObject != "undefined") { return unityObject.getObjectById("unityPlayer"); } return null; } if (typeof unityObject != "undefined") {
var myWidth = 0, myHeight = 0, borderSize = 20;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth - borderSize;
myHeight = window.innerHeight - borderSize;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth - borderSize;
myHeight = document.documentElement.clientHeight - borderSize;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth - borderSize;
myHeight = document.body.clientHeight - borderSize;
}
var params = {
backgroundcolor: "000000",
bordercolor: "000000",
textcolor: "FFFFFF",
//logoimage: "MyLogo.png",
//progressbarimage: "MyProgressBar.png",
//progressframeimage: "MyProgressFrame.png"
disableContextMenu: true
};
unityObject.embedUnity("unityPlayer", "WebPlayer.unity3d", myWidth, myHeight, params);
}
-->
</script>
<style type="text/css">
<!--
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: black;
color: white;
text-align: center;
}
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%;
}
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%;
}
-->
</style>
</head> <body> <!-- <p class="header"><span>Unity Web Player | </span>WebPlayer</p> --> <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> <!-- <p class="footer">« created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> »</p> --> </body>
That is good, but lacks an event handler to serve the browser window resizing event. I am going to make my own embedding template comprising a bottom div strip of 100% width and some 120px height and the WebPlayer on the top of the page; 100% width, the rest of the heigh. This could be good starting point for that.
Have been fighting with that quite a bit, added the resize handlers and finally put my findings into the form of blog post: http://virtualplayground.d2.pl/WP/?p=367 Welcome to test, download and use if like.
Hi Spencer,
Yeah it is very hard to get information about the new 3.0 Unity html format I had to go to Wikileaks to get some help (Actually I got some help from some cool Unity guys at Unite 2010)
I have finally got something that works. Attached is my template that I am using for full-screen publishing. It also is set up to customize the player load screen to use custom art and turn off the right-click menu pop-up.
(Replace the WebPlayer.unity3d with your file and you should be good to go)
Have a Merry Christmas - html in your stocking :-) ),
Illya
};
unityObject.embedUnity("unityPlayer", "WebPlayer.unity3d", "100%", "100%", params);
}
-->
</script>
<style type="text/css">
<!--
body {
position:fixed;
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: white;
color: black;
text-align: center;
}
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: 640px;
}
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 {
position:fixed;
cursor: default;
height: 480px;
width: 640px;
}
-->
</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>
<p class="footer">« created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> »</p>
</body>
Could you post the entire .html file? I tried a cut and paste into the default template that Unity creates and it didn't work.
I had to change the tag to:
<body marginheight="0" topmargin="0" vspace="0" marginwidth="0" leftmargin="0" hspace="0" style="margin:0; padding:0">
To get rid of a slight border
Hi Illya,
I'm having a tough time sizing my player to 100% as well. The guys over at Hello Racer (http://www.helloracer.com/) did it but looking at the code, it's a different type of embed.
Is there a parameter that we can pass to UnityObject.js that will play full screen?
Replacing X and Y with 100% just breaks it.
Alas, I am but an artist and codeage makes my head pop.
Thanks for any pointers.
-Spence
Sorry guys - I kept trying to post the whole thing but I think the answer section was actually using it to format (and chop) this post... btw - the top section was so you could customize your web player (replace art and Piano.unity3d with your goodies) - Happy Holidays - Illya
<!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> <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; } if (typeof unityObject != "undefined") { var params = { backgroundcolor: "000000", bordercolor: "000000", logoimage: "Technical_Designs_Splash.png", progressbarimage: "Technical_Designs_ProgressBar.png", progressframeimage: "Technical_Designs_ProgressFrame.png", disableContextMenu: true
};
unityObject.embedUnity("unityPlayer", "Piano.unity3d", "100%", "100%", params);
}
-->
</script>
<style type="text/css">
<!--
body {
position:fixed;
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: #000000;
color: black;
text-align: center;
}
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: 640px;
}
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 {
position:fixed;
cursor: default;
height: 480px;
width: 640px;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></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>
<p class="footer">&nbsp;</p>
</body> </html>
