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

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

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的主要代码

         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

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返回的是空值，修改代码如下

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

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页题目：cocos2d-x学习笔记（九）使用shader创建鱼的投影-创新互联
网站地址：http://cqcxhl.com/article/dgghhe.html