UE4学习笔记25——【UI】显示图片，简易菜单制作，多格式文本块

• P65. 显示图片到屏幕上
• P66. UI主菜单制作
• P67. 使用多格式文本块
• P65

 （新建一个包含第一人称射击模板的工程）

在内容浏览器中新建一个文件夹（WJJ1209），右键“用户界面——控件蓝图”（默认的名字是“NewWidgetBlueprint”）；

在文件夹WJJ1209（刚才新建的文件夹）导入一张图片；

打开“NewWidgetBlueprint”（控件蓝图），左侧“控制板”面板里，“通用——图像”，拖拽一个到视图框中，可以在右侧的细节面板更改他的位置和大小：

　　

视图中左上角像菊花一样的东西叫锚点，它是游戏界面窗口化的时候，窗口要向哪边靠拢（下图右下角那个代表一直全屏）

　　　　

这里我们就选右下角这个（让UI一直全屏），然后细节面板中的偏移全设置为0：

　　

还是细节面板中，找到“外观——笔刷——图像”，然后切换到“关卡编辑”界面，选中导入进来的图片，再回到“NewWidgetBlueprint”（控件蓝图），点细节面板中“图像”这边的向左的箭头，导入刚刚选中的图片：

　　

（不知道怎么回事我的图片导入进来之后颜色变的不太对，整体偏黄绿）

回到“关卡编辑”界面，在工具栏中选择“蓝图——打开关卡蓝图”，添加节点“事件开始运行”，从此节点添加节点“创建控件”；“创建控件”中的“class”选“NewWidgetBlueprint”（自建的控件蓝图的名称），此节点的“return value”添加节点“添加到视口”，然后编译；

这时运行，那么导入进来的图片就会显示到整个游戏画面上（我也不知道这是什么问题，换了一张图片之后颜色就是对的了）

　　　　

 

• P66. UI主菜单制作

 （新建一个包含第三人称模板的工程）

 新建一个文件夹（存放自己添加的东西）（重命名为了“WJJ1216”），在新的文件夹中，右键“蓝图类——Pawn”，重命名为“Camera”；

打开此“Camera”蓝图类，在“组件”面板，“添加组件——摄像机组件”（编译）；

回到 关卡编辑 界面，把场景中的“ThirdPersonCharacter”整个旋转180°（连带着摄像机和代表人物朝向的蓝色箭头），把刚才新建的“Camera”蓝图类放到小白人的正前方，调整位置（右下角的小窗口是通过相机看到的画面）：

　　

 

在自己的文件夹中，右键“用户界面——控件蓝图”，重命名为“MainMenu”；

打开这个“MainMenu”，在视口的右上角，“屏幕尺寸——电视”，选择“1080p”；

在左侧的“控制板”面板，把“面板——垂直框”拉进视口的虚框里，并适当调整大小（垂直框相当于一个自动按照一定规则摆放里面控件的容器），然后还是此面板中，从“通用”拖3个“按钮”到“垂直框”里：

　　

现在这些按钮看起来很丑，选中这3个按钮，然后在右侧的“细节”面板，“插槽——尺寸”选择“填充”；之后选择最上面这个“按钮”，在“细节”面板，“插槽——填充——底部”，改成50，然后同样的步骤修改第二个按钮；再之后把“菊花”拖到“垂直框”的中间（不明所以）：

　　

从“控制板”面板的“通用”中，拖3个“文本”分别到3个“按钮”的下一个层级：

　　

把它们的文本从下到下依次改成：开始游戏，设置，退出。

（如果字体太小那么就修改一下）从“层级”面板（默认是在左下角）点击一个“文本”控件，在“细节”面板，“外观——字体——尺寸”可以更改字体的大小；

（加描边）选中一个“文本”控件，“细节”面板中，“外观——字体——轮廓设置——轮廓大小”改成1；

选中“开始游戏”依附的按钮，“细节”面板最下面“事件”，点击“点击时”后面的“+”号（添加事件“点击时”）；

（这时会跳转到“图表”的界面；如果想从“图表”回到“设计器”，可以在右上角切换）：

　　

从节点“点击时”添加节点“从父项中移除”（点击之后销毁这组控件）；从新节点的“目标”搜索并添加“self”，从“从父项中移除”添加节点“获取类的所有actor”；新节点的“Actor Class”选“ThirdPersonCharacter”，从“Out Actors”添加节点“get”；

