Unreal中UI界面初学入门

今天先完成一个小的UI界面的设置,通过小项目来了解一下UI到底是什么。

在我自己学的时候发现最重要的一点是英文单词,在这个新的界面中有很多专业的术语,所以一定要懂得这些英文单词的意思才能灵活的应用。

本来想着将整个UI涉及到的比较不常见的单词都摘出来记忆一下,后来想想还是太多太杂不容易记忆。先利用Case来慢慢记忆单词。

首先,什么是UI?UI的英文全拼是Use Interface,用户界面,在Unreal中也有特定编辑UI的功能,有专门的UI的class,例如Font,Slate Brush,Slate Widget Style,Widget Blurprint.这些都是用来编辑UI的工具。

(要想在Unreal中使用UI还必须了解HUD是什么,Head Up Display(平视显示器),我个人理解在Unreal中HUD就相当于一个摄像机的镜头,例如FirstPersonGame中的瞄准星,就像是附着在摄像机的镜头上,这就被称为HUD。)

Case1

在Unreal界面中,点击Content Browser中的Add New,添加User Interface中的Widget Blueprint,(控件蓝图)。创建三个控件蓝图,分别命名为HUD,MainMenu,PauseMenu,

逻辑思路:现在我计划编辑一个有血量,能量值以及弹药的HUD,之前说过HUD是摄像机的镜头,那么Character运动时镜头就会随之运动,那么在HUD中的元素也将会随着摄像头移动,所以我们会在HUD中设置一些一定要跟随摄像机镜头转动的元素。例如:瞄准星,血量值,子弹数量等。

那么接下来就该设置HUD了,刚创建的名为HUD的这个控件蓝图就是用来做这些事情的,控制蓝图的作用是让元素出现在界面中,但是元素中的一些变量的变化还是需要在需要的蓝图中实现的,就像血量,Character受到攻击时才会使血量减少,那么传递信息或者说传递变量的一定是Character,那么逻辑就应该是:Weapon打中Character——Character中的事件触发——导致Variables接收到信息减少——控件蓝图中的Variables减少将信息反映在界面中。

根据这个逻辑可以得出,先要在Character中的触发事件后设置Variable的变化。

打开Charater的蓝图,在其中创建变量,flaot,int类型根据需求进行变化。这里Health,Energy,Ammo,AmmoMax.根据我的需求我分别定义为float,float,int,int类型。

逻辑思路:有了变量就要看看如何变化,变量的减少可以通过在Event后通过计算来做到,(get,set)。之所以要设置AmmoMax,是因为子弹元素左侧要设置现有数量,右侧要设置最大值。那么如此一来就这些Variables就要设置初始值了,在此基础值上进行减少,初始值自己根据情况设定。

由于现在只是想要体现UI的功能所以将Variables接到一些现有的事件上,在此我将Health的变化接到F键上,Energy的变化接到Jump上,Ammo的变化接到发射子弹上。如下,

同时,在Character的蓝图中还要实现HUD,不过在其他的蓝图中也可以实现,这里为了方便我直接将实现HUD的事件放在了Character蓝图中,因为是已进入Game中就要显示出来所以事件的驱动应该定位Event Bgeign Play.

以上是我们要托拽的节点,这些节点的拖拽逻辑是:Creat Widget(建立一个控件,Class中选择要实现控件蓝图的名字)将这个控件蓝图set一个变量值是为之后考虑,如果这个控件不用了或者需要其他的编辑手法的话,就可以直接对这个Variables编辑了。最后Add to Viewport是将这个控件蓝图上的屏幕或者是内容添加到摄像机的镜头上。这是最基础的实现HUD的逻辑。

下面我就要对这个控件蓝图的内容进行编辑了。

首先我要Health,Energy,Ammo出现在屏幕上的话,就会需要两个水平框,一个放Health和Energy,由于两个类型相同,所以我就放在了一个水平框中,另一个水平框放入Ammo。由于Health与Energy区别,所以我又将水平框中分成了两个垂直框,一个放TEXT,一个放进度条。还有若干个TEXT去放置。当然这是我个人思路,如果可以的话有很多很多中方法去布置这些框框架架。

这是我放置后的结果,但是这其中最需要注意的地方是这些英文单词,这里我就将我不认识的一一罗列出来,方便记忆。

Horizontal:水平的;Vertical:垂直的;

