2. 程式人生 > >Unity釋出Web版進行自適應

Unity釋出Web版進行自適應

阿新 • • 發佈：2019-01-27

用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>

接下來的內容是為網頁新增Logo還有去除右鍵提示的功能。
只需要在Var config中加入以下內容：
params: { backgroundcolor: “000000”, logoimage: “logo.png”, bordercolor: “000000”, disableContextMenu: true },

把圖示放到對應資料夾中就完成了。

相關推薦

Unity釋出Web版進行自適應

用unity製作的產品釋出成網頁版，裡面內嵌的UI需要做適應，當網頁的解析度發生變化的時候，或者螢幕大小發生變化的時候，能夠讓UI面板清楚出現在視野之中，而不需要去尋找，需要對釋出出來的.html檔案進行修改，參考了網上的一篇文章，進行了實驗，直接進行部分內容的

Unity釋出web版遇到的問題

搭建本地IIS伺服器 注意幾個點：  windows啟用IIS服務，能啟用就都啟用吧，要不缺這缺那的。配置MIME檔案型別，要不不識別unity3d檔案防火牆，照著下面的連結做就ok了。（新增入站規則，把伺服器的埠開放。） 使用www通訊遇到的問題 跨

[unity3d]unity打包web版後自定義載入圖片

/**********************************************************/ <script type="text/javascript"> var params = {

JeeSite 4.0 彩38完整修復版+H5自適應手機版網站開發環境部署運行調試

res not amp charset collate 3.3 end 最好 mapper 環境要求 1、彩38完整源碼下載+帶H5自適應手機版下載 2、話仙源碼論壇下載 3、Apache Maven 3.3+ 下載 4、MySql 5.7+ 下載 導入到Eclipse 1

winform 控件隨頁面大小進行自適應

args chang using one 皮膚 control class 創建 過濾 這個功能網上很多人在問，也有不少人給出過答案，經過實際使用，覺得網上這段代碼實現的效果比較好，記錄一下 核心代碼就是下面這個類 1 using System; 2 using

Unity釋出安卓進行模型縮放和旋轉

using UnityEngine; using System.Collections; public class ScaleAndRotate : MonoBehaviour {     private Touch oldTouch1;  //上次觸控點1(手指1)  

移動web圖片高度自適應的解決方案

display 頁面布局 網頁 頁面 osi 完成 defined 取值 ott 由於圖片的加載是在dom加載完成之後進行的，於是，在手機端瀏覽網頁時，經常會看到頁面剛打開時很多內容疊在一起，當圖片加載完成後，頁面會由於圖片加載完成出現明顯的抖動 針對這個問題，有以下幾種

關於使用rem單位，calc()進行自適應佈局

關於css中的單位 大家都知道在css中的單位，一般都包括有px,%,em等單位，另外css3新增加一個單位rem。 其中px，%等單位平時在傳統佈局當中使用的比較頻繁，大家也比較熟悉，不過px單位在進行自適應佈局的過程當中則會有些力不從心，大部分的解決方案

整理H5|web移動前端自適應適配佈局解決方案

1. 簡單問題簡單解決 我覺得有些web app並一定很複雜，比如拉勾網，你看看它的頁面在iphone4,iphone6,ipad下的樣子就知道了： 它的頁面有一個特點，就是： 頂部與底部的bar不管解析度怎麼變，它的高度和位置都不變中間每條招聘資訊不管解析度怎麼變，招聘公司的圖示等資訊都位於

如何進行自適應網頁設計?

這裡是修真院前端小課堂，每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能，本篇分享的是： 【如何進行自適應網頁設計? 】 大家好，我是IT修真院北京總院第24期的學員，一枚正直純潔善

轉：Unity釋出Android版遊戲

Unity配置Android環境，打包釋出Apk流程詳解一：SDK與JDK下載地址：https://pan.baidu.com/s/1PXqFcubyhX-xu5UgXQMbHg（這裡的SDK與JDK下載地址和轉載處的SDK與JDK下載地址不同，轉載處那裡的版本舊了，所以以下

Unity + ZXing + 螢幕旋轉自動自適應 + 自定義掃碼介面

由於使用 ZXing 在unity進行二維碼識別功能的人較多，這邊我也試著使用了一下ZXing。發現如下幾個問題： ZXing僅僅只提供了二維碼和條形碼等的解碼，並沒有提供在unity中的預製件（也就是prefab）。這樣就會導致很多第一次使用zxing的盆

如何讓高度進行自適應

  我們都知道，寬度自適應，有很多種辦法，最簡單的就是百分比的方法，來進行寬度自適應，麻煩點的去js裡面進行獲取螢幕的寬度去進行判定，這樣的方法來進行自適應，但今天我遇到個問題，對已寫好的頁面進行二開，要做到自適應的程度，結果把寬度自適應了，但以前的高度是寫死的，導致頁面縮小

移動Web開發圖片自適應兩種常見情況解決方案

本文主要說的是Web中圖片根據手機螢幕大小自適應居中顯示，圖片自適應兩種常見情況解決方案。開始吧 在做配合手機客戶端的Web wap頁面時，發現文章對圖片顯示的需求有兩種特別重要的情況，一是對於圖集，這種文章只需要左右滑動瀏覽，最好的體驗是讓圖片縮放顯示在螢幕有效範圍內，防

17 Three.js針對瀏覽器變動進行自適應

可以改變頁面大小測試效果。有的時候，我們打開了瀏覽器的頁面，顯示了當前的渲染的模型。但是，如果你沒有設定場景模型跟隨著瀏覽器的寬高度變化進行自適應，就gg了。所以，今天額外補上一篇相關的怎麼跟隨瀏覽器變動進行自適應。要是場景隨著瀏覽器的大小變動進行自適應，就需要監聽windo

Web移動端 自適應縮放介面

在開發App端的網頁時，要適配iphone、ipad、ipod、安卓等各種機型，一般是直接使用em、px轉em、介面縮放。 本章是通過將介面縮放，等比例顯示在各機型上。過程中遇到了些問題和大坑~ 然後下面是具體的自適應嘗試~ 方案一 設定tranform/scale 首先設定內容固定寬度、自動高度（以下舉

web前端-移動端響應式與自適應

logs lac tro 可維護 禁止 網頁 藍色 媒體查詢 [0 一. 在HTML的頭部加入meta標簽 　　　　在HTML的頭部，也就是head標簽中增加meta標簽，告訴瀏覽器網頁寬度等於設備屏幕寬度，且不進行縮放，代碼如下： <meta name="view

unity中UI的屏幕自適應代碼

ans () adp scale idt screen ont 制作 void public void ScreenUISelfAdptation(Transform scaleUI) { 　　float widthrate = UnityEngine.

杏彩時時彩源碼下載新增騰訊分分彩+H5自適應手機版

images admin bsp fig 引擎 asc mage 支持 alt 安裝說明：1分別修改web、admin、wap 目錄下的xingcai_config、admin.config、xingcai_config數據庫連接信息2修改開獎目錄下的的數據庫連接信息con

彩38完整源碼下載+帶H5自適應手機版

ado 文件夾 alt php文件 設置 sql admin amp 演示 彩38完整源碼下載+帶H5自適應手機版源碼下載Q:2947702644運行環境：WIN+APACHE+PHP5.4+MYSQL5.6+偽靜態源碼授權：無加密文件及認證授權，永久性可直接使用。版本支持