返回介绍
文江博客 开发文档 Unity3D 中文用户手册 文章详情

使用网络播放器模版

发布于 2021-06-19 18:03:27 字数 6248 浏览 937 评论 0 收藏 0

构建网络播放器工程时，Unity 将播放器嵌入到 HTML 页面中，以便可以在浏览器中播放。默认页面非常简单，只有白色背景和部分最小文本。事实上，该页面有三种不同形式，可从播放器设置 (Player Settings) 检视器（菜单：编辑 (Edit) > 工程设置 (Project Settings)> 播放器 (Player)）中选择。

内置 HTML 页面可以用来测试和显示最小化播放器，但是出于制作目的，通常来说看到播放器托管在最终部署的页面是大家所乐见的。例如，如果 Unity 内容通过外部调用接口与页面上的其他元素交互，那么就必须经过提供 这些交互元素的页面测试。Unity 允许通过使用网络播放器模版提供 自己的页面来托管播放器。

网络播放器模版的架构

通过在资源 (Assets) 文件夹中创建一个名为 “WebPlayerTemplates” 的文件夹将自定义模版添加到工程当中，模版本身为该文件夹下的子文件夹。每个模版文件夹包含一个 index.html 或 index.php 文件，以及页面需要的任何其他资源，如图像或样式表。

建完后模版会出现在播放器设置 (Player Settings) 检视器的选项中（模版名称与其文件夹名称相同）。视情况需要，文件夹可包含一个名为 thumbnail.png 的文件，尺寸为 128x128 像素。缩略图将显示在检视器中，提示完成的页面的显示效果。

模版标签

创建过程中，Unity 会在页面文本中查找一个特殊的标签字符串，并以编辑器提供 的值替换它们。其中包括名称、屏幕尺寸及关于播放器的许多其他有用信息。

在页面源代码中，标签限定在百分比符号 (%) 内。例如，如果产品名称在播放器设置 (Player Settings) 中定义为 “MyPlayer”：-

<title>%UNITY_WEB_NAME%</title>

…在模版的索引文件中会被替换为

<title>MyPlayer</title>

…生成构建的主机页。完整标签如下：-

UNITY_WEB_NAME
网络播放器的名称。

UNITY_WIDTH
UNITY_HEIGHT
播放器屏幕的宽和高（以像素表示）。

UNITY_WEB_PATH
网络播放器文件的本地路径。

UNITY_UNITYOBJECT_LOCAL
名为 UnityObject2.js 的浏览器 JavaScript 文件一般用于嵌入主机页的播放器中，并提供 Unity 与主机 JavaScript 之间的部分交互。一般通过从 Unity 网站上下载来提供 给页面。但是需要有 Internet 连接，如果页面从用户的硬盘驱动器中脱机部署，会引发问题。该标签为 UnityObject.js 文件提供 本地路径，如果在构建设置 (Build Settings) 中启用脱机部署 (Offline Deployment) 就会生成。

UNITY_UNITYOBJECT_URL
一般情况下，页面会从 Unity 网站（例如禁用脱机部署 (Offline Deployment) 选项）上下载 UnityObject2.js，该标签会提供 下载链接。

UNITY_UNITYOBJECT_DEPENDENCIES
UnityObject2.js 具有相关性，该标签会被所需的依赖关系替代，以便正常工作。

UNITY_BETA_WARNING
如果网络播放器已发布了 Unity 测试版，该标签会被一条有关该事实的简短警告信息所替代。否则不会被任何内容替代。

UNITY_CUSTOM_SOME_TAG
如果以 UNITY_CUSTOM_XXX 的格式给索引文件添加标签，那么选择模版时该标签会出现在播放器设置 (Player Settings) 中。例如，如果像

<title>Unity Web Player | %UNITY_CUSTOM_MYTAG%</title>

…这样的内容添加到源代码中，播放器设置 (Player Settings) 会变成：-

标签名称旁的文本框包含发布期间自定义标签会被替换的文本。

示例

为了说明模版标签的用法，以下是 Unity 用于其默认网络播放器发布的 HTML 源代码。

<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Unity Web Player | %UNITY_WEB_NAME%</title>
		%UNITY_UNITYOBJECT_DEPENDENCIES%
		<script type="text/javascript">
		<!--
		var unityObjectUrl = "%UNITY_UNITYOBJECT_URL%";
		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">
		<!--
			jQuery(function() {
				var config = {
					width: %UNITY_WIDTH%, 
					height: %UNITY_HEIGHT%,
					params: %UNITY_PLAYER_PARAMS%
				};
				var u = new UnityObject2(config);

				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], "%UNITY_WEB_PATH%");
			});
		-->
		</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: %UNITY_WIDTH%px;
		}
		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: %UNITY_HEIGHT%px;
			width: %UNITY_WIDTH%px;
		}
		-->
		</style>
	</head>
	<body>
		<p class="header"><span>Unity Web Player | </span>%UNITY_WEB_NAME%</p>%UNITY_BETA_WARNING%
		<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>
		<p class="footer">&laquo; created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> &raquo;</p>
	</body>
</html>

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

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

发布评论

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