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

**

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


一, 目的**

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

二, 基础知识

在这里插入图片描述锚点 Anchors 有九种对齐模式。 我们挑选了其中一种中间对齐的进行讲解。

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

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

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

以下这这样图 有助于我们更好的理解。锚点的偏移量。
在这里插入图片描述
锚点对齐在最下方的中间位置。所以默认情况下, 偏移量都是默认为0. 注意这个时候的 Alignment 是(0.5,0)。

-Alignment :控件的对齐方式

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

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

在这里插入图片描述
在这里插入图片描述
这个时候 偏移量就是相对于 锚点的基准的偏移值。

以上就是我们需要

三,UMG 动画实现

1, 左下角 创建动画,然后选中时间0的时间轴
在这里插入图片描述

2, 将时间轴 拖到0.5s 的位置,重新设置 锚点和对齐方式。
在这里插入图片描述
以上就可以实现UMG 的动画效果.

四,UMg 蓝图中调用

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

核心思路:

  1. 创建UMG控件 ,并显示在当前画面端,显示鼠标指针 ,并将鼠标指针只针对UI 有效。然后 播放 UMg 动画。
    2, UMG 上有一个反馈的button, 当点击的时候 ,调用 nlip 另一个分支。 先运行 UMG 动画(反向),延迟0.5s 后 ,将此UMG 从当前的view port 移除。 然后将UMG 变量设置为空, 将鼠标隐藏
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
返回游戏,UMG 回到底部隐藏的逻辑。
在这里插入图片描述在这里插入图片描述

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

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

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值