企业官网建设流程全解析

HUD

就是UI系统，和用户交互的过程

重新创建一个项目

导入资产，然后检查资产

搭建好自己的GameMode

在虚幻里能做UI的工具有两个，一个是HUD，另一个是UMG系统

Event Receive Draw HUD这个节点的主要作用：把UI元素放到屏幕上（每一帧每一次）
Size X 输出屏幕的X轴的像素大小，Size Y 输出屏幕的Y轴的像素大小

现在我们来简单的绘制一张图片
Draw Texture Simple节点：以屏幕坐标Screen X，Screen Y为起点，画一个原图大小Scale倍的图片

画一个原图四分之一大小并且放在屏幕中间的图片

另外一个做UI的工具就是UMG，UMG使用起来比HUD方便

UMG

创建一个UMG文件夹

命好名字

UMG放到哪里呢？可以放到Player里面，也可以放到Controlelr里面，也可以放到任何一个物品的蓝图类里面，但我们建议放到HUD里面，因为都是用来处理UI的。

我们现在来创建一个控件，注意这个节点要用create widget来搜索，否则容易用到别的节点

指定上你控件的名字，节点命名会进行修改

Add to Viewport：创建一个UI并把它放到屏幕上

增加几个按钮，图片，文字

运行

锚点可以让你手动对不整齐的时候用，自动调整好位置，长按ctrl + shift 点击锚点

因为各个（电脑，手机）屏幕的比例不一样，所以就可能

锚点还有一个作用，如果你选择右下角为锚点，就是会计算控件到右边缘和下边缘的距离，以这个为基准来算的

Alignment这个是什么意思？锚点会将你的左上角的点默认移动到锚点的位置，然后再根据Alignment向左偏移控件宽度的50%

这个就是Y轴的50%

位置X和位置Y是基于锚点的位置，尺寸大小就是控件的大小

渲染层级

层级相同，先进来的先渲染，后进来的后渲染

层级越大，越后渲染

控件的使用

这里能更换Image的图片

Text这里能设置文字，Auto Wrap Text勾选上会自动进行换行
区别：中文以单个字自动换行，英文以空格为单位进行换行



还有一种方式，在Text里面可以按shift+enter进行手动换行

字体样式

创建好User Widget蓝图类，命名

创建一个控件


Add to ViewPoint：将这个控件让玩家能在屏幕上看见

添加一个画布面板，然后把分辨率调到1920*1080（即16：9），UI会按照这个比例进行缩放，以你屏幕的最短边进行调整，短边占9 ，长边以短边为基准进行缩放为16

字体只需要关心字体，大小，对齐方式，基本上就就够用了

导入一个字体

更改字体样式

微软雅黑导出有三个文件

当你导入的字体有三个文件的时候

只需要点一下是，剩下两个点否，意思是我们只需要创建一个字体资产，其他的都为是这个字体资产的附属品（只有类型不同）

双击打开这个字体资产，然后将这两个字体类型给添加进来

这样使用的时候就能选择不同的类型了

按钮的使用

按钮的四态：正常态，悬浮态，按下态，禁用态。当你操作这个按钮的时候会出现对应的反应（图片的变化）

按钮里加一张图片，这个Image的插槽会变，插槽的padding和对齐方式会变

该图片是否能铺满整个按钮，受几个地方的影响

插槽的padding边距

按钮自身内部的padding

按钮的声音设置

实现小地图

游戏运行时鼠标的操作

当你运行的时候，点击鼠标会消失，按下shfit + f1才会呼出鼠标。我们要调整这种规则，就需要从控制器controller里修改

这里就是调整鼠标光标的能力地方

当你勾选上 Show Mouse Cursor：这样当你运行的时候，你怎么点击鼠标鼠标都不会消失。因为显示模式下默认是调整UI的，所以不再控制镜头相机

如果你按住左键移动的话，依然可以调整相机

你也可以在蓝图里进行设置

如果你想运行的时候就隐藏鼠标（不想点一下才隐藏）

游戏开始的时候，Controller需要不显示鼠标光标 + 设置为游戏模式

还有另一个节点UI Only，Controller设置为UI模式

Enable Click Event：可以用鼠标点击场景里的对象

