koobas.hobune.stream
WebPlayer HTML Object Resize (with Aspect Ratio)
Hello everyone, good afternoon.
My name is Remedio and I'm having some issues on setting up a proper WebPlayer HTML where it would be resizable at runtime but following an Aspect Ratio pre-defined.
First of all I have searched for two days for something that would help me, but so far I only found solutions to Resizable with 100% of the window size (which uses only CSS properties, not Javascript) - With full screen resizable I have a template working perfectly.
Ok,let me show you my current code:
<!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>Window 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 nome_arquivo = "gameName.unity3d";
var disableRightClick = true;
var disableFullScreen = true;
var desiredWidth = 16;
var desiredHeight = 9;
var larguraFinal = 0;
var alturaFinal = 0;
CalculateUnitySize();
var config = {
width: larguraFinal,
height: alturaFinal,
params: { enableDebugging:"0" }
};
config.params["disableContextMenu"] = disableRightClick;
config.params["disableFullscreen"] = disableFullScreen;
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], nome_arquivo);
});
function CalculateUnitySize()
{
var alturaTela = window.innerHeight;
var larguraTela = window.innerWidth;
if (desiredHeight > desiredWidth)
{
if (larguraTela > alturaTela * (desiredWidth / desiredHeight))
{
alturaFinal = alturaTela;
larguraFinal = parseInt(alturaFinal * (desiredWidth / desiredHeight));
}
else
{
larguraFinal = larguraTela;
alturaFinal = parseInt(larguraFinal * (desiredHeight / desiredWidth));
}
}
else
{
if(alturaTela > larguraTela * (desiredHeight / desiredWidth))
{
larguraFinal = larguraTela;
alturaFinal = parseInt(larguraFinal * (desiredHeight / desiredWidth));
}
else
{
alturaFinal = alturaTela;
larguraFinal = parseInt(alturaFinal * (desiredWidth / desiredHeight));
}
}
}
-->
</script>
<style type="text/css">
<!--
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: #000000;
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.missing {
margin: auto;
position: relative;
top: 50%;
width: 193px;
}
div.missing a {
height: 63px;
position: relative;
top: -31px;
}
div.missing img {
border-width: 0px;
}
-->
</style>
</head>
<body>
<body marginheight="0" topmargin="0" vspace="0" marginwidth="0" leftmargin="0" hspace="0" style="margin:0; padding:0">
<center>
<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>
</center>
</body>
</html>
This is working perfectly when I only start the browser (it will calculate the correct Aspect Ration and show the object of the right size). However, if I manipulate the window (resize, maximize, etc) the object will have the original size.
What I need is figure how to call that "CalculateUnitySize()" function of mine everytime the browser detects it has been resized. I have no idea how to do that. And also, how to inform the Unity object that it must resize too.
Please help me :)
Thanks in advance for everyone.
Remedio
So, I found that I can add:
window.onresize = CalculateUnitySize;
In my script. It works great, as it is triggered every time the browser is resized (and returns the correct values). The issue now is only to pass those values to the unity object itself.
Some people say to use:
document.getElementById('unityPlayer').style.width=larguraFinal;
document.getElementById('unityPlayer').style.height=alturaFinal;
But the object ins't updated at all!
Any help please!
Okay, only as a headsup what I'm currently doing is having a 100% area of the browser player and then, inside Unity object itselft I use cameras to give me the Aspect Ratio I want (with other cameras rendering the letter box or pillar box areas).
$$anonymous$$ore details on how to use those cameras can be found here: http://gamedesigntheory.blogspot.ie/2010/09/controlling-aspect-ratio-in-unity.html
@Remedio.tv Did you ever figure out how to pass those values to the UnityObject, or are you using the Unity Camera to change the Aspect Ratio?
Also, could you share your solution?
