UE4.27支持HTML5

本文介绍了如何在UnrealEngine4.27版本中启用HTML5支持,重点在于IndexedDBStorage的配置,以及在Windows环境下遇到的问题,如epsdk安装、环境变量设置和VisualStudio工具链错误的修复。

        有一段时间没写文章了,趁着等待打包的时间,记录下近期所作的事情:如标题所示。

UnrealEngine从4.24开始就不在支持HTML5,这个看官方文档就知道了。项目中为了增加浏览器缓存的功能,查了不少资料,再UE中,html5比较有价值的一个选项IndexedDB Storage,有关indexedDB其实就说为了给浏览器建立客户端的数据库用于缓存从服务器下载的资源,服务于二次进入相同页面时可以少下载或者不用再从服务端下载,UE里对应的选项如下图所示:

在4.23,这个按钮是灰态的,告诉你需要引擎源码才能支持,查了不少资料发现这块网络上的讲解几乎没有,因此本文章主要是介绍如何让4.27支持html并且可以勾选该选项。

先附上参考的文章:https://github.com/SpeculativeCoder/UnrealEngine-HTML5-ES3s

文章里一步步的讲的已经很多,但是实践中其实还是遇到了有些问题,这里只记录下我自己的操作过程及遇到的问题:

1、下载4.27:https://github.com/SpeculativeCoder/UnrealEngine/tree/4.27-html5-es3

2、windows下确保安装了

        git for windows:用于windows下执行.sh文件

        vs2019或者2022,并在VS安装程序中保证勾选了unreal相关组件

        CMAKE

        python3.1.2

        打开翻墙软件

3、到引擎的解压目录,并且运行目录下的Setup.bat,会继续下载引擎相关的依赖

4、到Engine/Platforms/HTML5/目录下,右击git bash 打开bash的控制台,把Html5Setup.sh拖到控制台中运行.好了到这文章中说可以等待绿色的succss提示,但本人实践中在这遇到了不少问题:

        a、运行Html5Setup.sh内指令忽然停了:说明有些指令出错了但是bash不会给你报,这里我一步步的增加调试语句,后面查出epsdk在windows下没被认出是目录底下的python文件,打开HTML5Setup并修改如下:

        b、指令中包含了下载并且安装epsdk相关的插件,然后也是通过指令来设置环境变量,但是实际上并未真正的设置到环境变量中,也就会出现遇到后面build三方lib库时候出现bash停止继续执行的状况,bash执行时其实有log,windows下会要你自己手动设置一下,bash脚本在:

自己手动设置的环境变量如下:

到这步应该可以等到文章里所说的success了。

        c、怀疑缓存问题,误删了下载的引擎内的patch(自己的锅,后面编辑查看了脚本发现其实 就是文章作者修改UE内代码打包的patch,不要乱删):

5、回到引擎目录下运行GenerateProjectFiles.bat,生成sln。这步遇到了奇怪的报错:

Error while enumerating Visual Studio toolchains,需要打开Engine\Source\Programs\UnrealBuildTool\Platform\Windows\UEBuildWindows.cs

修改如下:

6、打开引擎目录下的.sln,并且编译执行,新建项目后进入,可以看到按钮是可以打开或者关闭 了。

在 Unreal Engine 4.27 中构建支持 HTML5(H5)浏览器的游戏或应用是一个复杂但可行的任务。Unreal Engine 提供了对 HTML5 平台的支持,但需要注意的是,该支持在某些版本中可能受到限制或需要额外的配置。以下是一些关键步骤和注意事项,帮助你在 Unreal Engine 4.27 中实现 HTML5 打包功能: ### 1. 确认引擎版本对 HTML5支持 Unreal Engine 对 HTML5支持主要通过 Emscripten 工具链实现。Emscripten 是一个将 C/C++ 代码编译为 WebAssembly 的工具链,使得 UE4 项目可以在浏览器中运行。在 Unreal Engine 4.27 中,HTML5 支持仍然存在,但需要手动配置相关环境。 ### 2. 安装和配置 Emscripten 要构建 HTML5 项目,必须首先安装并配置 Emscripten SDK。以下是基本步骤: - 下载并安装 [Emscripten SDK](https://emscripten.org/docs/getting_started/downloads.html)。 - 设置环境变量以确保 `emcc` 命令在命令行中可用。 - 验证安装是否成功,运行 `emcc --version` 查看版本信息。 ### 3. 配置 Unreal Engine 4.27HTML5 构建环境 在安装好 Emscripten 后,需要将 Unreal Engine 与 Emscripten 进行集成: - 打开 `Engine/Build/HTML5/HTML5Toolchain.json` 文件,并根据你的 Emscripten 安装路径更新 `EmscriptenPath`。 - 确保 `HTML5` 目标平台在 `Engine/Config/BaseEngine.ini` 中启用: ```ini [Platforms] +ActivePlatforms=HTML5 ``` ### 4. 构建 HTML5 项目 在配置完成后,可以使用 Unreal Build Tool (UBT) 构建 HTML5 项目: - 打开命令行工具,进入你的项目目录。 - 运行以下命令构建项目: ```bash Engine\Build\BatchFiles\Build.bat -project="YourProject.uproject" -platform=HTML5 -configuration=Development ``` - 构建完成后,HTML5 输出文件将位于 `Saved/HTML5` 文件夹中。 ### 5. 部署和测试 将构建生成的 HTML5 文件部署到 Web 服务器上进行测试。确保服务器支持 WebAssembly 文件类型(`.wasm`)的 MIME 类型配置。例如,在 Apache 服务器中,添加以下配置: ```apache AddType application/wasm .wasm ``` ### 6. 性能与兼容性注意事项 - **性能限制**:HTML5 平台的性能通常低于本地平台,尤其是在图形渲染和物理计算方面。因此,优化资源和代码是关键。 - **浏览器兼容性**:确保目标浏览器支持 WebAssembly 和 WebGL 2.0,这是运行 UE4 HTML5 项目的基础。 - **音频与输入**:Web 平台上的音频播放和用户输入处理可能需要特殊处理,特别是在移动设备上。 ### 7. 调试与优化 - 使用浏览器的开发者工具(如 Chrome DevTools)进行调试。 - 监控帧率和内存使用情况,优化渲染管线和资源加载策略。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值