添加一个蓝图类的Actor类，添加一个静态模型组件，并设置它的静态网格体

这个节点就能接收到鼠标点击的效果

什么样的模型才能被点击触发事件呢？主要是模型组件用的比较多

这里能添加简单碰撞


绿色的边框叫简单碰撞，阻止人穿过的

我们把简单碰撞给删除，delete键，依然可以点击触发事件，说明并不是使用的简单碰撞来实现

复杂碰撞，用门的模型来做碰撞，就是把门的模型给复制了过来，做了门的碰撞，这样就就一份做碰撞一份做显示

复杂碰撞我们删除不了。蓝图里有一个碰撞预设，能控制模型编辑器里的碰撞，我们可以不使用模型编辑器里的碰撞设定

碰撞预设默认是 使用所有的碰撞

我们设置不使用任何碰撞

这样就会穿过门

我们也发现点击后没反应了

这就说明了点击使用的是复杂碰撞，没有使用简单碰撞（简单碰撞可以删除，简单碰撞判断角色是否能穿过，复杂控制不判断）。

如果你发现点击不好用，就需要看模型的碰撞（复杂碰撞一定有，因为有模型就会有复杂碰撞，且不可删除），和碰撞预设（是否复杂碰撞没有生效）

声音的使用

把一个声音文件给拽进来，声音就是WAV格式，MP3不算，它是媒体

双击打开这个音乐

如果你要把这个音乐用在场景里，就可以把这个循环给勾选上

声音过大则可以调整这个声音的比例

这个声音有两个用途

扔到场景里就是背景音乐

把这个音乐放到点击的UI里，就是UI的声音

设置小地图的图片

把图片给拽进来

这张图打开之后，要做几个设置，因为这个图之前是三维场景的图，我们现在做UI要改为二维场景的图

属于的纹理组需要改为UI

我们能看到这里有变化

构成纹理时的压缩设置也要改一下，改成UserInterface2D

然后设置UI的Image， 把Image锚点调整为右上角

我们不建议小地图的UI做到主UI里，再创建一个UserWidget

我们用Overlay，覆层

我们再将这个控件放入到主控件里


Size To Content：使用内部的尺寸

不再使用这个尺寸

小地图显示自己的位置

再添加一个图片，并重命名

再调整好大小和位置

我们要计算角色坐标在这个地图上处于什么位置

我们切到顶视图切到光照模式，并且把房顶给隐藏掉

我们调整的是transfrom的translation（因为方便），这个点是距离左上角的点的像素距离

如何进行计算？将这两个点的坐标进行相减，就得到了向量

我们已知地图的左上角的坐标，我们计算打印看一下结果

世界地图向量坐标的X投影 / 小地图的向量坐标的X投影 = 世界地图的宽度 / 小地图的宽度
世界地图向量坐标的Y投影 / 小地图的向量坐标的Y投影 = 世界地图的长度 / 小地图的长度

这样就能算出 小地图的向量坐标的X投影 和 小地图的向量坐标的Y投影

这样我们就能获取到这个图片的对象变量

这样就实现了小地图图标移动的功能

创建一个UserWidget蓝图类

在HUD里写逻辑。这个控件可以提升为变量，方便后面对这个UI的使用

如何截取小地图图片

在透视图按G，把地图上的图标和辅助线都给隐藏掉，然后再切顶视图

把你不想看到的给隐藏起来

然后在PS里面可直接拖动辅助线截掉边框

点击裁切后应用

最后调整图片的大小

再实现一下透明的效果，把黑色背景给alt + delete掉

按住ctrl + 左键点击这个小方块，有像素的地方就会被选中

再通道里增加一个alpha

黑透白不透，把不透的改为白色，alt + delete，也可以用油漆桶填充白色

剩下的位置，ctrl + shift + i，给个半透明，变为灰色


存储为png

在虚幻里导入进来

双击打开这张图片，给他设置一下

小地图材质

我们不再用贴图，因为小地图会有变化

创建一个材质的文件夹，并创建一个材质类

命名好，双击打开

把材质的属性改为UI

把贴图给拽进来

进行连接

使用半透明模式

发现是全透明的，我们需要改成半透明

把Alpha通道加上一个0.5，用Clamp限制数值为0 ~ 1之间

