koobas.hobune.stream
Customizing the Unity Web Player loading screen
I have the Problem i not understand....at witch place i can cahnge this code or write this code...can someone Help....
Doing this is only possible with Unity Pro, but if you do have Unity Pro (I don't) I think you need to put this part:
var params = { backgroundcolor: "A0A0A0", // This part changes the backround color bordercolor: "000000", // This part changes the border color textcolor: "FFFFFF", // This part changes the color of some text. logoimage: "MyLogo.png", // What splash logo do you want? progressbarimage: "MyProgressBar.png", // What loading bar do you want? progressframeimage: "MyProgressFrame.png" // What loading bar border do you want? };
unityObject.embedUnity("unityPlayer", "WebPlayer.unity3d", 600, 450, params);
In between in your HTML file.
In unityObject.embedUnity(), I'm not sure what the "unityPlayer" thing is, but "WebPlayer.unity3d" should be replaced with the relative pathname to your unity3d file, 600, 450 are the width/height.
Edit: I think that the "unityPlayer" thing is a way for the browser to know what kind of plugin is needed - change at your own risk.
Edit: Actually, "unityPlayer" is a way for the browser to know which object has the player in it. Credit to the commentator below.
"unityPlayer" is just the ID of the HT$$anonymous$$L DO$$anonymous$$ object to replace.
you need to put this vars in the hmtl generated by unity when you press build&run for example webplayer.html with this code is the part code of the webplayer.html. (u can see it and know what u need to change.
sorry for my english!!
function GetUnity() { if (typeof unityObject != "undefined") { return unityObject.getObjectById("unityPlayer"); } return null; } if (typeof unityObject != "undefined") { var params = { **place to put your code!!!**
};
unityObject.embedUnity("unityPlayer", "WebPlayer.unity3d", 600, 512, params);
}
-->
EDIT
Just answered my own question by trial and error. The logo image must be a 24-bit PNG. JPGs get ignored. 8-bit PNGs look like dog crap.
Having trouble getting my company logo to show up on the splash screen. Does it have to be PNG or will a JPG work?
Hi Guys
There has been lot of questions & confusions on how to customize the loading screen .There is one generic answer to the solution given above in the link however sometime with new versions this does not work .So after some more R&D below is the complete solution & the script with modification areas.
Online build --- 1. Create a build using unity3d with setting as web player under Build settings . 2. Once build is created browse the folder where the html & unity3d files are created 3. Right click on the html file & edit the areas shown below
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>NAME OF THE PROJECT</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 params = { backgroundcolor: "ffffff", bordercolor: "6f6e6e", textcolor: "FFFFFF", logoimage: "image.png", (this image should not be bigger then output frame size for e.g if the output frame size is 1024x768 the image should not be bigger then 1000 x 750 else there will be no space left for loading & system will ignore the image- SHOULD BE PLACED IN SAME FOLDER CONTAINING .html & .unity3d) progressbarimage: "Progress_Bar.png",( this will be progress bar design .If using Photoshop cut this on same size as the frame- SHOULD BE PLACED IN SAME FOLDER CONTAINING .html & .unity3d ) progressframeimage: "Progress_Bar_Base.png"(this will be for base of progress bar- SHOULD BE PLACED IN SAME FOLDER CONTAINING .html & .unity3d )
};
var u = new UnityObject2({ params: params });
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], "PROJECT NAME.unity3d");
});
</script>
<style type="text/css">
<!--
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: white;
color: black;
text-align: center;
margin: 0px;(TO REMOVE SOME SPACE ABOVE AND AROUND WHEN PLAYING IN BROWSER)
padding: 0px;(TO REMOVE SOME SPACE ABOVE AND AROUND WHEN PLAYING IN BROWSER)
}
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: 1024px;
}
div.broken,
div.missing {
margin: auto;
position: relative;
top: 50%;
width: 193px;
}
div.broken a,
div.missing a {
height: 63px;
position: relative;
top: -31px;
}
div.broken img,
div.missing img {
border-width: 0px;
}
div.broken {
display: none;
}
div#unityPlayer {
cursor: default;
height: 768px;
width: 1024px;
}
-->
</style>
</head>
<body>
Unity Web Player | PROJECT NAME
(CAN BE REMOVED TO HAVE MORE SPACE ON TOP)
« created with Unity »
(CAN BE REMOVED TO HAVE MORE SPACE ON BOTTOM)When you create this try running this on offline mode see what happens this will not run below is the process for offline creation
Offline build --- 1. Create a build using unity3d with setting as web player under Build settings . 2. Check on the offline deployment option under Build settings 3. Once build is created browse the folder where the html , unity3d & 2 js files are created(jquery.min.js & UnityObject2.js) 4. Right click on the html file & edit the areas shown below
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity Web Player | PROJECT NAME</title>
<script type='text/javascript' src='jquery.min.js'></script>
<script type="text/javascript">
<!--
var unityObjectUrl = "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 params = {
backgroundcolor: "ffffff",
bordercolor: "6f6e6e",
textcolor: "FFFFFF",
logoimage: "image.png",(SAME AS ABOVE)
progressbarimage: "Progress_Bar.png",(SAME AS ABOVE)
progressframeimage: "Progress_Bar_Base.png"(SAME AS ABOVE)
};
var u = new UnityObject2({ params: params });
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], "PROJECT NAME.unity3d");
});
-->
</script>
<style type="text/css">
<!--
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: white;
color: black;
text-align: center;
margin: 0px;(SAME AS ABOVE)
padding: 0px;(SAME AS ABOVE)
}
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: 1024px;
}
div.broken,
div.missing {
margin: auto;
position: relative;
top: 50%;
width: 193px;
}
div.broken a,
div.missing a {
height: 63px;
position: relative;
top: -31px;
}
div.broken img,
div.missing img {
border-width: 0px;
}
div.broken {
display: none;
}
div#unityPlayer {
cursor: default;
height: 768px;
width: 1024px;
}
-->
</style>
</head>
<body>
(REMOVED HEADER TO GAIN SPACE)
<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 class="broken">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now! Restart your browser after install.">
<img alt="Unity Web Player. Install now! Restart your browser after install." src="http://webplayer.unity3d.com/installation/getunityrestart.png" width="193" height="63" />
</a>
</div>
</div>
</div>
(REMOVED FOOTER TO GAIN SPACE)
</body>
Hope this will be helpful for all looking for the info..
