虚幻引擎(UE4)技术基础-项目六-UI课件.pptx

1、2 12项目五任务1：认识虚幻引擎动态图形设计器任务2：制作游戏主菜单3 任务1 1：认识虚幻引擎动态图形设计器 虚幻动态图形UI设计器 控件 输入模式 锚点4 1.1虚幻动态图形UI设计器创建控件蓝图 在内容浏览器中，点击“添加新内容”按钮，在“用户界面”下选择“控件蓝图”选项。打开控件蓝图编辑器。5 1.1虚幻动态图形UI设计器创建控件蓝图 控件蓝图编辑器布局及各窗口功能描述窗口窗口描述描述菜单栏菜单栏常用功能菜单。工具栏工具栏包含蓝图编辑器常用功能，如编译、保存和播放。编辑器模式编辑器模式切换“设计师”和“图表”模式。“设计师”模式适于制作图形界面布局，“图表”模式用于编写事件的相应程序

2、。控制板控制板控件列表，用户可以将其中的控件拖放到视觉设计器中。层次结构层次结构显示用户控件的父级结构。视觉设计器视觉设计器操纵已拖动到视觉设计器中的控件，是布局的视觉呈现。详细信息详细信息显示当前所选控件的属性。动画动画UMG 的动画轨，可以用于设置控件的关键帧动画。6 1.2控件控件 控件是指对数据和方法的封装。控件可以有自己的属性和方法，其中属性是控件数据的简单访问者，方法则是控件的一些简单而可见的功能。设计控件是一项繁重的工作，要求用户精通面向对象程序设计。虚幻引擎4为用户提供了大量的已封装好的控件，便于用户调用，简化工作。7 1.2控件控件 常见控件类控件控件描述描述Border B

3、order是一种容器控件，可以容纳一个子控件，可以为子控件提供环绕的边框图像以及可调整的填充样式。Button 按钮是一种可点击的基元控件，可实现基本的交互。Check Box复选框控件用于显示几种切换状态其中之一，即“未选中”、“已选中”以及“不确定”。Image 图像控件用于在UI中显示平板刷、纹理或材质。Named Slot用于为用户控件显示可使用任何其他控件来填充的外部槽，对创建自定义控件功能而言，此控件非常有用。Progress Bar 进度条控件是一种简单的可填充条图形，可以用于表示经验值、体力值、获得的点数等。Slider此控件可显示滑动条和图柄，用于控制值在0-1之间变动。Te

4、xt 在屏幕上显示文本的基本方式，可用于对选项或其他 UI 元素进行文本说明。Text Box允许用户键入自定义的文本。仅允许输入单行文本。8 1.2控件控件 面板控件类控件控件描述描述Canvas Panel 画布面板用于将控件放置在任意位置，锚定控件，或与画布上的其他子对象进行叠置排序。画布面板是进行手动布局的理想控件。Grid Panel 这是一种在所有子控件之间平均分割可用空间的面板。Horizontal Box用于将子控件水平排布成一行。Overlay 允许控件互相堆叠，并针对每一层的内容使用简单布局。Safe Zone 拉取平台安全区信息并添加填充。Scale Box用于以所需的大

5、小放置内容，并对其进行缩放以满足该框所分配到的区域大小的限制。Scroll Box 一组可任意滚动的控件。Size Box 一种可定义空间大小的面板。Vertical Box 垂直框控件是一种布局面板，用于自动垂直排布子控件。Widget Switcher可以创建并组合以获得类似于选项卡的效果。一次最多只显示一个控件。Wrap Box该控件会将子控件从左到右排列，超出其宽度时会将其余子控件放到下一行。9 1.2控件控件 输入控件类选项选项描述描述组合框（字符串）组合框（字符串）用于通过下拉菜单向用户提供选项列表，用户可以从中选择一项。数字调整框数字调整框一种数值输入框，允许直接输入数字，或通过

6、点击并滑动选择数字。文本框（多行）文本框（多行）允许用户输入多行文本。10 1.2控件控件 图元控件类选项选项描述描述Circular Throbber 循环展示图像的动态浏览图示控件。Editable Text这是一种没有框背景的文本字段，允许用户进行输入。该控件仅支持单行可编辑文本。Editable Text（Multi-Line）可编辑文本，支持多行文本。Menu Anchor此控件用于指定一个位置，弹出菜单将从此处调出并被锚定在此处。Native Widget Host这是一种容器控件，可以在UMG控件中嵌套一个原生控件。Spacer 隔离控件提供其他控件之间的自定义填充。隔离控件本身