但是这个周围有杂像素，我们把杂像素给去掉

Lerp：线性插值，A是非地图部分，B是地图部分，把所有非地图部分都修改为黑色

放到UI上，看一下效果

用Overlay，创建一张图片，并设置好

大小设置好

在主UI上创建刚才的地图控件，并设置好

运行效果

也可以改一下这个颜色

编写简单材质

然后我们想给小地图加一个边框

UV里的单通道就是线性渐变

UV就是0-1的坐标系，0是黑色，1是白色

1-x：翻转图片。这两个进行相乘。将这个A和0.02比，如果A > B输出0；如果A < B输出1

同理另一边

四个角会的数值是2，可以用clamp也可以不用，不影响显示

接下来是透明部分的编写

小地图添加人物朝向

红绿蓝三通道，图片都是长得一样，只关心0/1数值，这三个通道合在一起就是彩色的信息。R通道：在红色的取值；G通道：在绿色的取值；B通道：在蓝色的取值。Alpha通道：取透明度，黑透白不透。

导入图片，修改图片参数

但是这个图片的三色通道是不一样的图，就没法组成一个彩色信息，这种图片是不能直接给UI用的，这种图需要用材质做一遍

创建一个材质

我们需要的图片是在G的层级里的

所以我们只使用绿色通道就可以了

你需要边缘透明，黑透白不透，就可以这样连接
Value1就是纯黑色的图

调整位置，大小，在这里也可以调整颜色。

我们看到人物默认的朝向

在顶视图里是朝右的

所以我们的贴图需要朝向右边

方法一：改变贴图文件，让这个贴图旋转90°

另一种方法，修改渲染变换的角度，这里修改只会修改第一次

所以我们需要每帧都修改渲染变换的角度，即蓝图实现

这就造成了一个弊端，在角色计算角度后，都要加上90°，就很麻烦

如果我们不想每帧都加90°，还有一种方式，包裹一个复层

然后把这个复层提升为变量

我们只需要一次修改PlayerIcon的渲染变换角度为90°

每帧修改IconOverlay的渲染变换角度即可，这样就不需要每帧都加90°了

这两个的区别，上面的是跟着你角色的朝向走的，下面是跟着你鼠标的方向（接收到鼠标的方向，鼠标的方向控制角色的方向和相机的方向）的朝向走的

如何看鼠标的方向是否控制了角色？看Pawn里的Use Controller Rotaion Yaw是否勾选上，是否让鼠标的Yaw方向来控制角色

如何看鼠标方向是否控制了相机？看Camera里的Use Pawn Control Rotation是否勾选上，是否让鼠标的Rotation朝向来控制相机

如果你按照上面的方法写，你控制相机的时候，并不会改变小地图里人物的朝向

所以这个小地图使用人物的朝向还是鼠标的朝向需要看情况

还有一种小地图是，人不动地图动，旋转的是地图

UI小功能实现

小地图567

点击这个UI，能实现传送功能

创建一个控件类

控件及其层级的设计：
把复层调到最大化

注意：最后渲染的是ClickButton，否则可能这个按钮被前面的Image给遮挡住

导入一张图片

尺寸不对，我们把这张图给改一下
ctrl + I

尺寸改为256 * 256

拖拽进来（导入到虚幻引擎）

并修改一下这张图

选中这张图，并给上这张图

我们再导入张图片，当作按钮的图片

在PS软件里面进行大小修改

保存

拖拽进来，导入到虚幻

再修改一下文件，有一种批量修改文件的方法，全部选中你要修改的资源

这些属性可以批量修改

把压缩改为UI，把组改为UI

把图片扔到按钮上

修改一下按钮四态的图片，大小，颜色

把这个UI给拽出来，并且勾上Size To Content这个选项

把他的锚点放在左下角

运行的时候这个按钮点起来就有UI反应了

再调整一下层级

调整一下这个按钮

再说一下复层的作用：你修改复层的渲染变换的时候，复层下的子控件会跟着一起变换

虚幻自带了一个UI动画的功能，但是这个动画的功能比较弱，比如位移，旋转，缩放。但是做火焰在动这些是干不了的，你想做就需要用材质球来做了

