CN115794095B - 基于JavaScript的虚幻引擎UI开发方法及系统 - Google Patents

Abstract

本申请公开了一种基于JavaScript的虚幻引擎UI开发方法及系统。首先响应于界面开发指令，在Web页面客户端中进行组件开发得到页面组件集合；然后使用nodejs搭建Websocket服务器，基于Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系；最后目标虚幻引擎客户端根据双向通信关系获取页面组件集合，并通过WebBrowser插件将页面组件集合进行界面排版，并将排版后的UI界面进行展示。本申请通过虚幻引擎调用本地及远程服务器的JavaScript开发的UI组件，以及通过Websockt进行虚幻引擎及Web页面的双向通讯。

Description

基于JavaScript的虚幻引擎UI开发方法及系统

技术领域

本申请涉及通信技术领域，特别涉及一种基于JavaScript的虚幻引擎UI开发方法及系统。

背景技术

虚幻引擎做为一款实时交互渲染引擎，非常广泛的应用在游戏、影视、建筑、数字孪生城市等行业，通常使用虚幻引擎进行应用开发，并且开发出的各类应用都离不开UI界面，通常的UI界面主要使用的蓝图或者C++进行UI开发。

然而此类方法如果开发单机版应用可以满足要求，但是如数字孪生城市行业大多需要的如在浏览器使用像素流访问，开发过程中可能多厂商合作集成，则会遇到像素流情况下UI界面适配性差，多厂商开发集成难度大等问题。

发明内容

基于此，本申请实施例提供了一种基于JavaScript的虚幻引擎UI开发方法及系统，能够通过JavaScript对页面组件进行开发，并将页面集成到虚幻引擎中。

第一方面，提供了一种基于JavaScript的虚幻引擎UI开发方法，该方法包括：

响应于界面开发指令，在Web页面客户端中进行组件开发得到页面组件集合；其中，页面组件集合中包括多个待展示页面组件；

使用nodejs搭建Websocket服务器，基于所述Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系；

目标虚幻引擎客户端根据所述双向通信关系获取所述页面组件集合，并通过WebBrowser插件将所述页面组件集合进行界面排版，并将排版后的UI界面进行展示。

可选地，基于所述Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系，包括：

将目标虚幻引擎客户端和Web页面客户端通过预设端口接入到Websocket服务器，将Websocket服务器作为消息中转，实现两个客户端的双向消息通讯功能。

可选地，将目标虚幻引擎客户端通过预设端口接入到Websocket服务器，还包括：

在目标虚幻引擎客户端中安装SocketIOClient插件；

选择组件，配置socket服务器链接；

通过蓝图程序，发送消息给web页面客户端。

在开始事件中配置socket链接后，接收到的消息及消息类型绑定到On GenericEvent事件。

可选地，所述预设端口可以设置为3000。

可选地，目标虚幻引擎客户端根据所述双向通信关系获取所述页面组件集合，并通过WebBrowser插件将所述页面组件集合进行界面排版，包括：

通过WebBrowser插件构建出界面控件；

在界面控件中根据调整页面http或本地路径进行页面组件调用，根据调整控件大小、位置以及尺寸进行界面排版。

可选地，所述方法还包括：

通过虚幻引擎内置蓝图控制页面组件的显示/隐藏；

根据页面组件的显示/隐藏完成组件的切换及页面切换功能。

可选地，所述方法还包括：

通过在界面空间中设置SupportsTransparency按钮选择是否开启UI界面。

第二方面，提供了一种基于JavaScript的虚幻引擎UI开发系统，该系统包括：

Web页面客户端，用于响应界面开发指令，进行组件开发得到页面组件集合；其中，页面组件集合中包括多个待展示页面组件；

Websocket服务器，用于建立目标虚幻引擎客户端和Web页面客户端的双向通信关系；所述Websocket服务器通过nodejs搭建；

目标虚幻引擎客户端，用于根据所述双向通信关系获取所述页面组件集合，并通过WebBrowser插件将所述页面组件集合进行界面排版，并将排版后的UI界面进行展示。

可选地，Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系，包括：

将目标虚幻引擎客户端和Web页面客户端通过预设端口接入到Websocket服务器，将Websocket服务器作为消息中转，实现两个客户端的双向消息通讯功能。

可选地，目标虚幻引擎客户端根据所述双向通信关系获取所述页面组件集合，并通过WebBrowser插件将所述页面组件集合进行界面排版，包括：

通过WebBrowser插件构建出界面控件；

在界面控件中根据调整页面http或本地路径进行页面组件调用，根据调整控件大小、位置以及尺寸进行界面排版。

本申请实施例提供的技术方案中首先响应于界面开发指令，在Web页面客户端中进行组件开发得到页面组件集合；然后使用nodejs搭建Websocket服务器，基于Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系；最后目标虚幻引擎客户端根据双向通信关系获取页面组件集合，并通过WebBrowser插件将页面组件集合进行界面排版，并将排版后的UI界面进行展示。可以看出，本发明的有益效果在于：

（1）降低了虚拟引擎UI开发的技术门槛，使从事Web开发的人员也可配合虚幻引擎开发师进行虚幻引擎应用的开发；

