[游戏开发]使用shader写序列帧动画

额，闲的没事那就写个简单的序列帧动画吧。。。这真是个奇奇怪怪的想法，但是很实用哈哈哈。
美术给你一张图，大概就是这样的

然后就讲一下大致思路吧：

把图片分成12等分，，每次一次采样即可，如上图，按照1,2,3,4…的顺序采样显示；传入一个开始坐标即可；

//effect代码
void main () {
    vec4 o = vec4(1, 1, 1, 1);
    float unit = 0.25;
    float unitY = 1.0/3.0;
    #if USE_TEXTURE
        vec2 uv =  vec2(v_uv0.x * unit + uRangeData.x  ,v_uv0.y * unitY + ( unitY * 2.0 - uRangeData.y));
        CCTexture(texture, uv, o);
    #endif

ts代码：
export default class NewClass extends cc.Component {

    private uRangeData:cc.Vec2 = new  cc.Vec2();
    private _material:cc.Material = null;
    private _rotAllTime:number= 0.05;
    private _rotTime:number = 0;
    private _unitWidth:number = 0.25;
    private _unitLastPos:cc.Vec2 = new cc.Vec2(0.5,0.5);

    start () {
        this.uRangeData.x = 0;
        this.uRangeData.y = 0;
        let sp = this.node.getComponent(cc.Sprite);       
        this._material = sp.getMaterial(0);
        this._material.setProperty("uRangeData", this.uRangeData);
        sp.setMaterial(0, this._material);
    }

    update (dt) {
        this._rotTime += dt;
        if(this._rotTime>=this._rotAllTime){
            this._rotTime = 0;
            this.uRangeData.x += this._unitWidth;
            if(this.uRangeData.x >= 1){  //横着到最后一个了
                this.uRangeData.y += this._unitWidth;
                this.uRangeData.x = 0;
            }
            if (this.uRangeData.x == this._unitLastPos.x && this.uRangeData.y == this._unitLastPos.y) {  //到最后一个了,从头再开始吧
                this.uRangeData.x = 0;
                this.uRangeData.y = 0;
            }
            this._material.setProperty("uRangeData", this.uRangeData);
        }
    }
}

效果如下：