ThingUE蓝图生成javascript使用举例

前言

由美术和开发人员制作的UE中的蓝图虽然可以通过javascript代码调用，但不直观，开发人员无法获取到蓝图中到底包含哪些方法和变量。从ThingUE2.0版本开始，ThingUE为UE蓝图生成js代码以及相应的配套工具。获取和使用蓝图js脚本主要存在以下两种情况，。

• 获取场景中的蓝图
• 动态创建蓝图

下面就两种情况举例说明 案例中的蓝图对象是一个3D柱状图BP_Histogram，可以通过蓝图控制柱子的高低、粗细、数值百分百、颜色等参数。

获取场景中的蓝图

柱状图已经初始化在场景中，通过query查询到柱状图对象。

function getHistogramFromScene(){
    //通过蓝图的类型查询到蓝图
    const histogram = app.queryByType('BP_Histogram')[0];
    //蓝图的所有方法可通过histogram.functions查询
    histogram_01.functions.forEach((func)=>{
        console.log(func);
    });
    //调用F_Build方法让柱子显示
    histogram_01.F_Build();
    return histogram;
}
const histogram_01 = getHistogramFromScene();

动态创建蓝图

如果场景中没有预先摆好这些柱状图，需要开发人员根据数据驱动来动态创建，则可以按以下步骤来完成。

前提条件：将场景包里的蓝图、补丁包拷贝到开发目录下。

下面是创建柱状图的代码

//引用柱状图的脚本
const BP_Histogram = require('./blueprints/BP_Histogram/BP_Histogram');
function CreateHistogram(value){
    //创建一个柱状图
    const histogram = new BP_Histogram({
        id:value,
        name:value
    })
    //创建完成后显示
    histogram.build();
}
const histogram_02 = CreateHistogram('histogram_02');
//可通过thingjs的接口设置柱状图然的位置
histogram_02.position = [100,0,0];

生成前	生成后

修改蓝图的属性值

蓝图会提供一些参数供修改。以此柱状图为例，修改柱子的高度粗细、颜色和底部圆环的半径，再调用F_Build方法使修改数值生效。

//蓝图的所有属性可通过histogram.properties查询
histogram_01.properties.forEach((prop)=>{
    console.log(prop);
});
//修改柱子的高度(之前为100)
histogram_02.HistogramHeight = 120;
//修改柱子的半径(之前为5)
histogram_02.HistogramRadius = 10;
//设置柱子的颜色，柱子有两个颜色值，可以渐变
histogram_02.TopColor = [0,1,0];
histogram_02.BottomColor = [0,0,1];
//设置底部圆环的半径(之前为50)
histogram_02.Radius = 100;
//设置完这些参数后需要调用build方法才能生效
histogram_0.2.F_Build();

修改前	修改后

调用蓝图的方法

js可以调用蓝图的方法，包含带参数和不带参数的。同时，可以通过functions属性查看蓝图所有的方法。 下面以修改柱状图的百分比数值举例。

//调用方法让数值生效(默认数值约为0.65,会有柱子渐变动画)
histogram.setData(0.9);

赋值前	赋值后