Unity WebPlayer自定义进度条界面

最新推荐文章于 2024-08-11 14:46:43 发布

TxNet.Ltd.

最新推荐文章于 2024-08-11 14:46:43 发布

阅读量3.5k

点赞数 2

分类专栏： Unity 文章标签： unity html web webplayer loading

本文链接：https://blog.csdn.net/yupu56/article/details/50605229

版权

Unity 专栏收录该内容

158 篇文章 180 订阅

订阅专栏

使用unity 的WebPlayer的时候，显示的是Unity的自己的进度条和Logo，现在想发布正式版的时候需要改成自己公司的Logo，和自定义的进度条，在网上一搜，还不少，都是这方面的资料，但是改完之后，并不奏效，然后打开了官网： Customizing the Unity Web Player loading screen。官网总不会欺骗我吧！！！最后终于是OK了，但是还是碰到不少问题，

1.图片格式问题。2.图片路径问题。3.代码的注释等，对于不了解HTML和JS代码的人，修改这个启动页真的是费老大劲了。最后请教了一个做网页的大神，直接给我写了个HTML替换Unity自带的WebPlayer.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 | web_loading</title>
    <script type='text/javascript' src='https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/jquery.min.js'></script>
</head>
<body><div style="width:screen.width;height:screen.height;text-align:center;">
    <object id="UnityObject" classid="clsid:444785F1-DE89-4295-863A-D46C3A781394" codebase="http://webplayer.unity3d.com/download _ webplayer-2.x/UnityWebPlayer.cab#version=2,0,0,0">
        <param name="src" value="WebPlayer.unity3d" />
        <param name="backgroundcolor" value="FFFFFF" />
        <param name="bordercolor" value="FFFFFF" />
        <param name="textcolor" value="FFFFFF" />
        <param name="logoimage" value="unityLo.png" />
        <param name="progressbarimage" value="unity_bar.png" />
        <param name="progressframeimage" value="unity_frame.png" />
    </object>
    </div>
</body>
</html>

自定义的图片就放到和你的.Unity3d 文件在一个路径下；如图

另外我还有一个需求就是全屏，这个有两种意思，1.跟电脑屏幕一样大，2.跟浏览器窗口一样大，我要实现的是第二种，因为跟电脑屏幕一样大的话会有滚动条，很恶心。

下面也是直接上代码，使用了JavaScript的获取窗口大小，然后动态设置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 | web_loading</title>
    <script type='text/javascript' src='https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/jquery.min.js'></script>
</head>
<body  style=" margin-left: 0px; margin-top: 0px; overflow:hidden;">

        <object id="UnityObject" classid="clsid:444785F1-DE89-4295-863A-D46C3A781394" codebase="http://webplayer.unity3d.com/download _ webplayer-2.x/UnityWebPlayer.cab#version=2,0,0,0">
            <param name="src" value="WebPlayer.unity3d" />
            <param name="backgroundcolor" value="FFFFFF" />
            <param name="bordercolor" value="FFFFFF" />
            <param name="textcolor" value="FFFFFF" />
            <param name="logoimage" value="unity_logo.png" />
            <param name="progressbarimage" value="unity_bar.png" />
            <param name="progressframeimage" value="unity_frame.png" />
        </object>

</body>
<script type="text/javascript">
    var winWidth = 0;
    var winHeight = 0;
    function findDimensions() //函数：获取尺寸
    {
        //获取窗口宽度
        if (window.innerWidth)
            winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
        //获取窗口高度
        if (window.innerHeight)
            winHeight = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
            winHeight = document.body.clientHeight;

        //通过深入Document内部对body进行检测，获取窗口大小
        if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
            winHeight = document.documentElement.clientHeight;
            winWidth = document.documentElement.clientWidth;
        }
        //结果输出至两个文本框
        //document.form1.availHeight.value = winHeight;
        //document.form1.availWidth.value = winWidth;
        document.getElementById("UnityObject").style.width = winWidth  + "px";
        document.getElementById("UnityObject").style.height = winHeight  + "px";
    }
    findDimensions();//调用函数，获取数值
    window.onresize = findDimensions;
</script>
</html>