【Unity3D日常开发】(三十三)Unity3D中模板 WEBGL模板 自定义Templates 使用教程

恬静的小魔龙 发表于 2021/12/14 08:51:26 2021/12/14
【摘要】 推荐阅读CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客QQ群:1040082875 一、前言我们在开发WEBGL项目的使用,遇到一个问题,导出的WEBGL界面很简陋,不是很美观。所以就需要自己去修改js文件,或者CSS文件,以及更换图片等操作但是如果这些工作是一次的话就好说,但是程序开发总是要修改很多次,每次都更改这些东西,就会显得很繁琐,那么有没有设置一次模板,...

推荐阅读

一、前言

我们在开发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完就行了。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。