UE4 WebUI插件

UE4 2018-09-03

标题的UE4 UI是不是特别炫酷哇,不急不急,听我慢慢讲。

和以前一样先说实现然后最后放上图中工程和C++插件,剩下的自己研究吧。

记得以前用U3时,那会UI可以做的特别炫酷,是因为基于GFX,GFX其实又是基于flash,这个作为很多3A大厂的经典中间件,缔造了多的一批的炫酷游戏UI,后来UE4出来了,默认不提供GFX,因为这个授权作为普通人来讲太贵了,所以现在UE4默认只能用slate或者UMG去写,但是这个不是绝对的。

只是说相比较来说UE4提供的这两个官方UI办法可以写出来任何想要的UI,GFX只是更加方便制作。那么对于想用牛逼的效果UI又不会slate,UMG也觉得麻烦的话,可以试试WebUI。

以前写过一个UE4集成GFX的文章,前提是你需要去买授权。发那篇文章的时候单平台好像是80万来着,有需要可以看看:https://ericsong.org/2016/12/841.html

回到正题,小熊猫本人程序道路是从WEB起家,尤其是H5出来后对各种特效简直不要不要的,UE4集成CEF框架,所以你可以很简单的使用各种WEB通信,然后到浏览器的渲染。来跟我说一下UE大法好。

最近除了做了Touch游戏模板,还做了一个插件,可以使用H5来写UE的UI,那很多人就有疑问了,UE不是商店有么,github不是有么,是这样的,如果你一直拿着别人的东西来用,那是在一个层面,如果你想让自己变得更强,那么你就要自己研究自己写,不管做的东西有多么简单,自己做过的东西,才最踏实,这样你才能成长啊,不然那些大佬怎么来的,衣来伸手饭来张口永远不会成长,嗯,来自小熊猫语录哈哈哈哈。

这个插件的实现原理,我就简单说一下,商店里也有卖5美元的WEBUI插件,github也有免费的,我相信真正下功夫的人,能自己琢磨出来。我只说下我的这个插件实现原理。

首先UE4读取一个HTML文件,读取外部文件我之前的博文中有说过,那个什么实时读取外部模型,还有C++那一块,也有讲过做法。

读取到HTML后,会遍历一个函数数组内的UE4函数名,这个数组,是一个字符串数组,里面是搜索HTML文中的关键字,这个只读取一次,然后点击HTML上的onclick事件,这个事件会触发一个函数,这个函数的名字在UE4中解析,也就是说点击一个Button后,会选择当前点击的doc元素,这个doc元素,UE里面的处理方法就是==,获取到当前点击的doc元素,那么就会添加一个Event,这里我叫做JSEvent,这个会读取HTML获取当前选择的doc元素变量,HTML中变量叫做var obj,UE这个JSEvent==OBJ[array]中的数据,也就是当前JSEvent等于当前函数名数组中的点击对象时候,返回obj,也就是返回事件,在UE4中意思就是CustomEvent事件。

WEB中,不管是DIV还是BUTTON还是IMG都可以调用onclick,或者自己写Function里调用click,调用格式为:

onclick=”LinkUE4(‘XXX’)”

LinkUE4是UE4会匹配的一个识别名称,后面的是函数名字,所以这里是UE4匹配名+函数名。

其次需要添加LinkUE4.js,这个主要是用来与JSEvent传输数据和点击的doc元素做匹配。

然后UE中,UMG我们需要拖出一个新的分类:

然后这个新的类型,需要Load一个HTML本地文件,然后你需要对你的HTML中绑定的函数取一下:

除了读取本地,你还可以LoadURL,UE自带方法不说了。

最后效果我们来一个视频好了,这里我就简单的Print了一下,具体什么操作自己实现。

链接:https://pan.baidu.com/s/15ZjDSwQYo3BEmLNDb_iXgQ 密码:72bn

Source:源码下载