7、并不进行视觉呈现，在游戏中不可见。Throbber 动画式的动态浏览图示控件，在一行中显示几个缩放的圆圈，可以用来表示正在进行加载等。11 1.2控件创建控件 操作方法：打开另一个蓝图（如关卡蓝图关卡蓝图或角色蓝图角色蓝图），鼠标右键单击调出上下文关联菜单，输入“createwidget”关键词，选择“创建控件”12 1.2控件创建控件 鼠标左键点击节点的“Class”引脚的“选择类”按钮，在打开的菜单中选择之前新建的控件蓝图的名字，目的是将此控件与控件蓝图之间建立联系。13 1.2控件创建控件“Return Value”引脚返回“Class”类中引用的实例，鼠标左键拖曳“Return Val

8、ue”引脚，在关联菜单中选择“提升为变量”14 1.2控件创建控件 蓝图中会出现名为“设置”的节点，并在“我的蓝图”面板“变量”下新增一个变量（重命名为“UMGTest”），之后可以以此访问该控件蓝图。15 1.2控件创建控件 在蓝图中添加“Add to Viewport”，并建立连接，将控件蓝图的内容推送到屏幕上显示。16 1.3输入模式输入模式 在有些情况下，玩家想要与用户界面进行交互，而有些情况下则希望能够完全忽视掉用户界面。通过设置输入模式节点设置输入模式节点可以用设定玩家与UI交互的方式“Set Input Mode Game and UI”节点，使玩家可以同时操纵游戏和UI，例如，

9、控制屏幕上的角色的同时可以点击任意的按钮或UI元素。“Set Input Mode Game Only”节点仅对游戏启用输入，忽视UI元素，适用于非交互性UI元素，如体力、点数或时间显示。“Set Input Mode UI Only”节点只节点只允许UI导航不允许游戏输入的情况下使用。这将完全禁用掉所有的游戏控制，UI将成为所有输入的对象，请谨慎使用该节点。17 1.4锚点锚点功能 锚点用来定义UI控件在画布面板上的预期位置，并在不同的屏幕尺寸下维持这一位置。锚点在正常情况下以Min(0,0)和Max(0,0)表示左上角，Min(1,1)和Max(1,1)表示右下角。创建画布面板并向其中添加

10、其他UI控件后，既可以从一系列预设的锚位置中进行选择，也可以手动设置锚位置。18 1.4锚点锚点工作原理 黄框内图案是锚图案，它表示画布面板上锚点的位置。19 1.4锚点锚点工作原理 场景中，水平和垂直黄线表示按钮基于画布尺寸相对于窗口左上角锚的位置。20 1.4锚点锚点工作原理 如果把锚点移动到右下角，按钮的位置相对于锚点之间的距离即发生了改变。锚点的位置会根据屏幕尺寸来影响控件的位置。21 任务2：制作游戏主菜单 创建主菜单控件 制作主菜单外观 设置主菜单按钮跳转功能22 2.1创建主菜单控件创建主菜单控件步骤（1）利用关卡编辑器的“文件”菜单创建一个新的空关卡，用于制作显示主菜单的场景，

11、将新关卡命名为“MainMenuMap”。打开关卡蓝图。（2）创建控件蓝图，用于制作主菜单。在内容浏览器中，点击“添加新内容”按钮，在“用户界面”下选择“控件蓝图”选项，并对其进行重命名为“WBP_MainMenu”。23 2.1创建主菜单控件创建主菜单控件步骤（3）创建控件并利用控件对主菜单的显示做相应的设置。打开关卡蓝图，鼠标右键单击调出上下文关联菜单，输入“createwidget”关键词，选择“创建控件”，并在“Class”引脚的“选择类”按钮中选择引用的控件蓝图“WBP_MainMenu”。24 2.1创建主菜单控件创建主菜单控件步骤 将控件节点的“Return Value”引脚返回

12、值提升为变量，鼠标左键拖曳“Return Value”引脚，在关联菜单中选择“提升为变量”，并在“我的蓝图”面板“变量”将新增的变量重命名为“MainMenu Widget”，在蓝图中添加“Add to Viewport”，并建立连接，将控件蓝图的内容推送到屏幕上显示。25 2.1创建主菜单控件创建主菜单控件步骤 设置输入模式和光标显示：添加“Set Input Mode Game and UI”节点，使玩家可以同时操纵游戏和UI。添加“Set Show Mouse Cursor”节点来设置启用或禁用鼠标光标启用或禁用鼠标光标。注意增加3个“Get Player Conftroller”节点以