接下来就要调整一下这些框框的属性了,先调整进度条的大小:选择Detail面板中Slot(Vertical Box Slot)(Slot:槽)中的Size将Auto改为Fill就可以编辑打大小了,Fill:填充。含义是将ProgressBar的大小相对于Veritical的大小的填充度设置为1.0,值可以根据需求更改,这里我就设置为1.0.同时将Vertical也设为Fill:1.0,这样就可以很好地调整进图条了,同理其他的也是,可以根据需求更改Size.合理即可。

下面接着调整TEXT的内容,选中TEXT在Slot的下一个就是Content,在Content中只有一个可编辑,就是TEXT对其内容的修改可以在这里进行,如改成Health/Energy/Ammo;后面跟的Bind意思是绑定,含义就是可以选择已经现有的文字或者变量进行绑定。设置完之后开始设置进度条的颜色,在Detail面板中Apperance(外表)中的Fill Color and Opacity(填充颜色和不透明度 opacity:不透明度)这里比较疑惑的是为什么还有个不透明度。以下就用逻辑解释一下:

如果要实现触发事件就会导致血量的减少,那么对于进度条来说如何做到呢,这里Unreal提出的解决办法就是利用百分比的不透明度,如果实现游戏中血量减少的情况通俗的来讲就是进度条本身在没有任何命令的情况下为100%,整个进度条都是满的,触发事件就要降低不透明度。就时让部分血量条变得透明,那样在视觉上就会表现的是血量减少了。而这种不透明度的变化可以通过数值来改变,选中Progress Bar在Detail面板上有Progress的部分,其中的Percent就是控制不透明度的百分比的,Bar Fill Type是设置不透明度的变换方向的,从各个方向都可以变化,这里我使用LeftToRight,百分比的控制要是变量才行,而且变量是被事件的触发控制的,这就是为什么我们之前在Character中设置了变量,而且在使用进度条的两个变量中都设置成了1.0,这样如果将Character中的变量传递过来就会达到我们想要的效果。那么我们就要利用Bind这个选择了,这时点击Bind似乎没什么东西可以选择。我们此时所在的界面是控件蓝图的Designer界面,还有一个Graph的界面供我们编辑蓝图程序,在右上角点击Graph。

在Graph中编辑以上节点,这样做的目的是将FirtPersonCharacter提升为一个变量,使得可以利用这个变量来调用其中的其他的变量,CastTo含义是转化成。。。因为我们的变量是在FPC中写的所以我们要保证PlayerCharacter是FPC。节点程序完成后返回Designer编译完后点击Percent后的bind会发现刚刚被提升的变量在其中了,鼠标放置到变量上,会发现在FPC中的所有变量都可以调用了,只是后就对号入座就好了,需要什么选择什么。当然自己可以随意设置自己喜欢的Color,也可以Bind。之后设置Ammo大部分逻辑是一样的,不同的地方就是这次需要与Character的蓝图向连接的Variable是TEXT,这是就会用到Bind了,但是由于我们在Character中设置的变量是int类型的,所以不能直接转化,所以我们要自己创建一个Bindding了。点击CreatBindding,在这里实际上就是一个转化的作用,将int类型转化成TEXT类型,从刚刚提升的FPC的变量中引出Get Ammo节点,就获得了我们在Character中设置的变量了,节点如下:

AmmoMax如法炮制,这就是为什么我们在Character中不去改变AmmoMax的值。

至此,这个小项目就要结束了,但是还有一点需要注意的是Anchors(锚)的问题,锚的问题暂时不做深的探究,大概理解一下就是可以认为是基点,就是相对坐标,例如Horizonal Box的位置是在右上角,而他的锚在左上角,如果屏幕与canvas不一致就会导致可能看到的H的位置和Game中不同,所以每一个主框架的锚要定在离自己最近的Canvas的锚点上。以此保证框架位置的准确性。

时间: 2024-10-28 02:39:07

Unreal中UI界面初学入门的相关文章

Unity中UI界面颤抖解决方法

将Render Mode中属性改为Screen Space - Camera 摄像机挂在Canvas属性下会出现UI界面颤抖的效果. UI界面颤抖解决方式:将Render Mode中属性改为Screen Space - Overlay,如下图所示:

Unreal SDK 游戏开发从入门到精通(UnrealScript语法、UI Scene界面、UDK独立开发游戏)

