本篇是尝试踩坑的过程，可能会出现bbgr的情况。如果有请想办法留个言。

导入素材

首先需要的是png的图片素材，我使用了 Aseprite 来进行绘制。它比 PS 方便的地方在于动画绘制。单纯的场景和布局我仍是使用 PS 来完成的。

这里遇到了神奇的错误，重新打开工程时我导入的纹理素材全部消失了，不知是操作失误还是什么原因。

创建号背景的 Sprite 之后，右键编辑 Sprite，调整如下：

因为我们是480*270的16:9画质，这里调整 逐单元像素 为 0.25 以支持 1080p的画面
枢轴模式切换为顶部左侧，我们的 x|y 坐标系取左上角为 0|0
调整场景中的物体对象，x轴旋转-90度，我们将取上视角为摄影机主视角。其原因为 我们将使用 x,y 两个属性作为场景内的唯一指示标志，做名词统一。z 选择为层级。UE中z轴是三位空间中的上下方向。[^2]

关于像素素材导入被过滤变糊的问题，参考本文

切片角色行走图

首先新建Sprite，选择纹理为待切片的图

看到了待切片的纹理后，右上角选择编辑原区域

选择上方的 提取Sprite，根据弹出的网格进行操作。

完成后，会在 与纹理相同的文件夹下生成对应个数的 Sprite

PS：我想尝试将其搬到Sprite文件夹下，但没有一个很聪明的方法，很遗憾我只是使用迁移复制过去然后删除了texture下的多余文件。惭愧

创建动画

在Flipbook文件夹下新建一个Flipbook，命名后双击打开

内容管理器里面选中所有的切片Sprite素材，一股脑直接拖到Flipbook下面行的时间轴上，注意如果是使用ctrl+左键多选的方式，那么选中的顺序决定了导入的顺序（win操作系统，其原因是它只以字符串形式导入路径）。可以鼠标拖动改变关键帧的顺序。

在属性栏调整类似帧率一类的属性。关闭保存即可

建立角色与状态机

这里几乎都在跟着官方的教程走，参考教程页面

其中因为2D动画需要根据角色的前进方向不同，播放不同的动画序列，所以在 AnimationStateMachine 上加入了额外的参数 Direction。

Direction 使用了将向量转换为方位角（浮点数）, 为了将其映射到对应的四个方向上，我这里参考了论坛上老哥们的答案，用花式拼凑连电路的方式凑出了判断方向的复合条件，搞了四联IF语句。

理论上可以采用范围映射（Range Mapping）的方式将 Direction 的值对应过去，但我没有在UE中找到一个方便的跨类型（Float 到 Enum）映射方法。无奈之下做出上述选择。

UPDATE 21/04/05

需要将左侧蓝图中 显示继承的变量 一项勾选，就能看到对应的动画了，按Ctrl拖入即可。

使用原来的方法也可以实现，但应该会涉及到访问变量的方式的问题，可能会稍微的影响效率。

官方教程步骤 动画状态机-9 中，尝试了几次无法将 Flipbook 拖进函数编辑器形成它图示的样子。大概是因为版本更新原因导致的。教程基于版本4.9而我使用的是4.26。

解决方案是，直接选择Select组件，将输出值连线到Output上面，会自动判断类型并且生成基于枚举值的下拉列表，挨个选择即可。新版本确实更智能了。