用cocos2d-x 实现UV动画--实现篇

用cocos2d-x 实现UV动画--实现篇

UVSprite

uv动画是指通过在程序运行时动态改变纹理坐标，实现动态效果的纹理动画，使用uv动画可以实现水流动，火焰燃烧等效果。

下图是UVSprite实现的一个动画效果

本文由liangneo原创，转载请保留原文地址 ：http://blog.csdn.net/liangneo/article/details/42583533

1.分析

我们需要的是一个具uv动画的sprite，最简单合理的方式是让你UVSprite直接继承于CCSprite，另外我们还需要两个变量来控制U或V方面是否需要动画，另外两个变量来控制U和V方向的动画速度，因此UVSprite类的声明如下：

class UVSprite : public cocos2d::CCSprite
{
    //U方向是否需要动画
    bool _AutoScrollU = true;
    //U方面动画速度（0~~1）
    float _AutoScrollSpeedU =0;
    //V方向是否需要动画
    bool _AutoScrollV = false;
    //V方向的动画速度（0~~1）
    float _AutoScrollSpeedV=0;


    //保存当前已经移动的uv值
    float _AutoScrollCountU=0;
    float _AutoScrollCountV=0;
};

另外我们还需要两个接口来创建UVSprite和CCSprite保持一致：

	//从plist中的frame创建
    static UVSprite* createWithSpriteFrameName(const char *pszSpriteFrameName);
    //从贴图文件直接创建
    static UVSprite* create(const char *pszFileName);

另外我们还需要一个update来更新uv的偏移值：

void UVSprite::update(float dt)
{
    CCSprite::update(dt);
    
    //更新u
    if(_AutoScrollU)
    {
        _AutoScrollCountU += dt * _AutoScrollSpeedU;
    }
    
    //更新v
    if (_AutoScrollV) {
        _AutoScrollCountV += dt * _AutoScrollSpeedV;
    }
    
    //如果超出范围从0开始
    if (_AutoScrollCountU > 1 || _AutoScrollCountU < -1) {
        _AutoScrollCountU = 0;
    }
    
    if (_AutoScrollCountV > 1 || _AutoScrollCountV < -1) {
        _AutoScrollCountV = 0;
    }
}

上一篇文章中我们提到，uv的值在(0~~1)范围内，因此在更新时确保偏移在（-1，1）范围内

2.shader

a.有了更新uv的更新我们来写shader,顶点shader我们使用cocos2d提供的 ccPositionTextureColor_vert，代码如下

attribute vec4 a_position;							
attribute vec2 a_texCoord;							
attribute vec4 a_color;