添加并且重命名

这个加号就是你想控制哪个控件的哪个属性

有小方块的属性，就是动画能控制的

点击小方块能自动的给你加上

第一帧我们想让它缩放的大小为0

1秒后的一帧，想让它的缩放变为1

这样它的动画就会从0自动过渡到1

同理，你也能调整旋转的角度

我们调整了动画，还需要调整这个控件开始的状态，不要直接在细节里修改，勾选上这个选项

在蓝图里进行调整


点一下，没播动画，接下来我们来实现点击事件

把按钮设置为变量

然后我们再给这个Button一张图片，将这张图片导入到虚幻

在虚幻里修改一下这张图片

调整按钮的图片，颜色，大小

这里每一个按钮状态都修改

修改一下按钮的位置

ctrl + D 复制这个按钮

调整这个按钮的位置

再给这个按钮换一张图片

导入到虚幻

修改这张图片

修改这个按钮的图片，大小

改名字

随便创建一个Actor，并给他一个位置

把角色拖进来，并且把位置给copy过去，发现人物有一半在地下面，我们需要调整一下他的Z轴坐标


要让人物进行传送，可以这样写


像王者荣耀的按下回城按钮后，有回城动作，进度条读条，还会被其它英雄的伤害打断，这些都是Set Location的条件判断

一般我们不将Set Location写在UI里，而是写在Player里的。所以里面一定有一段逻辑，UI会通知Player需要传送。一般我们使用接口来作为通知的桥梁

创建一个蓝图接口

重命名并打开

在UI里用蓝图接口进行消息传递

把这个接口添加到这个角色的身上


现在实现的就是跟刚才一样的效果

现在再增加一个按钮的功能，传送到客厅

重命名

但是这样不能传送到客厅，只能传送到卧室

因为这边我们用的是固定的坐标

我们需要有能代替坐标的东西，TargetPoint

TargetPoint没有什么其它的作用，主要就是占位用的

TargetPoint和Actor有什么区别，和Actor的作用区别差不多

在客厅创建一个TargetPoint，并设置好坐标

但是我怎么区分这两个Point哪一个是客厅，哪一个是卧室

Tag，标签，Actor对象的身上都有这个东西

添加一个Tag，并且重命名


BeginPlay的时候存一下Target Point数组

创建一个数组变量，里面存的类型为Target Point

进行连接，我们要找到Tag（类型为命名）为Bedroom的TargetPoint

添加蓝图接口的输入，蓝图里的输入参数写为命名类型

容器的介绍

如果数组存的是场景里的对象，两个问题。
1.数组里的对象删了是否会销毁场景里的对象？
2.场景里的对象销毁了，数组里的对象是否会删除？
1.并不会，场景里的对象可以照常使用
2.数组里的对象会变为none，也就是数组里的对象不能正常使用了

UI动画效果

虚幻里的只能做简单的动画效果，要么用AE软件，要么用序列帧自己写材质，每一帧换一张图片就是一个动态的效果

虚幻导入一张序列帧的图片

改一下这张图片的格式

创建一个材质

编辑材质

图片拖拽进来

FlipBook是官方给我们提供的节点：作用就是按帧切换显示图片

你连接的时候连不上

需要把这张图片转换为纹理对象

连接之后，是四个烟花轮播放的，我们需要调整行列数

这样就能正常播放了

创建一个Image，并把图片给赋值上去

优化传送逻辑

还有一个节点：Get Object Name：获取对象命名的名字，这样就不用像下面一样手敲了

所以可以这样写成一个更通用的写法

之前我们在BP_Player中，需要搜索TargetPoint，找到符合要求的TargetPoint，并传送到过去。现在我们不用搜索

创建一个Actor类

重命名

放到这个场景中

放第二个到场景中

放第三个到场景中

放第四个到场景中

添加一个Arrow箭头

这样你的视角中就会有一个箭头了

把每个BP_Target都旋转一下，这样传送过来的时候就能知道是哪个方向

这个黑色的圆圈也可以替换，搜索Billboard

拖拽把DefaultSceneRoot替换掉

这里可以进行图片更换

可以在BP_Target里面找到角色对象后，把自己给存到角色对象里

在蓝图接口里再添加一个函数


