Unity Manual>Web Player Deployment>Working with UnityObject2
Previous
Next

Working with UnityObject2

UnityObject2 is a JavaScript script that simplifies Unity content embedding into HTML and allows you to customize the install process. Having a custom install UI that matches your game and website, will create a more engaging and pleasurable experience for the end-user. It has functions to detect the Unity Web Player plugin, initiate Web Player installation and embed Unity content. Although it's possible to deploy UnityObject2.js file on the web server alongside the HTML file it's best to load it directly from the Unity server at http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js or https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.jsfor https support. That way you will always reference the most up to date version of UnityObject2. Please note that the UnityObject2.js file hosted on the Unity server is minified to make it smaller and save traffic. If you want to explore the source code you can find the original file in the Data\Resources folder on Windows and the Contents/Resources folder on Mac OS X. UnityObject2 by default sends anonymous data to GoogleAnalytics which is used to help us identify installation type and conversion rate. UnityObject2 depends on jQuery.

Constructor

You will need to create a new instance of the unityObject2 for each Unity content present on the page.

Parameters:

Notes: 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.

Functions

observeProgress

You can register a callback that will receive notifications during the plugin installation and/or initialization.

Parameters:

initPlugin

This will actually try to start up your game. And call the callback you previously registered at the appropriated moments. Note that

Parameters:

Notes: This function should be called after the containerElement is present on the DOM, to be safe, you could wait for the DOM to load completely before calling it.

installPlugin

Tries to install the plugin using the specified method. If no method is passed, it will try to use this.getBestInstallMethod().

Parameters:

Notes: Not all methods are available in every platform/browser. Manual will download an exe/dmg installer and the user will need to perform a manual installation.

getUnity

This will return a reference to the player, so you can Call SendMessage from it for instance.

Notes: Will return null if the WebPlayer has not been initialized yet.

Example: This exemplifies a very simple UnityObject2 usage. If the user already has the plugin installed, the WebPlayer will load normally, otherwise it will reveal a hidden div.missing and attach a click event to the install button. After installation is succeeded, the screen is hidden, and the webplayer is loaded normally. 

<!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>
        <title>Unity Web Player | "Sample"</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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 u = new UnityObject2();
		u.observeProgress(function (progress) {
			var $missingScreen = jQuery(progress.targetEl).find(".missing");
			switch(progress.pluginStatus) {
				case "unsupported":
					showUnsupported();
				break;
				case "broken":
					alert("You will need to restart your browser after installation.");
				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;
			}
		});
		jQuery(function(){
			u.initPlugin(jQuery("#unityPlayer")[0], "Example.unity3d");
		});
        </script>
    </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">&laquo; created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> &raquo;</p>
	</body>
</html>

Page last updated: 2013-01-21

Previous
Next