4.虚幻交互设计 - 云笔记

目录HUDUMG渲染层级控件的使用字体样式按钮的使用实现小地图游戏运行时鼠标的操作声音的使用设置小地图的图片小地图显示自己的位置如何截取小地图图片小地图材质编写简单材质小地图添加人物朝向UI小功能实现容器的介绍UI动画效果优化传送逻辑靠近物体时出现按钮UI靠近物体时出现按钮UI2靠近物体时出现按钮UI3靠近物体时出现按钮UI4实现通过按钮开关门实现媒体的开关实现模型的更换更换画框的材质事件分发器HUD就是UI系统和用户交互的过程重新创建一个项目导入资产然后检查资产搭建好自己的GameMode在虚幻里能做UI的工具有两个一个是HUD另一个是UMG系统Event Receive Draw HUD这个节点的主要作用把UI元素放到屏幕上每一帧每一次Size X 输出屏幕的X轴的像素大小Size Y 输出屏幕的Y轴的像素大小现在我们来简单的绘制一张图片Draw Texture Simple节点以屏幕坐标Screen XScreen Y为起点画一个原图大小Scale倍的图片画一个原图四分之一大小并且放在屏幕中间的图片另外一个做UI的工具就是UMGUMG使用起来比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里面可以按shiftenter进行手动换行字体样式创建好User Widget蓝图类命名创建一个控件Add to ViewPoint将这个控件让玩家能在屏幕上看见添加一个画布面板然后把分辨率调到1920*1080即169UI会按照这个比例进行缩放以你屏幕的最短边进行调整短边占9 长边以短边为基准进行缩放为16字体只需要关心字体大小对齐方式基本上就就够用了导入一个字体更改字体样式微软雅黑导出有三个文件当你导入的字体有三个文件的时候只需要点一下是剩下两个点否意思是我们只需要创建一个字体资产其他的都为是这个字体资产的附属品只有类型不同双击打开这个字体资产然后将这两个字体类型给添加进来这样使用的时候就能选择不同的类型了按钮的使用按钮的四态正常态悬浮态按下态禁用态。当你操作这个按钮的时候会出现对应的反应图片的变化按钮里加一张图片这个Image的插槽会变插槽的padding和对齐方式会变该图片是否能铺满整个按钮受几个地方的影响插槽的padding边距按钮自身内部的padding按钮的声音设置实现小地图游戏运行时鼠标的操作当你运行的时候点击鼠标会消失按下shfit f1才会呼出鼠标。我们要调整这种规则就需要从控制器controller里修改这里就是调整鼠标光标的能力地方当你勾选上 Show Mouse Cursor这样当你运行的时候你怎么点击鼠标鼠标都不会消失。因为显示模式下默认是调整UI的所以不再控制镜头相机如果你按住左键移动的话依然可以调整相机你也可以在蓝图里进行设置如果你想运行的时候就隐藏鼠标不想点一下才隐藏游戏开始的时候Controller需要不显示鼠标光标 设置为游戏模式还有另一个节点UI OnlyController设置为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动画的功能但是这个动画的功能比较弱比如位移旋转缩放。但是做火焰在动这些是干不了的你想做就需要用材质球来做了添加并且重命名这个加号就是你想控制哪个控件的哪个属性有小方块的属性就是动画能控制的点击小方块能自动的给你加上第一帧我们想让它缩放的大小为01秒后的一帧想让它的缩放变为1这样它的动画就会从0自动过渡到1同理你也能调整旋转的角度我们调整了动画还需要调整这个控件开始的状态不要直接在细节里修改勾选上这个选项在蓝图里进行调整点一下没播动画接下来我们来实现点击事件把按钮设置为变量然后我们再给这个Button一张图片将这张图片导入到虚幻在虚幻里修改一下这张图片调整按钮的图片颜色大小这里每一个按钮状态都修改修改一下按钮的位置ctrl D 复制这个按钮调整这个按钮的位置再给这个按钮换一张图片导入到虚幻修改这张图片修改这个按钮的图片大小改名字随便创建一个Actor并给他一个位置把角色拖进来并且把位置给copy过去发现人物有一半在地下面我们需要调整一下他的Z轴坐标要让人物进行传送可以这样写像王者荣耀的按下回城按钮后有回城动作进度条读条还会被其它英雄的伤害打断这些都是Set Location的条件判断一般我们不将Set Location写在UI里而是写在Player里的。所以里面一定有一段逻辑UI会通知Player需要传送。一般我们使用接口来作为通知的桥梁创建一个蓝图接口重命名并打开在UI里用蓝图接口进行消息传递把这个接口添加到这个角色的身上现在实现的就是跟刚才一样的效果现在再增加一个按钮的功能传送到客厅重命名但是这样不能传送到客厅只能传送到卧室因为这边我们用的是固定的坐标我们需要有能代替坐标的东西TargetPointTargetPoint没有什么其它的作用主要就是占位用的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.0083s0.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消失的逻辑了靠近物体时出现按钮UI2我们用第二种重新方法来实现重命名下面我们不用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传递到了HUDHUD的Button UIVisible和Button UIHidded传递给MainUI靠近物体时出现按钮UI3接下来我们需要给这个按钮加上图片文字点击的声音功能这里可以显示出父类的变量或者在类默认值里可以看见我们再增加一个变量Texture2DButtonLastIndex代表有几个按钮NewVar代表按钮的文字NewVar_0表示按钮的图片但是这样就会导致变量很多所以我们一般把这些变量放到一个结构体里面重命名双击打开我们定义一下结构体这里就可以改成结构体类型了一个结构体代表一个按钮结构所以把这个变量调整为数组类型变量重命名这里就可以在子类里调整对应的变量了玩家碰到BP_Door并且把身上的变量传给BP_HUDBP_HUD传给WBP_MainUI再有WBP_MainUI进行具体操作WBP_ButtonUI这两个重命名并且勾选上是变量当你要设置按钮文字的时候也可以设置文本设置图片可以分开引脚可以合并引脚设置设置图片有一种简单的方法还可以设置Material我们到底使用图片还是材质球看需求用材质的情况如果这张图片不规整我们就需要手动将这些图片做成一张规整的图片我们有圆形图片和矩形图片需要圆形的形状但是需要矩形的颜色。怎么办呢把这张图片导入到虚幻里设置属性只显示Alpha通道我们就需要这个圆形作为Alpha通道把这个矩形图片也导入到虚幻我们把圆形的图作为Alpha通道的图矩形的图作为颜色的图创建一个材质我们不需要创建实例因为我们用动态实例的方式改它的材质域改为不透明度这样就保持统一了但是有需求并不是所有的都想用矩形的颜色但是所有的都想用圆形的形状这样我们就可以把上面的Texture转换为参数暴露给外部让外部来自己设置重命名创建UI的时候我们需要把这个材质球给动态创建出来并且把这个材质球设置给Icon Image我们要把这个动态实例类型给存起来所以我们需要在WBP_ButtonUI里声明一个变量重命名把这个给存起来你后面想改材质图片的时候就可以通过这个节点进行修改通过一个事件来调用这些修改的逻辑当按钮显示出来的时候就可以设置对应的按钮信息及其样式当然你也可以在设置按钮样式的时候直接把按钮的可见性给设置了所以可见性需要设置为参数但是你还需要设置按钮的文字按钮的材质颜色都需要作为参数所以还需要很多参数我们直接把这些参数放到一个结构体里面。将自己作为参数给传进去改变MainUI的参数类型修改BP_ButtonUI的参数还需要一个索引参数总结来说就是把物体门的信息按钮的图片按钮的图片的颜色按钮的字按钮的个数传给你的HUD来显示靠近物体时出现按钮UI4重新做一遍完整的创建一个结构体在BP_Door里给对应的成员变量进行赋值蓝图新建一个接口新建两个参数第一个BP_Base Class参数有这个对象就可以把所有的给传过去第二个Visible将这些参数信息传给HUDHUD接收到这些信息后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就控制不了物体了材质有三种材质球材质实例动态材质实例。模型分两种静态网格模型骨骼网格模型骨骼网格模型一般有动画静态网格模型一定没有动画