你也可以给BP_Target添加一个变量Name，并把这个眼睛给打开，这样在场景中就能直接对这个BP_Target对象的变量进行操作

相当于当作一个Tag使用

Sequence：序列节点，按顺序执行后面的逻辑。快捷键 S + 鼠标左键

上面的红色节点是BP_Target传过来的事件，下面的红色节点是按钮传过来的事件

就可以 一个连接break，另一个连接逻辑

我们来实现传送后玩家的Rotation的旋转，双击 + 点 逻辑线就可以分支

但是这样直接用Set Actor Rotation是没有效果的，因为玩家的Rotation是由控制器来控制的，可以理解为控制器最后又把Rotation给设置了回去

所以说，除了角色不能用Set Actor Rotation，场景中的其它物体都能用Set Actor Rotation

我们获取到玩家的Controller后，再设置玩家的控制器的角度，这样就能设置玩家的Rotation了

直接进行传送太生硬了，我们要传送的时候加点效果

左边这个Camera不一定是你正在使用的相机，而Get Player Camera Manager节点是获取到你正在使用的相机，因为我们的相机可以进行切换

让相机进行淡化

Start Camera Fade：节点的作用是让你相机看到的画面慢慢变黑，但是这个节点不能对UI进行淡化。

我们这个画面并不是一个画面，是由多个画面一起组成的，我们看到场景里的是相机渲染画面，我们看到的UI是相机渲染画面之上又加了UI文件

From Alpha, To Alpha, Duration, Color: 透明度0（全透，能看到相机渲染的场景）到 透明度1（完全不透，看到的Color的颜色）

一般情况下，我们的蓝图流程就是一帧直接完成，就是刚开始黑一点的时候就直接传过去了，我们不希望是这种效果，我们希望是完全黑了才传送过去。

我们接下来就要用到一个Delay节点：指令走到这里停住，经过Duration秒后才继续往后走。
Start Camera Fade节点是一个独立的节点，内部运行的时候并不会受其他节点影响。

虚幻的帧率上限是120帧，一帧就是0.0083s，0.0083s跑完的所有逻辑

把Hold when Finished勾选上：执行完之后不会复原（一直是黑色，不会变为透明的）

然后再进行一次淡化的设置，这次设置就是让他能看到场景

但是这样还是会看到瞬移的过程，我们还需要加上一个delay

这种效果就可以了

这是一种调相机的方式，用Start Camera Fade节点
还有一种方式就是用UI来遮挡相机

给这个属性增加一个关键帧

增加一个动画，就能看见这个属性能进行调整了

把帧拉到1，并且调他的不透明度，就能看到这个黑白的效果

play Animation节点：能进行正向，反向，正方向和反方向进行播放

我们用这个节点

播放的时候我们需要把图片的层级给改了，防止用户再次点击UI

勾选上变为变量

当你要改变控件（Black Image）的属性的时候，需要找到他对应的画布才能进行操作

需要注意的是：Play Animation和Delay的时间要保持一致，否则可能Delay完了但是Play Animation还没完。Delay完了会继续执行后面的代码，而此时还再Play Animation就不太好了

现在需要通过WBP_TeleportUI找到WBP_MainUI文件，

首先通过Get Player Controller找到HUD，为什么Controller能找到HUD？只要是控制类（屏幕UI控制器(也就是HUD)，手柄控制器，键盘控制器，鼠标控制器）都属于Controller

为什么我们要找HUD？因为HUD里面又WBP_MainUI的变量

第一种方法：用Cast To BP_HUD

第二种方法：用蓝图接口

这样BP_HUD就能收到这个消息，并能使用WBP_MainUI的MainUI变量了

第三种方法：用蓝图接口的输出

这个可以双击打开了

把MainUI给返回出去

这里就可以调用了

完善实现

靠近物体时出现按钮UI

我们接下来来做，靠近门的时候，出现开门的按钮UI，靠近电视时，出现开机的按钮UI。

创建一个Actor类

重命名

创建一个模型

创建一个Box

需要用到Box的进入和出去

Box的出入需要检测是否是自己的Actor出入，而不是别人的Actor出入

然后让靠近模型的边缘显示出描边颜色

把这个材质球给导入进虚幻

