自定义Unity Web Playe 载入界面

我找到一篇关于自定义 Unity Web Player 载入界面实现过程的文章，对此感兴趣的同学可以参考一下。

1. 默认载入界面与可自定义参数

在默认情况下，Unity Web Player 会显示一个小的 Unity 标志和一个进度条，用于加载网页播放器的内容。不过，其外观是可以自定义的，包括载入画面中的标志和进度条显示。可以向 Unity Object 传递 6 个可选参数，用于自定义 Unity Web Player 载入画面的外观，具体如下：

• backgroundcolor：在加载过程中，网络播放器内容显示区域的背景颜色，默认值为白色。
• bordercolor：在加载过程中，网络播放器内容显示区域周围绘制一个像素边框的颜色，默认值为白色。
• textcolor：错误消息文本的颜色（例如，当数据文件加载失败时）。默认值根据背景颜色而定，为黑色或白色。
• logoimage：自定义徽标图像的路径，该标志图像会绘制在加载过程中网络播放器内容显示区域范围内。
• progressbarimage：在加载过程中，进度条使用的自定义图像的路径。进度条图像的宽度会根据已完成的文件加载量进行裁剪，加载开始时宽度为零像素，随着加载完成逐渐动画处理到其原始宽度。进度条会绘制在标志图像下方。
• progressframeimage：用于帧加载进度条的自定义图像的路径。

注意事项

• 所有提供的颜色值必须是 6 位数字的十六进制颜色，例如 FFFFFF、020F16 等。
• 所提供的图像路径可以是相对路径或绝对路径。
• 所有图片必须以每通道 8 位的 PNG 文件格式存储，格式可以是 RGB（不透明度）或 RGBA（透明度）。
• progressframeimage 和 progressbarimage 的高度应该相同。

2. 自定义方法

自定义载入界面的方法是修改发布后的 UnityObject2.js 文件，以下是相关代码示例：

embedPlugin: function (targetEl, callback) {
// ...
if (ua.win && ua.ie) {
// ie, dom and object element do not mix & match
var at = "";
at += 'codebase="http://webplayer.unity3d.com/download_webplayer-2.x/UnityWebPlayer.cab#version=2,0,0,0"';
var pt = "";
pt += '<param name="src" value="' + src + '" />';
pt += '<param name="firstFrameCallback" value="UnityObject2.instances[' + instanceNumber + '].firstFrameCallback();"/>';
// 背景色
pt += '<param name="backgroundcolor" value="000000"/>';
pt += '<param name="bordercolor" value="FFFFFF"/>';
pt += '<param name="textcolor" value="FFFFFF"/>';
// logo 图片（格式必须为 PNG）
pt += '<param name="logoimage" value="logo.png" />';
// 进度条图片（格式必须为 PNG）
pt += '<param name="progressbarimage" value="tree.png"/>';
// 进度条背景图片（格式必须为 PNG）
pt += '<param name="progressframeimage" value="tree.png" />';
for (var i in cfg.params) {
if (cfg.params.hasOwnProperty(i)) {
if (i.toLowerCase() !== "classid") {
pt += '<param name="' + i + '" value="' + cfg.params[i] + '" />';
}
}
}
var tmpHtml = '<object classid="clsid:444785F1-DE89-4295-863A-D46C3A781394" style="display: block; width: ' + _appendPX(width) + '; height: ' + _appendPX(height) + ';"' + at + '>' + pt + '</object>';
var $object = jQuery(tmpHtml);
targetEl.append($object);
embeddedObjects.push(targetEl.attr('id'));
unityObject = $object[0];
} else {
// ...
}

在上述代码中，我们可以看到通过修改 UnityObject2.js 文件，向 param 标签中添加自定义参数，从而实现对 Unity Web Player 载入界面的自定义。例如，将背景色设置为黑色（000000），边框颜色设置为白色（FFFFFF）等。同时，要确保所引用的图片文件（如 logo.png、tree.png）存在且格式符合要求。