不知道大家有没有混淆。这篇教程说的是从蓝图中调用JS的功能(以改变H5内的内容)。

在安装了UE4和RadiantUI的前提下学习这篇教程。本篇教程接着上一篇教程,建议请先看上一篇。

第一步:在网页中加入如下JS代码:

    <script>
//和蓝图的交互逻辑:
function HelloWorld(){//这个函数在前一篇教程中有
RadiantUI.TriggerEvent("HelloW");
}
RadiantUI.SetCallback("HelloW2", //这个表示能够从UE的蓝图中调用的函数,起名为HelloW2
function(){
document.getElementById("forDebugPara").innerHTML="从蓝图中调用了JS";
});
</script>

其中的forDebugPara请随便找个<p>节点写一下就好了。

第二步:

在UE中创建javascriptfunctioncall:

在其中写函数名即可:

第三步:在你当前的RadiantHUD中的某个元素中写此JS函数的调用过程:(注:下图写在radiantelement中)

第四步:在你的RadiantHUD中写调用上述FuncCalledFromHUD函数的过程:

如果有不明白,请留言!

原创声明:本文系小江村儿的文杰原创,若有参考的资料必在本文中给出。——2017年7月12日17:19:40

Unreal Engine 4 Radiant UI 插件入门(三)——从蓝图中调用JS的更多相关文章

  1. Unreal Engine 4 Radiant UI 插件入门教程(二)

    本篇章前提要求:在UE4上安装了Radiant UI插件.如果没有安装,请找其它教程(或者是笔者的其它的教程,目前正在写). 本教程的目的:探讨如何从网页元素中调用蓝图中的内容: 第一步: 写一个网页 ...

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

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

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

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

  4. FLASH CC 2015 CANVAS (三) flash中写JS调用html中JS的函数,变量

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 首先我们在HTML里的JS里面添加几行代码 我们在FLASH中新建一个元件,并拖入到舞台,在属性面板 ...

  5. UI自动化测试(三)对页面中定位到的元素对象做相应操作

    前两天分别讲述了UI自动化测试基础以及对页面元素该如何进行定位,这一篇自然就是对定位到的页面元素对象进行相应操作啦. 阅读目录 1.常用操作元素对象的方法 2.鼠标事件操作 3.键盘事件操作 4.We ...

  6. 英特尔帮助优化 Epic 的《堡垒之夜》* 和 Unreal Engine*

    您可能知道,Epic 的游戏<堡垒之夜>是 Unreal Engine* 技术的绝佳示例,<堡垒之夜>的开发团队正不断改进游戏,增加支持平台的数量并将信息反馈给引擎.为此,英特 ...

  7. Unreal Engine 4(虚幻UE4)GameplayAbilities 插件入门教程(三)技能标签(Ability Tags)

    本教程参考了https://wiki.unrealengine.com/GameplayAbilities_and_You,如果没有学习前两篇教程,请前往学习. GameplayAbilities插件 ...

  8. Unreal Engine 4(虚幻UE4)GameplayAbilities 插件入门教程(二)

    我们接着学习.如果没有学习第一篇,请前往学习. 由于GameplayAbilities插件基本上没有资料(除了前面提供的那篇Dave的博文以外,再无资料,有迹象表明Dave是这个插件的开发者). 这个 ...

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

    原文:Unreal Engine 4 Tutorial for Beginners: Getting Started 作者:Tommy Tran 译者:Shuchang Liu 本篇教程将引导你安装U ...

随机推荐

  1. kali虚拟机安装提示安装系统步骤失败

    首先虚拟机不论是VM还是VirtualBox都可以直接安装kali镜像文件的,不过如果你采用虚拟机默认硬盘8G设置的话,到的系统安装步骤会出错无法继续,具体原因不明. 解决办法却很简单,将虚拟机的硬盘 ...

  2. 一、Openstack_Ocata环境部署准备

    OpenStack Ocata环境搭建准备 1.workstation下配置3个虚拟交换机 点击编辑-->虚拟网络编辑器 名称 IP地址 作用 VMnet1 10.1.1.0 Openstack ...

  3. mongo查询系统

    首先,我们先向集合(collections)中添加测试文档(documents).如下: > for(i=1;i<=5;i++) db.test.insert({x:i,y:i*i,z:6 ...

  4. 每天一个JS 小demo之“随机”抽奖。主要知识点:Math函数,数组方法,递归

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  5. 作为前端,我为什么选择 Angular 2?

    转自:https://sanwen8.cn/p/2226GkX.html 没有选择是痛苦的,有太多的选择却更加痛苦.而后者正是目前前端领域的真实写照.新的框架层出不穷:它难吗?它写得快吗?可维护性怎样 ...

  6. Webpack 代码分离

    Webpack 代码分离 代码分离是 webpack 中最引人注目的特性之一. 你可以把你的代码分离到不同的 bundle 中,然后你就可以去按需加载这些文件. 总的来说, webpack 分离可以分 ...

  7. [USACO08NOV]奶牛混合起来Mixed Up Cows

    题目描述 Each of Farmer John's N (4 <= N <= 16) cows has a unique serial number S_i (1 <= S_i & ...

  8. Bash On Windows的学习

    Bash On Windows的学习 Bash On Windows的卸载 删除软件和设置:在 cmd 运行lxrun /uninstall 删除所有文件:在cmd中运行lxrun /uninstal ...

  9. Vue 项目实战系列 (三)

    我们继续前两节的开发.本节教程实现的效果如下: 效果很简单,但是实现起来却要用到Vue的很多知识,下面我们将一步一步的实现这个效果. 首先这些城市的信息都是从后台的server里面获取的,所以我们需要 ...

  10. 【Android Developers Training】 48. 轻松拍摄照片

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...