这样就导入进来了

创建材质实例

重命名

双击打开这个材质，并调整参数

把这个材质赋值到后期处理里面

设置这个模型的渲染深度，这个需要勾选上

重命名

把模型换为门

调整Box的位置

拖拽进去，并调整门的位置

为了调试方便，我们把Player Start放到这里

你走过去的时候，就会显示红色边框了

接下来，我们想走过去的时候，让他有UI

我们用水平布局管理器

调整尺寸大小及其位置

添加一个复层，并且把布局方式选择左右居中，上下铺满

这样放Button的时候，这个Button就会自动的在正中心开始向两侧扩展

这里也可以调整按钮的边距

我们把这个有功能的Button 给单独做到一个文件里，基本上一个功能UI一个文件。
创建一个控件蓝图

重命名

创建一个Overlay，并调整预览大小

把这个按钮给铺满

调整按钮的大小（其实只需要调整X轴即可，因为上下是平铺的）

继续蓝图实现

这里也可以调整边距


但是可能我们需要创建很多哥按钮

For Each Loop 的传入的参数是数组，而For Loop 传入的参数是索引
这表示会循环六次


这个按钮有多少个，是由门来传递信息的。

在BP_BaseClass里新增一个变量LastIndex，标识是哪一个门

在BP_Door里就能看到这个变量

我们怎么让BP_BaseClass找到WBP_MainUI对象？

设置蓝图接口


这段逻辑的意思就是，会把BP_BaseClass中的Last Index的值传递到HUD里的Button Index里去

这样就能找到WBP_MainUI这个对象了，我们就能把Index传递给WBP_MainUI了

重命名，并且添加一个参数

这样靠近门的时候，就会出现两个按钮

现在我们需要远离这个门的时候，把这两个按钮给隐藏掉

自定义事件重命名

添加一个数组变量



这样就实现了靠近门出现UI，远离门UI消失的逻辑了

靠近物体时出现按钮UI（2）

我们用第二种重新方法来实现：

重命名

下面我们不用Overlay了，用SizeBox。SizeBox和Overlay的区别，Overlay下面能放多个，SizeBox下面只能放一个（但是SizeBox的子控件的子控件放多少个，SizeBox并不关心）

第二个区别，尺寸盒子设置了子布局的大小后，子控件就不能超过这个大小

即时设置了256 x 256，但是SizeBox设置的是80 x 80

勾选上Size To Content之后，最大只能显示80 x 80

这后面两个选项是，按照真实的大小来显示

之前我们使用的方法是创建和销毁，我们这次用创建，隐藏和显示

我们把控件创建出来了，现在需要隐藏

如果你想一次性创建多个，前面就可以加上For Loop

整理一下，回顾并实现接下来的内容


创建两个蓝图接口

给BP_BaseClass创建一个变量

在子类BP_Door里设置这个变量

我们需要把BP_Door里的这个变量通过蓝图接口给传过去

方法二

运行是偏左的

这个是不会给控件留空间，相当于直接删除


整体的逻辑顺序
由BP_BaseClass的Button Visible和Button Hidded开始传递

Button Visible和Button Hidded传递到了HUD

HUD的Button UIVisible和Button UIHidded传递给MainUI

靠近物体时出现按钮UI（3）

接下来我们需要给这个按钮加上图片，文字，点击的声音，功能

这里可以显示出父类的变量

或者在类默认值里可以看见

我们再增加一个变量，Texture2D
ButtonLastIndex代表：有几个按钮
NewVar：代表按钮的文字
NewVar_0：表示按钮的图片

但是这样就会导致变量很多，所以我们一般把这些变量放到一个结构体里面

重命名

双击打开，我们定义一下结构体

这里就可以改成结构体类型了

一个结构体代表一个按钮结构，所以把这个变量调整为数组类型

变量重命名

这里就可以在子类里调整对应的变量了

玩家碰到BP_Door，并且把身上的变量传给BP_HUD，BP_HUD传给WBP_MainUI，再有WBP_MainUI进行具体操作WBP_ButtonUI

这两个重命名并且勾选上是变量

当你要设置按钮文字的时候

也可以设置文本，设置图片

可以分开引脚，可以合并引脚设置

