Shader实例:序列帧动画

效果:

序列帧图片网上随便找的,质量不是很好,重点不是它,不要在意。

思路:
1.之前都是在一张面片上直接映射一张纹理,IN.uv的范围是0~1
现在要映射一张纹理上的一小块区域,就要用这块区域的uv去采样后映射到面片。
所以:x方向,IN.uv.x/列数,范围变化到0~(1/列数)
同理:y方向,IN.uv.y/行数,范围变化到0~(1/行数)

2.根据时间驱动,加上当前sprite的偏移量
uv.x = cellX + SpriteColumnIndex*1.0 / _Column;
uv.y = cellY + SpriteRowIndx*1.0 / _Row;

3.用变换后的uv去采样图片
half4 c = tex2D(_MainTex,uv);

代码有注释:

Shader "Custom/SpriteAnimation"
{
    Properties
    {
        _MainTex("main tex" ,2D) = ""{}
        _Row("行",Int) = 1
        _Column("列",Int) = 1
        _Speed("speed",Range(0,10)) = 1
    }

    SubShader
    {
        Tags{ "RenderType" = "Transparent" "Queue" = "Transparent" }

        Pass
        {
            Blend One OneMinusSrcAlpha
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct v2f
            {
                float4 pos:POSITION;
                float2 uv:TEXCOORD0;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            int _Row;
            int _Column;
            float _Speed;

            v2f vert(appdata_base v)
            {
                v2f o;
                o.pos = mul(UNITY_MATRIX_MVP,v.vertex);
                o.uv = TRANSFORM_TEX(v.texcoord,_MainTex);
                return o;
            }

            half4 frag(v2f IN) :COLOR
            {
                float2 uv = IN.uv;

                float cellX = uv.x / _Column;
                float cellY = uv.y / _Row;

                //Sprite总数
                int count = _Row * _Column;

                //在0到count-1 范围内循环
                int SpriteIndex = fmod(_Time.w*_Speed,count);

                //当前Sprite所在行的下标
                int SpriteRowIndx = (SpriteIndex / _Column);

                //当前Sprite所在列的下标
                int SpriteColumnIndex = fmod(SpriteIndex,_Column);

                //因uv坐标左下角为(0,0),第一行为最底下一行,为了合乎我们常理,我们转换到最上面一行为第一行,eg:0,1,2-->2,1,0
                SpriteRowIndx = (_Row - 1) - fmod(SpriteRowIndx,_Row);

                //乘以1.0转为浮点数,不然加号右边,整数除以整数,还是整数(有误)
                uv.x = cellX + SpriteColumnIndex*1.0 / _Column;
                uv.y = cellY + SpriteRowIndx*1.0 / _Row;

                half4 c = tex2D(_MainTex,uv);
                return c;
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}
时间: 2024-10-28 23:36:47

Shader实例:序列帧动画的相关文章

Unity Shader播放序列帧动画

1 Shader "LordShader/AnimateSprite" { 2 Properties { 3 _MainTint ("Diffuse Color", Color) = (1,1,1,1) //颜色属性,可以在u3d inspector面板控制该变量 4 _MainTex("Base (RGB)",2D) = "white" {} //贴图 5 _TexWidth("Sheet Width",

unity shader序列帧动画代码,顺便吐槽一下unity shader系统

http://www.cnblogs.com/hellohuan/archive/2014/01/10/3512784.html 一.看到UNITY论坛里有些人求unity shader序列帧动画,写shader我擅长啊,就顺势写了个CG的shader.代码很简单,就是变换UV采样序列帧贴图,美术配置行数列数以及变换速度. Shader "HELLOHUAN/Hello_Sequence" { Properties { _Color ("Main Color", C

【OpenGL】Shader实例分析(七)- 雪花飘落效果

转发请保持地址:http://blog.csdn.net/stalendp/article/details/40624603 研究了一个雪花飘落效果.感觉挺不错的.分享给大家,效果例如以下: 代码例如以下: Shader "shadertoy/Flakes" { // https://www.shadertoy.com/view/4d2Xzc Properties{ iMouse ("Mouse Pos", Vector) = (100,100,0,0) iChan

[Cocos2d-x v3.x]序列帧动画

简介 Cocos2d-x中,动画的具体内容是依靠精灵显示出来的,为了显示动态图片,我们需要不停切换精灵显示的内容,通过把静态的精灵变为动画播放器从而实现动画效果.动画由帧组成,每一帧都是一个纹理,我们可以使用一个纹理序列来创建动画. 我们使用Animation类描述一个动画,而精灵显示动画的动作则是一个Animate对象.动画动作Animate是精灵显示动画的动作,它由一个动画对象创建,并由精灵执行. 创建方法 - 手动添加序列帧到Animation类 - 使用文件初始化Animation类 手

iOS开发基础-序列帧动画之Tom猫

新建一个Single View Application,向该工程中导入Tom猫的图片资源,本示例演示Tom猫喝牛奶的动作.图片的名字为 drink_00.jpg.drink_01.jpg.....drink_80.jpg . 向 Main.storyboard 中添加 UIImageView ,将图片 drink_00.jpg 作为默认显示的画面.将该控件与 ViewController 类建立一个 IBOutlet 连接,属性名为: @property (weak, nonatomic) IB

iOS开发-UI基础-汤姆猫Tom(序列帧动画)

使用UIImageView和UIButton实现Tom小案例. 功能分析:点击对应按钮后,tom实现相应的动作和声音 步骤分析: 搭建UI界面:(头部,肚子,尾巴,左脚和右脚使用的是button) 监听按钮点击 根据点击的按钮实现相应的序列帧动画 tom的动作就是一张一张的图片连续显示在屏幕上,实现动画有几种方式: 1.首尾式: //动画的开始 [UIView beginAnimations:nil context:nil]; //动画的内容 //提交动画(动画结束) [UIView commi

quick cocos2dx 播放序列帧动画的实现

本帖基于quick cocos2dx2.2.6版本. 序列帧动画:顾名思义就是在一定的时间内播放多张图片. 基本原理非常简单,在一个固定的位置1秒时间内轮询播放有限数量的不同图片.比如1秒中播放24张图(FPS=24) 在quick引擎中可以通过framwork中的transition.lua文件中得transition.playAnimationForever(target, animation, delay)接口来实现动画的播放,其源码如下: function transition.play

cocos2d-x学习笔记(二)序列帧动画实现的几种方法

一.cocos2d-x帮助文档中关于动画帧动画的实现有两种方法: 手动添加序列帧到Animation类 使用文件初始化Animation类 这里我就不列出来,大家可以看下官方文档 http://www.cocos.com/doc/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/native/v3/frame-animation/zh.md 二.有些时候我们需要从plist取出指定的几个图片(而不是全

序列帧动画

简介 Cocos2d-x中,动画的具体内容是依靠精灵显示出来的,为了显示动态图片,我们需要不停切换精灵显示的内容,通过把静态的精灵变为动画播放器从而实现动画效果.动画由帧组成,每一帧都是一个纹理,我们可以使用一个纹理序列来创建动画. 我们使用Animation类描述一个动画,而精灵显示动画的动作则是一个Animate对象.动画动作Animate是精灵显示动画的动作,它由一个动画对象创建,并由精灵执行. 创建方法 手动添加序列帧到Animation类 使用文件初始化Animation类 手动添加