UMG笔记——关于UMG 的一些基础知识和动画的实现

时间:2024-04-04 10:36:09

**

UMG笔记——关于UMG 的一些基础知识和动画的实现


一, 目的**

在很多UMG 的动画中,有一个经典的案例 是控制 一个 UMG 从页面的底部移动到 画面的中间位置。
常规的做法是 在UMG 动画中 更改 slot 的的 PositionY 的数值。 此文章 直接按照国外的教程 ,通过设置 锚点 anchors 的位置 来进行动画控制。 中间涉及的基础知识 正好过一遍。

二, 基础知识

UMG笔记——关于UMG 的一些基础知识和动画的实现锚点 Anchors 有九种对齐模式。 我们挑选了其中一种中间对齐的进行讲解。

- Anchors 锚点的最大和最小值
明明只有一个锚点,为什么会出现最大和最小值的概念。笑哭,忘记锚点原来可以分开的,最多可以分成4瓣, 这个时候 就出现了最大最小数值的概念。

  • Anchors 的坐标系。 见上图。 左上角是(0,0) 右下角 是(1,1) 横向是X , 纵向是Y 。 这里面的数值 可以理解为百分比。所以 我们示意的图 Anchors 在中间, XY 都处于0.5 的位置。

- PositionX 和 Positon Y: 锚点的偏移量
这两个数值可以直观的理解为偏移量。 但是它是相对我们锚点的默认对齐方式下的 偏移量——这句话要好好理解。如果此时默认的对齐 Alignment 是0,0 。 那么图像应该是(后续补充)

以下这这样图 有助于我们更好的理解。锚点的偏移量。
UMG笔记——关于UMG 的一些基础知识和动画的实现
锚点对齐在最下方的中间位置。所以默认情况下, 偏移量都是默认为0. 注意这个时候的 Alignment 是(0.5,0)。

-Alignment :控件的对齐方式

对齐方式: 方法:左加右减, 上加下减。
基准:相对于控件默认的左上角。
Alignment 的X 和Y 代表的是自身长宽 进行偏移的比例值。 比如: X 为0.5 , 就是以X 的长度为单位 向左偏移0.5*X 的位移。

为了便于理解,看如下图:

UMG笔记——关于UMG 的一些基础知识和动画的实现
UMG笔记——关于UMG 的一些基础知识和动画的实现
这个时候 偏移量就是相对于 锚点的基准的偏移值。

以上就是我们需要

三,UMG 动画实现

1, 左下角 创建动画,然后选中时间0的时间轴
UMG笔记——关于UMG 的一些基础知识和动画的实现

2, 将时间轴 拖到0.5s 的位置,重新设置 锚点和对齐方式。
UMG笔记——关于UMG 的一些基础知识和动画的实现
以上就可以实现UMG 的动画效果.

四,UMg 蓝图中调用

定义一个功能函数 ——nlip 节点调用,分成两部分。
第一部分如下:

核心思路:

  1. 创建UMG控件 ,并显示在当前画面端,显示鼠标指针 ,并将鼠标指针只针对UI 有效。然后 播放 UMg 动画。
    2, UMG 上有一个反馈的button, 当点击的时候 ,调用 nlip 另一个分支。 先运行 UMG 动画(反向),延迟0.5s 后 ,将此UMG 从当前的view port 移除。 然后将UMG 变量设置为空, 将鼠标隐藏
    UMG笔记——关于UMG 的一些基础知识和动画的实现

UMG笔记——关于UMG 的一些基础知识和动画的实现
UMG笔记——关于UMG 的一些基础知识和动画的实现

UMG笔记——关于UMG 的一些基础知识和动画的实现
返回游戏,UMG 回到底部隐藏的逻辑。
UMG笔记——关于UMG 的一些基础知识和动画的实现UMG笔记——关于UMG 的一些基础知识和动画的实现

优点:
使用以上方法创建UMG 动画的优点是,不管屏幕怎样缩放,UMG控件永远都是在屏幕的中心位置进行上下移动,这个比绝对位置方便太多了。

Ps: 还是搞技术成就感好,哈哈哈哈。。。。。 去TM 的项目管理