本篇章前提要求:在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. CMT2300 收发一体 SUB 1G 支持灵活选频

    CMT2300A 是一款超低功耗,高性能,适用于各种140 至1020 MHz 无线应用的OOK,(G)FSK 射频收发器.它是CMOSTEK NextGenRFTM 射频产品线的一部分,这条产品线包 ...

  2. 忘记block格式 xib加载没有计算导航栏和tabbar的大小

    敲inlineBlock xib加载没有计算导航栏和tabbar的大小 /将这个属性改为no self.tabBarController.tabBar.translucent = NO; 判断优化,两 ...

  3. ATmega8仿真——外部中断的学习

    前面我们学习了ATmega8的I/O口作为通用数字输入/输出口来用时对LED数码管控制和扫描按键的应用: 但ATmega8多数的I/O口都是复用口,除了作为通用数字I/O使用,还有其第二功能,这里我们 ...

  4. 20个php框架

    对于Web开发者来说,PHP是一款非常强大而又受欢迎的编程语言.世界上很多顶级的网站都是基于PHP开发的.本文我们来回顾一下20个2014年最优秀的PHP框架. 每一个开发者都知道,拥有一个强大的框架 ...

  5. Vue.js高仿饿了么WebApp

    介绍 学习Vue.js也有一阵子了,为了加深对Vue的理解及运用,做了一个小项目.这是一个高仿饿了么外卖WebApp,现已完成商品预览.商品详情.商家预览.添加购物.查看评论等功能. 部分截图 项目预 ...

  6. JVM-2.Class文件结构

    1.Class文件 (1)无关性:除了平台无关性,JVM还支持语言无关性:目前Clojure.Groovy.JRuby.Jyphon.Scala等语言可以在JVM上运行.实现语言无关性的原理仍然是字节 ...

  7. iOS enum C方法 DEBUG, RELEASE的隐藏的一个坑

    开发了一个app, 在debug模式下没有任何问题,在release模式下就直接崩溃. 经过一段时间的定位终于定位到如下的这一段代码: E_BZ_TestType type = [dic[@" ...

  8. spring quartz开发中使用demo

    1.首先在pom.xml中配置quartz的jar: <!--定时器--> <dependency> <groupId>org.quartz-scheduler&l ...

  9. 快速排序(Quicksort)的Javascript实现

    日本程序员norahiko,写了一个排序算法的动画演示,非常有趣. 这个周末,我就用它当做教材,好好学习了一下各种排序算法. 排序算法(Sorting algorithm)是计算机科学最古老.最基本的 ...

  10. JavaScript用二分法查找数据等

    //二分法查数据 var arr=[41,43,45,53,44,95,23]; var b=44; var min=0; var max=arr.length; for(var i=1;i<a ...