|
|
大家好，经过前面三节课的学习，我们已经可以掌握将模型加载到游戏中进行显示，并且做出模型在水中受波光影响的效果，也学会了如何产生闪电链。这一节课，我们来学习一下如何开发旋涡特效。
在《捕鱼达人3》里，有这样一个效果，它实现了对屏幕画面进行旋转扭曲，感觉就像带着玩家通过旋涡进入了海底的世界。如图：
哈哈！看起来是不是很流弊！
具体怎么实现呢？现在我们来学习一下。
要现实这样的效果主要分为三个步骤：
一、将屏幕画面渲染到一张纹理上。
二、创建一个平面网格模型，然后将第一步取得的纹理做为贴图传入一个顶点纹理坐标扭曲Shader进行渲染。
三、随着时间的增加，更新Shader中顶点纹理坐标扭曲的角度和半径。
为了方便使用，我们创建一个基于Layer的派生类，命名为VortexLayer，然后我们在其中加入一个CCRenderTexture成员指针，在初始化时创建为屏幕大小:
1
2
3
4
5
6
| // 创建渲染目标纹理
auto WinSize = Director::getInstance()->getWinSize();
m_pTarget = CCRenderTexture::create(WinSize.width, WinSize.height, kCCTexture2DPixelFormat_RGBA8888);
m_pTarget->setClearColor(Color4F(0, 0, 0, 0));
m_pTarget->setVisible(false);
addChild(m_pTarget);
|
并通过它我们在draw的时候将目标Layer结点中的所有物体绘制到它的纹理中。
1
2
3
4
5
6
7
8
9
10
11
12
| void VortexLayer::draw(Renderer* renderer, const Mat4 &transform, uint32_t flags)
{
if( m_pTarget && m_TargetLayer)
{
m_pTarget->clear(0,0,0,0);
m_pTarget->begin();
m_TargetLayer->visit();
m_pTarget->end();
}
…
}
|
然后我们需要加入一个Mesh成员对象指针，并设置它的顶点数据，使它在形成一个与屏幕大小相等的平面网格。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
| auto WinSize = Director::getInstance()->getWinSize();
//行，列数
int cows = 100;
int rows = 100;
//每一行，列的顶点位置偏移
float vertexStepX = WinSize .width/cows;
float vertexStepY = WinSize .height/rows;
//第一行，列的纹理坐标偏移
float uStep = 1.0/rows;
float vStep = 1.0/cows;
//顶点，法线，色，纹理的容器
vector<float> positions;
vector<float> normals;
vector<float> colors;
vector<float> texs;
for ( unsigned int x = 0; x <= cows; ++x )
{
for ( unsigned int y = 0; y <= rows; ++y )
{
unsigned int offset = x + y * ( cows + 1 );
positions.push_back(x*vertexStepX);
positions.push_back(y*vertexStepY);
positions.push_back(10);
texs.push_back(x*uStep);
texs.push_back(y*vStep);
}
}
std::vector<unsigned short> tTriangle;
for ( unsigned int x = 0; x < cows; ++x )
{
for ( unsigned int y = 0; y < rows; ++y )
{
unsigned short* ptr = &(m_IndiceArray[(x+y*cows)*6]);
tTriangle.push_back((x+0) + (y+0)*(cows+1));
tTriangle.push_back((x+0) + (y+1)*(cows+1));
tTriangle.push_back((x+1) + (y+0)*(cows+1));
tTriangle.push_back((x+0) + (y+1)*(cows+1));
tTriangle.push_back((x+1) + (y+1)*(cows+1));
tTriangle.push_back((x+1) + (y+0)*(cows+1));
}
}
//创建模型
m_RenderMesh = Mesh::create(positions,normals,texs,tTriangle);
m_RenderMesh->retain();
//设置顶点格式
long offset = 0;
auto attributeCount = m_RenderMesh->getMeshVertexAttribCount();
for (auto k = 0; k < attributeCount; k++) {
auto meshattribute = m_RenderMesh->getMeshVertexAttribute(k);
m_ProgramState->setVertexAttribPointer(s_attributeNames[meshattribute.vertexAttrib],
meshattribute.size,
meshattribute.type,
GL_FALSE,
m_RenderMesh->getVertexSizeInBytes(),
(GLvoid*)offset);
offset += meshattribute.attribSizeBytes;
}
m_meshCommand.genMaterialID(0, m_ProgramState, m_RenderMesh, m_BlendFunc);
|
这样模型网格就创建好了，下面我们重点研究一下所需要的Shader文件Vortex.vsh：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| // 输入的顶点格式
attribute vec4 a_position;
attribute vec2 a_texCoord;
//输出给PS的变量
varying vec2 v_texCoord;
//用户自定义的变量
uniform float radius ;
uniform float angle ;
//旋涡的计算函数
vec2 vortex( vec2 uv )
{
//先减去贴图中心点的纹理坐标,这样是方便旋转计算
uv -= vec2(0.5, 0.5);
//计算当前坐标与中心点的距离。
float dist = length(uv);
//计算出旋转的百分比
float percent = (radius - dist) / radius;
if ( percent < 1.0 && percent >= 0.0)
{
//通过sin,cos来计算出旋转后的位置。
float theta = percent * percent * angle * 8.0;
float s = sin(theta);
float c = cos(theta);
uv = vec2(dot(uv, vec2(c, -s)), dot(uv, vec2(s, c)));
}
//再加上贴图中心点的纹理坐标，这样才正确。
uv += vec2(0.5, 0.5);
return uv;
}
void main()
{
//计算出顶点的位置
gl_Position = CC_MVPMatrix * a_position;
//调用函数计算出纹理坐标
v_texCoord = vortex( a_texCoord );
}
|
在draw函数中通过计算时间间隔来不断的修改角度和半径的值，就可以实现顶点的UV值绕贴图中心点旋转的效果了:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| //计算时间间隔
timeval currtime;
gettimeofday( &currtime, nullptr);
float dt = (currtime.tv_sec - m_lasttime.tv_sec) + (currtime.tv_usec - m_lasttime.tv_usec) / 1000000.0f;
if ( m_Time < m_maxTime )
{
setAngle( getAngel()+m_angleSpeed*dt );
setRadius( getRadius()+m_radiusSpeed*dt );
m_Time += dt;
}
else
{
m_Time = 0.0;
setAngle( 0.0f );
setRadius( 0.0f );
}
m_lasttime = currtime;
//设置Shader的参数。
GLProgramState* programstate = getGLProgramState();
programstate->setUniformFloat("radius",m_radius);
programstate->setUniformFloat("angle",m_angle);
programstate->setUniformTexture("u_texture", m_pTarget->getSprite()->getTexture());
|
现在我们运行一下，就可以看到这个旋涡在一点点旋转，将一切都吞噬～。 |
|
