当前位置: 首页>后端>正文

unitapp和java代码交互 ui怎么和代码连接的

本人有Unity基础,刚学UE几天,把这一套处理流程记录一下备用。
文章很长,强烈建议点目录跳着看。

0.目标效果

用户输入两个字符串,点击等号,在右侧的文本框中输出拼接在一起的字符串

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻,第1张

1.创建一个空关卡

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_02,第2张

2.新建UI蓝图

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_03,第3张

双击打开,然后拖一个画布面板到场景中

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_unitapp和java代码交互_04,第4张

拖动右下角光标到1920*1080

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_05,第5张

然后拖入一个水平框,调整锚点到中间

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_06,第6张

调整大小尺寸

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_unitapp和java代码交互_07,第7张

依次拖入文本框(用户可以输入内容),文本(显示文字),文本框,按钮,文本。然后再按钮下再拖入一个文本。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_08,第8张

现在层级面板是这个样子

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_09,第9张

把水平框的五个部件都改成尺寸:填充,1.0

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻_10,第10张

设置居中和调整字号

其中对于文本框,调整字号

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_11,第11张

调整颜色为黑色(记得把四个“继承”的勾都取消掉,才能生效)

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻_12,第12张

给两个文本框改名为输入1,输入2。把文本改名为输出。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_13,第13张

同时给输出打钩:是变量

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_14,第14张

改名后的层级是这个样子

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_15,第15张

依次点击(从左到右)编译,保存。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_16,第16张

3.在游戏场景中展示UI蓝图

最小化UI蓝图,在一片黑的空白关卡。打开关卡蓝图。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻_17,第17张

右键,添加“获取玩家控制器”节点

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻_18,第18张

从获取玩家控制的返回后面拉出,设置show mouse cursor。UE会自动隐藏鼠标,设置后鼠标就会一直显示,方便我们操作UI。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻_19,第19张

从事件开始运行节点拉出来接上,鼠标一直显示就设置完成了。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_unitapp和java代码交互_20,第20张

在SET后拖一个创建控件

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_21,第21张

然后选择我们刚做的UI蓝图,然后拉一个添加到视口功能。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻_22,第22张

完成连接

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_23,第23张

编译保存蓝图,最小化。然后主关卡界面点运行。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_24,第24张

可以看到我们做的UI了

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_25,第25张

4.连接UI事件到关卡

回到UI的蓝图,点击图表

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_26,第26张

在左侧变量选中按钮

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_27,第27张

在右侧添加点击时事件

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_28,第28张

拖入输入1,输入2,输出。都选择获取。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_29,第29张

点击加号添加一个事件分发器,我改名叫提交输入。添加两个字符串参数,叫输入1,输入2。

对蓝图编译,保存。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_30,第30张

拖入事件分发器,选择调用。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_31,第31张

输入1,输入2后拉出获取文本

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_32,第32张

获取文本后再拉出转换为字符串

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_unitapp和java代码交互_33,第33张

然后连接到事件调用,看到下面这个样子,对UI蓝图编译保存。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_34,第34张

按住蓝图的标签拖动可以分出窗口和合并窗口。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_35,第35张

将关卡蓝图与UI蓝图分为两个窗口

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻_36,第36张

按住UI蓝图里的事件分发器,拖入关卡蓝图。选择分配

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_unitapp和java代码交互_37,第37张

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_38,第38张

将创建视窗的Retrun Value连到绑定时间的目标上

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_39,第39张

将绑定事件连接到添加视口后,这样就可以在关卡开始时完成绑定。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻_40,第40张

然后我在提交输入后接了两个打印字符串,验证这步做的是否正确。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_41,第41张

编译保存蓝图,运行程序,输入提交可以看到这样的效果:

左上角成功输出文本框的内容。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_42,第42张

5.连接关卡事件到Actor

在资源文件夹中右键新建一个蓝图类

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_43,第43张

父类选择Actor

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻_44,第44张

我命名为拼接字符串Actor

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_45,第45张

双击进入Actor的蓝图,在左侧添加组件。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_unitapp和java代码交互_46,第46张

选新建C++组件

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_47,第47张

父类选Actor组件

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_48,第48张

我叫它JoinStringComponent。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻_49,第49张

VisualStudio全部重新加载,然后UE得living code自动编译成功

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_50,第50张

在.h文件 pulic 构造函数下面添加代码:

UFUNCTION(BlueprintCallable)//可以显示在蓝图中
		FString EnableFunc(FString s1, FString s2);

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_51,第51张

在.cpp文件下面写函数:

FString UJoinStringComponent::EnableFunc(FString s1, FString s2) {
	FString s3 = s1 + s2;
	return s3;
}

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_52,第52张

最小化visual studio

点击右下角编译,保存

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_unitapp和java代码交互_53,第53张

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻_54,第54张

这时就可以给Actor添加我们写的C++组件了

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_55,第55张

将Actor编译保存

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻_56,第56张

然后点击事件图表

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_57,第57张

从左侧拖入JoinString组件

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_58,第58张

然后就可以拉入我们写的C++函数。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_59,第59张

新建一个事件处理器,拼接字符串Actor接收输入,参数也是两个字符串输入1输入2。拖入事件选择分配。然后按照下面的样子完成蓝图。编译,保存。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_unitapp和java代码交互_60,第60张

拖入完成的Actor到场景

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻_61,第61张

层级是这样的

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_虚幻_62,第62张

细节是这样的

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_63,第63张

打开关卡蓝图,脱出一个新的窗口。然后把大纲面板中的拼接字符串Actor拖入关卡蓝图中成为一个节点。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_unitapp和java代码交互_64,第64张

把Actor蓝图创建的事件分发器拖入关卡蓝图,选择绑定

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_65,第65张

之前拖入的Actor节点作为事件调用的目标,然后完成下面的连接。编译保存。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_66,第66张

运行结果

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_67,第67张

6.连接Actor事件到UI

打开拼接字符串Actor的蓝图,新建一个事件分发器,只有一个字符串参数叫输出。拖入蓝图,选择调用。替换掉之前的输出字符串并连接。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_68,第68张

打开UI的蓝图,添加一个变量,类型选择拼接字符串Actor

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_69,第69张

设置这个变量为可编辑实例√和生成时公开√

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_70,第70张

编译保存,重新打开关卡蓝图。下面就多出了这个端口。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_71,第71张

连接上,编译保存。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_72,第72张

把新创建的事件分发器拖入UI的蓝图,选择分配。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_73,第73张

从输入(就是UI的那个输出标签)拉出设置文本。将UI蓝图中的拼接字符串Actor与事件的对象连接。在把事件绑定等等都按照下图连接好。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_交互_74,第74张

编译保存,运行项目,完成了目标效果。

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_75,第75张

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_76,第76张

7.完成后的三个蓝图,仅作参考

关卡蓝图

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_c++_77,第77张

UI蓝图

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_unitapp和java代码交互_78,第78张

拼接字符串Actor蓝图

unitapp和java代码交互 ui怎么和代码连接的,unitapp和java代码交互 ui怎么和代码连接的_ui_79,第79张



https://www.xamrdz.com/backend/32c1939848.html

相关文章: