怎么用Unity打包个WEBGL程序这么麻烦,又得改样式,又得改网页——教你使用WEBGL模板,提高效率

简介: 我们在开发WEBGL项目的使用,遇到一个问题,导出的WEBGL界面很简陋,不是很美观。 所以就需要自己去修改js文件,或者CSS文件,以及更换图片等操作 但是如果这些工作是一次的话就好说,但是程序开发总是要修改很多次,每次都更改这些东西,就会显得很繁琐,那么有没有设置一次模板,每次生成的时候都按照这个模板生成呢。Unity3D已经为我们思考到了这一点,提供了一个叫做自定义Templates模板的功能,会为我们在每次生成的时候设置好模板。下面就来看一下WEBGL模板是怎么使用的吧。

一、前言

我们在开发WEBGL项目的使用,遇到一个问题,导出的WEBGL界面很简陋,不是很美观。 所以就需要自己去修改js文件,或者CSS文件,以及更换图片等操作 但是如果这些工作是一次的话就好说,但是程序开发总是要修改很多次,每次都更改这些东西,就会显得很繁琐,那么有没有设置一次模板,每次生成的时候都按照这个模板生成呢。

Unity3D已经为我们思考到了这一点,提供了一个叫做自定义Templates模板的功能,会为我们在每次生成的时候设置好模板。

下面就来看一下WEBGL模板是怎么使用的吧。


二、说在前面

要使用WEBGL模板,要有以下的步骤:

1)首先来看一下默认生成的WEBGL的index.html文件的内容:

网络异常,图片无法展示
|

可以看到中间的script里面的内容是很重要的,就靠这个来显示内容的,所以我们的模板index.html里面也必须要有这一行代码,才能正常执行。

<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/VOXL.json", {onProgress: UnityProgress});
</script>
复制代码

然后需要注意的是这一行代码中的"Build/VOXL.json",VOXL是Unity根据文件夹名自动生成的json文件,这个文件名需要跟模板中的名字一致才行。

2)在Assets文件夹中创建一个名为 "WebGLTemplates"的文件夹,注意这个名字不要错,不然无法找到这个模板文件,然后在这个文件夹中新建一个你的模板的文字的文件夹,比如"TestTemplates",这个特名字可以随便设,不影响的。

网络异常,图片无法展示
|

3)然后就可以将你修改过后的Index文件或者其他所需的任何资源放入到这个文件夹中了。

网络异常,图片无法展示
|

注意:thumbnail.png文件会显示在播放器设置的检查器的缩略图

4)然后在菜单栏中点击File→Build Setting→在出现的界面上点击Build Setting...,然后在Resolution and Presentation中就可以看到这个模板了。

网络异常,图片无法展示
|

OK,这就是总体的流程,下面就来看一下详细的操作


三、正式开始

1)首先来看一下要达成的效果:

网络异常,图片无法展示
|

标题、样式、图片、进度条都改了,需要我们需要将这几个文件都放入到模板中,

网络异常,图片无法展示
|

注意:这几个文件在TemplateData文件夹中,我们还要保持这个路径,将整个文件夹导入

2)将设置好的WEBGL资源导入:

网络异常,图片无法展示
|

注意:Build文件就不用导入了,因为是自动生成的。

3)根据模板中的index.html文件中的script代码中的设置名字去创建文件夹,然后将Build的文件指定这个文件夹

网络异常,图片无法展示
|

4)在菜单栏中点击File→Build Setting→在出现的界面上点击Build Setting...,然后在Resolution and Presentation中选择这个模板,点击Build,然后新建一个“WisdomRanch”文件夹,这个是根据上一步设置的自定义的文件夹名:

网络异常,图片无法展示
|

等着Build完就行了。



相关文章
|
图形学 Android开发 iOS开发
|
编解码 程序员 atlas
Unity 之 图集属性详解和代码示例 -- 拓展一键自动打包图集工具
图集只是当所有给低昂的纹理需要相同的着色器时采用的一种方法,如果一些纹理需要通过着色器应用独立的图形效果,它们就必须分离到自己的材质中,并在单独的组中打图集。
1444 0
Unity 之 图集属性详解和代码示例 -- 拓展一键自动打包图集工具
|
5月前
|
缓存 API 图形学
【Unity 3D】AssetBundle打包、上传、加载、卸载详解及演示(附源码)
【Unity 3D】AssetBundle打包、上传、加载、卸载详解及演示(附源码)
84 0
|
5月前
|
算法 图形学 UED
【Unity 3D】AssetBundle工作流程、打包策略详解(超详细必看)
【Unity 3D】AssetBundle工作流程、打包策略详解(超详细必看)
77 0
|
8月前
|
图形学 Android开发
Unity打包安卓报http请求错误
Unity打包安卓报http请求错误
72 1
|
12月前
|
JavaScript 前端开发 数据库
Unity3d(webGL)构建数字孪生小案例(包含完整的数据交互体系)附赠完整代码
Unity3d(webGL)构建数字孪生小案例(包含完整的数据交互体系)附赠完整代码,请关注公众号:拼搏的小浣熊,获取简化版的代码!
|
图形学 C++
【拥抱元宇宙】创建你的第一个Unity程序HelloWorld,并发布
需要先下载一个Unity Hub,以及安装Unity编辑器。Unity Hub需要登陆,激活码可以选择个人用户,免费的。免费的无法改变启动画面,其他的都还好。以下案例,我以Unity2020.3.22 LTS 版本进行创建,其他大佬们可以根据自己情况选择版本。
180 0
【拥抱元宇宙】创建你的第一个Unity程序HelloWorld,并发布
|
Java 图形学
Unity打包符号表 使用ndk addr2line.exe+符号表 将崩溃内存地址解析成函数名
符号表的路径,符号表发布出来的时候是一个zip文件要把它解压出来,里面会有两个文件:arm64-v8a(64位)、armeabi-v7a(32位)不过unity默认打包出来的都是64位的程序,所以这个前面加上你的真实路径+arm64-v8a\libil2cpp.sym.so就可以了。
|
前端开发 API 图形学
Unity 实现批量Build打包
Unity 实现批量Build打包
236 1
Unity 实现批量Build打包
|
开发框架 图形学
Unity Hub 自定义一个创建新项目模板(Template)
Unity Hub 自定义一个创建新项目模板(Template)
397 1
Unity Hub 自定义一个创建新项目模板(Template)