Intro

User Interface Development - Unreal Engine 4 Course - YouTube

Intro
Editor
1. Palette
2. Hierarchy
3. Animations
4. Details
5. Switch between Designer and Graph
Place Object
1. Anchor
2. Z Order
3. Image > appearance > brush: 更换背景图片
import UI assets
1. 拖入图片到 Drawer
2. image widget 可以修改尺寸和 brush 中选择的图片大小一致或成比例
3. 使用 PNG 格式文件
Display UI:
1. 在 Level Blueprint 中，EventBeginPlay > CreateWidget > AddToViewport，但是如果有很多关卡，要如何处理呢？
2. 在 GameMode 中的 HUD class 中找到已经被选中的 HUD Class（或者自己直接新建一个 HUD Class），在其 Blueprint 内，重复第一步 AddToViewport，那么每一关都显示
3. 总结，两种方法：对于血条等信息，可以每一关都显示，就放到 HUD 中，对于 MainMenu 可以只在一个 LevelBlueprint 中放置
Button&States:
1. 需求：要鼠标 hover 到 button 上 button 变色
2. place a button, then style > hovered，pressed 只表示按压下去那一瞬间的显示，release 后又回来了
Button Events: 在 Graph 中事件触发后直接调用函数，比较 easy
1. OnHovered -> PlaySound2D
2. OnClicked -> PrintString
Showing Cursor & Input Modes：在 UI 的 Graph 中控制
1. 让 Cursor 一直显示这样就可以点 UI：PlayerController.SetShowMouseCursor
2. 只显示鼠标还不够，因为 Pawn 还是可以响应 Input，解决方法是：PlayerController.SetInputModeUIOnly，并且设置 InWidgetToFocus 为 self
3. 在处理完 UI 后，需要重新让 Pawn 之类响应输入，就是 SetInputModeGameOnly
Loading Level From UI：点击 Start 后开启新的关卡，并且销毁该 UI
1. 创建一个 MenuLevel，在 Button clicked 事件后调用 OpenLevel 并选择指定的 level 即可。
  但是需要注意，在 MenuLevel 中可能已经设置了 InputModeUIOnly，在 UI 中 OpenLevel 后，需要 set InputModeGameOnly
2. 如果 Load 的事件很长，可以在 OpenLevel 后 RemoveFromParent，将 UI 从视口中移除
Organizing With Panels & Boxes: 将多个 button 对其
1. 如果在 HTML 中，就是 div 套 div，对于 UMG，使用的 widget 为 Box，这里我们用 vertical box，让 button 作为 box 的子节点
2. 对其在 button > Details > Slot 中可以修改对齐方式，HorizontalBox 只能修改 Vertical Alignment，VerticalBox 只能修改 Horizontal Alignment
3. 左右箭头是交换它和相邻组件的位置，比如有两个 button 就是交换他们的位置
4. 在我猜测，Fill 就是占据尽可能多的空间，但是自己不一定填满所有空间，再通过 Alignment 调整自己占据空间
UI Animations Intro: 动画的本质就是一个 Object 的属性随着时间变化，比如字体的 Opacity 随着时间变化
1. 创建一个字体 widget，给它起一个名字，比如叫做 Text_Version
2. Window > Animations > +Animation，给自己的动画起一个名字，比如 VersionTextFade
3. 在 Animation 中添加 track，选择 Text_Version，再对这个 widget + track，选择要改变的属性
4. add a new keyframe:
  1. 方法一：drag the grid, change the value
  2. 方法二：直接点击小加号
5. move grid to keyframe: 点击对应属性的左右小箭头
6. del a keyframe: 点击 interval 内的小圆点，右键删除
Play Animations: 在 Widget 的蓝图中使用 PlayAnimation 函数
Text Content Bindings: 比如界面上需要一直显示 Character 的血量
1. Text > Details > Content > Create Bindings，就创建了一个函数
2. 函数内部获取 Player 的 HP 转为 Return Value
3. 因为该 Widget 控制着 Character，所以在 Character 的 Blueprint 里 EventBegin 创建该 Widget 并 AddToViewport
Progress Bar Content Binding: 使用进度条显示角色的血量，原理是一张 empty 血槽图片做底，一张满血槽图片配合 percentage 挡在前面
1. 当 percentage 为 0 时，满血槽不显示，当 percentage 为 60% 时候，显示满血槽图片的 60% 挡在 empty 血槽前面
2. 为 Percentage create a binding，原理和显示血量一样
Pause Game: 按下 Button 暂停游戏：OnClicked -> Set Pause Game
Exit game: 在 clicked event 后 ExecuteConsoleCommand，为 Exit
Switching Between Widgets: 如何删除 widget：RemoveFromParent
Graphics Scalability Settings: 改变游戏分辨率：ExecuteConsoleCommand r.screenPercentage 10 之类的，
可以看 Scalability Reference for Unreal Engine | Unreal Engine 5.3 Documentation，也可以在运行的时候按 ~，调出 cmd 输入命令运行看看结果