【节点】[Flipbook节点]原理解析与实际应用

【Unity Shader Graph 使用与特效实现】专栏-直达

Flipbook节点是Unity URP Shader Graph中一个功能强大的工具节点，专门用于创建翻页动画或纹理帧动画效果。该节点通过将单个纹理划分为多个等大小的区块，并根据输入参数动态选择显示特定区块，从而实现动画序列的播放。这种技术在游戏开发中广泛应用于粒子系统、精灵动画、特效制作等领域，能够有效减少纹理内存占用并简化动画制作流程。

Flipbook节点的核心工作原理是基于输入的UV坐标和区块索引，重新计算UV映射关系，使得原本指向整个纹理的UV坐标能够精确定位到纹理中的某个特定区块。这种UV重映射技术使得开发者可以使用单个纹理包含多个动画帧，而不是为每一帧使用单独的纹理资源。

在默认配置下，Flipbook节点假设动画序列从纹理的左上角开始，按从左到右、从上到下的顺序排列。这种布局方式符合大多数数字内容创建工具的导出习惯，同时也与传统的翻书动画概念相符。不过，通过节点的控制参数，用户可以灵活调整区块的遍历方向，满足不同的项目需求。

该节点特别适合与Time节点结合使用，通过将时间值连接到Tile输入端口，可以创建自动播放的动画序列。这种组合为实时渲染的动画效果提供了高效且性能友好的解决方案，在移动设备和性能受限的平台上也能够保持良好的运行效率。

端口

Flipbook节点提供了多个输入和输出端口，每个端口都有特定的功能和数据类型要求。理解这些端口的作用对于正确使用该节点至关重要。

名称	方向	类型	绑定	描述
UV	输入	Vector 2	UV	输入 UV 值
Width	输入	Float	无	水平区块的数量
Height	输入	Float	无	垂直区块的数量
Tile	输入	Float	无	当前区块索引
Out	输出	Vector 2	无	输出 UV 值

UV输入端口

UV输入端口接收Vector 2类型的UV坐标数据，通常来自网格顶点的UV属性或前序节点的UV处理结果。这个端口定义了纹理映射的基础坐标系统，Flipbook节点会基于这些坐标进行区块定位计算。在实际应用中，UV输入可以直接连接UV节点，也可以连接任何生成Vector 2类型数据的节点，如Tiling And Offset节点的输出。

Width和Height输入端口

Width和Height端口分别定义Flipbook纹理在水平和垂直方向上的区块数量。这两个参数接受Float类型的数值，决定了纹理被划分的网格结构。例如，如果Width值为4，Height值为3，则表示纹理被划分为4×3共12个区块。这些数值必须是正整数，但在Shader Graph中通常以浮点数形式表示。

Tile输入端口

Tile端口指定当前应该显示的区块索引，索引从0开始计数。这个参数通常与时间或动画曲线连接，以创建动态的帧切换效果。当Tile值超过总区块数（Width × Height）时，Flipbook节点会自动使用取模运算循环动画，这使得创建无缝循环动画变得非常简单。

Out输出端口

Out端口输出经过Flipbook处理后的新UV坐标，这些坐标可以直接连接到Texture Sampler节点的UV输入字段。输出的UV值已经过精确计算，确保采样器只从当前指定区块内读取纹理数据。

控件

Flipbook节点提供了两个重要的开关控件，用于调整区块遍历的方向和行为。这些控件不影响节点的输入输出结构，但会显著改变最终的视觉效果。

名称	类型	选项	描述
Invert X	开关	True、False	如果启用，则从右到左迭代区块
Invert Y	开关	True、False	如果启用，则从上向下迭代区块

Invert X控件

Invert X控件改变水平方向上的区块遍历顺序。当禁用此选项时（默认值），区块从左到右递增；当启用此选项时，区块从右到左递增。这个功能在需要镜像动画或特定方向效果时非常有用。例如，创建角色向左行走和向右行走的动画时，可以通过切换Invert X来重用同一套纹理资源。

Invert Y控件

Invert Y控件改变垂直方向上的区块遍历顺序。默认情况下，此选项处于启用状态，这意味着区块从上向下遍历，符合大多数翻页动画的传统习惯。如果禁用此选项，区块将从下向上遍历。这个设置对于调整动画起始位置或适应不同的纹理布局规范非常重要。

生成的代码示例

Flipbook节点在背后通过特定的HLSL函数实现其功能。理解生成的代码有助于深入掌握节点的工作原理，并在需要时进行自定义修改或优化。

以下示例代码表示此节点的一种可能结果。

ini 复制代码

float2 _Flipbook_Invert = float2(FlipX, FlipY);

