UE4笔记:利用Widget设计一个切换材质功能

时间:2022-01-26 21:13:02

UE4引擎中的Widget蓝图是一个重要的工具,可用于场景中的页面叠加,镜头绑定,场景切换等多处地方,在这里笔者介绍一种利用控件蓝图和场景中物体进行信息交互的方法,直观的体现就是进行物体的材质切换。

1.创建控件蓝图

控件蓝图不同于一般的逻辑蓝图,主要表现在其需要进行画面的设计和平铺。在内容浏览器中创建一个控件蓝图,命名为SwitchMat_UI

UE4笔记:利用Widget设计一个切换材质功能

双击打开控件蓝图编辑器,进行页面的设计布局。

拖放一个水平盒子到页面中,位置和大小如下图所示(可根据个人喜好进行布局),命名为SwitchMat,同时勾选IsVariable选项,在水平盒子中添加四个Button按钮,将自动大小改为填充

UE4笔记:利用Widget设计一个切换材质功能

UE4笔记:利用Widget设计一个切换材质功能

在每个按钮上添加一张图片,便于区分按钮和增加辨识度(图片可以随意添加,但最好能和之后的功能相符合)

UE4笔记:利用Widget设计一个切换材质功能

给每一个按钮都添加点击事件,之后进行事件的逻辑编写

UE4笔记:利用Widget设计一个切换材质功能

2.创建关联物体

在内容浏览器中创建一个Actor蓝图,命名为TargetActor,双击打开蓝图编辑器,添加一个StaticMesh替换掉默认的DefaultSceneRoot,给StaticMesh添加一个球形碰撞检测SphereCollision,并在Rendering属性中勾选Visible和取消勾选Hidden in Game,将碰撞半径设为64

UE4笔记:利用Widget设计一个切换材质功能

在内容浏览器中创建一个结构体用于存储材质和贴图,命名为MenuInfo,其中添加的各个变量如下图所示

UE4笔记:利用Widget设计一个切换材质功能

返回到TargetActor蓝图中,在脚本中编写如下逻辑(脚本事件发生在任何有关于该蓝图的变动实现时,即包括变量更改,事件开始发生等与蓝图有关的改变)

UE4笔记:利用Widget设计一个切换材质功能

UE4笔记:利用Widget设计一个切换材质功能

设置为公共变量的可以在场景中进行更改,这里主要添加了3个材质实例、3张2D贴图及1个静态网格物体,用于后续的更改材质功能调用。

3.创建功能提示

功能的提示可有可无,主要是为了判断功能是否可触发,便于其正常运行。

在内容浏览器中添加一个Widget控件蓝图,命名为Tips。打开蓝图编辑器,添加一个水平盒子,在盒子中添加一个Text组件,组建内容为“按1键开始选项”,字体大小设为32

UE4笔记:利用Widget设计一个切换材质功能

转到事件图表中,对字体的位置进行逻辑调整

UE4笔记:利用Widget设计一个切换材质功能

这样做的目的是让2D的字体在场景中随着镜头运动,从而具备3D的特性,相当于一种视觉欺骗。

4.物体碰撞逻辑

返回到TargetActor的蓝图编辑器中,添加BeginPlay事件。事件开始时,创建Tips控件蓝图并保存,同时将球体碰撞位置矢量赋值给Tips中的变量ObjectHUD,作为Tips中字体的出现位置,然后获取第三人称角色并保存,在3P角色中添加了一个MenuInfo变量,存储材质实例和2D贴图。

UE4笔记:利用Widget设计一个切换材质功能

完成BeginPlay事件后,给物体添加碰撞检测事件

UE4笔记:利用Widget设计一个切换材质功能

在角色进入球体碰撞体中后,将Tips设置为可见,并将第三人称角色蓝图中的变量IsCollisionCharacter设置为True(需要事先在第三人称角色蓝图中添加一个Bool型变量),将IsinRadius设置为True(需要先添加该新变量),在角色离开球体碰撞半径后,做一个反向设置。

向关卡中拖放一个TargetActor,运行后测试结果如下

UE4笔记:利用Widget设计一个切换材质功能

5.创建接口

在本例中的切换材质功能中,笔者运用了蓝图接口。首先在内容浏览器中添加一个蓝图接口,命名为SwitchInterface,在接口中新建4个函数定义

UE4笔记:利用Widget设计一个切换材质功能

返回到最初的控件蓝图SwitchMat_UI,在事件图表中先在ClassSettings中添加新建的接口,然后将调用接口函数的逻辑对应四个按钮的点击事件

UE4笔记:利用Widget设计一个切换材质功能

在创建控件蓝图时,运行一个事件,获取第三人称角色变量,目的是为了获取到3P角色中存储的MenuInfo变量。

UE4笔记:利用Widget设计一个切换材质功能

为了增加该控件蓝图的可移植性,给每张图片添加了绑定事件

UE4笔记:利用Widget设计一个切换材质功能

UE4笔记:利用Widget设计一个切换材质功能

另外2张图片操作和蓝图逻辑类似,不再重复贴图,重置图片则不需要这步操作。

打开TargetActor蓝图编辑器,进行切换材质函数编写。

UE4笔记:利用Widget设计一个切换材质功能

6.绘制控件蓝图

打开第三人称角色蓝图,开始绘制SwitchMat_UI控件蓝图。

首先创建SwitchMat_UI控件蓝图并保存。

UE4笔记:利用Widget设计一个切换材质功能

继续添加E键按键驱动事件

UE4笔记:利用Widget设计一个切换材质功能

如果角色处在物体碰撞半径内,则可以触发事件,调出控件蓝图并显示鼠标,在角色离开碰撞半径或重复E键后,移除控件蓝图。

7.测试及改进

