cocos2d-x3.2中用shader使图片背景透明

今天有人问我问题，说怎么实现背景虚化，换句话说，就是把某张图片的背景颜色（比如白色）给弄没了，不然贴在屏幕上有白色背景。下面是解决方法。用shader处理了像素，使黑色背景透明。

Shader.h

#ifndef __TestShader__ShaderSprite__
#define __TestShader__ShaderSprite__#include "cocos2d.h"
USING_NS_CC;class ShaderSprite : public CCSprite {public:static ShaderSprite* create(const char* pszFileName);virtual bool initWithTexture(CCTexture2D *pTexture, const CCRect& rect);virtual void draw(void);
};#endif /* defined(__TestShader__ShaderSprite__) */

Shader.cpp

#include "ShaderSprite.h"static CC_DLL const GLchar *transparentshader =
#include "tansparentshader.h"ShaderSprite* ShaderSprite::create(const char *pszFileName)
{ShaderSprite *pRet = new ShaderSprite();if (pRet && pRet->initWithFile(pszFileName)) {pRet->autorelease();return pRet;}else{delete pRet;pRet = NULL;return NULL;}
}bool ShaderSprite::initWithTexture(CCTexture2D *pTexture, const CCRect& rect)
{do{
//        CCLog("override initWithTexture!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");CC_BREAK_IF(!CCSprite::initWithTexture(pTexture, rect));// 加载顶点着色器和片元着色器m_pShaderProgram = new  CCGLProgram();m_pShaderProgram ->initWithVertexShaderByteArray(ccPositionTextureA8Color_vert, transparentshader);CHECK_GL_ERROR_DEBUG();// 启用顶点着色器的attribute变量，坐标、纹理坐标、颜色m_pShaderProgram->addAttribute(kCCAttributeNamePosition, kCCVertexAttrib_Position);m_pShaderProgram->addAttribute(kCCAttributeNameColor, kCCVertexAttrib_Color);m_pShaderProgram->addAttribute(kCCAttributeNameTexCoord, kCCVertexAttrib_TexCoords);CHECK_GL_ERROR_DEBUG();// 自定义着色器链接m_pShaderProgram->link();CHECK_GL_ERROR_DEBUG();// 设置移动、缩放、旋转矩阵m_pShaderProgram->updateUniforms();CHECK_GL_ERROR_DEBUG();return true;}while(0);return false;
}void ShaderSprite::draw(void)
{
//    CCLog("override draw!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");CC_PROFILER_START_CATEGORY(kCCProfilerCategorySprite, "CCSprite - draw");CCAssert(!m_pobBatchNode, "If CCSprite is being rendered by CCSpriteBatchNode, CCSprite#draw SHOULD NOT be called");CC_NODE_DRAW_SETUP();//// 启用attributes变量输入，顶点坐标，纹理坐标，颜色//ccGLEnableVertexAttribs( kCCVertexAttribFlag_PosColorTex );ccGLBlendFunc(m_sBlendFunc.src, m_sBlendFunc.dst);m_pShaderProgram->use();m_pShaderProgram->setUniformsForBuiltins();// 绑定纹理到纹理槽0ccGLBindTexture2D(m_pobTexture->getName());#define kQuadSize sizeof(m_sQuad.bl)long offset = (long)&m_sQuad;// vertexint diff = offsetof( ccV3F_C4B_T2F, vertices);glVertexAttribPointer(kCCVertexAttrib_Position, 3, GL_FLOAT, GL_FALSE, kQuadSize, (void*) (offset + diff));// texCoodsdiff = offsetof( ccV3F_C4B_T2F, texCoords);glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, kQuadSize, (void*)(offset + diff));// colordiff = offsetof( ccV3F_C4B_T2F, colors);glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_UNSIGNED_BYTE, GL_TRUE, kQuadSize, (void*)(offset + diff));glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);CHECK_GL_ERROR_DEBUG();CC_INCREMENT_GL_DRAWS(1);CC_PROFILER_STOP_CATEGORY(kCCProfilerCategorySprite, "CCSprite - draw");
}

片段着色器代码

tansparentshader.h


#ifdef GL_ES
precision lowp float;
#endif
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
void main()
{                                                       float ratio=0.0;                                    vec4 texColor = texture2D(u_texture, v_texCoord);   ratio = texColor[0] > texColor[1]?(texColor[0] > texColor[2] ? texColor[0] : texColor[2]) :(texColor[1] > texColor[2]? texColor[1] : texColor[2]);                                      \n\
if (ratio != 0.0)
{                                                          texColor[0] = texColor[0] /  ratio;                    texColor[1] = texColor[1] /  ratio;                    texColor[2] = texColor[2] /  ratio;                    texColor[3] = ratio;
}
else
{                                                          texColor[3] = 0.0;
}
gl_FragColor = v_fragmentColor*texColor;
}";

注意shader编程没有隐士数据类型转换，所以都显示为float了。

然后ratio是指在rgb中找最大的，如果ratio为0直接将alpha设为0，否则alpha设为ratio，然后各rgb除以ratio，这里是为了做渐变，否则变化太生硬。

上图看看吧

改变前：

改变后：

不懂的可以关注我的公众号，里面有你想要的（有问题公众号留言必回答）https://mp.weixin.qq.com/s?__biz=MzIyOTM4MDMxNw==&mid=2247483836&idx=2&sn=1e1d922b5f2511e550da712921992d32&chksm=e842d80edf35511810bc8e383992c2e6a38665e466328200265386ab16fc4601d4822badf546&token=573588601&lang=zh_CN#rd

cocos2d-x3.2中用shader使图片背景透明相关推荐

cocos2d-x游戏开发(十四)用shader使图片背景透明
欢迎转载,地址:http://blog.csdn.net/fylz1125/article/details/8631783 好吧,终于抽时间写这篇文章了. 手头上有很多人物行走图,技能特效图等,但这些 ...
php添加背景图及设置格式,PHP添加PNG图片背景透明水印操作类定义与用法示例
本文实例讲述了PHP添加PNG图片背景透明水印操作类定义与用法.分享给大家供大家参考,具体如下: 图片相关操作类 class ImageTool { private $imagePath;//图片路径 ...
Zxing系列之设置二维码图片背景透明教程
继之前的博客:PDF文件添加二维码水印教程.图片添加二维码水印教程之后,对之前的添加二维码水印功能进行完善,之前的程序生成的二维码图片背景不是透明的,所以不是很美观,所以本博客对程序进行完善,对二维码 ...
将剪切板中的图片粘贴至Word，浮动于文字上方，设置图片背景透明
Sub Macro1() '将剪切板中的图片粘贴至Word Selection.Paste '执行循环 For i = 1 To ActiveDocument. ...
cocos2dx3.X shader使图片置灰
1 OpenGL ES着色器 opengl es的着色器有.fsh和.vsh两个文件.这两个文件在被编译和链接后就可以产生可执行程序与GPU交互.attribute是从外部传进来的,每一个顶点都会有这 ...
python 做界面时如何使图片保持透明背景_Python matplotlib生成图片背景透明的示例代码...
使用matplotlib生成图片,想要背景透明,而且图例部分也显示透明效果,找到了大概的设置方法,特此记录. # coding=utf-8 # matplotlib背景透明示例图 # python 3 ...
python 做界面时如何使图片保持透明背景_Python matplotlib生成图片背景透明
使用matplotlib生成图片,想要背景透明,而且图例部分也显示透明效果,找到了大概的设置方法,特此记录. # coding=utf-8 # matplotlib背景透明示例图 # python 3 ...
图片如何去掉背景色？如何使图片背景变透明？
图片设计工作者常常需要用透明背景图片,如果下载的图片素材不是透明背景的话,就需要先用图片处理工具将图片背景变透明.下面我们就使用压缩图的图片去底色(https://www.yasuotu.com/bu ...
python图片背景透明软件_使图像背景透明
我有一个橙色和白色背景的图像.我想让白色的背景透明.下面的代码使用grabcut来制作一个掩码.然后我将图像分割成rgb通道,并在alpha通道上应用遮罩.从下面的图片中可以看到,后抓取和遮罩图片都可 ...

cocos2d-x3.2中用shader使图片背景透明

cocos2d-x3.2中用shader使图片背景透明相关推荐

最新文章

热门文章