cocos2d-x游戏开发(十四)用shader使图片背景透明

欢迎转载，地址：http://blog.csdn.net/fylz1125/article/details/8631783

好吧，终于抽时间写这篇文章了。

手头上有很多人物行走图，技能特效图等，但这些图都有个纯黑色背景，怎么样将内容显示出来，让背景透明呢？前段时间搞了一下，感谢群里的童鞋们，提供了思路和方法。

这里用shader处理了像素，使黑色背景透明，直接上代码

ShaderSprite.h

[cpp] view plaincopyprint?

#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__) */

ShaderSprite.cpp

[cpp] view plaincopyprint?

#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();
// 绑定纹理到纹理槽0
ccGLBindTexture2D(m_pobTexture->getName());
#define kQuadSize sizeof(m_sQuad.bl)
long offset = (long)&m_sQuad;
// vertex
int diff = offsetof( ccV3F_C4B_T2F, vertices);
glVertexAttribPointer(kCCVertexAttrib_Position, 3, GL_FLOAT, GL_FALSE, kQuadSize, (void*) (offset + diff));
// texCoods
diff = offsetof( ccV3F_C4B_T2F, texCoords);
glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, kQuadSize, (void*)(offset + diff));
// color
diff = 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

[cpp] view plaincopyprint?

" \n\
#ifdef GL_ES \n\
precision lowp float; \n\
#endif \n\
varying vec4 v_fragmentColor; \n\
varying vec2 v_texCoord; \n\
uniform sampler2D u_texture; \n\
void main() \n\
{ \n\
float ratio=0.0; \n\
vec4 texColor = texture2D(u_texture, v_texCoord); \n\
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) \n\
{ \n\
texColor[0] = texColor[0] / ratio; \n\
texColor[1] = texColor[1] / ratio; \n\
texColor[2] = texColor[2] / ratio; \n\
texColor[3] = ratio; \n\
} \n\
else \n\
{ \n\
texColor[3] = 0.0; \n\
} \n\
gl_FragColor = v_fragmentColor*texColor; \n\
}";

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

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

上图：

好了，上面两张图是一样的。只是屏幕背景一个是白色，一个是黑色。图片背景透明了。

cocos2d-x游戏开发(十四)用shader使图片背景透明相关推荐

cocos2d-x3.2中用shader使图片背景透明
今天有人问我问题,说怎么实现背景虚化,换句话说,就是把某张图片的背景颜色(比如白色)给弄没了,不然贴在屏幕上有白色背景.下面是解决方法.用shader处理了像素,使黑色背景透明. Shader.h # ...
【Android游戏开发十四】深入Animation,在SurfaceView中照样使用Android—Tween Animation！
李华明Himi 原创,转载务必在明显处注明: 转载自 [黑米GameDev街区] 原文链接: http://www.himigame.com/android-game/331.html 很多童鞋说 ...
【Android游戏开发十四】深入Animation,在SurfaceView中照样使用Android—Tween Animation！...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/android-game/331.html 之 ...
unity3D游戏开发十四之NGUI一
在Unity中,可以使用代码控制其自身所携带的GUI来实现图形界面的搭建.但是这些组件的搭建效率很低,而且已经无法满足现在市场对图形用户界面美感的要求,所以,引入了NGUI来增加所要开发的图形用户界面 ...
【Visual C++】游戏开发笔记四十六浅墨DirectX教程十四模板测试与镜面特效专场
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/details/8632184 作者:毛星云( ...
iOS cocos2d 2游戏开发实战(第3版)---你的第一个游戏！
2019独角兽企业重金招聘Python工程师标准>>> 随着苹果公司不断地创新与发展,新的iPhone 5.iPad 4以及iPad mini产品相继问世,包括iOS与Xcode在内 ...
【Visual C++】游戏开发笔记四十三浅墨DirectX教程十一为三维世界添彩：纹理映射技术(二)...
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 作者:毛星云(浅墨) 邮箱: happylifemxy@163.com 本篇文章里,我们首先对Direct3D之中固定功能流水线中的 ...
【通知】▁▂▃ Himi 最新著作《iOS游戏编程之从零开始—Cocos2d-x与cocos2d引擎游戏开发》★书籍源码+第4/5/6样章★-免费下载★ ▃▂▁
2013年新年,Himi的第二本著作:<iOS游戏编程之从零开始-Cocos2d-x与cocos2d引擎游戏开发>一书正式发售: (大家可以到新华书店.淘宝.拍拍.当当.亚马逊等进行购买) ...
【Android游戏开发十二】（保存游戏数据 [上文]）详解SharedPreference 与 FIleInputStream/FileOutputStream将数据存储到SD卡中!
李华明Himi 原创,转载务必在明显处注明: 转载自 [黑米GameDev街区] 原文链接: http://www.himigame.com/android-game/327.html 很多童鞋说 ...

cocos2d-x游戏开发(十四)用shader使图片背景透明

cocos2d-x游戏开发(十四)用shader使图片背景透明相关推荐

最新文章

热门文章