Documentation
Resources
Community
Manual     Reference     Scripting   
  
Unity Manual > Advanced > Web Player Deployment > Customizing the Unity Web Player loading screen   
Previous
Next

Customizing the Unity Web Player loading screen

By default the Unity Web Player displays a small Unity logo and a progress bar while loading web player content. It is possible to customize the appearance of that loading screen, including both the logo and progress bar display.

Please note that modifying the loader images is only possible with Unity Pro.

There are six optional object and embed tag parameters that can be used to customize the appearance of the Unity Web Player loading screen. Those optional tag parameters are:

  • backgroundcolor: The background color of the web player content display region during loading, the default is white.
  • bordercolor: The color of the one pixel border drawn around the web player content display region during loading, the default is white.
  • textcolor: The color of error message text (when data file fails to load for example). The default is black or white, depending on the background color.
  • logoimage: The path to a custom logo image, the logo image is drawn centered within the web player content display region during loading.
  • progressbarimage: The path to a custom image used as the progress bar during loading. The progress bar image's width is clipped based on the amount of file loading completed, therefore it starts with a zero pixel width and animates to its original width when the loading is complete. The progress bar is drawn beneath the logo image.
  • progressframeimage: The path to a custom image used to frame the progress bar during loading.

All color values provided must be 6-digit hexidecimal colors, (eg. FFFFFF, 020F16, etc.). The image paths provided can be either relative or absolute links and all image files must be RGB (without transparency) or RGBA (with transparency) 8-bit/channel PNG files. Finally, the progressframeimage and the progressbarimage should be the same height.

Here is an example set of object and embed tags that customize the appearance of the Unity Web Player loading screen. The background color is set to light gray (A0A0A0), border color to black (000000), text color to white (FFFFFF) and loader images to MyLogo.png, MyProgressBar.png and MyProgressFrame.png. 

<object id="UnityObject" classid="clsid:444785F1-DE89-4295-863A-D46C3A781394"
    width="600" height="450"
    codebase="http://webplayer.unity3d.com/download_webplayer/UnityWebPlayer.cab#version=2,0,0,0">
    <param name="src" value="MyDataFile.unity3d" />
    <param name="backgroundcolor" value="A0A0A0" />
    <param name="bordercolor" value="000000" />
    <param name="textcolor" value="FFFFFF" />
    <param name="logoimage" value="MyLogo.png" />
    <param name="progressbarimage" value="MyProgressBar.png" />
    <param name="progressframeimage" value="MyProgressFrame.png" />
    <embed id="UnityEmbed" src="MyDataFile.unity3d" width="600" height="450"
        type="application/vnd.unity" pluginspage="http://www.unity3d.com/unity-web-player-2.x"
        backgroundcolor="A0A0A0" bordercolor="000000" textcolor="FFFFFF" logoimage="MyLogo.png"
        progressbarimage="MyProgressBar.png" progressframeimage="MyProgressFrame.png" />
</object>

Notice that in the above example, the optional tag parameters are included in both the object and embed tag blocks as name/value pairs. It is important to include all tag parameters in both locations in order to ensure that all users see the same loading screen regardless of the browser they are using.

Note: developers that modify the default HTML file created by Unity must be sure to make edits in a few locations due to how that HTML file is structured. The first section to modify is the JavaScript block that detects the Unity Web Player, and if found writes out the object and embed tags. The second section to modify is the noscript block at the end in case the page is viewed by a user with JavaScript disabled. Editing both sections, and both the object and embed tags in each section, will ensure that all users, in all browsers will have the same experience.

Previous
Next