返回介绍

自定义 Unity 网络播放器 (Web Player) 加载屏幕

发布于 2021-06-19 18:03:24 字数 3968 浏览 1002 评论 0 收藏 0

Unity 网络播放器 (Web Player) 在加载内容时默认显示一个小的 Unity 徽标和进度条。可以自定义加载屏幕的外观,包括徽标和进度条显示。

请注意,只有 Unity 专业版可以修改载入程序图像。

有六个可选参数可以传递给 UnityObject,用来自定义 Unity 网络播放器 (Web Player) 加载屏幕的外观。它们分别是:

  • backgroundcolor:加载时网络播放器内容显示区域的背景色,默认为白色。
  • bordercolor:加载时网络播放器内容显示区域的边框色,默认为白色。
  • textcolor:错误信息文本的颜色(如数据文件加载失败时)。默认为黑色或白色,根据背景色而定。
  • logoimage:自定义徽标图像的路径。加载时徽标图像位于网络播放器内容显示区域的中央。
  • progressbarimage:加载时用作进度条的自定义图像路径。进度条图像的宽度根据完成的文件加载量进行裁剪,采用动画效果,从零像素宽开始直至加载完成时到达原始宽度。进度条位于徽标图像下方。
  • progressframeimage: 加载时将进度条框起来的自定义图像路径。

提供 的所有颜色值必须为六位数十六进制颜色(如 FFFFFF、020F16 等)。提供 的图像路径可以是相对链接或绝对链接,所有图像文件必须为 RGB 格式(不透明)或 RGBA 格式(透明)以 8 位数/通道保存的 PNG 文件。最后,progressframeimage 和 progressbarimage 的高度应相等。

以下是自定义 Unity 网络播放器 (Web Player) 加载屏幕外观的脚本示例。背景色设为浅灰 (A0A0A0),边框颜色为黑色 (000000),文本颜色为白色 (FFFFFF),载入程序图像为 MyLogo.png、MyProgressBar.png 和 MyProgressFrame.png。所有参数列入单个 params 对象组,并传递给 UnityObject2 构造函数

var params = {
	backgroundcolor: "A0A0A0",
	bordercolor: "000000",
	textcolor: "FFFFFF",
	logoimage: "MyLogo.png",
	progressbarimage: "MyProgressBar.png",
	progressframeimage: "MyProgressFrame.png"
};
var u = UnityObject2({ params: params });
u.initPlugin(jQuery("#unityPlayer")[0], "Example.unity3d");

请参阅 UnityObject2 了解更多详细信息。

示例使用以上代码段:

<!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 params = {
			backgroundcolor: "A0A0A0",
			bordercolor: "000000",
			textcolor: "FFFFFF",
			logoimage: "MyLogo.png",
			progressbarimage: "MyProgressBar.png",
			progressframeimage: "MyProgressFrame.png"
		};
		var u = new UnityObject2({ params: params });
		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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文