评论 (33)
  • tan

    请问大佬你的WebUI插件是怎么做的呀?

    回复
    • Eric Song

      这个其实官方已经集成在UE4中有相关的接口,论坛上也有很多人有案例怎么创建和使用这些东西,直接拿来抄就好了。

      回复
    • tan

      你是调用的哪些接口呀?

      回复
    • Eric Song

      基于引擎的WebBrowser,你看下源码

      回复
  • Zjolin

    请问大佬,为啥我做的webui插件他是带着浏览器的背景图的,这个怎么去掉啊

    回复
    • Eric Song

      你看下body是不是透明的还是给了背景属性。

      回复
  • Zjolin

    我用的是UE4的WebBrowse控件,他就是一个内嵌的浏览器,自带浏览器的白色背景,这个有办法去掉吗

    回复
    • Eric Song

      不行,这个是他网页本身再body里设置了背景,只能改他原页面的背景。但是换句话说回来UE的webbrowser理论上是可以采集页面数据然后强制把body背景设置为空。这个是理论上应该是可行,但是也许不行,因为采集本身是有问题的,例如登陆页面或者有数据传输的页面采集,不是静态页面的采集。

      回复
    • Zjolin

      那请问大佬,我怎么才能达到你那个效果呀,我看了WebBrose的源码,不是很能理解,Ue4是通过怎么样的形式来把HTML的内容变成一个个元素绘制出来

      回复
    • Eric Song

      那个只是渲染页面的,不会做其他处理,你看文章底部的链接里我有一个工程,我是手动改了body的

      回复
  • xxx

    老哥能借鉴下源码吗,有偿的

    回复
    • Eric Song

      源码再文章底部

      回复
    • xxx

      没有C++那部分呀

      回复
    • Eric Song

      好吧看了下好像是。等周末把代码传上去。

      回复
  • able

    老哥能分享下源码嘛 或者上商店售卖 你这个比商店里的webUI和论坛里的BULI好用太多了

    回复
    • Eric Song

      我等下下午把source文件夹传上来,还是丢在文章最后。

      回复
  • 郭宇

    老哥 你可以看看GT 也是一个Web方面的三方库 虚幻的这一套WebUI性能有点问题的

    回复
    • Eric Song

      嗯有时间的话抽一抽,蟹蟹老哥。话说你之前用Cor(忘了怎么拼了)UI那个好用嘛

      回复
  • able

    官方渲染消耗太大 分辨率5760*4320 网页的渲染一秒5帧左右

    回复
  • zz

    这个里面,JS怎么回调ue中c++的函数呢

    回复
    • Eric Song

      例如function showFPS(){
      UE4ConsoleCommand(“stat fps”);
      };

      回复
  • 未来很美

    mac下项目打不开,插件只编译了win64的是不是啊,mac的如何编译呢?

    回复
    • Eric Song

      emmmMAC我没有弄过啊,要不你下载源码编个mac的

      回复
  • 未来很美

    非常感谢,我编译完了,但是我这个电脑上Load HTML File,加载的html页面不能引入外部js和css,只能将所有的js和css都放到一个html中,有什么方法能解决这个问题呢,非常不方便。

    回复
    • Eric Song

      今天刚上班,我记得当时做的时候是可以引入外链的,调用了一个jQuery库,等我忙完看看

      回复
  • ccc

    老哥,js的按钮是怎么触发到UE上的

    回复
    • Eric Song

      通过绑定的onclick时间呀。onclick=”LinkUE4(‘XXX’)” 加上linkue4就行

      回复
  • lzh

    老哥,源码和示例中代码不一致

    回复
    • Eric Song

      源码和DEMO代码是不一样的,一个完整的一个精简的,但是实现还是一样的方法

      回复
    • lzh1214

      主要是打开网页后,网页上的点击事件在蓝图通过bind事件,没有调用。我看webui的实现是通过swebbrowser的绑定事件回调的

      回复
    • lzh

      请问你这个插件里registerJavascriptEvent的返回值里没有处理绑定事件的调用,那么绑定事件onJavascriptEventXXX是在那里调用的

      回复
  • leiyu

    新萌表示,4.21根本打不开,源码不知道怎么导入蓝图项目,求大佬指导

    回复
  • lzh

    您好,请问商城里的这个插件是你写的吗?https://www.unrealengine.com/marketplace/html-menus

    回复
Top