UE4 WebUI插件
最新回答
上帝的女孩
2024-11-25 11:32:01
我们先来探讨实现过程，然后附上工程示例和C++插件，其余的您可以自行研究。
在U3时代，UI之所以如此炫酷，是因为它基于GFX，而GFX实际上是基于Flash的。Flash作为许多3A大厂的经典中间件，为众多炫酷游戏UI的诞生提供了支持。然而，随着UE4的推出，默认不提供GFX，因为其授权对普通人来说过于昂贵。因此，UE4默认只能使用slate或UMG来编写UI。但这并非绝对。
虽然UE4提供的这两个官方UI方法可以编写出任何想要的UI，但与GFX相比，它们可能不太方便。对于那些想要使用炫酷效果UI但又不会slate、UMG的用户，可以尝试使用WebUI。
之前我曾写过一篇关于UE4集成GFX的文章，前提是您需要购买授权。当时单平台授权费用约为80万。
回到正题，我从小熊猫的程序道路起家，尤其是在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元素。UE中的处理方法就是==，获取到当前点击的doc元素。然后，会添加一个Event，这里我称之为JSEvent。这个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中绑定的函数进行操作：
除了读取本地文件，您还可以使用UE自带的方法LoadURL。
最后，我们来看一下效果。这里我简单演示了一下Print，具体操作请您自行实现。
2020年更新：根据用户反馈，我们统一解决了许多问题。
链接：pan.baidu.com/s/1GPBvjo...
提取码：o8fj
热门标签