13、获得相应设置的玩家控制权。26 2.2制作主菜单外观添加控件 双击打开用于制作主菜单的控件蓝图“WBP_MainMenu”编辑器，打开控制板的“面板”选项，鼠标左键将“Canvas Panel”控件添加到设计视口中。并调整其大小，以适合主菜单的要求。27 2.2制作主菜单外观添加控件 在“Canvas Panel”下继续添加面板控件“Vertical Box”28 2.2制作主菜单外观设置锚点 在细详细信息面板点开“锚点”的下拉菜单，选择平铺模式。29 2.2制作主菜单外观添加文本控件 在“Vertical Box”下添加“Text”文本控件，文本控件在“常见”控件类下。添加完毕后，在详细信息

14、面板对文本进行设置。依次修改内容、颜色、字号、和对齐方式等属性。30 2.2制作主菜单外观添加控件（1）双击打开用于制作主菜单的控件蓝图“WBP_MainMenu”编辑器，打开控制板的“面板”选项，鼠标左键将“Canvas Panel”控件添加到设计视口中。并调整其大小，以适合主菜单的要求。31 2.2制作主菜单外观制作菜单按钮 在层次结构“Vertical Box”下添加“Button”控件，“Button”控件位于控制板“常见”控件下。在“Button”控件层级下添加“Text”文本控件，将文本控件拖放到按钮上，其文本内容改为“开始游戏”，其他参数设置与“主菜单”文本效果类似。按照此方法依

15、次制作出“设置”和“退出”按钮。32 2.3设置按钮跳转功能切换图标页签 设置按钮的跳转功能需要在控件蓝图的图表页签下完成。切换方法：鼠标点击控件蓝图右上角的“图表”按钮。33 2.3设置按钮跳转功能设置主菜单按钮功能 在图表页签中为“开始游戏”按钮添加点击事件。在“我的蓝图”面板点击变量下的“Button_0”，在“事件”面板，鼠标单击“On Clicked”选项右侧的“+”34 2.3设置按钮跳转功能设置主菜单按钮功能“开始游戏”按钮的点击事件为打开一个游戏关卡，在“On Clicked”节点后连接“Open Level”节点，并在“Open Level”节点的“Level Name”输入

16、框中输入一个想要打开的游戏关卡名称。35 2.3设置按钮跳转功能设置主菜单按钮功能“退出”按钮的点击事件为结束游戏。36 2.3设置按钮跳转功能设置分辨率菜单 回到“WBP_MainMenu”控件蓝图的“设计师”页签，层次结构中复制“Canvas Panel”，在“Canvas Panel”点击鼠标右键，利用复制粘贴即可完成。利用详细信息面板的参数设置37 2.3设置按钮跳转功能设置分辨率菜单 在运行主菜单时不应显示分辨率菜单，设置方法：在层次结构中选中“Setting”控件，在详细信息中的“Behavior”选项下找到“Visibility”，将其设置为“Hidden”。38 2.3设置按钮

17、跳转功能设置分辨率菜单 对分辨率菜单的三个按钮添加点击事件。注意：在设计师页签下，将原“Canvas Panel”和“Setting”控件详细信息面板的控件名称后面的“Is Variable”前的复选框勾选，设置为可见，如图6-38所示。以便在图表页签的变量中找到这两个控件变量，从而对其进一步编辑。39 2.3设置按钮跳转功能设置分辨率菜单 对主菜单的“设置”按钮的点击事件进行设置。进入图表页签，选择我的蓝图中的“变量”下的“设置”按钮名称“Button_1”,其含义为：当用户点击“设置”按钮时，隐藏主菜单，而显示分辨率菜单。40 2.3设置按钮跳转功能设置分辨率菜单 其次，对“640*480”、“1920*1080”两个分辨率按钮进行设置。在节点中输入命令时，注意分辨率中间的乘号需使用小写英文字母“x”。41 2.3设置按钮跳转功能设置分辨率菜单 最后，需要对“设置”菜单中的“返回”按钮的点击事件进行设置。“返回”按钮的点击功能与“设置”按钮的功能恰恰相反，当点击“返回”按钮时，隐藏分辨率菜单，显示主菜单。感谢聆听！感谢聆听！感谢聆听！感谢聆听！