shader实例（一）UV动画

最新推荐文章于 2025-06-24 10:46:42 发布

IT界的卡卡西

最新推荐文章于 2025-06-24 10:46:42 发布

阅读量1.4k

点赞数

分类专栏： Shader 文章标签： Shader

Shader 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个使用Unity Shader实现的序列图播放效果。通过自定义Shader，可以将一张包含多个帧的大图切割并按顺序播放，实现动画效果。具体包括如何设置纹理坐标以逐帧显示序列图中的每个元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下是使用unity推崇的方式编写的一个播放序列图的shader，因为是学习最初的思路来自其他网友。原理思路在代码中，这里就不描述了。

Shader "Custom/my1"
{
 Properties {
    _Color ("Main Color", Color) = (1,1,1,1)
    _MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}
    _SizeX ("列", Float) = 4  

    _SizeY ("行", Float) = 2
    _Speed ("播放速度", Float) = 150
 }

 SubShader {
  // 这里使用Unity3d自带光照模型Lambert
  // 不用做顶点处理，只需要一个表面处理函数surf
  CGPROGRAM
  #pragma surface surf Lambert alpha
  
  // 声明参数
  fixed4 _Color;
  sampler2D _MainTex;
  uniform fixed _SizeX;
  uniform fixed _SizeY;
  uniform fixed _Speed;
  // 获取_MainTex的UV信息定义输入结构体
  struct Input {
   // 在贴图变量前加上uv表示提取uv值(二维坐标)
      float2 uv_MainTex;
  };

  void surf (Input IN, inout SurfaceOutput o) {
   // 获取单元格UV
      float2 cellUV = float2(IN.uv_MainTex.x /_SizeX, IN.uv_MainTex.y /_SizeY);
      // UV坐标值范围为0-1，获取单元格宽度
   float deltaX = 1 / _SizeX; // 单元格增量宽度
   float deltaY = 1 / _SizeY; // 单元格增量高度
   
   // 当前播放总索引
   int index = _Time * _Speed;
   // 求列索引
      int col = fmod(index, _SizeX);
      // 求行索引
      int row = index / _SizeX;
      // 原始UV + 当前格增量
      cellUV.x += col * deltaX;
      cellUV.y += row * deltaY;
      // 创建tex2d(材质，uv)*主色
      fixed4 c = tex2D(_MainTex, cellUV) * _Color;
      // RGB
      o.Albedo = c.rgb; 
      // 透明度
      o.Alpha = c.a;
  }
  ENDCG
 }
}

运行，加入图片看看效果，序列图被切成4列2行，每次显示一个单元格进行播放。