3. Building and running a WebGL project

构建和运行WebGL项目

当您构建(buil)WebGL项目时,Unity将创建一个包含以下文件的文件夹:

  • 一个index.html文件,浏览器可以通过它来加载您的内容。
  • 一个TemplateData文件夹(当使用默认模板构建时)包含建立标志,加载栏和其他模板资产。构建模板文件夹通常用于在加载时自定义构建的外观。有关更多信息,请参阅WebGL模板上的用户手册页面。
  • 一个Build文件夹包含您生成的生成输出文件。

Build文件夹包含以下文件(MyProject文件名称代表项目名称)。

  • 一个 UnityLoader.js 脚本, 它包含加载网页中Unity内容所需代码
  • 一个 MyProject.json的JSON文件 它包含关于构建的所有必要信息。当构建实例化时,此JSON文件的URL作为Unity Loader的参数提供。 JSON文件包含所有其他构建文件的URL,这些文件可以是绝对的或相对于JSON文件的位置。 JSON可能包含其他模块参数,例如闪屏风格或内存堆的初始大小。
  • 一个 MyProject.asm.framework.unityweb 文件, 它包含asm.js运行时和JavaScript插件。
  • 一个 MyProject.asm.code.unityweb 文件 包含你的播放器(player)的asm.js模块。
  • 一个 MyProject.asm.memory.unityweb 文件 包含一个二进制图像以初始化 您的播放器(your player)的堆内存。
  • 一个 MyProject.data.unityweb 文件 包含资产数据和场景。

