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

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

【技术实现步骤摘要】
基于JavaScript的虚幻引擎UI开发方法及系统


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

技术介绍

[0002]虚幻引擎做为一款实时交互渲染引擎，非常广泛的应用在游戏、影视、建筑、数字孪生城市等行业，通常使用虚幻引擎进行应用开发，并且开发出的各类应用都离不开UI界面，通常的UI界面主要使用的蓝图或者C++进行UI开发。
[0003]然而此类方法如果开发单机版应用可以满足要求，但是如数字孪生城市行业大多需要的如在浏览器使用像素流访问，开发过程中可能多厂商合作集成，则会遇到像素流情况下UI界面适配性差，多厂商开发集成难度大等问题。

技术实现思路

[0004]基于此，本申请实施例提供了一种基于JavaScript的虚幻引擎UI开发方法及系统，能够通过JavaScript对页面组件进行开发，并将页面集成到虚幻引擎中。
[0005]第一方面，提供了一种基于JavaScript的虚幻引擎UI开发方法，该方法包括：响应于界面开发指令，在Web页面客户端中进行组件开发得到页面组件集合；其中，页面组件集合中包括多个待展示页面组件；使用nodejs搭建Websocket服务器，基于所述Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系；目标虚幻引擎客户端根据所述双向通信关系获取所述页面组件集合，并通过WebBrowser插件将所述页面组件集合进行界面排版，并将排版后的UI界面进行展示。
[0006]可选地，基于所述Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系，包括：将目标虚幻引擎客户端和Web页面客户端通过预设端口接入到Websocket服务器，将Websocket服务器作为消息中转，实现两个客户端的双向消息通讯功能。
[0007]可选地，将目标虚幻引擎客户端通过预设端口接入到Websocket服务器，还包括：在目标虚幻引擎客户端中安装SocketIOClient插件；选择组件，配置socket服务器链接；通过蓝图程序，发送消息给web页面客户端。
[0008]在开始事件中配置socket链接后，接收到的消息及消息类型绑定到On Generic Event事件。
[0009]可选地，所述预设端口可以设置为3000。
[0010]可选地，目标虚幻引擎客户端根据所述双向通信关系获取所述页面组件集合，并通过WebBrowser插件将所述页面组件集合进行界面排版，包括：通过WebBrowser插件构建出界面控件；
在界面控件中根据调整页面http或本地路径进行页面组件调用，根据调整控件大小、位置以及尺寸进行界面排版。
[0011]可选地，所述方法还包括：通过虚幻引擎内置蓝图控制页面组件的显示/隐藏；根据页面组件的显示/隐藏完成组件的切换及页面切换功能。
[0012]可选地，所述方法还包括：通过在界面空间中设置SupportsTransparency按钮选择是否开启UI界面。
[0013]第二方面，提供了一种基于JavaScript的虚幻引擎UI开发系统，该系统包括：Web页面客户端，用于响应界面开发指令，进行组件开发得到页面组件集合；其中，页面组件集合中包括多个待展示页面组件；Websocket服务器，用于建立目标虚幻引擎客户端和Web页面客户端的双向通信关系；所述Websocket服务器通过nodejs搭建；目标虚幻引擎客户端，用于根据所述双向通信关系获取所述页面组件集合，并通过WebBrowser插件将所述页面组件集合进行界面排版，并将排版后的UI界面进行展示。
[0014]可选地，Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系，包括：将目标虚幻引擎客户端和Web页面客户端通过预设端口接入到Websocket服务器，将Websocket服务器作为消息中转，实现两个客户端的双向消息通讯功能。
[0015]可选地，目标虚幻引擎客户端根据所述双向通信关系获取所述页面组件集合，并通过WebBrowser插件将所述页面组件集合进行界面排版，包括：通过WebBrowser插件构建出界面控件；在界面控件中根据调整页面http或本地路径进行页面组件调用，根据调整控件大小、位置以及尺寸进行界面排版。
[0016]本申请实施例提供的技术方案中首先响应于界面开发指令，在Web页面客户端中进行组件开发得到页面组件集合；然后使用nodejs搭建Websocket服务器，基于Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系；最后目标虚幻引擎客户端根据双向通信关系获取页面组件集合，并通过WebBrowser插件将页面组件集合进行界面排版，并将排版后的UI界面进行展示。可以看出，本专利技术的有益效果在于：（1）降低了虚拟引擎UI开发的技术门槛，使从事Web开发的人员也可配合虚幻引擎开发师进行虚幻引擎应用的开发；（2）便于系统集成，每块UI的界面都可以单独开发，由虚幻引擎通过服务单独调用；（3）使用Websocket技术进行双向通讯解决了即使不在统一UI页面，也可以给虚幻引擎发送交互指令，可以达到遥控的效果。
附图说明
[0017]为了更清楚地说明本专利技术的实施方式或现有技术中的技术方案，下面将对实施方式或现有技术描述中所需要使用的附图作简单地介绍。显而易见地，下面描述中的附图仅仅是示例性的，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据
提供的附图引申获得其它的实施附图。
[0018]图1为本申请实施例提供的一种基于JavaScript的虚幻引擎UI开发场景示意图；图2为本申请实施例提供的一种基于JavaScript的虚幻引擎UI开发方法流程图；图3为本申请实施例提供的页面组件示意图。
具体实施方式
[0019]为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
[0020]在本专利技术的描述中，术语“包括”、“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包括了一系列步骤或单元的过程、方法、系统、产品或设备不必限于已明确列出的那些步骤或单元，而是还可包含虽然并未明确列出的但对于这些过程、方法、产品或设备固有的其它步骤或单元，或者基于本专利技术构思进一步的优化方案所增加的步骤或单元。
[0021]如图1，给出了本申请的开发（实施）场景示意图，具体包括了Web页面客户端、nodejs服务器以及虚幻引擎客户端，在本申请中通过本场景具体实现了虚幻引擎调用本地及远程服务器的JavaScript开发的UI组件，以及通过Websockt进行虚幻引擎及Web页面的双向通讯方法。
[0022]具体地，请参考图2，其示出了本申请实施例提供的一种基于JavaScript的虚幻引擎UI开发方法的流程图，该方本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于JavaScript的虚幻引擎UI开发方法，其特征在于，所述方法包括：响应于界面开发指令，在Web页面客户端中进行组件开发得到页面组件集合；其中，页面组件集合中包括多个待展示页面组件；使用nodejs搭建Websocket服务器，基于所述Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系；目标虚幻引擎客户端根据所述双向通信关系获取所述页面组件集合，并通过WebBrowser插件将所述页面组件集合进行界面排版，并将排版后的UI界面进行展示。2.根据权利要求1所述的方法，其特征在于，基于所述Websocket服务器建立目标虚幻引擎客户端和Web页面客户端的双向通信关系，包括：将目标虚幻引擎客户端和Web页面客户端通过预设端口接入到Websocket服务器，将Websocket服务器作为消息中转服务器，实现两个客户端的双向消息通讯功能。3.根据权利要求2所述的方法，其特征在于，将目标虚幻引擎客户端通过预设端口接入到Websocket服务器，还包括：在目标虚幻引擎客户端中安装SocketIOClient插件；选择组件，配置socket服务器链接；通过蓝图程序，发送消息给web页面客户端；在开始事件中配置socket链接后，接收到的消息及消息类型绑定到On Generic Event事件。4.根据权利要求2所述的方法，其特征在于，所述预设端口可以设置为3000。5.根据权利要求1所述的方法，其特征在于，目标虚幻引擎客户端根据所述双向通信关系获取所述页面组件集合，并通过WebBrowser插件将所述页面组件集合进行界面排版，包括：通过WebBrowser插件构建出界面控件；在界面控件中根据调整页面http或本地路径进行页面组件...

【专利技术属性】
技术研发人员：刘阳，胡伟，高占平，温郁庆，屈瑶，
申请(专利权)人：北京爱特拉斯信息科技有限公司，
类型：发明
国别省市：