在场景中选中TargetActor,在其Details的默认选项中设置材质实例和2D贴图及静态网格物体,设置完成之后运行关卡,进行测试,可以看到功能运行正常,但存在一个小Bug,角色在进入碰撞半径后调出控件蓝图,之后再走出碰撞半径则控件蓝图仍然存在,但功能失效,这里可以给其一个限制,在控件蓝图没有移除前禁止角色的移动就可以了。

UE4笔记:利用Widget设计一个切换材质功能

UE4笔记:利用Widget设计一个切换材质功能

UE4笔记:利用Widget设计一个切换材质功能

UE4笔记:利用Widget设计一个切换材质功能

感谢阅读,给个推荐呗。

UE4笔记:利用Widget设计一个切换材质功能的更多相关文章

  1. 算法与数据结构题目的 PHP 实现:栈和队列 设计一个有 getMin 功能的栈

    刚入手了一本<程序员代码面试指南>,书中题目的代码都是 Java 实现的,琢磨着把这些代码用 PHP 敲一遍,加深印象. 题目:设计一个有 getMin 功能的栈 —— 实现一个特殊的栈, ...

  2. 设计一个有getMin功能的栈

    [说明]: 本文是左程云老师所著的<程序员面试代码指南>第一章中“设计一个有getMin功能的栈”这一题目的C++复现. 本文只包含问题描述.C++代码的实现以及简单的思路,不包含解析说明 ...

  3. 《程序员代码面试指南》第一章 栈和队列 设计一个有getMin功能的栈

    题目 实现一个特殊的栈,在实现栈的基本功能上,再实现返回栈中最小的元素的操作 要求 1. pop.push.getMin操作时间复杂度都是O(1) 2. 设计的栈类型可以使用现成的栈结构 java代码 ...

  4. 栈和队列----设计一个有getMin功能的栈

    设计一个有getMin功能的栈 设计一个具有getMin功能的栈,可以返回栈中的最小的元素,可以使用现有的栈的数据结构,要求pop/push/getMin操作的时间复杂度是O(1). package ...

  5. 如何利用Excel设计一个唱票统计系统?

    具体操作如下: 首先需要一个如下的数据结构. 唱票数G列区域,不能手动输入候选人票数,这样很不方便,所以我们需要一个窗体控件,用点击鼠标的方法来实现唱票.在“开发工具-插入-数值调节钮”下图3处,然后 ...

  6. 利用Echarts设计一个图表平台(一)

    Echarts是一款百度的开源图表库,里面提供了非常多的图表样式,我们今天要讲的内容是利用这一款开源js图表,制作一个能够动态定制的图表平台. 1)Echarts API介绍 首先我们先来看一下Ech ...

  7. 如何利用GitHub设计一个炫酷的个人网站(含代码)

    1.在开始制作之前我们先预览一下我的网站吧! 1.方式一: 由于是手机版的所以用手机访问下面的链接体验比较好一点: https://tom-shushu.github.io/MyWeb.github. ...

  8. 如何利用Visio设计一个系统的结构图

    首先建立一个空的vison列表 添加图形和连接线 托选一个矩形块到操作台上,并进行底色填充 选择有向线段1拖到矩形模块上,此时有向线段1会自动吸附到矩形的中点处. 此时按下图操作即可取消,自动吸附 托 ...

  9. C语言中利用clock设计一个简单的定时器

    time.h是C/C++中的日期和时间头文件,用于需要时间方面的函数,定义了四个变量类型.两个宏和各种操作日期和时间的函数. 其中计时函数是clock(),而与其相关的数据类型是clock_t.clo ...

随机推荐

  1. EBS DBA指南笔记&lpar;三&rpar;

    第五章 patching   patch的作用:解决应用代码的问题:安装新的特征:更新technology stack组件.打patch不是一个简单的过程,但我们也没必要深究里面每个细节. EBS的p ...

  2. ROS&lowbar;Kinetic&lowbar;04 ROS基础内容(一)

    ROS_Kinetic_04 ROS基础内容(一) 在开始基础内容之前,假定您已经完成了ROS kinetic版本的安装, 如果没有请参考ROS kinetic安装说明. 1. 环境变量 在使用ROS ...

  3. H5项目常见问题及注意事项,视频全屏,定位,屏幕旋转和触摸,偏页面重构向 来源joacycode的github

    Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="wi ...

  4. Nutch源码阅读进程5

    看nutch的源码仿佛就是一场谍战片,而构成这精彩绝伦的谍战剧情的就是nutch的每一个从inject->generate->fetch->parse->update的环节,首 ...

  5. &lbrack;LeetCode&rsqb;Flatten Binary Tree to Linked List题解(二叉树)

    Flatten Binary Tree to Linked List: Given a binary tree, flatten it to a linked list in-place. For e ...

  6. hdu4901The Romantic Hero

    #include<iostream> #include<map> #include<string> #include<cstring> #include ...

  7. django2&period;0数据展示流程

    之前刚刚实现了数据添加的流程,那么数据展示是怎么回事 1 先在 views.py 中定义函数 增加获取数据的方式 from django.shortcuts import render from bl ...

  8. 组织机构sql

    with cte as (     select vcOrganID, vcParentID, vcOrganName, 0 as lvl from tbOrgan     where vcOrgan ...

  9. iOS开发SDWebImage源码解析之SDWebImageManager的注解

    最近看了两篇博客,写得很不错,关于SDWebImage源码解析之SDWebImageManager的注解: 1.http://www.jianshu.com/p/6ae6f99b6c4c 2.http ...

  10. &lbrack;Leetcode Week10&rsqb;01 Matrix

    01 Matrix 题解 原创文章,拒绝转载 题目来源:https://leetcode.com/problems/01-matrix/description/ Description Given a ...