原理

• 因为游戏为了保证舒适的帧数，通常不能临时计算特效，所以一般是提前将动画做成单独的帧，最后渲染至纹理
• 流程
  

UE5提供的FlipBook节点

• 原理

  提供uv坐标，time节点，指定行列即可实现FLipBook

• 实现

  • 使用的flipbook纹理有五行五列，因此提供一个float = 5的节点连接到FlipBook的"Number of rows" "Number of Columns"

  • "Time"节点连接到FlipBook的"Animation Phase"(UE默认30帧，需要更改帧数的话用Time乘以一个value)

  • "TexCoord"节点连接至FlipBook的"UVs"

  • FlipBook的"UVs"连接至"Texture Sample"
    
    

手动实现FlipBook

• 步骤

  • 缩小uv坐标

    比如当前笔者使用的纹理有五行五列，需要实现只显示其中一个纹理图
    

  • 纹理变换

    求得的uv坐标 * 行(列)/1
    
    

  • 从上图可以得出，我们只是在uv纹理图的对角线上移动且有明显的在纹理图上移动的画面，而想达到的效果是一排一排的移动且没有移动的画面(突然变换至下一帧画面)

    • 我们将计算部分拆为两个部分：计算u，和计算v
      

      • 黄色框计算u：Time * 30是求帧数，Floor()是为了实现从一个画面突然变换到下一个画面而没有其中的变换动画
      • 蓝色框计算v：时间除以列数用于v值归0，这样才能实现某一行变换完后跳转至下一行的第一个
        

reference

Flipbook Animation - UE4 Materials 101 - Episode 5 - YouTube