本篇章前提要求：在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中，然后运行：

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

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

Unreal Engine 4 Radiant UI 插件入门教程（二）的更多相关文章

  1. Unreal Engine 4 Radiant UI 插件入门（三）——从蓝图中调用JS

    不知道大家有没有混淆.这篇教程说的是从蓝图中调用JS的功能(以改变H5内的内容). 在安装了UE4和RadiantUI的前提下学习这篇教程.本篇教程接着上一篇教程,建议请先看上一篇. 第一步:在网页中 ...

  2. Unreal Engine 4 Radiant UI 入门教程（一）制作Radiant HUD

    请注意:本篇教程的编号是从零开始的,如果没有看第零篇教程,请前往学习. 本教程介绍如何制作Radiant HUD,这是指将网页元素直接加入到HUD中,效果为: 对应的网页元素为: 第一步: 将之前下载 ...

  3. Unreal Engine 4 Radiant UI 入门教程（零）在场景中摆放网页

    相关的学习资源: https://forums.unrealengine.com/showthread.php?12097-PLUGIN-RadiantUI-SDK-UIs-HUDs-Interact ...

  4. SpringBoot入门教程(二)CentOS部署SpringBoot项目从0到1

    在之前的博文<详解intellij idea搭建SpringBoot>介绍了idea搭建SpringBoot的详细过程, 并在<CentOS安装Tomcat>中介绍了Tomca ...

  5. JasperReports入门教程(二)：中文打印

    JasperReports入门教程(二):中文打印 背景 在上一篇中我们介绍了JasperReport的基本入门,也展示了一个报表.但是我们的示例都是使用的英文,如果我们把需要打印的数据改为中文会怎么 ...

  6. 无废话ExtJs 入门教程二十一[继承：Extend]

    无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...

  7. 无废话ExtJs 入门教程二十[数据交互：AJAX]

    无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  8. 无废话ExtJs 入门教程二[Hello World]

    无废话ExtJs 入门教程二[Hello World] extjs技术交流,欢迎加群(201926085) 我们在学校里学习任何一门语言都是从"Hello World"开始,这里我 ...

  9. mongodb入门教程二

    title: mongodb入门教程二 date: 2016-04-07 10:33:02 tags: --- 上一篇文章说了mongodb最基本的东西,这边博文就在深入一点,说一下mongo的一些高 ...

随机推荐

  1. 【Netty】EventLoop和线程模型

    一.前言 在学习了ChannelHandler和ChannelPipeline的有关细节后,接着学习Netty的EventLoop和线程模型. 二.EventLoop和线程模型 2.1. 线程模型 线 ...

  2. React 读书笔记

    序言: 领导安排部门同事本月内看一本跟自己职业相关的书籍, 根基类的书籍已经看过了,重复阅读的意义不大,所以我平时看的都是视频,也许是视频作者没有出书的条件,也许是现在出书看的人越来越少了,也许有其他 ...

  3. 写了一个Mac快速设置、打开和关闭Web代理的Shell命令

    缘由(痛点) 每次在Mac上设置Web代理,都需要点开"系统偏好设置 -- 网络 -- 高级 -- 代理",然后分别设置Web代理(HTTP)和安全Web代理(HTTPS),设置完 ...

  4. JDBC的批处理操作三种方式

    SQL批处理是JDBC性能优化的重要武器,批处理的用法有三种. package lavasoft.jdbctest; import lavasoft.common.DBToolkit; import ...

  5. zookeeper 新手安装指南

    Zookeeper集群的角色:  Leader 和  follower  (Observer) zk集群最好配成奇数个节点 只要集群中有半数以上节点存活,集群就能提供服务 本事例采用版本:zookee ...

  6. 关于Java常见的误解

    误解一:JavaScript是Java的简易版 JavaScript是一种在网页中使用的脚本语言,它的原名叫做LiveScript.JavaScript的语法与Java类似.除此之外,他们再无任何关系 ...

  7. 匿名属性 anonymous property

    利用匿名属性可以用很简洁的语法来自动声明不可变(immutable)的元组(tuple)类型. 属性:在字段用来表示类型和对象的状态的前提下,希望状态不被随意的更改,字段一般应该设置为private, ...

  8. 关于 asp.net 点击确定按钮 获取不到新值问题

    点击事件内,可以使用request.form[" kk"] 获取到值,但是this.txt.Text 确实旧值, 尼玛,居然没加isPostBack重新加载了数据 ,request ...

  9. 技术分析 | 新型勒索病毒Petya如何对你的文件进行加密

    6月27日晚间,一波大规模勒索蠕虫病毒攻击重新席卷全球. 媒体报道,欧洲.俄罗斯等多国政府.银行.电力系统.通讯系统.企业以及机场都不同程度的受到了影响. 阿里云安全团队第一时间拿到病毒样本,并进行了 ...

  10. java设计模式综合项目实战视频教程

    java设计模式综合项目实战视频教程 视频课程目录如下: 第01节课:本课程整体内容介绍:X-gen系统概况,包括:引入.X-gen项目背景.X-gen的HelloWorld第02节课:X-gen整体 ...