- Home /
Unity Web Player - Custom Loading Screen - PC
Hello Awesome Unity Dev People!
Unity Pro Version 3.40f5
I have a question regarding the Unity Web Player for PC. My custom loading screen is working in Safari, Chrome, Mozilla, and Firefox... but not Internet Explorer. I'm using custom images that are RGB 8 bit and RGBa 8 bit, and the progress frame and progress bar images are the same size. When opened in Internet Explorer, the images appear correctly at first, however, as the progress bar begins to expand to the right, the alpha channeled progress FRAME shrinks to the right - to nothing. It should remain anchored in place as the progress bar expands underneath it.
I think it's almost there, but I can't quite seem to pin down that alpha channeled progress frame so that it doesn't move or shrink to the right.
How can I keep it in place?
If anyone has any suggestions for this, it would be great to hear them.
Attached is the code for it:
if (typeof unityObject != "undefined") {
var params = {
backgroundcolor: "000000",
bordercolor: "000000",
textcolor: "FFFFFF",
logoimage: "MyLogo.png",
progressbarimage: "MyProgressBar.png",
progressframeimage: "MyProgressFrame.png"
};
unityObject.embedUnity("unityPlayer", "WebPlayer.unity3d", 800, 600, 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: #bfbfbf;
}
a:active, a:hover {
color: #bfbfbf;
}
p.header {
font-size: small;
}
p.header span {
font-weight: bold;
}
p.footer {
font-size: x-small;
}
div.content {
margin: auto;
width: 800px;
}
div.missing {
margin: auto;
position: relative;
top: 50%;
width: 256px;
}
div.missing a {
height: 512px;
position: relative;
top: -31px;
}
div.missing img {
border-width: 0px;
}
div#unityPlayer {
cursor: default;
height: 600px;
width: 800px;
}
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
"$$anonymous$$y (fill in the blank) is working in Safari, Chrome, $$anonymous$$ozilla, and Firefox... but not Internet Explorer." - Every web developer everywhere.
Answer by diegoleao · Mar 12, 2012 at 08:23 AM
This happens when you open the web player html file on a browser directly. You shouldn't just run the player by clicking on the "html" file, you must put it on a web server that can properly interpret it.
Other problems include not being able to download the player when you click the "missing plugin" message/image.
I recommend you to set up a localhost server to properly test your Unity Web Player script!
There isn't anything wrong with running/executing the html file locally on your machine, you DO NOT have to have it on a web server whatsoever unless there are dependencies. But even then it all depends on how URI/L are structured.
And that doesn't seem to be the case here, the problem @Seth seems to be having is the differences in compatibility within the browsers.
Answer by okokok · Nov 30, 2012 at 08:59 PM
IT WORK YOU PUT PIC in folder Game
<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: "A0A0A0",
bordercolor: "000000",
textcolor: "FFFFFF",
logoimage: "MyLogo.png",
progressbarimage: "MyProgressBar.png",
progressframeimage: "MyProgressFrame.png"
};
if (typeof unityObject != "undefined") {
unityObject.embedUnity("unityPlayer", "WebPlayer.unity3d", 600, 450, params);
}
-->
</script>
<style type="text/css">
<!--
body {
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: 600px;
}
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: 450px;
width: 600px;
}
-->
</style>
<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>