一、
1、先来看下效果图
貌似效果还可以
2、cocos2d-x的主要程序代码
|
1
2
3
4
5
6
7
8
9
|
Size size = Director::getInstance()->getWinSize();auto sprite = Sprite::create("fish.png"); sprite->setPosition(size.width/2, size.height /2 ); auto shader_program = GLProgram::createWithFilenames("shadow.vsh", "shadow.fsh"); shader_program->use(); shader_program->setUniformsForBuiltins();sprite->setGLProgram(shader_program); this->addChild(sprite); |
3、那这个shader是怎么写的呢？下面直接贴出代码
shadow.vsh
|
1
2
3
4
5
6
7
8
9
|
attribute vec4 a_position; attribute vec2 a_texCoord; varying vec2 v_texCoord; void main() {gl_Position = CC_PMatrix * a_position; v_texCoord = a_texCoord; } |
shadow.fsh
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
varying vec2 v_texCoord; vec4 composite(vec4 over, vec4 under){return over + (1 - over.a)*under;}void main(){vec2 shadowOffset =vec2(-0.05, -0.05);vec4 textureColor = texture2D(CC_Texture0,v_texCoord );float shadowMask = texture2D(CC_Texture0,v_texCoord +shadowOffset ).a;const float shadowOpacity = 0.5;vec4 shadowColor = vec4(0,0,0,shadowMask*shadowOpacity);gl_FragColor = composite(textureColor,shadowColor);} |
4、这里稍微说下shader
这里面有两种类型的变量，attribute和varying
5、attribute是从外部传进来的，每一个顶点都有这两个属性：当前顶点的位置和纹理的坐标
attribute vec4 a_position;
attribute vec2 a_texCoord;
6、varying是在vertexshader和fragment shader之间传递数据用的
两个文件里面都定义了varying vec2 v_texCoord;
7、注意：gl_开头的变量名是系统内置的变量，例如：
gl_Position是顶点的位置，gl_FragColor最终画在屏幕上面的像素点的颜色
8、shadowOffset是自己设置的偏移量。你会发现，如果设置的过大，投影如下：
9、有一部分的投影被切掉了，原来，shader投影只是投在了自身的png图像上，制作的png图片得自己预留一部分透明区域。
原图
也就是说，超过图片区域的投影是不会被渲染的。
二、
1、如果不想把图片做的过大，这里提供另外一种比较笨的办法，解决上面超过不显示的问题。
2、先改下cocos2d-x的主要代码
|
1
2
3
4
5
6
7
8
9
10
|
auto sprite = Sprite::create("fish.png"); sprite->setPosition(size.width/2, size.height /2 ); auto shader_program = GLProgram::createWithFilenames("shadow.vsh", "shadow.fsh"); shader_program->use(); shader_program->setUniformsForBuiltins(); auto fishClone = Sprite::createWithSpriteFrame(sprite->getSpriteFrame()); fishClone->setPosition(10, 5); fishClone->setGLProgram(shader_program); sprite->addChild(fishClone, -1); this->addChild(sprite); |
3、看了上面的代码应该可以想到，这个笨方法就是拷贝精灵，然后挂载在父节点上，这个拷贝的精灵做成阴影。这里还需要修改shader
shadow.fsh
|
1
2
3
4
5
6
7
|
varying vec2 v_texCoord; void main(){float shadowMask = texture2D(CC_Texture0,v_texCoord).a;const float shadowOpacity = 0.5;gl_FragColor = vec4(0,0,0,shadowMask*shadowOpacity);} |
也就是直接把拷贝的那份直接做成阴影
效果如下
三、
1、以上方法可能在android平台上跑不起来，原因是shader_program返回的是空值，修改代码如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
auto shader_program = new CCGLProgram();shader_program->retain();shader_program->initWithVertexShaderFilename("shadow.vsh", "shadow.fsh"); shader_program->link();shader_program->updateUniforms(); auto sprite = Sprite::create("fish.png");sprite->setPosition(size.width/2, size.height /2 ); auto fishClone = Sprite::create("fish.png");fishClone->setGLProgram(shader_program);fishClone->setPosition(-10.f, -10.f);fishClone->setAnchorPoint(Vec2(0,0));fishClone->setScale(0.8f);sprite->addChild(fishClone, -1);this->addChild(sprite); |
2、由于子节点添加到父节点时，默认位置是在父节点的左下角位置，所以这里加了投影的锚点设置为Vec2(0,0),使投影的位置设置更加方便。
3、项目的源码
https://github.com/smiger/FishShadow
原文地址：http://blog.51cto.com/wty530/1861204