cocos2d-x学习笔记(九)使用shader创建鱼的投影
一、
1、先来看下效果图
貌似效果还可以
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,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的主要代码
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,0,0,shadowMask*shadowOpacity);}
也就是直接把拷贝的那份直接做成阴影
效果如下
三、
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
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。