void Unity_Flipbook_float(float2 UV, float Width, float Height, float Tile, float2 Invert, out float2 Out)
{
    Tile = fmod(Tile, Width * Height);
    float2 tileCount = float2(1.0, 1.0) / float2(Width, Height);
    float tileY = abs(Invert.y * Height - (floor(Tile * tileCount.x) + Invert.y * 1));
    float tileX = abs(Invert.x * Width - ((Tile - Width * floor(Tile * tileCount.x)) + Invert.x * 1));
    Out = (UV + float2(tileX, tileY)) * tileCount;
}

代码解析

这段HLSL代码定义了Flipbook节点的核心算法，让我们逐行分析其工作原理：

第一行声明了一个二维向量_Flipbook_Invert，用于存储X和Y方向的反转状态。这个向量根据节点控件中的Invert X和Invert Y设置进行初始化。

Unity_Flipbook_float函数是主要的计算函数，接收五个参数并输出一个结果：

UV：输入的原始UV坐标
Width：水平方向区块数量
Height：垂直方向区块数量
Tile：当前区块索引
Invert：反转控制向量
Out：计算后的输出UV坐标

函数内部首先使用fmod函数对Tile值取模，确保索引不会超出总区块范围，这是实现循环动画的关键步骤。

接着计算tileCount，即每个区块在UV空间中的大小。由于UV坐标通常归一化到 $0,1$ 范围，因此每个区块的宽度为1.0/Width，高度为1.0/Height。

然后计算当前区块的行列位置：

tileY通过将Tile索引除以每行的区块数（Width）并取整，得到行索引
tileX通过从Tile索引中减去已计算的行索引乘以每行区块数，得到列索引

最后，将原始UV坐标与区块偏移相加，并乘以区块大小，得到最终的UV坐标。这个计算确保了采样器只访问当前指定区块内的纹理数据。

实际应用示例

基础Flipbook动画

创建一个基本的Flipbook动画只需要几个简单步骤：

在Shader Graph中创建Flipbook节点
将UV节点连接到Flipbook的UV输入
设置Width和Height值为纹理的区块布局（如4×4）
将Time节点连接到Tile输入，并通过Multiply节点控制播放速度
将Flipbook的Out输出连接到Texture2D Sampler的UV输入

通过调整Multiply节点的乘数，可以控制动画播放的速度。较大的乘数会使动画播放更快，较小的乘数则使动画播放更慢。

粒子系统集成

Flipbook节点在粒子系统中特别有用，可以创建复杂的特效动画：

使用Particle Age或Particle Lifetime节点驱动Tile输入
通过Remap节点将粒子生命周期映射到Tile索引范围
结合其他粒子特性如大小、颜色和透明度创建丰富的视觉效果

这种方法可以创建火焰、烟雾、魔法效果等动态粒子动画，每一帧都显示纹理中的不同区块，形成流畅的动画序列。

角色动画

对于2D游戏，Flipbook节点可以用于角色动画：

将角色的不同动作（行走、奔跑、跳跃）排列在同一纹理的不同行中
使用脚本或Animator控制当前显示的动画序列
通过Invert X控件轻松实现角色左右转向

这种技术比传统的逐帧动画更高效，因为它只需要一个纹理资源包含所有动画帧，减少了内存占用和绘制调用。

性能优化建议

使用Flipbook节点时，考虑以下性能优化策略：

尽量使用2的幂次方尺寸的纹理，这有助于GPU高效处理
合理规划区块布局，避免过多空白区域浪费纹理空间
对于移动平台，考虑使用压缩纹理格式减少内存占用
在不需要高频更新时，降低动画帧率以减少GPU负担
使用LOD技术，在远距离使用简化的Flipbook动画或静态纹理

常见问题与解决方案

区块对齐问题

如果Flipbook动画出现轻微的错位或闪烁，可能是由于浮点数精度问题导致的。解决方案包括：

确保纹理尺寸是区块数的整数倍
在计算中使用高精度浮点数（如使用float而不是half）
在UV计算中添加小的偏移量避免边界采样问题

动画卡顿或跳帧

当Flipbook动画播放不流畅时，可以检查：

Tile输入值是否变化过于剧烈，考虑使用平滑插值
确保Time节点使用适当的时间模式（Game Time vs Unscaled Time）
验证Width和Height值是否正确设置了纹理的实际区块布局

内存使用优化

对于包含大量帧的Flipbook动画，考虑以下优化：

使用纹理阵列（Texture2D Array）代替单个大纹理
实施动态加载机制，只加载当前需要的动画序列
使用纹理压缩和Mipmap减少内存带宽需求

【Unity Shader Graph 使用与特效实现】专栏-直达 （欢迎点赞留言探讨，更多人加入进来能更加完善这个探索的过程，🙏）