用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;