JZTXT

learn-ue-ui

发布时间 2023-10-25 12:51:38作者: ticlab

learn ue ui

Created: 2023-10-24T15:29+08:00
Published: 2023-10-25T12:47+08:00

目录

Intro

User Interface Development - Unreal Engine 4 Course - YouTube

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

Widgets

Text Box(Multi-Line)

字体颜色不改变的原因是因为勾选了 Inherit From Parent