首页 > 其他分享 >UE4学习笔记25——【UI】显示图片,简易菜单制作,多格式文本块

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

时间:2022-12-19 17:01:30浏览次数:32  
标签:25 文本 控件 蓝图 添加 UI UE4 面板 节点

  • 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”第二个字体样式:

     

(〃>_<;〃)(〃>_<;〃)(〃>_<;〃)

标签:25,文本,控件,蓝图,添加,UI,UE4,面板,节点
From: https://www.cnblogs.com/wjjgame/p/16969643.html

相关文章

  • uiautomator2自动化测试
    前言最近公司想要做APP的UI自动化,安排我这边来做。这篇文章主要是作为总结和复习用。总结通过uiautomator2+unitest+数据库来实现app自动化,采用po模式,将app页面和业务逻......
  • buildroot make 的时候出现 You seem to have the current working directory in your
    问题现象:在buildrootmake的时候,出现以下的提示:YouseemtohavethecurrentworkingdirectoryinyourLD_LIBRARY_PATHenvironmentvariable.Thisdoesn'twork......
  • OAuth 2 Developers Guide
    IntroductionThisistheuserguideforthesupportfor ​​OAuth2.0​​​.ForOAuth1.0,everythingisdifferent,so ​​seeitsuserguide​​.Thisusergu......
  • XCode 日志打印总是提示 iOS [framework] CUICatalog: Invalid asset name supplied:
    Xcode控制台打印:[framework]CUICatalog:Invalidassetnamesupplied:'(null)'不知道是哪里的图片不存在或者传入的图片名为nil了,项目大了就是大海捞针,不知道哪里找?按......
  • Step by step guide to set up master and slave machines on Windows
    Note: ThereisnoneedtoinstallJenkinsontheslavemachine.Onyourmastermachinegoto ManageJenkins > ManageNodes.NewNode --> EnterNodeName.Sel......
  • SwaggerUI--SosoApi
     ​​1、SwaggerUI是什么?​​SwaggerUI是一款RESTFUL接口的文档在线自动生成+功能测试功能软件。Swagger-UI的官方地址:​​http://swagger.io/​​Github上的项目地址: ......
  • [常用工具] PyAutoGUI使用教程
    PyAutoGUI使用教程目录PyAutoGUI使用教程1基础知识2一般函数3故障保险4鼠标函数4.1鼠标移动4.2鼠标拖动4.3鼠标单击4.4鼠标滚动4.5鼠标按下4.6缓动/渐变(Tween/......
  • 微信电脑版 v3.8.1.25 绿色便携版
    修改历史:2022.12.14:自改官方3.8.1.25最新正式版本2022.08.30:自改官方3.7.6.29最新正式版本2022.06.15:自改官方3.6.0.18最新正式版本2022.03.19:自改官方3.5.0.46最......
  • 桌面应用自动化python——uiautomation API 如何找元素
       本文主要用到一个uiautomation的开源框架,是一个咱们中国人写的,支持MFC,WindowsForms,WPF,Metro,Qt界面;此文主要是自己的个人总结,开源作者原文:gethub地址:https://g......
  • RPA-UIBOT的简单使用教程官网
    uibot学院:​​https://uibot.com.cn/teachvideo​​ UiBot开发者指南(必看):​​https://docs.uibot.com.cn/guide/​​命令手册:​​https://docs.uibot.com.cn/​​ UIBOT视......