（2）便于系统集成，每块UI的界面都可以单独开发，由虚幻引擎通过服务单独调用；

（3）使用Websocket技术进行双向通讯解决了即使不在统一UI页面，也可以给虚幻引擎发送交互指令，可以达到遥控的效果。

附图说明

为了更清楚地说明本发明的实施方式或现有技术中的技术方案，下面将对实施方式或现有技术描述中所需要使用的附图作简单地介绍。显而易见地，下面描述中的附图仅仅是示例性的，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图引申获得其它的实施附图。

图1为本申请实施例提供的一种基于JavaScript的虚幻引擎UI开发场景示意图；

图2为本申请实施例提供的一种基于JavaScript的虚幻引擎UI开发方法流程图；

图3为本申请实施例提供的页面组件示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

在本发明的描述中，术语“包括”、“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包括了一系列步骤或单元的过程、方法、系统、产品或设备不必限于已明确列出的那些步骤或单元，而是还可包含虽然并未明确列出的但对于这些过程、方法、产品或设备固有的其它步骤或单元，或者基于本发明构思进一步的优化方案所增加的步骤或单元。

如图1，给出了本申请的开发（实施）场景示意图，具体包括了Web页面客户端、nodejs服务器以及虚幻引擎客户端，在本申请中通过本场景具体实现了虚幻引擎调用本地及远程服务器的JavaScript开发的UI组件，以及通过Websockt进行虚幻引擎及Web页面的双向通讯方法。

具体地，请参考图2，其示出了本申请实施例提供的一种基于JavaScript的虚幻引擎UI开发方法的流程图，该方法可以包括以下步骤：

步骤101，响应于界面开发指令，在Web页面客户端中进行组件开发得到页面组件集合。

其中，页面组件集合中包括多个待展示页面组件。界面开发指令可以包括用户在Web页面中通过交互发出的进行虚幻引擎UI开发的指令，从而根据指令开始执行本申请虚幻引擎UI开发方法。

在本申请实施例中，JavaScript对Web页面组件进行开发并不是要开发完整的页面，如图1，给出了页面中的页面组件集合（其中包含组件1、组件2和组件3），在Web页面客户端中应是以组件开发为主，组件的排版由虚幻引擎端进行位置排放，这样能增加UI界面的可用性、集成的灵活性。具体地，在Web页面客户端中进行组件开发可以使用原生JavaScript+html+Css，也可以使用如vue、react、angular等开发库完成。

步骤102，使用nodejs搭建Websocket服务器，基于Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系。

现在大部分开发语言都支持Websocket长连接，如Java、php、C++、JavaScript、nodejs等。在本申请实施例中，使用nodejs搭建websocket服务器，虚幻引擎和web页面都以客户端的方式接入到nodejs服务器，由nodejs做消息中转，实现两个客户端的双向消息通讯功能。

例如，在本申请中端口设置为3000，虚幻引擎客户端接入Websocket流程如下：

（1）安装SocketIOClient插件：

将SocketIOClient插件放到ue工程Plugins文件夹内，通过ue4内的组件导入到工程内。

（2）链接websocket服务器：

选择组件，配置socket服务器链接，并设置启动自动连接功能。

（3）发送Websocket消息：

通过蓝图程序，发送消息给Web页面客户端，

（4）接受websocket消息：

先要在开始运行事件中配置socket链接后，接收到的消息及消息类型绑定到OnGeneric Event事件上。

接受到消息后，将接收到到的消息显示出来，或者通过编写蓝图程序，通过消息内容执行交互事件，如使某个人物移动到指定的位置、如使某个顶牌显示出来，让视图定位到消息中指定的位置等。

步骤103，目标虚幻引擎客户端根据双向通信关系获取页面组件集合，并通过WebBrowser插件将页面组件集合进行界面排版，并将排版后的UI界面进行展示。

正常的页面一般通过浏览器进行打开，但是虚幻引擎中不能使用浏览器的，所以使用虚幻引擎的WebBrowse插件。

例如在WebBrowse插件中设置锚点的大小、位置以及尺寸，设置外观、可访问性等等。其中，WebBrowse插件中包括了重点参数可以为：

InitialURL: 想要显示的网页的地址或者本地html文件的文件路径。

SupportsTransparency:开启将支持网页背景透明。

通过上述参数可以调整控件大小、位置、页面http或本地路径等，即可快速进行界面排版，及调用多服务端页面及组件，组件的显示隐藏可以通过虚幻引擎内置蓝图进行控制，即可完成组件的切换及页面切换功能。

Web页面中可使用socket.io的io()方法进行socket的连接，并使用emit方法及on方法进行消息的发送和接收，发送方法即可给虚幻引擎发送消息，接收方法可以接收虚幻引擎发过来的消息。

在本申请可选的实施例中，Web页面客户端发送消息给Websocket服务器，由Websocket服务器转发指令给虚幻引擎客户端，既实现了控制虚幻引擎内部的交互及操作。在接受到消息的方法中，接受的为虚幻引擎给Web页面发送的消息指令，如让页面上某一条文字变红，让页面上的列表进行刷新等。这样Web页面和虚幻引擎即实现了相关通过指令进行交互。

