Unreal蓝图开发，使用ScrollBox实现平滑移动的分类式菜单

        笔者进行Unreal开发已经半年多了，使用过其自带的UMG，但初认为这个东西灵活性有限，很难做出非常炫丽的效果。这里介绍一下我之前做的能够平滑移动的分类式菜单，算上是较深入地挖掘了UMG的功能。

        一、菜单外观

        如下图所示，默认打开的是油烟机界面，这时第一排的“油烟机”三个字是白色，而下面的列表栏中显示了具体的物品。当我按Z键时，整个菜单将向左平滑移动，显示微波炉一栏；当我按C键时，整个菜单将向右平滑移动，显示冰箱一栏。注意，整个过程都是平滑移动，而不是瞬间的跳转。

图1

        二、UI设计

        主菜单的设计主要包括两个水平方向的ScrollBox，分别放分类名称和物品列表，如图2所示。

图2

        分类名称和物品列表都用单独的控件蓝图实现。分类名称有统一的UI设计，如图3所示。而每种物品列表都有其自己的UI，其中油烟机的如图4所示。每个物品列表还需要放在一个竖直方向的ScrollBox中，其UI如图5所示。

图3

图4

图5

        三、实现

        1、按N键出现菜单

图6

        其中LoadCategory、AddElements和ShowInitialIndex都是主菜单控件蓝图中的函数，如下所示。其中LoadCategory从文本文件中读取分类名称，并且其中使用了一个用C++实现的函数，读者也可以根据需要使用其它方式获取分类名称。

图7

        2、主菜单Tick()函数

        主菜单的Tick()函数很长，主要是根据菜单的不同状态及用户输入实现显示效果。菜单的状态包括向左和向右移动，用户的输入包括Z和C键。

        当菜单向左移动时，CategoryScrollBox和ProductsBox每帧移动一定距离，直到移动到相应位置，如图8所示。其中DistancePerPressCategoryItem、DistancePerFrameCategoryItem和DistancePerFrameProductsBox都有事先计算好的初始值。

图8

        当菜单向右移动时，CategoryScrollBox和ProductsBox每帧移动一定距离，直到移动到相应位置，如图9所示。

图9

        当菜单处于静止状态（既不向左也不向右移动）时，等待用户输入。如果用户按了Z键，首先将标志位ToLeft置为True，然后将CategoryScrollBox和ProductsBox的第一个元素都放在末端，以实现一个循环的效果。此处应注意的是，对于ScrollBox使用GetChildAt取出其某个元素，这个元素将从这个ScrollBox被移走。之后设置CategoryScrollBox和ProductsBox的偏移位置，并将白色的分类名称置为黑色，如图10所示。其中DistancePerPressProductsBox有事先计算好的初始值。

图10

        如果用户按了C键，首先将标志位ToRight置为True，然后将CategoryScrollBox和ProductsBox的第一个到倒数第二个元素都依次放在末端。之后设置CategoryScrollBox和ProductsBox的偏移位置，并将白色的分类名称置为黑色，如图11所示。

图11

        Tick()函数的整体流程如下所示。使用IsInputKeyDown的原因是，这里监听的是按键的下降沿。

图12