Unreal Engine 4 Radiant UI 插件入门教程

本篇章前提要求:在UE4上安装了Radiant UI插件。如果没有安装,请找其它教程(或者是笔者的其它的教程,目前正在写)。

本教程的目的:探讨如何从网页元素中调用蓝图中的内容:

第一步:

写一个网页,大致内容为:

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>T</title>

        <!--Mark-->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><!--这个不是必要的,这个是bootstrap样式-->
        <!--an-->
        <script type="text/javascript" src="js/createjs-2015.11.26.min.js"></script><!--这个的必要性没有考究-->
        <!--an-->
        <script type="text/javascript" src="js/radiantui-null.js"></script><!--原来这个也是不必要的-->
        <!--Mark end-->

        <script type="text/javascript">
            function HW(){
                RadiantUI.TriggerEvent(‘HelloW‘);
            }
        </script>
	</head>
	<body>
        <button type="button" onclick="HW()">nihao</button>
	</body>
</html>

其中的Mark所标注的内容请注意,不一定都需要的!但是注意其中的radiantui-null.js是必要的【修正:已经证实这个不必要了,可以无视】,这个文件如果没有写的话,请自己声明,因为它的内容很短,如下:

var RadiantUI;
if (!RadiantUI) {
	RadiantUI = {};
	RadiantUI.TriggerEvent = function() {}
	RadiantUI.SetCallback = function() {}
	RadiantUI.RemoveCallback = function() {}
}

对的,先摆上去再说,createjs-2015.11.26.min.js这个文件可以搜一搜,以网络资源的形式包含进来即可。逻辑上的内容是那个按钮,按钮调用了HW()函数,而这个函数里的唯一一句代码是RadiantUI.TriggerEvent("HelloW"),这是指什么呢?先放一放。

在UE4中,声明一个RadiantUIElement

双击并在其中的url中写入这个html文件的相对位置(注意将这个文件放在合适的地方)。然后写上HelloW函数。

新建一个RadiantHUD,然后绑上上述的这个元素(我这里的起名是RUIElem_Lobby)

最后放置在gamemode中,然后运行:

可能描述不太清晰,不明白请留言。

原创声明:本文系小江村儿的文杰原创,若有参考的资料必在本文中给出。

时间: 2024-11-09 20:20:23

Unreal Engine 4 Radiant UI 插件入门教程的相关文章

Unreal Engine 4 Radiant UI 入门教程(一)制作Radiant HUD

请注意:本篇教程的编号是从零开始的,如果没有看第零篇教程,请前往学习. 本教程介绍如何制作Radiant HUD,这是指将网页元素直接加入到HUD中,效果为: 对应的网页元素为: 第一步: 将之前下载的工程中的WebUI文件夹拷贝到我们自己的工程(LearnRUI)的同位置下: 复制到: 第二步: 创建一个蓝图(RadiantWebViewHud) 创建一个新的Gamemode,将这个HUD放进去: 在worldsettings中放置这个Gamemode: 第三步: 创建蓝图(RadiantWe

Unreal Engine 4 Radiant UI 入门教程(零)在场景中摆放网页

相关的学习资源: https://forums.unrealengine.com/showthread.php?12097-PLUGIN-RadiantUI-SDK-UIs-HUDs-Interactive-WebViews-HTML5-Javascript-CSS https://www.youtube.com/channel/UCnhY_Rd8iyFrvzOgQVptWqg http://www.bootcss.com/ https://github.com/LeGone/RadiantUI

Unreal Engine 4(虚幻UE4)GameplayAbilities 插件入门教程(六)GameplayEffect的级别设置

本节的内容不难,权当是复习.如果没有完成前面的教程,请前往学习. 第一步:用一个csv文件表示级别数据,下图中的Hurt随级别1~7表示其损伤值在1~7级别时分别是-7,-14,-20等.写好之后关闭. 第二步:导入数据(选择Curvetable) 第三步:双击查看.当您修改了CSV文件后想要重新导入,请点击: 第四步: 在GE_Poison中配置曲线表到ScalableFloatMagnitude中,其中的1.0表示以1.0倍引用表格中的数据.在右侧的PreviewAtN可以查看效果. 第五步

Unreal Engine 4(虚幻UE4)GameplayAbilities 插件入门教程(五)技能属性集(AttributeSet)

如果没有完成前面的教程,请前往学习.先上一段理论介绍(源于https://wiki.unrealengine.com/GameplayAbilities_and_You#GameplayTasks): [如果您没有耐心看完这些介绍,请调到MarkA处] AttributeSets are thankfully very simple to explain. They define float values (and ONLY float values. Right now only float

Unreal Engine 4(虚幻UE4)GameplayAbilities 插件入门教程(四)技能屏蔽和简单的Buff等

本节内容继续上一节教程的内容(如果没有看过前面的教程,请前往学习),不会讲太难的新东西,而是继续探究技能标签(Abiilty Tags)的内容.先来一道开胃菜. 第1.1步: 将上一次的召唤冰龙中的CancelAbilitiesWithTags清空,表示这个技能不会打断任何其他技能.在"阻塞技能列表"BlockAbilitiesWithTags中配置Magic.Fire. 第1.2步:冰龙的激活逻辑修改为下图所示,表示它也是耗时的技能. 第1.3步:运行,先释放烈焰之鸟后释放冰龙,从打

QGIS开发Python插件入门教程

Building Our First Plugin with 'Plugin Builder' It's time to get our feet with the Plugin Builder . 1. On the QGIS menu bar click on the Plugin Builder icon to launch the plugin: 2. The main Plugin Builder dialog will appear. This is where we fill ou

Unreal Engine 4(UE4)下载教程

首先登陆到UE官方网站https://www.unrealengine.com  下载EpicGamesLauncherInstaller-2.1.3-2533468.msi文件 按照提示进行安装 如果没有用户名的需要先注册一个用户名  然后输入个人信息进行登陆 进入到UE引擎下载界面 添加版本,然后进行下载安装

Unreal Engine 4 系列教程 Part 1:入门

.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > .katex-html { display: block; } .katex-display > .katex > .katex-html > .tag { position: absolute; right: 0px; } .katex { font: 1.21em/1.2 KaTeX_M

实例甜点 Unreal Engine 4迷你教程(2)之用C++改变Image小部件的颜色

完成本迷你教程之前,请前往完成以下迷你教程: ·实例甜点 Unreal Engine 4迷你教程之如何用C++将纹理绘制在UserWidget的Image小部件上: 目标:实现UMG中的此功能: 在上一次的迷你教程的LearnWidgets工程上进行(如果你不亲自动手做的话,只关注标有"重要"的部分即可粗略知道要点). 第1步:在WidgetMng.h中加入此函数 UFUNCTION() void LearnImage(); 实现是: void AWidgetMng::LearnIma