UnityWebGL自定义Templates

最新推荐文章于 2024-06-24 12:44:30 发布

KongKong如也

最新推荐文章于 2024-06-24 12:44:30 发布

阅读量4.3k

点赞数 1

本文链接：https://blog.csdn.net/qq_25542475/article/details/97398296

版权

Unity 同时被 3 个专栏收录

16 篇文章 3 订阅

订阅专栏

html5

3 篇文章 0 订阅

订阅专栏

WebGL

3 篇文章 0 订阅

订阅专栏

1.自定义模板通过在Assets文件夹中创建一个名为“WebGLTemplates”的文件夹添加到项目中 - 模板本身就是该文件夹中的子文件夹。每个模板文件夹都包含一个index.html文件以及该页面所需的任何其他资源，例如图像或样式表。
在这里插入图片描述
一旦创建，模板将出现在“播放器设置”检查器的选项中。(模板的名称将与其文件夹相同）。或者，该文件夹可以包含名为thumbnail.png的文件，该文件的尺寸应为128x128像素。缩略图图像将显示在检查器中，以提示完成的页面的外观。
2.该html文件需要至少包含以下元素：

Unity WebGL加载器的脚本标记：
实例化游戏的脚本：< script> var gameInstance = UnityLoader.instantiate(“gameContainer”, “%UNITY_WEBGL_BUILD_URL%”);< /script>
一个< div>标签，在实例化函数中使用该标识。这个div的内容将被游戏实例取代。

UnityLoader.instantiate(container, url, override)

UnityLoader.instantiate负责创建一个新的内容实例。
container(容器)可以是DOM元素（通常是< div>元素）或DOM元素的ID。如果DOM元素被提供，那么游戏将立即被实例化。如果提供了一个DOM元素的id，那么在解析整个文档之后，游戏将被实例化（这意味着你可以提供一个在 UnityLoader.instantiate() 调用时尚未创建的DOM元素的id ）。
url 指定了json文件的地址，该文件包含关于构建的信息（您可以使用％UNITY_WEBGL_BUILD_URL％变量，该变量将在构建时自动解析）。
override是一个可选参数，可用于覆盖游戏实例的默认属性。例如，您可以重写onProgress和popup函数，因为这些是游戏实例的属性。请注意，Module也是游戏实例的属性，所以在实例化时可以覆盖模块的属性。考虑下面的例子：

UnityLoader.instantiate("MyContainer", “build/MyBuild.json”, {
    onProgress: MyProgressFunction,
    Module: {
        TOTAL_MEMORY: 268435456,
        onRuntimeInitialized: MyInitializationCallbackFunction,
    },
});

Example

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>MyTemplete</title>
    <!--加载实例化Unity脚本-->
    <script src="Build/UnityLoader.js"></script>
    <script>
        //初始化Unity场景模板，“unityContainer”是要初始化的组件，JSON文件的URL，包含有关构建的所有必要信息。{}覆盖属性
        var unityInstance = UnityLoader.instantiate("unityContainer", "Build/Web1.json",
            {
                onProgress: UnityProgress,//加载进度
                compatibilityCheck: CheckCompatibility,//加载完成
                Module: {
                    //TOTAL_MEMORY: 268435456,//内存
                    onRuntimeInitialized: RuntimeInitialized,//弹出实例化
                },		
            });
        function RuntimeInitialized() {
        }
        //进度回调函数
        function UnityProgress(unityInstance, progress) {
            //if (!gameInstance.Module)
            //    return;
            //document.getElementById("loadingBlock").style.display = "inherit";
            //document.getElementById("fullBar").style.width = (100 * progress) + "%";
            //document.getElementById("emptyBar").style.width = (100 * (1 - progress)) + "%";
            //document.getElementById("Welcome").innerText = progress*100+"%";
            if (progress == 1) {
                    setTimeout(function () { document.getElementById("Welcome").style.display = "none"; }, 3000);
            }
        }
        //全屏函数
        function ToggleFullScreen() {
            //判断是否全屏
            var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
                (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
                (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
                (document.msFullscreenElement && document.msFullscreenElement !== null);

            var element = document.body.getElementsByClassName("webgl-content")[0];

            if (!isInFullScreen) {
                //document.getElementById("fullScreenButton").style.backgroundImage = "url('TemplateData/img/fullScreen_off.png')";
                return (element.requestFullscreen ||
                    element.webkitRequestFullscreen ||
                    element.mozRequestFullScreen ||
                    element.msRequestFullscreen).call(element);
            }
            else {
               // document.getElementById("fullScreenButton").style.backgroundImage = "url('TemplateData/img/fullScreen_on.png')";
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            }
            //检测加载情况
            function CheckCompatibility(unityInstance, onsuccess, onerror) {
                if (!UnityLoader.SystemInfo.hasWebGL) {
                    //document.getElementById("errorBrowserBlock").style.display = "inherit";
                    onerror();
                } else if (UnityLoader.SystemInfo.mobile) {
                    //document.getElementById("warningMobileBlock").style.display = "inherit";
                    onsuccess();
                } else if (["Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1) {
                    //document.getElementById("warningBrowserBlock").style.display = "inherit";
                    onsuccess();
                } else {
                    onsuccess();
                }
            }
        }
    </script>
    <style>
        html, body {
        height:100%;
        }
        .webgl-content * {
            border: 0;
            margin: 0;
            padding: 0
        }

        .webgl-content {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
        }
        .Welcome {
            height: 100%;
            width: 100%;
            margin: auto;
            background-image: url("./TemplateData/background.png");
            background-size:cover;
        }
    </style>  
</head>
<body style="overflow:hidden" >
    <!--Unity播放组件-->
    <div class="webgl-content"> 
        <div class="Welcome" id="Welcome"></div>
        <div id="unityContainer" style="width: 100%; height: 100%; margin: auto"></div>
    </div>
</body>
</html>

KongKong如也

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
4
评论
UnityWebGL自定义Templates

1.自定义模板通过在Assets文件夹中创建一个名为“WebGLTemplates”的文件夹添加到项目中 - 模板本身就是该文件夹中的子文件夹。每个模板文件夹都包含一个index.html文件以及该页面所需的任何其他资源，例如图像或样式表。一旦创建，模板将出现在“播放器设置”检查器的选项中。(模板的名称将与其文件夹相同）。或者，该文件夹可以包含名为thumbnail.png的文件，该文件的尺寸...
复制链接

扫一扫

专栏目录