BLUI-Unreal：实时渲染 HTML 界面

BLUI-Unreal：实时渲染 HTML 界面

BLUI-Unreal CEF based HTML UI for the Unreal Engine. 项目地址: https://gitcode.com/gh_mirrors/bl/BLUI-Unreal

项目介绍

BLUI-Unreal 是一个为 Unreal Engine 4 设计的开源插件，它能够轻松地与 Chromium Embedded Framework（CEF）交互。通过该插件，开发者可以在 Unreal Engine 4 中实现丰富的 HTML 界面渲染，与网页技术无缝对接。

项目技术分析

BLUI-Unreal 基于著名的 Chromium 内嵌框架，这个框架也是 Google Chrome 浏览器的核心。它允许开发者将 HTML、CSS 和 JavaScript 集成到 Unreal Engine 4 项目中，实现了浏览器级别的网页渲染效果。BLUI-Unreal 通过提供简单的材质实例和输入函数，极大地简化了这一集成过程。

该插件的设计哲学是尽量减少对开发者工作的干扰。DOM 的渲染和 JavaScript 的处理都在单独的进程中执行，仅在 Chromium 请求重绘时更新材质实例，从而节省了大量的处理资源。

项目及技术应用场景

BLUI-Unreal 插件的应用场景非常广泛，以下是一些主要的使用案例：

1. 游戏内网页界面：开发者可以在游戏中创建网页风格的 UI 界面，如游戏内商城、帮助文档、设置界面等。
2. 交互式教程和引导：利用 HTML 和 JavaScript 的强大功能，为玩家提供动态的交互式教程和引导。
3. 实时数据展示：将游戏内数据实时展示在网页界面上，如得分板、统计数据等。
4. 动态内容加载：从服务器动态加载内容，如新闻、更新、地图等。

项目特点

• Chromium 动力：与 Chrome 浏览器相同的引擎，保证了强大的网页渲染能力。
• 兼容性：完全兼容 Chrome/Chromium 支持的所有网页技术，包括 HTML5、WebAudio、WebSockets 等。
• 灵活集成：无需绑定特定的游戏类，使用蓝图（或 C++）即可创建 "BluEye" 对象，并获取其材质实例，进而将其绘制在任何物体上。
• JavaScript 交互：可以从游戏内向网页传递数据，反之亦然，实现游戏逻辑与网页内容的无缝交互。
• 开发灵活：支持蓝图和 C++，满足不同开发者的需求。

使用方法

1. 将 BLUI 文件夹复制到项目目录下的 "Plugins" 文件夹中，并启用插件。
2. 重新生成项目的 Visual Studio 文件，并加载编辑器。
3. 检查插件列表，确保插件已经加载。

加载本地文件

设置默认 URL 或使用 "Load URL" 节点/方法加载以 local:// 开头的 URL，这将指向项目或游戏的 Content/html 目录。例如，要加载 YourProject/Content/html/UI/file.html 文件，将 URL 设置为 local://UI/file.html。

实际案例

以下是一些使用 BLUI-Unreal 插件的实际案例：

• BluiWidget：这是一个用户小部件（UMG），它将 BLUI 文本作为图像刷子嵌入。它包含各种实用函数，以便轻松加载和解析 URL。
• BluiWorldWidgetActorExample：这个示例演员封装了 BluiWidget 用户小部件，可以直接拖放到场景中。它会自动生成所需的 BluTickActor 以确保一切正常工作。

示例项目

感谢 @oivio 的贡献，示例项目已经更新到最新版本。可以从 BLUI-v3.4.0-UE4.22-DemoExamples.7z 下载示例项目。

视频演示

以下是示例项目的视频演示，点击图片可观看视频。

总结来说，BLUI-Unreal 是 Unreal Engine 4 开发者实现网页界面渲染的强大工具。无论是游戏开发还是交互式应用，它都能为项目带来丰富的用户体验。通过其高效的设计和灵活的集成方式，BLUI-Unreal 无疑是游戏和应用程序开发者值得关注的插件。

BLUI-Unreal CEF based HTML UI for the Unreal Engine. 项目地址: https://gitcode.com/gh_mirrors/bl/BLUI-Unreal