Cocos2d-x 2.x CCSprite 灰白图的生成(利用shader设置)

猴子原创,欢迎转载。转载请注明: 转载自Cocos2D开发网--Cocos2Dev.com,谢谢!
原文地址: http://www.cocos2dev.com/?p=325


Cocos2d-x 2.x CCSprite 灰白图的生成(利用shader设置)_第1张图片


游戏中人物死掉后要把人物头像变成灰白图,很多游戏也是这样处理,问题来了,怎么将CCsprite生成的图变成灰白呢?


看了下实现,基本有了办法。CCSprite是在initWithTexture的时候渲染的贴图,如果在这里面设置一个一个灰度Shader,也许可以将图片改成灰白色。


GL Shader脚本代码:



#ifdef GL_ES
precision mediump float;
#endif
uniform sampler2D u_texture;
varying vec2 v_texCoord;
varying vec4 v_fragmentColor;
void main(void)
{
// Convert to greyscale using NTSC weightings
float alpha = texture2D(u_texture, v_texCoord).a;
float grey = dot(texture2D(u_texture, v_texCoord).rgb, vec3(0.299, 0.587, 0.114));
gl_FragColor = vec4(grey, grey, grey, alpha);
}



这个主要目的是将RGB值转换为YUV值,Y就是灰度,所以我们取出里面的Y值来实现我们的灰白图。


Google了下,vec3(0.299, 0.587, 0.114) 是RGB转YUV的参数值。


计算完了之后根据原来的纹理alpha值,输出我们处理后的颜色到gl_FragColor,就可以让shader去渲染黑白图。


里面主要是在光栅化后的片段进行颜色处理,最后输出的是像素,它不会产生额外纹理,所以不会卡。


注意:GLSL1.0的可能有些函数不支持,会crash。不过目前基本可以不考虑。


下面就是我写好的类,加入自己的工程就可以了。


头文件


//
// BYGraySprite.h
// Demo
//
// Created by Yanghui Liu on 12-11-2.
// Copyright (c) 2012年 BoyoJoy. All rights reserved.
//


#ifndef Demo_BYGraySprite_h
#define Demo_BYGraySprite_h


#include "cocoa/CCGeometry.h"
#include "cocos2d.h"
USING_NS_CC;


class BYGraySprite : public CCSprite{


public:
 BYGraySprite();
 virtual ~BYGraySprite();
 static BYGraySprite* create(const char* pszFileName);
 bool initWithTexture(CCTexture2D* pTexture, const CCRect& tRect);
 virtual void draw();


};


#endif


cpp文件


//
// BYGraySprite.cpp
// Demo
//
// Created by Yanghui Liu on 12-11-2.
// Copyright (c) 2012年 BoyoJoy. All rights reserved.
//


#include "BYGraySprite.h"


BYGraySprite::BYGraySprite(){


}


BYGraySprite::~BYGraySprite(){


}


BYGraySprite* BYGraySprite::create( const char* pszFileName ){
 BYGraySprite* graySprite = new BYGraySprite;
 if (graySprite && graySprite->initWithFile(pszFileName)){
 graySprite->autorelease();
 return graySprite;
 }else{
 CC_SAFE_RELEASE(graySprite);
 return NULL;
 }
}


bool BYGraySprite::initWithTexture(CCTexture2D* pTexture, const CCRect& tRect ){
 do{
 CC_BREAK_IF(!CCSprite::initWithTexture(pTexture, tRect));


 GLchar* pszFragSource =
 "#ifdef GL_ES \n \
 precision mediump float; \n \
 #endif \n \
 uniform sampler2D u_texture; \n \
 varying vec2 v_texCoord; \n \
 varying vec4 v_fragmentColor; \n \
 void main(void) \n \
 { \n \
 // Convert to greyscale using NTSC weightings \n \
 float grey = dot(texture2D(u_texture, v_texCoord).rgb, vec3(0.299, 0.587, 0.114)); \n \
 gl_FragColor = vec4(grey, grey, grey, 1.0); \n \
 }";


 CCGLProgram* pProgram = new CCGLProgram();
 pProgram->initWithVertexShaderByteArray(ccPositionTextureColor_vert, pszFragSource);
 this->setShaderProgram(pProgram);
 pProgram->release();
 CHECK_GL_ERROR_DEBUG();


 this->getShaderProgram()->addAttribute(kCCAttributeNamePosition, kCCVertexAttrib_Position);
 this->getShaderProgram()->addAttribute(kCCAttributeNameColor, kCCVertexAttrib_Color);
 this->getShaderProgram()->addAttribute(kCCAttributeNameTexCoord, kCCVertexAttrib_TexCoords);
 CHECK_GL_ERROR_DEBUG();


 this->getShaderProgram()->link();
 CHECK_GL_ERROR_DEBUG();


 this->getShaderProgram()->updateUniforms();
 CHECK_GL_ERROR_DEBUG();


 return true;
 } while (0);
 return false;
}


void BYGraySprite::draw(){
 ccGLEnableVertexAttribs(kCCVertexAttribFlag_PosColorTex );
 ccGLBlendFunc( m_sBlendFunc.src, m_sBlendFunc.dst );


 this->getShaderProgram()->use();
 this->getShaderProgram()->setUniformForModelViewProjectionMatrix();


 ccGLBindTexture2D( this->getTexture()->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);
 CC_INCREMENT_GL_DRAWS(1);
}




使用方法:

BYGraySprite* graySprite = BYGraySprite::create("Icon.png");
 graySprite->setPosition( ccp(size.width/2, size.height/2) );
 this->addChild(graySprite);


2012.11.14更新

二、之前alpha值是直接用的1,所以透明图会渲染成黑色。把原来纹理的alpha取出来并使用。就可以避免该问题。

也就是将GL脚本代码中的

float grey = dot(texture2D(u_texture, v_texCoord).rgb, vec3(0.299, 0.587, 0.114)); \n \

gl_FragColor = vec4(grey, grey, grey, 1.0); \n \

改成:

vec4 col = texture2D(u_texture, v_texCoord); \n \

float grey = dot(col.rgb, vec3(0.299, 0.587, 0.114)); \n \

gl_FragColor = vec4(grey, grey, grey, col.a); \n \


这里感谢网友whitespace,发现该问题。并留言提供方法。


你可能感兴趣的:(Cocos2d-x 2.x CCSprite 灰白图的生成(利用shader设置))