码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-10-12 23:20:33      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:投影   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

这里面有两种类型的变量,attributevarying

5attribute是从外部传进来的,每一个顶点都有这两个属性:当前顶点的位置和纹理的坐标

attribute vec4 a_position; 

attribute vec2 a_texCoord;

6varying是在vertexshaderfragment shader之间传递数据用的

两个文件里面都定义了varying vec2 v_texCoord;

7、注意:gl_开头的变量名是系统内置的变量,例如:

gl_Position是顶点的位置,gl_FragColor最终画在屏幕上面的像素点的颜色

8shadowOffset是自己设置的偏移量。你会发现,如果设置的过大,投影如下:

技术分享

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);
}

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

效果如下

技术分享

4、项目的源码

https://github.com/smiger/FishShadow


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

标签:投影   shader   

原文地址:http://wty530.blog.51cto.com/3238860/1861204

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!