UE4_用户控件_3_用户控件输入数据的方法
祝愿大美兰陵越来越好！一、效果展示：
https://i-blog.csdnimg.cn/direct/d3020d4e0b8a4700895c5c7a4cf786a9.png
二、先制作一个角色
1、新建个父类为pawn的蓝图类。更名为BP_Image_Character。
https://i-blog.csdnimg.cn/direct/6c8530a527f44f908a7ec5f500b5424c.png
2、这个角色只是用于观察场景，并与场景中的物体相碰撞用的，所以不必要骨骼网格体，
https://i-blog.csdnimg.cn/direct/f5319d6f5cbc4bdf81bdd19c37dff62f.png
3、但是我们必要响应键盘和鼠标事件，可以把第三人称角色复制过来，这样角色就能移动了。
https://i-blog.csdnimg.cn/direct/f73f05240f354c4ca13b115c9fb6cafc.png
4、我们必要角色与胶囊体不同实例碰撞时创建不同的用户控件，所以这里得必要一个用户控件类得引用型变量。
https://i-blog.csdnimg.cn/direct/481c9c888ecc4d8f98ceb4ff8504174a.png
https://i-blog.csdnimg.cn/direct/9c163b0cafc546b79c39e70469ca2e17.png
5、我们自界说一个显示控件的事件
https://i-blog.csdnimg.cn/direct/0da40d5b081942b6a5fa73c4b43cb4f0.png
发现控件类图类的引用和用户控类引用不兼容，修改变量范例。
https://i-blog.csdnimg.cn/direct/5e814334ddc6498988c7676d86b15d7d.png
https://i-blog.csdnimg.cn/direct/81f8d19aff884a9d8e36c8599ab2c3e1.png
https://i-blog.csdnimg.cn/direct/96ce835f445a45b7a31e3b211a461286.png
我们必要添加到视口，同时设置输入模式。
https://i-blog.csdnimg.cn/direct/7b10d6e4b12d4cbda55360dfbeb7f016.png
6、同样我们必要一个把它清除的自界说事件
https://i-blog.csdnimg.cn/direct/20a414648fc5408ea015b792aa78a959.png
https://i-blog.csdnimg.cn/direct/b9f12fb523664e02a62ffefbc49fe779.png
7、因为所有控件的退出按钮是一样的，所以这里创建一个公共的退出按钮。
https://i-blog.csdnimg.cn/direct/e26354ec659d44a6b7460fd6eb0c2a78.png
https://i-blog.csdnimg.cn/direct/1a796640c63f49559f84d30b6fafd395.png
创建按钮的点击事件，当点击时调用角色的自界说事件clearwidget。
https://i-blog.csdnimg.cn/direct/a4785c7bf9c64a53a5849e75b6773ad2.png
三、新建个GameMode
在 UE4 中，每一个世界（World）有多个 Level（关卡），而每个关卡又可以设定本身的 GameMode（游戏模式），从而控制游戏的玩法。
1、新建个GameMode。更名为BP_Gamemode。
https://i-blog.csdnimg.cn/direct/101d354b51634c4f861c6cb91e37e13f.png
2、设置游戏模式默认角色为BP_Image_Character。
https://i-blog.csdnimg.cn/direct/46692858923e4409979efd60d3c5e179.png
3、关卡设置
https://i-blog.csdnimg.cn/direct/06eae32c0599461583eeda84a9ba21a2.png
https://i-blog.csdnimg.cn/direct/878acc0c4e8b4f02ad62befaa049c0a8.png
项目设置不动
https://i-blog.csdnimg.cn/direct/aa233aa29569480994bf5278e487d62c.png
测试下：
https://i-blog.csdnimg.cn/direct/05db7cb89a624034b465a656413c8790.png
无问题。
四、我们必要触发器
1、新建一个actor蓝图类，
https://i-blog.csdnimg.cn/direct/e68fe95052e14d18933d1ff53429b5c4.png
2、添加一个胶囊体碰撞
https://i-blog.csdnimg.cn/direct/989831c12d50418e98c6f6a38609627a.png
巨细设置为：
https://i-blog.csdnimg.cn/direct/2e254b8356b646808118e5bef117e64d.png
3、添加事件Actor开始重叠事件
https://i-blog.csdnimg.cn/direct/28322caf49bd40ffa005483293d8a580.png
4、先检测一下是不是我们的角色碰撞的
https://i-blog.csdnimg.cn/direct/5885759a148d453580c698402829f3a8.png
5、如果是他的话，我们必要把创建的用户控件类的引用传递给角色的UMGClassName。好让角色知道应该创建的是谁。
https://i-blog.csdnimg.cn/direct/653664a586294fc4bf934bcb99b12437.png
这里同样必要一个这个范例的变量UMGClassName1
https://i-blog.csdnimg.cn/direct/1b1ef003b0c146faa57563ac3cb14115.png
6、我们必要把用户控件类的引用给角色传递过去
https://i-blog.csdnimg.cn/direct/8b8cb22f762c404092221f0e1a6dee7d.png
7、因为这里的UMGClassName1，必要把这个触发器拖加入景中，根据它所在的位置来决定触发天生哪一个控件，所以不同的实例创建的控件是不同的，这样我们就必要根据位置来设置UMGClassName1的值，这样这个变量就必要公开。
https://i-blog.csdnimg.cn/direct/ae41356353c14febb82a4181e8d2696e.png
变量为公有，就可在此蓝图的每个实例上进行编辑。
8、这样我们就可以调用显示控件的自界说事件了。
https://i-blog.csdnimg.cn/direct/b8538401abeb48dbbe916e7f38ccf54a.png
可以了，但是没有退出控件，没有鼠标，所以改进一下。
9、角色中showwidget时，把退出控件加上
https://i-blog.csdnimg.cn/direct/91e292c6822a4244acf9ffa1c3be996f.png
10、当用户界面天生时，没有鼠标，角色还是到处跑，这样可以用变量进行控制。
https://i-blog.csdnimg.cn/direct/2e3de74f80204d56923950c059f5bae7.png清除控件的时间要隐蔽鼠标
https://i-blog.csdnimg.cn/direct/256d47d77af941d1acb851e284cc1484.png
11、再添加个变量来控制当控件添加的时间，让角色不动。
https://i-blog.csdnimg.cn/direct/7ad970c91f854ac1881e25706919a161.png
https://i-blog.csdnimg.cn/direct/431deef6b8334ccaab2b103bfeb153ae.png
五、输入用户控件制作
1、新建用户控件，更名为UMG_Input_widget。
https://i-blog.csdnimg.cn/direct/16b351ccaf7a4eab8d6efd4fab97fc79.png
2、双击打开编辑界面，添加文本，调解参数，如下图：
https://i-blog.csdnimg.cn/direct/454dcafae4204925bc45b207c6bd03ed.png
https://i-blog.csdnimg.cn/direct/6275129388c64da7be334e87b8ee914c.png
3、添加水平框，调解参数，位置如下：
https://i-blog.csdnimg.cn/direct/11642fb50168422f9a43131d478318b1.png
https://i-blog.csdnimg.cn/direct/5e7d7c8f48fa40fca79b624801ac9f34.png
4、水平框中添加文本框，调解参数，
https://i-blog.csdnimg.cn/direct/c6ef94a0b2cb4835a734e960eb133de1.png
水平框中再添加间隔区，参数如下：
https://i-blog.csdnimg.cn/direct/16f87522bce74691b5cce61ed5307e4c.png
水平框中再添加数字输入框（旋转框）
https://i-blog.csdnimg.cn/direct/9d76b25ebaa5465294535c7238c0f643.png
参数如下设置：
https://i-blog.csdnimg.cn/direct/9847c55a24934b149f2919437df92173.png
水平框中再添加间隔区，参数如下：
https://i-blog.csdnimg.cn/direct/ecc7285a1a9c4f6ca72a69c3d2b1bf85.png
水平框中再添加组合框
https://i-blog.csdnimg.cn/direct/cf55e164684141cc93f4a191823e1d30.png
设置参数如下：
https://i-blog.csdnimg.cn/direct/0275cc9970b74e239bce53951a2f2f87.png
5、水平框内效果如下图：
https://i-blog.csdnimg.cn/direct/b3606a79552f4799bc8d34ad94ac4b24.png
https://i-blog.csdnimg.cn/direct/ec6c0e9dbaf6458aaa0cef3d0e609439.png
6、画布面板上添加按钮及文字，参数如下：
https://i-blog.csdnimg.cn/direct/8b4a82faabde46f286bbf715e6d08bfc.png
https://i-blog.csdnimg.cn/direct/e03b84adb6e24bc99b7764dfe76206fc.png
https://i-blog.csdnimg.cn/direct/4b8f3ba4cd7d47a9937f800d5d0910a6.png
效果如下图：
https://i-blog.csdnimg.cn/direct/d058eee93977483fbc27a4ff1cf33f13.png
7、添加checkbox
https://i-blog.csdnimg.cn/direct/eb110653509740fa963b3521a596fd13.png
调解参数：
https://i-blog.csdnimg.cn/direct/48564cb57205400dac182cccd419db3e.png
效果如下图：
https://i-blog.csdnimg.cn/direct/6f58294a70f341f3a5ff96e0bb5a363f.png
有点小，调解巨细参数如下：
https://i-blog.csdnimg.cn/direct/fe3d5c86f22f49498b17b503f25bdc6d.png
效果如下图：
https://i-blog.csdnimg.cn/direct/ff2e7604d8894dc082fcd0f7cf13559d.png
8、为复选框添加显示文本:
https://i-blog.csdnimg.cn/direct/9363f53673354c6ea9c8dd2832805f9b.png
效果如下图：
https://i-blog.csdnimg.cn/direct/b68083ec132b423f900c47468cabdf77.png
9、添加背景图像：
https://i-blog.csdnimg.cn/direct/1f248bd5febd4cc5962e50e8ec08a714.png
效果如下图;
https://i-blog.csdnimg.cn/direct/7823e1be3a684634aa4249913fdf754a.png
10、为输入控件事件构造函数添加蓝图节点
https://i-blog.csdnimg.cn/direct/0b8228709b89453d9068df369dbd637f.png
使UI被创建的时间，显示鼠标光标，同时设置显示的提示文本为“使用下面的输入框来更改显示的文本”，我们新建个变量来存储它。
https://i-blog.csdnimg.cn/direct/0556c1a2b39349fa84e8ab20cb5ccb99.png
我们必要创建一个变量，用于上方的显示文本来显示什么值（变量）。
https://i-blog.csdnimg.cn/direct/f923a419f53f47269c5236411297330c.png
11、我们对上方的显示文本添加绑定函数。
https://i-blog.csdnimg.cn/direct/972924e0ec6046f785b6065c6063604b.png
https://i-blog.csdnimg.cn/direct/a929347bed274d79993fb8249c42deed.png
运行测试一下：
https://i-blog.csdnimg.cn/direct/b3f6379f4d5e43eea1e95adbf17f5ce6.png
12、我们为按钮添加点击事件
https://i-blog.csdnimg.cn/direct/02bae048c60049339de787e98e415c26.png
我们先来判定下可编辑文本框中是否有值，
https://i-blog.csdnimg.cn/direct/e860310303aa479f97632aadf207f33c.png
https://i-blog.csdnimg.cn/direct/6e813c6312ef45419b976af51df97b7a.png
当文本框中的值长度小于等于0时，提示请输入一个值
https://i-blog.csdnimg.cn/direct/38580640f0d7438fbfa00a44de504ae5.png
当文本框内里有值的时间，再判定下拉列表中有值没有？
https://i-blog.csdnimg.cn/direct/669b7383a5974a06858bd20814e2011b.png
没有值就提示
https://i-blog.csdnimg.cn/direct/35ca4044c96a4016bfbf9fdb7fc8f875.png
再判定复选框是否被勾选？
https://i-blog.csdnimg.cn/direct/b626b549dca14ca28f87ba10ffd8451d.png
https://i-blog.csdnimg.cn/direct/bb41ef63b566418bb8c559f5a3bdbec0.png
https://i-blog.csdnimg.cn/direct/ceb020dca8774af684794f0c8436d14a.png
满足以上条件后，我们再把这些值组合在一起赋予显示文本
https://i-blog.csdnimg.cn/direct/f4de6e8e10de43a797b22229e6a85fa1.png
13、把与胶囊体碰撞的控件类设置下：
https://i-blog.csdnimg.cn/direct/05f4d83e366d4775bf815c57577614c5.png
六、测试下效果：
https://i-blog.csdnimg.cn/direct/d679e1aa8dc74c42838cb260d459dc96.png
https://i-blog.csdnimg.cn/direct/517b2949da754115bd7f70bb05f40165.png
https://i-blog.csdnimg.cn/direct/a86f73b2a60e4dc8ba41ad48cb1075ac.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]