添加节点“获取玩家控制器”，从此节点的引脚“return value”添加节点“使用混合设置视图目标”，“获取类的所有actor”的后端执行连接“使用混合设置视图目标”的前端执行，“blend time”设置成1，“new view target”连接节点“get”后面的蓝点；

从“使用混合设置视图目标”添加节点“延迟”，“duration”改成1（和blend time时间一样）；

从节点“获取玩家控制器”的“return value”添加节点“控制”，“延迟”连接“控制”，“控制”的“In pawn”连接节点“get”右侧的蓝点；（编译）

当前的图表：

 

切换到 关卡编辑 界面，工具栏中，“蓝图——打开关卡蓝图”，添加节点“事件开始运行”，从此节点添加节点“创建控件”，“class”选“MainMenu”，从“return value”添加节点“添加到视口”：

　　

 

切换到 关卡编辑 界面，选择视口中的“Camera”（自己创建的蓝图），“细节”面板中，“Pawn——自动控制玩家”设置成“玩家0”；

（这时运行，鼠标随便点一下就不见了；下面解决这个问题）

打开关卡蓝图（从工具栏——蓝图），新添加节点“获取玩家控制器”，从“return value”添加节点“set show mouse cursor”，“显示鼠标光标”打勾，节点“添加到视口”连接节点“set show mouse cursor”；

目前关卡蓝图的事件图表：

　　

切换到“MainMenu”的事件图表，从节点“获取玩家控制器”的“return value”添加节点“set show mouse cursor”，“显示鼠标光标”不打勾，此节点连接节点“控制”；

 

MainMenu的事件图表太长了，只截一段改动的部分：

　　

“退出”按钮也做一个退出的功能：

　　

 

• P67. 使用多格式文本块

 新建一个文件夹存放我们这节课的文件（WJJ1219）；

在新文件夹中，右键，“用户界面——控件蓝图”，重命名为“Text”，双击打开此文件；

在左侧的“控制板”面板中，选择“通用——多格式文本块”，拖进视口的虚框中；

右侧的“细节”面板，“内容——文本”中输入一些字（细节面板中，“插槽——大小到内容”可以将文本框的大小自动变成仅包裹住文本内容的大小），此时视口中显示的文字是一堆乱码；

 切换到 关卡编辑 界面，在刚才的新文件夹中，右键“其他——数据表格”，在弹出的窗口中选“RichTextStyleRaw”，之后重命名为“MyStyleData”，双击打开；

点击两次工具栏中的“添加”（一会添加两种样式的文本）：

　　

在上面的“数据表格”面板中点击第一个信息“NewRow”，然后在下面的“行编辑器”面板中，“文本样式——颜色”手动改成蓝色（不用那么精准，just test）：

　　

“文本样式——字体——尺寸”改成55，“字体族系”选项中，先选择“视图选项”，把“显示引擎内容”勾选上，然后选择“Roboto”字体：

　　

修改完之后切换到第二个刚才添加的字体“NewRow_0”，“颜色”改成黄色，“字体族系”还是选择“Roboto”，“尺寸”改成35；（设置完成之后记得保存）

切换到“Text”（控件蓝图），选择已经添加进去的多格式文本块，“细节”面板，“外观——文本样式集”，选择“MyStyleData”（自己新建的数据表格），然后编译一下（发现还是乱码）；

very important

 切换回“MyStyleData”（数据表格），把第一个的名字重命名为“Default”：

　　

然后保存，在空间蓝图中重新编辑，输出不乱码了而且显示样式是第一个设置的文本样式；

 

切换到“Text”（控件蓝图），选中已经添加的多格式文本块，细节面板中，“内容——文本”换行再添加一些字（shift+enter换行），在第二行的前面和后面都添加一组尖括号“<>”，在前面的尖括号中输入“MyStyleData”中第二个文本样式的名字（为了方便或者其他可以重命名），后面的尖括号中输入/（斜杠），然后编译，第二行的字体样式就是“MyStyleData”第二个字体样式：

　　　　 

(〃＞＿＜;〃)(〃＞＿＜;〃)(〃＞＿＜;〃)