Unity发布Web版进行自适应

用unity制作的产品发布成网页版，里面内嵌的UI需要做适应，当网页的分辨率发生变化的时候，或者屏幕大小发生变化的时候，能够让UI面板清楚出现在视野之中，而不需要去寻找，需要对发布出来的.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 | UGUITest</title>
        <script type='text/javascript' src='https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/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 config = {
                width: 1280, 
                height: 960,
                params: { enableDebugging:"0" }

            };
            var u = new UnityObject2(config);

            jQuery(function() {

                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], "ttt.unity3d");
            });
        -->
        </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: 1280px;
        }
        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: 960px;
            width: 1280px;
        }
        -->
        </style>
    </head>
    <body>
        <p class="header"><span>Unity Web Player | </span>UGUITest</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 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>

将代码从script type=”text/javascript”处开始替换，直到最后一个标签body处，全部替换完成即可达到需要的效果。

<script type="text/javascript">
<!--
var config = {
width: '100%', //设置成100%
height: '100%' //设置成100%
};
var u = new UnityObject2(config);
jQuery(function() {
u.initPlugin(jQuery("#unityPlayer")[0], "ttt.unity3d");
});
-->
    </script>
    <style type="text/css">
        <!--
        html, body {
            height: 100%;
            margin: 0px auto;
        }

         div#unityPlayer {
            width: 100%;
           margin: 0 auto;
            background: #FFFF00;
            height: 100%;

        }
        -->
    </style>
</head>
<body>
    <div id="unityPlayer">
    </div>
</body>

需要注意的一点就是initPlugin函数的参数”ttt.unity3d”是根据自己对项目的命名来的。
以上内容参考了博客：http://blog.csdn.net/dingxiaowei2013/article/details/17007177

接下来的内容是为网页添加Logo还有去除右键提示的功能。
只需要在Var config中加入以下内容：
params: { backgroundcolor: “000000”, logoimage: “logo.png”, bordercolor: “000000”, disableContextMenu: true },

把图标放到对应文件夹中就完成了。

Unity发布Web版进行自适应

猜你喜欢