根据发布设置,Build文件夹中 *.unityweb文件的内容可能使用gzip,brotli进行压缩或可能未压缩。有关更多信息,请参阅部署压缩构建的文档(deploying compressed builds

您可以通过打开index.html文件直接在大多数浏览器中查看您的WebGL播放器。但是,出于安全原因,Chrome对从本地文件网址打开的脚本设置了限制,因此该技术在Chrome中无法使用。要解决Chrome的限制,请使用Unity的Build&Run命令(文件>构建和运行 (File > Build & Run);该文件然后暂时托管在本地Web服务器中,并从本地主机URL打开。或者,您可以使用--allow-file-access-from-files命令行选项运行Chrome,该选项允许它从本地文件URL加载内容。这是PC上需要的,以允许执行构建。

在某些服务器上,您需要明确地创建 .unityweb文件,因为服务器需要将这些文件提供给客户端。

Build player options 建立玩家选项

通过Build Settings对话框访问WebGL选项。 (菜单:文件>构建设置... (File > Build Settings...)。在对话框中,从平台列表中选择WebGL,然后选择Player Settings...

image

Development Build 开发构建

当您选中Development Build复选框时,Unity会生成一个具有Profiler支持的开发版本和一个用于查看错误的开发控制台。另外,开发版本不会压缩内容(即内容没有缩小);他们以可读的形式维护JavaScript,保留函数名称,以便获取有用的错误堆栈跟踪。但请注意,这意味着开发版本非常大,而且分发太大。

Use pre-built Engine 使用预先构建的引擎

此选项仅在您选中Development Build复选框时才会显示。使用 Build Settings 构建设置”对话框中的 中的 Use pre-built Engine 使用预构建引擎 选项可加快开发过程中的构建迭代时间。启用此选项时,Unity仅重建托管代码,然后与预生成Unity引擎动态链接,因此项目重建速度提高了大约30-40%。请注意,此类构建仅适用于开发目的,因为它始终会生成未划分的引擎代码。由于动态链接开销,这种构建的性能比正常构建慢。

Autoconnect Profiler

WebGL在PlayerSettings检查器窗口中有一些其他选项(菜单:Edit > Project Settings > Player 编辑>项目设置>播放器)。

Other Settings

image

Strip Engine Code 剥离引擎代码

打开Other Settings 其他设置以访问 Strip Engine Code 剥离引擎代码选项。此选项默认选中以启用WebGL代码剥离。选中此选项后,Unity不包含任何您不使用的类的代码。例如,如果您不使用任何物理组件或功能,则整个物理引擎将从您的构建中删除。有关更多详细信息,请参阅下面的<Stripping 剥离>部分。

Publishing Settings

image

Memory Size

打开 Publishing Settings 发布设置 以访问Memory Size 内存大小字段。在这里,您可以指定内容应为其堆分配多少内存(以MB为单位)。如果此值太低,则会显示“out of memory 内存不足”错误消息。这意味着您的加载内容和场景无法放入可用内存。但是,如果此值太高,则可能无法在某些浏览器或某些计算机上加载内容,因为浏览器可能没有足够的可用内存来分配所请求的堆大小。此值将写入生成的.json文件中名为TOTAL_MEMORY的属性,因此如果您想在不重建项目的情况下尝试此设置,则可以编辑.json文件或将更新的TOTAL_MEMORY值作为附加WebGL提供实例化参数。有关更多详细信息,请参阅 WebGL memory usage WebGL内存使用情况的用户手册页

Enable Exceptions 启用例外

打开 Publishing Settings发布设置 以访问 Enable Exceptions启用例外。启用异常允许您指定在运行时处理意外代码行为(通常认为是错误)的方式。它有以下选项:

  • None: 如果您不需要任何异常支持,请选择此项。这提供了最佳的性能和最小的构建。使用此选项,抛出的任何异常都会导致您的内容在该设置中出现错误而停止。
  • Explicitly Thrown Exceptions Only(default) 仅显式抛出异常: 选择此选项可捕获脚本中从throw语句显式指定的异常,并确保 finally最终调用块。请注意,选择此选项会使您的脚本生成的JavaScript代码变得越来越慢;如果脚本是您项目中的主要瓶颈,这可能只是一个问题。
  • Full Without Stacktrace 完全没有Stacktrace: 选择此选项以捕获:
    • 在脚本中通过throw语句显式指定的异常(与仅在显式抛出异常选项中相同)
    • 空引用
    • 超出界限数组访问
  • Full With Stacktrace 完全与Stacktrace: 该选项与上面的选项类似,但它也捕获堆栈跟踪。 Unity会通过在代码中嵌入对它们的检查来生成这些异常,所以此选项会降低性能并增加浏览器内存使用量。仅用于调试,并且始终在64位浏览器中进行测试。

选择 Publishing Settings发布设置以访问Data Caching数据缓存。选择此项以启用播放器数据的自动本地缓存。此选项将资产存储设置为本地缓存在浏览器的IndexedDB数据库中,以便资源不必在随后的内容运行中再次下载。请注意,不同的浏览器在允许IndexedDB存储方面有不同的规则;浏览器可能会要求用户存储数据的权限,并且您的构建可能会超出浏览器定义的大小限制。

Distribution size 分布大小

在发布WebGL时,重要的是保持较低的 构建(build size) 大小,以便用户在内容启动之前获得合理的下载时间。有关减少资产规模的一般提示,请参阅 有关减少构建文件大小的文档 Reducing the file size of the build

Hints and tips specific to WebGL 针对WebGL的建议和提示

  • 为纹理导入器Texture Importer中的所有压缩纹理指定压缩纹理压缩格式。
  • 不要部署 开发版本(development builds);他们没有压缩或缩小minified,所以有更大的文件大小。
  • 进入PlayerSettings(菜单:Edit > Project Settings > Player),打开 Publishing Settings 并将 Enable ExceptionsNone,如果你不需要你的构建异常。
  • 转到PlayerSettings(菜单:Edit > Project Settings > Player),打开Other Settings并启用Strip Engine Code以确保高效构建。
  • 使用第三方托管dll时要小心,因为它们可能包含很多依赖项,因此会显着增加生成的代码大小。

如果制作发布版本(release build),Unity会根据在WebGL Player Settings > Publishing Settings窗口中选择的Compression Format(压缩格式) 压缩构建输出文件。

image

有关这些选项的更多信息以及如何使用它们发布构建,请参阅 部署压缩构建的文档 Deploying compressed builds

AssetBundles

由于您的内容开始前需要预先下载所有的资产数据,因此您应该考虑将资产从主要数据文件中移出并存入AssetBundles中。这样,您可以为加载速度快的内容创建一个小型加载程序场景。然后,随着用户浏览您的内容,它会按需动态加载资产。 AssetBundles还有助于Asset data memory(资产数据内存管理):您可以通过调用AssetBundle.Unload从资产内存中卸载您不再需要的资产。

在WebGL平台上使用AssetBundles时,一些注意事项适用:

  • 当您在AssetBundle中使用未在主版本中使用的类类型时,Unity可能会剥离构建中的这些类的代码。当尝试从AssetBundle加载资产时,这可能会导致失败。使用BuildPlayerOptions.assetBundleManifestPath来解决该问题,或者参见下面的Stripping(剥离)部分以获取其他选项。
  • WebGL不支持线程,但http下载只有在完成下载后才可用。因此,Unity WebGL需要在下载完成时在主线程上解压缩AssetBundle数据,从而阻塞主线程。为避免此中断,LZMA AssetBundle compression不适用于WebGL上的AssetBundles。 AssetBundles是使用LZ4进行压缩的,它可以非常有效地按需进行解压缩。如果您需要的压缩尺寸小于LZ4提供的压缩尺寸,则可以将Web服务器配置为在AssetBundles上使用gzip或Brotli压缩(在LZ4压缩之上)。有关如何执行此操作的更多信息,请参阅部 Deploying compressed builds署压缩构建的文档。
  • WebGL支持使用WWW.LoadFromCacheOrDownload的AssetBundle缓存,使用浏览器中的IndexedDB API在用户的计算机上实现缓存。请注意,IndexedDB对某些浏览器的支持可能有限,并且浏览器可能会要求用户授权将数据存储在磁盘上。有关更多信息,请参阅 WebGL browser compatibilityWebGL浏览器兼容性文档。

Stripping 剥离

默认情况下,Unity从您的版本中删除所有未使用的代码。您可以通过PlayerSettings检查器窗口(菜单:Edit > Project Settings)更改此选项:选择Other Settings其他设置以访问Strip Engine Code剥离引擎代码选项。最好在启用剥离的情况下构建。

使用代码剥离功能时,Unity会扫描您的项目以查找所有使用的UnityObject派生类(通过在脚本代码中引用,或者在场景中的序列化数据中)。然后从构建中删除任何没有使用它们的类的Unity子系统。这使得您的构建代码更少,从而导致下载量更少,解析代码更少(因此代码运行速度更快,内存更少)。

Issues with code stripping 代码剥离问题

代码剥离可能会导致您的项目出现问题,如果它剥夺了实际需要的代码。当您在运行时加载包含未包含在主版本中的类并因此已从项目中删除的AssetBundles时,可能会出现这种情况。出现这种情况时,浏览器的JavaScript控制台中会显示错误消息(可能后面跟着更多错误)。例如:

Could not produce class with ID XXX

要排除这些错误,请在Class ID Reference中查找ID(例如上面的例子中的XXX),以查看它尝试创建实例的哪个类。在这种情况下,您可以强制Unity将该类的代码包含在构建中,方法是将对该类的引用添加到脚本或场景中,或者将link.xml文件添加到项目中。

下面是一个确保Collider类(因此物理模块)被保存在项目中的例子。将此XML代码添加到名为link.xml的文件中,并将该文件放入您的Assets folder中。

<linker>
    <assembly fullname="UnityEngine">
        <type fullname="UnityEngine.Collider" preserve="all"/>
    </assembly>
</linker>

如果您怀疑剥离导致构建问题,您还可以尝试在测试期间禁用 trip Engine Code剥离引擎代码选项。

Unity没有提供一种方便的方式来查看构建中包含哪些模块和类,这将允许您优化项目以良好地剥离。但是,要获得包含的类和模块的概述,可以在构建完成后查看生成的文件Temp/StagingArea/Data/il2cppOutput/UnityClassRegistration.cpp

请注意,Strip Engine代码选项仅影响Unity引擎代码。 IL2CPP总是从您的托管dll和脚本中剥离字节码。当您需要通过反射动态引用托管类型而不是通过代码中的静态引用时,这可能会导致问题。如果您需要通过反射访问类型,则可能还需要设置link.xml文件以保留这些类型。有关link.xml文件的更多信息,请参阅iOS Build size optimization (iOS上的文档页面生成大小优化)

Moving build output files 移动构建输出文件

要更改Build文件夹的位置,请在index.html文件中更改JSON文件的URL(UnityLoader.instantiate的第二个参数)。

要更改Build文件夹内文件的位置,请在JSON文件中更改它们的URL(即dataUrl,asmCodeUrl,asmMemoryUrl和asmFrameworkUrl)。 JSON文件中的所有非绝对URL都被视为相对于JSON文件位置的URL。如果要在内容分发网络(CDN)上托管文件,则可以在外部服务器上指定这些URL,但需要确保托管服务器已启用跨源资源共享(CORS)才能使其运行。有关CORS的更多信息,请参阅WebGL networking(WebGL网络上的手册页)

Incremental builds 增量构建

IL2CPP为您的项目生成的C++代码是逐步编译的;也就是说,只有生成的C++代码自上次构建后再次编译后发生了更改。未更改的源代码重新使用为以前的版本生成的相同的目标文件。用于增量C++构建的对象文件存储在Unity项目的Library/il2cpp_cache目录中。

要执行一个干净的,从头开始构建生成的不使用增量编译的C++代码,请删除Unity项目中的Library/il2cpp_cache目录。请注意,如果Unity编辑器版本与先前的WebGL版本不同,Unity会自动执行干净的从头构建。

3

Unity WebGL 中文文档 Unity 2018.1.b
1. WebGL
2. webGL Browser Compatibility
3. Building and running a WebGL project
4. WebGL: Deploying compressed builds
5. Debugging and trouble shooting WebGL builds
6. WebGL Graphics
7. WebGL Networking
8. Using Audio In WebGL
9. WebGL performance considerations
10. WebGL: Interacting with browser scripting
11. Using WebGL Templates
12. Cursor locking and full-screen mode in WebGL
13. Input in WebGL

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容

  • 翻译:莫铭原文地址:AssetBundle usage patterns 本系列中的上一篇文章覆盖了AssetBu...
    莫铭阅读 5,127评论 1 12
  • 翻译自官网文档:https://unity3d.com/cn/learn/tutorials/topics/bes...
    su9257_海澜阅读 3,229评论 1 2
  • 首先附上原文链接:https://unity3d.com/learn/tutorials/topics/best-...
    Bonging阅读 1,124评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,100评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707