cocos2d-x学习笔记（九）使用shader创建鱼的投影

概述一、 1、先来看下效果图 貌似效果还可以 2、cocos2d-x的主要程序代码 Size size = Director::getInstance()->getWinSize();auto sprite = Sprite::create("fish.png");  sprite->setPosition(size.width/2, size.height /2 );   auto shad

一、

1、先来看下效果图

650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="QQ截图20161012162400.png" alt="wKiom1f-BdvQqk_sAAIad6fnQG0997.png-wh_50" src="http://s4.51cto.com/wyfs02/M00/88/A6/wKiom1f-BdvQqk_sAAIad6fnQG0997.png-wh_500x0-wm_3-wmp_4-s_3184539101.png">

貌似效果还可以

2、cocos2d-x的主要程序代码

Sizesize=Director::getInstance()->getWinSize();autosprite=Sprite::create("fish.png");sprite->setposition(size.wIDth/2,size.height/2);autoshader_program=GLProgram::createWithfilenames("shadow.vsh","shadow.fsh");shader_program->use();shader_program->setUniformsForBuiltins();sprite->setGLProgram(shader_program);this->addChild(sprite);

3、那这个shader是怎么写的呢？下面直接贴出代码

shadow.vsh

attributevec4a_position;attributevec2a_texCoord;varyingvec2v_texCoord;voIDmain(){gl_position=CC_PMatrix*a_position;v_texCoord=a_texCoord;}

shadow.fsh

varyingvec2v_texCoord;vec4composite(vec4over,vec4under){returnover+(1-over.a)*under;}voIDmain(){vec2shadowOffset=vec2(-0.05,-0.05);vec4texturecolor=texture2D(CC_Texture0,v_texCoord);floatshadowMask=texture2D(CC_Texture0,v_texCoord+shadowOffset).a;constfloatshadowOpacity=0.5;vec4shadowcolor=vec4(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是自己设置的偏移量。你会发现，如果设置的过大，投影如下：

650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="QQ图片20161012175231.png" alt="wKiom1f-B_CxxVyUAAJyPBVSnqM466.png" src="http://s2.51cto.com/wyfs02/M00/88/A6/wKiom1f-B_CxxVyUAAJyPBVSnqM466.png">

9、有一部分的投影被切掉了，原来，shader投影只是投在了自身的png图像上，制作的png图片得自己预留一部分透明区域。

原图

650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="QQ图片20161012175320.png" alt="wKiom1f-CBuAtR8eAAAUdsNNC2k168.png" src="http://s4.51cto.com/wyfs02/M00/88/A6/wKiom1f-CBuAtR8eAAAUdsNNC2k168.png">

也就是说，超过图片区域的投影是不会被渲染的。

二、

1、如果不想把图片做的过大，这里提供另外一种比较笨的办法，解决上面超过不显示的问题。

2、先改下cocos2d-x的主要代码

autosprite=Sprite::create("fish.png");sprite->setposition(size.wIDth/2,size.height/2);autoshader_program=GLProgram::createWithfilenames("shadow.vsh","shadow.fsh");shader_program->use();shader_program->setUniformsForBuiltins();autofishClone=Sprite::createWithSpriteFrame(sprite->getSpriteFrame());fishClone->setposition(10,5);fishClone->setGLProgram(shader_program);sprite->addChild(fishClone,-1);this->addChild(sprite);

3、看了上面的代码应该可以想到，这个笨方法就是拷贝精灵，然后挂载在父节点上，这个拷贝的精灵做成阴影。这里还需要修改shader

shadow.fsh

varyingvec2v_texCoord;voIDmain(){floatshadowMask=texture2D(CC_Texture0,v_texCoord).a;constfloatshadowOpacity=0.5;gl_Fragcolor=vec4(0,shadowMask*shadowOpacity);}

也就是直接把拷贝的那份直接做成阴影

效果如下

650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="QQ图片20161012175511.png" alt="wKioL1f-CIzRzqYAAAJ5Lze1vZY525.png" src="http://s1.51cto.com/wyfs02/M02/88/A3/wKioL1f-CIzRzqYAAAJ5Lze1vZY525.png">

三、

1、以上方法可能在androID平台上跑不起来，原因是shader_program返回的是空值，修改代码如下

autoshader_program=newCCGLProgram();shader_program->retain();shader_program->initWithVertexShaderfilename("shadow.vsh","shadow.fsh");shader_program->link();shader_program->updateUniforms();autosprite=Sprite::create("fish.png");sprite->setposition(size.wIDth/2,size.height/2);autofishClone=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

总结

以上是内存溢出为你收集整理的cocos2d-x学习笔记（九）使用shader创建鱼的投影全部内容，希望文章能够帮你解决cocos2d-x学习笔记（九）使用shader创建鱼的投影所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。