设置图片有一种简单的方法

还可以设置Material

我们到底使用图片还是材质球？看需求
用材质的情况：如果这张图片不规整，我们就需要手动将这些图片做成一张规整的图片

我们有圆形图片和矩形图片，需要圆形的形状，但是需要矩形的颜色。怎么办呢？
把这张图片导入到虚幻里

设置属性

只显示Alpha通道，我们就需要这个圆形作为Alpha通道

把这个矩形图片也导入到虚幻


我们把圆形的图作为Alpha通道的图，矩形的图作为颜色的图

创建一个材质，我们不需要创建实例，因为我们用动态实例的方式

改它的材质域

改为不透明度

这样就保持统一了

但是有需求，并不是所有的都想用矩形的颜色，但是所有的都想用圆形的形状，这样我们就可以把上面的Texture转换为参数，暴露给外部，让外部来自己设置

重命名

创建UI的时候，我们需要把这个材质球给动态创建出来

并且把这个材质球设置给Icon Image

我们要把这个动态实例类型给存起来，所以我们需要在WBP_ButtonUI里声明一个变量

重命名

把这个给存起来

你后面想改材质图片的时候，就可以通过这个节点进行修改

通过一个事件来调用这些修改的逻辑

当按钮显示出来的时候，就可以设置对应的按钮信息及其样式

当然，你也可以在设置按钮样式的时候直接把按钮的可见性给设置了

所以可见性需要设置为参数，但是你还需要设置按钮的文字，按钮的材质颜色，都需要作为参数，所以还需要很多参数，我们直接把这些参数放到一个结构体里面。

将自己作为参数给传进去

改变MainUI的参数类型

修改BP_ButtonUI的参数

还需要一个索引参数

总结来说，就是把物体（门）的信息（按钮的图片，按钮的图片的颜色，按钮的字，按钮的个数）传给你的HUD来显示

靠近物体时出现按钮UI（4）

重新做一遍完整的

创建一个结构体

在BP_Door里给对应的成员变量进行赋值

蓝图新建一个接口

新建两个参数，第一个BP_Base Class参数，有这个对象就可以把所有的给传过去，第二个Visible

将这些参数信息传给HUD

HUD接收到这些信息后，HUD又将这些信息转给MainUI了

创建MainUI控件的时候，我们需要创建8个按钮

创建一个控件按钮类

重命名

MainUI里创建一个按钮类的数组变量

循环：创建控件，并且这个变量添加到这里面，并且将按钮控件添加到MainUI的Button Horizontal的水平布局管理器里面

再通过水平布局管理器设置按钮的间距

然后进行按钮显示的时候，循环设置这些按钮的效果

按钮的图片用材质球来做，材质球用动态创建实例

创建一个材质球

双击打开进行调整，材质域为UI，改为透明

为了按钮的图可被替换

重命名

WBP_ButtonUI创建的时候进行动态创建这个材质实例，并且将材质实例的实例对象设置给IconImage成员变量

并且将按钮给隐藏起来

创建一个Index变量，来标识自己是第几个按钮

我们把这个变量的细节给勾选上，可编辑实例，生产时公开，

这样在创建这个ButtonUI的时候，就可以直接设置这个变量了

创建一个BP_BaseClass 变量，用来接收门传过来的信息

创建一个自定义事件，重命名为ChangeButton，并且参数为BP_BaseClass

添加一个参数用来控制按钮是否可见


最后从mainUI给传给按钮就完成了

BP_BaseClass里的按钮信息数组，通过index获取到自己的信息，并且把这些信息设置自己的文本，设置自己的动态材质

实现通过按钮开关门

我们接下来做，门是关着的，就不能再次点击关门，门是开着的，就不能再次点击开门，不能点击的按钮我们显示为灰色

将所有的WBP_ButtonUI都绑定上点击事件

switch on input：如果selection是0则走0，是1则走1，否则走default。即开门走0，关门走1

运行

OpenAndClose这个节点，可以用自定义事件，也可以用接口，什么时候用自定义事件，什么时候用接口？

都可以用，自定义事件和接口都可以理解为函数，只有拿到这个函数的对象才能调用这个函数。自定义事件一般用于子类父类和同一个类中。接口一般用于不同的类

