开发HTML5项目

设置UE4进行HTML5开发。

Windows
MacOS
Linux

HTML5 SDK设置

虚幻引擎4(UE4)HTML5实现利用MozillaEmscripten工具链,将UE4的C++代码交叉编译为Javascript。当从Epic Games Launcher或从Epic的 Github元库下载UE4时,HTML5开发所需的所有 EmscriptenPython 文件都将包括在内。这意味着,无需执行任何额外的设置步骤或安装任何额外的软件,即可开始创建HTML5项目。

支持HTML5的Web浏览器

虽然可以使用 32位 Web浏览器运行UE4 HTML5项目,但强烈建议使用 64位 版本的Web浏览器。可通过以下链接找到64位版本的Google Chrome和Firefox Web浏览器

多线程支持

使用从源代码编译的UE4编译,可以获得实验性多线程支持。 

一些浏览器需要启用特殊标志,才能以多线程模式运行。

  • 在Chrome中:利用以下标记启动:--js-flags=--experimental-wasm-threads --enable-features=WebAssembly,SharedArrayBuffer。另外,可以在 chrome://flags/#enable-webassembly-threads 中启用和禁用它们,将它们作为“WebAssembly threads support”。

  • 在Firefox每夜版中,可以设置 javascript.options.shared_memory preference to true 来在 about:config 中启用SharedArrayBuffer。

HTML5必要的项目设置

为了能用UE4正常操作HTML5项目,需要从项目设置禁用MSAA。可以通过转到 项目设置(Project Settings) > 渲染(Rendering)移动(Mobile),然后将 移动MSAA(Mobile MSAA) 选项设置为 没有MSAA(No MSAA),做到这一点。

单击查看大图。

HTML5编译类型

创建HTML5项目的编译时,可以选择创建 开发****编译发行****编译。为项目创建的编译类型取决于想要完成的任务。 

HTML5开发编译: 

  • 在发行项目之前测试或调试项目时,将使用开发编译。

  • 开发编译仅编译未压缩文件。

  • 开发编译仅用于本地测试,而不用于部署到网站上。 

    在编译项目时生成的Readme.txt文件中,可以找到编译用于开发项目的更多信息。

HTML5发行编译:

  • 准备向最终用户发行项目时,使用发行编译。

  • 发行编译可以被编译为使用压缩或未压缩文件。

  • 发行编译可以进行压缩,从而减小下载大小。

可以执行以下操作来为发行HTML5编译启用或禁用压缩文件:

  1. 转到 项目设置(Project Settings) > 平台(Platforms) > HTML5 > 打包(Packaging),然后确保启用 在发行打包过程中压缩文件(Compress files during shipping packaging)

    单击查看大图。

  2. 此外还建议执行以下操作:通过转到 项目设置(Project Settings)打包(Packaging)打包(Packaging) 禁用 使用Pak文件(Use Pak File) 选项,并通过单击 使用Pak文件(Use Pak File) 选项名称旁边的框来禁用此选项。

    单击查看大图。

    在编译项目时生成的Readme.txt文件中,可以找到有关编译用于发行项目的更多信息。

启动HTML5项目

安装一个兼容的Web浏览器后,就可以测试一个HTML5项目。为此,请转到 主工具栏 并单击 启动(Launch) 选项旁边的 高级选项(Advanced options) 下拉框。然后从显示的菜单中,单击要使用的浏览器进行选中。

HTML5_Select_Web_Browser.png

打包HTML5项目

要创建一个可以部署到Web上的打包HTML5项目,需要确保执行以下操作:

  1. 首先,转到 文件(File) > 打包项目(Package Project),然后从列表中选择 HTML5**。
    HTML5_PackageProject.png

  2. 选择要保存项目的文件夹,然后单击 选择文件夹(Select Folder) 以启动打包过程。

  3. 项目完成打包后,打开项目打包到的文件夹,并运行 HTML5LaunchHelper.exe 程序。 
    HTML5_StartWebServer.png

  4. HTML5LaunchHelper.exe 程序将启动一个Web服务器,该服务器配置为提供本地主机上的压缩文件。运行 HTML5LaunchHelper.exe 程序时,可以在显示的命令行窗口中看到此服务器的进度。
    HTML5_WebServer.png

  5. 最后,打开选择的64位Web浏览器,然后输入以下URL:[本地主机 地址]/[项目名称].html。这将在Web浏览器中加载UE4 HTML5项目,如下图所示。 
    HTML5_UE4_ThirdPerson_In_Browser.png

    您需要根据项目名称输入URL。由于上述项目名称为ThirdPerson,应输入的地址为:http://localhost:8000/ThirdPerson.html

HTML5 Read Me文件

当您创建一个新的HTML5项目时,UE4将生成一个名为 Readme.txt 的文本文件。在该文件中,您将找到有关如何使HTML5项目在本地和Web上运行的额外信息。 

HTML5_ReadMeHelp.png

HTML5文件类型

当利用HTML5编译用于开发或部署的UE4项目时,您可以选择压缩或不压缩文件。下表列出了未压缩编译所需的文件以及这些文件包含的信息。 

非压缩文件部署所需的文件 - 以下文件是在创建非压缩编译时创建的。

文件类型

说明

.js

项目主要Javascript代码。

.wasm

游戏主要代码。

.data

游戏内容Javascript驱动。

.html

登录页面。

.symbols

符号(可选:用于调试)。

Utility.js

工具Javascript代码。

.htaccess

分布式配置文件

压缩文件部署所需的文件 - 以下文件是在创建压缩编译时创建的。

文件类型

说明

.jsgz

压缩的项目主要Javascript代码。

.wasmgz

压缩的游戏主要代码。

.datagz

压缩的游戏内容。

.data.jsgz

压缩的游戏内容Javascript驱动。

.symbolsgz

压缩的符号(可选:用于调试)。

Utility.jsgz

压缩的工具Javascript代码。

当使用压缩版本的文件时,您还需要确保包含未压缩版本的 .htaccess 文件和 .html 文件。

部署不需要的文件 - 以下文件是在同时创建了压缩版本和未压缩版本的项目时创建的。然而,只有当您的项目正在开发或正在测试时,才需要这些文件。

文件名称

说明

HTML5LaunchHelper.exe

用于创建本地Web服务器,以便在基于Windows的PC上本地查看项目。

RunMacHTML5LaunchHelper.command

用于创建本地Web服务器,以便在Mac上本地查看项目。

Readme.txt

包含有关为HTML5部署UE4项目的额外信息。

欢迎来到全新虚幻引擎4文档站!

我们正在努力开发新功能,包括反馈系统,以便您能对我们的工作作出评价。但它目前还未正式上线。如果您对此页面有任何意见与在使用中遭遇任何问题,请前往文档反馈论坛告知我们。

新系统上线运行后,我们会及时通知您的。

发表反馈意见