本申请实施例还提供的一种基于JavaScript的虚幻引擎UI开发系统。系统包括：

Web页面客户端，用于响应界面开发指令，进行组件开发得到页面组件集合；其中，页面组件集合中包括多个待展示页面组件；

Websocket服务器，用于建立目标虚幻引擎客户端和Web页面客户端的双向通信关系；Websocket服务器通过nodejs搭建；

目标虚幻引擎客户端，用于根据双向通信关系获取页面组件集合，并通过WebBrowser插件将页面组件集合进行界面排版，并将排版后的UI界面进行展示。

在本申请实施例中，Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系，包括将目标虚幻引擎客户端和Web页面客户端通过预设端口接入到Websocket服务器，将Websocket服务器作为消息中转，实现两个客户端的双向消息通讯功能。

在本申请实施例中，目标虚幻引擎客户端根据双向通信关系获取页面组件集合，并通过WebBrowser插件将页面组件集合进行界面排版，包括通过WebBrowser插件构建出界面控件；在界面控件中根据调整页面http或本地路径进行页面组件调用，根据调整控件大小、位置以及尺寸进行界面排版。

本申请实施例提供的基于JavaScript的虚幻引擎UI开发系统用于实现上述基于JavaScript的虚幻引擎UI开发方法，关于基于JavaScript的虚幻引擎UI开发系统的具体限定可以参见上文中对于基于JavaScript的虚幻引擎UI开发方法的限定，在此不再赘述。上述基于JavaScript的虚幻引擎UI开发系统中的各个部分可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于设备中的处理器中，也可以以软件形式存储于设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (6)

1.一种基于JavaScript的虚幻引擎UI开发方法，其特征在于，所述方法包括：

响应于界面开发指令，在Web页面客户端中进行组件开发得到页面组件集合；其中，页面组件集合中包括多个待展示页面组件；

使用nodejs搭建Websocket服务器，基于所述Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系；

目标虚幻引擎客户端根据所述双向通信关系获取所述页面组件集合，并通过WebBrowser插件将所述页面组件集合进行界面排版，并将排版后的UI界面进行展示；

基于所述Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系，包括：

将目标虚幻引擎客户端和Web页面客户端通过预设端口接入到Websocket服务器，将Websocket服务器作为消息中转服务器，实现两个客户端的双向消息通讯功能；

将目标虚幻引擎客户端通过预设端口接入到Websocket服务器，还包括：

在目标虚幻引擎客户端中安装SocketIOClient插件；

选择组件，配置socket服务器链接；

通过蓝图程序，发送消息给web页面客户端；

在开始事件中配置socket链接后，接收到的消息及消息类型绑定到On Generic Event事件；

所述预设端口设置为3000。

2.根据权利要求1所述的方法，其特征在于，目标虚幻引擎客户端根据所述双向通信关系获取所述页面组件集合，并通过WebBrowser插件将所述页面组件集合进行界面排版，包括：

通过WebBrowser插件构建出界面控件；

在界面控件中根据调整页面http或本地路径进行页面组件调用，根据调整控件大小、位置以及尺寸进行界面排版。

3.根据权利要求2所述的方法，其特征在于，所述方法还包括：

通过虚幻引擎内置蓝图控制页面组件的显示/隐藏；

根据页面组件的显示/隐藏完成组件的切换及页面切换功能。

4.根据权利要求2所述的方法，其特征在于，所述方法还包括：

通过在界面空间中设置SupportsTransparency按钮选择是否开启UI界面。

5.一种基于JavaScript的虚幻引擎UI开发系统，其特征在于，所述系统包括：

Web页面客户端，用于响应界面开发指令，进行组件开发得到页面组件集合；其中，页面组件集合中包括多个待展示页面组件；

Websocket服务器，用于建立目标虚幻引擎客户端和Web页面客户端的双向通信关系；所述Websocket服务器通过nodejs搭建；

目标虚幻引擎客户端，用于根据所述双向通信关系获取所述页面组件集合，并通过WebBrowser插件将所述页面组件集合进行界面排版，并将排版后的UI界面进行展示；

Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系，包括：

将目标虚幻引擎客户端和Web页面客户端通过预设端口接入到Websocket服务器，将Websocket服务器作为消息中转服务器，实现两个客户端的双向消息通讯功能；

将目标虚幻引擎客户端通过预设端口接入到Websocket服务器，还包括：

在目标虚幻引擎客户端中安装SocketIOClient插件；

选择组件，配置socket服务器链接；

通过蓝图程序，发送消息给web页面客户端；

在开始事件中配置socket链接后，接收到的消息及消息类型绑定到On Generic Event事件；

所述预设端口设置为3000。

6.根据权利要求5所述的系统，其特征在于，目标虚幻引擎客户端根据所述双向通信关系获取所述页面组件集合，并通过WebBrowser插件将所述页面组件集合进行界面排版，包括：

通过WebBrowser插件构建出界面控件；

在界面控件中根据调整页面http或本地路径进行页面组件调用，根据调整控件大小、位置以及尺寸进行界面排版。

Images