调整按钮的颜色，开始的时候都设置为灰色，碰到谁谁的颜色变亮

实现媒体的开关

媒体文件只能在content文件夹下，创建一个文件夹，并且命名为movies，不能放在别的文件夹下

往虚幻里拽，相当于将这个文件导入到虚幻

重命名，以MS_开头

双击打开，这样你的文件才不会有问题

如果你用的别的路径的文件夹，双击打开的时候就会有警告，说路径不对

你要播放这个文件，就需要有媒体播放器

勾选上，这样就能直接生成播放的贴图资源


双击打开媒体播放器，并且点击这个文件开是否能正常播放

暂停之后，能不能在这个纹理贴图资源里看

你要用这个纹理贴图，就需要创建一个材质

重命名

双击打开电视

将材质给过去

此时就能在BashMesh中看到贴图效果了

但是这个贴图很暗，缺少自发光，并且图片是反的
双击打开材质球

给他连接上自发光

U + 左键，就是UV节点

对UV进行镜像缩放

现在我们要让这个BP_TV播放起来

创建一个播放器的变量

设置播放器变量，设置为我们创建过的播放器

要加声音，我们就需要加一个声音组件

并且设置这个声音组件的媒体播放器变量，设置为我们创建过的媒体播放器

因为BP_TV是继承我们的BP_BaseClass，所以也能触发Open and Close节点，我们根据点击不同的按钮位置，来执行不同的操作


播放下一个怎么办？
需要创建一个播放列表

重命名

把你要播放的视频都加进来

播放的时候，就不再打开播放源文件了，而是打开播放列表的源文件

有两个节点，Open PlayList和Open PlayList Index。有index的代表能播放第几个视频。
Next的时候，播放器会自动检测你播放的是OpenSource打开的单个源文件，还是OpenPlayList的多个源文件

实现模型的更换

选中模型

选择建模模式

点击合并

保存到当前文件夹

对这个模型重命名

修改模型的中心轴位置


根据BP_BaseClass创建一个子类

重命名

双击打开，给BaseMesh的静态网格提赋值

将这个模型给替换为自己的BP_Sculpture

选择花瓶模型，进行中心轴调整

这个花瓶的模型是kt_kt156

设置Button Info变量

再添加一个模型

更换模型实现逻辑

更换画框的材质

现在需要用到这个画框模型

多次取消组合

把这两个模型进行合并

将这个模型保存到当前目录下，并且重命名

然后调一下模型的中心轴

创建一个子类BP_Picture

将这个BP_Picture类的模型给上值

把画框替换为我们自己的BP_Picture

创建一个材质球

双击打开

给上纹理图，并适当的给一些参数

这个纹理贴图是需要更换的，所以我们将它转换为参数

事件分发器

WBP_ButtonUI如何找到WBP_MainUI，除了之前的方法，还有一种方法，事件分发器

这里能绑定分发器的事件

给事件分发器添加一个参数

创建一个自定义事件并且绑定到分发器（委托函数）上

点击的时候让自己的按钮颜色亮起来，让其它按钮暗下去

接下来做这个

当我们点击对象的时候，把点击事件给了HUD，我们也可以把点击事件给BP_Player

我们不用这种简单的方法，因为HUD里存储了BP_Class对象，所以我们找HUD获取BP_Class对象

创建一个输出型的蓝图接口

判断MainUI里的Click Actor是否是有效的，如果Actor有效说明点击了物体，不能再移动物体

同理MoveRight

此时点击就移动不了了

如何控制物体移动呢？

创建一个自定义事件，需要输入float参数，表示移动的距离

距离乘以方向向量表示，要往这个方向上移动多少距离。一个坐标加上一个向量，就是让这个坐标沿着这个向量走到另一个坐标

前后方向写好了，同理左右方向也是这样

进行事件的调用

此时就能移动物体了

增加一个取消按钮，点击可以取消对按钮的控制

当你点击这个按钮的时候可以显示出来，当你点击取消的时候把Actor置为0，这样Controller就控制不了物体了

材质有三种，材质球，材质实例，动态材质实例。模型分两种，静态网格模型，骨骼网格模型，骨骼网格模型一般有动画，静态网格模型一定没有动画