对这个课程有兴趣的朋友可以加我的QQ2059055336和我联系 课程内容简介 本系列讲座主要讲述如何利用UDK开发游戏程序. 本课程主要分为四个部分: 1.学习UnrealScript的基本语法, 为下面的学习打下良好的基础 2.系统学习UDK的主要模块, 熟悉并掌握游戏开发的各个系统 3.使用UDK独立开发游戏Demo, 体验和理解UDK对游戏开发流程的整合 课程大纲 第一章初步接触Unreal SDK 1.1 Unreal sdk简介aaa 1.2 UC语言的基本介绍 1.3 搭建UDK的

android中实现service动态更新UI界面

案例:通过service向远程服务器发送请求,根据服务器返回的结果动态更新主程序UI界面,主程序可实时关闭或重启服务. 注册BroadcastReceiver 在主程序activity中注册一个BroadcastReceiver,用于接收Service发布的广播. @Override protected void onStart() {//重写onStart方法 dataReceiver = new DataReceiver(); IntentFilter filter = new Intent

Qt入门学习——Qt Creator 中 ui 文件和 Qt 代码关系

通过<Qt Creator的使用>的学习,我们可以借助 Designer(界面设计器)快速设计界面. 此例子 ui 内容如下(只是简单添加了一个按钮): 工程的代码目录结构如下: 最终在工程所在目录会生成一个 ui 文件: 此 ui 文件实际上是xml 文件: 当我们编译 Qt 程序代码,Qt Creator 用 uic 工具把 ui 文件的内容转换成 C++ 代码,在工程目录同一级目录的 build- 目录下自动生成 ui_类名.h 文件,如本例子中的 ui_mywidget.h,是由 my

JavaFX 初学入门(一):FXML嵌套与原始控件继承

说明 之前由于做一个小项目需要用swing,结果swing把我折腾的够呛.后来得知有javaFX这个类似于C#中WPF形式的利用XML来写界面的框架之后,马上就转到javaFX上了.找过一些资料但是帮助都不大,最后还是选择直接看官方demo.(我之前是做过android app,有些东西其实都是差不多的.) 下面选取官方demo中的一个 UnlockCustom . 这个demo中涉及到 继承原始控件(自定义),FXML 布局嵌套,以及一些控件动画等. 一.javaFX的入口函数 整个javaF

这个软件对CAD制图初学入门来说难吗

CAD图纸广泛应用于设计领域,我们可以用它来进行建筑.服装.园林等设计.作为一个初学者,小编面对琳琅满目的CAD编辑工具有些发懵,相信很多初学者都遇到这样的情况,那么哪款软件适合CAD制图初学入门呢? 一.什么是迅捷CAD编辑器? 迅捷CAD编辑器(官网下载:http://cad.xjpdf.com)是一款操作简单.功能齐全的CAD图纸编辑软件,该软件可以为DWG.DXF等文件格式图纸提供浏览.编辑.批注.格式转换等复杂处理,无需AutoCAD支持.软件采用最新研发的图纸文件格式解析.处理以及转

C#中的线程(一)入门

C#中的线程(一)入门 - wota - 博客园 公告 文章系参考转载,英文原文网址请参考:http://www.albahari.com/threading/ 作者 Joseph Albahari,  翻译 Swanky Wu 本系列文章可以算是一本很出色的C#线程手册,思路清晰,要点都有介绍,看了后对C#的线程及同步等有了更深入的理解. 入门 概述与概念 创建和开始使用多线程 线程同步基础 同步要领 锁和线程安全 Interrupt 和 Abort 线程状态 等待句柄 同步环境 使用多线程

NSIS 2.0界面快速入门

NSIS 2.0 版本支持定制的用户界面.所谓的 Modern UI(下称 MUI) 就是一种模仿最新的 Windows 界面风格的界面系统.MUI 改变了 NSIS 脚本的编写习惯,它使用 NSIS 的宏来表达,指定 MUI 的属性需要使用宏.所以,诸如 LicenseText, Icon, CheckBitmap, InstallColors 在 MUI 中失去意义. MUI 的内置向导页面 和安装程序有关的向导页面 MUI_PAGE_WELCOME 该向导页面显示欢迎信息 MUI_PAGE

Python可视化界面编程入门

Python可视化界面编程入门具体实现代码如所示: (1)普通可视化界面编程代码入门: import sysfrom PyQt5.QtWidgets import QWidget,QApplication #导入两个类来进行程序界面编程 if __name__=="__main__": #创建一个Application的类 app=QApplication(sys.argv) #创建一个窗口 w=QWidget() #设置窗口的尺寸大小 w.resize(400,200) # 移动窗口