UD5工具箱
精灵表（Sprite Sheet）
精灵表是将多幅独立图像合并到一张大图中的技术资源文件。在游戏开发和动画领域，精灵表将动画的每一帧按规则排列在一张纹理图上，通过切换显示区域（纹理坐标）来播放动画。使用精灵表的核心优势在于减少纹理切换次数和HTTP请求次数，显著提升渲染性能。本工具GIF动画转精灵表生成器的核心功能就是将GIF动画转换为标准精灵表格式。
GIF格式
GIF（Graphics Interchange Format）是一种广泛使用的位图图像格式，支持动画和透明度。GIF动画由多帧静态图像组成，每帧可以设定独立的延迟时间。虽然GIF格式在网络传输中非常方便，但它最多支持256色，且文件体积随帧数增长较快。将GIF转换为PNG精灵表可以获得更好的画质和更灵活的使用方式。
PNG格式
PNG（Portable Network Graphics）是一种无损压缩的位图图像格式，支持完整的Alpha透明通道。与GIF不同，PNG支持真彩色（最多约1600万色），不会出现颜色量化损失。本工具生成的精灵表采用PNG格式，确保每一帧的像素被精确还原，透明区域完整保留，适合导入各种游戏引擎和设计工具。
帧（Frame）
帧是动画中的单幅静态画面。一段GIF动画由多帧连续播放构成，每帧展示动画在特定时刻的画面状态。帧率决定了动画的流畅程度。在精灵表中，每一帧占据一个固定的矩形区域，其宽度和高度由原始帧的尺寸决定。本工具会逐帧提取GIF中的所有画面，并在预览中显示每帧的延迟时间。
纹理坐标（Texture Coordinates）
纹理坐标是用于指定纹理图中某个区域位置的数值系统。在使用精灵表时，游戏引擎或CSS动画需要知道每一帧在精灵表大图中的具体位置。通常用UV坐标或像素偏移量表示，例如第一帧位于(0, 0)，第二帧位于(64, 0)，以此类推。正确的纹理坐标设置是精灵表动画正常播放的关键。
CSS steps()函数
CSS的steps()函数是实现精灵表动画的核心技术之一。它将动画分为指定数量的等间距步骤，每步跳转到下一帧的背景位置。配合background-position属性的from和to关键帧，可以实现无需JavaScript的纯CSS逐帧动画。这种方式性能优异，适合网页中的角色动画和装饰性动效。
帧间距（Spacing）
帧间距是在精灵表中每帧之间添加的透明像素间隔。它的主要作用是防止纹理bleeding（纹理渗色），即在纹理过滤或缩放时相邻帧的边缘像素相互干扰。在某些游戏引擎中，适当的间距还可以简化纹理采样计算。本工具支持自定义帧间距，通常设置0到2像素即可满足大部分需求。
2的幂次纹理（Power of Two Texture）
2的幂次纹理是指宽度和高度均为2的整数次幂（如64x64、128x256、512x512）的纹理图像。许多游戏引擎和GPU硬件对2的幂次纹理有优化支持，包括更高效的内存布局、Mipmap生成和纹理压缩。在设置精灵表的每行帧数时，推荐使用4、8、16等值，使最终输出尽量接近2的幂次尺寸。
透明通道（Alpha Channel）
透明通道是图像中控制每个像素透明度的数据通道。GIF格式支持1位透明（完全透明或完全不透明），而PNG格式支持8位Alpha通道（256级透明度）。在将GIF转换为精灵表时，本工具通过PNG格式完整保留原始的透明信息，确保精灵表中的角色或元素能够正确叠加到游戏场景或网页背景上。
纹理bleeding（纹理渗色）
纹理bleeding是指在纹理采样或缩放过程中，相邻区域的像素颜色渗透到当前采样区域的现象。在精灵表中，如果帧与帧之间没有足够的间距，当游戏引擎进行纹理过滤时，相邻帧的边缘像素可能会混合，导致动画出现视觉瑕疵。通过设置适当的帧间距可以有效避免此问题。
Canvas API
Canvas API是HTML5提供的2D绘图接口，允许通过JavaScript在网页上直接绘制和操作像素数据。本工具利用Canvas API实现了全部的GIF解析、帧提取和图像合成功能。Canvas的drawImage()方法可以将帧绘制到指定位置，toDataURL()方法可以将合成结果导出为PNG图像，这些能力使完全本地的精灵表生成成为可能。
帧延迟（Frame Delay）
帧延迟是GIF动画中每帧之间的等待时间，单位通常为百分之一秒或毫秒。它决定了动画的播放速度。本工具在帧预览中会显示每一帧的延迟时间（毫秒），方便用户在游戏引擎或动画代码中设置对应的帧间隔。精灵表本身是静态图像不包含时间信息，因此帧延迟数据需要单独记录和使用。