【转】Cocos2d-x 2.x CCSprite 灰白图的生成（利用shader设置）——2013-08-27 21

猴子原创，欢迎转载。转载请注明： 转载自Cocos2D开发网–Cocos2Dev.com，谢谢！

原文地址: http://www.cocos2dev.com/?p=325

游戏中人物死掉后要把人物头像变成灰白图，很多游戏也是这样处理，问题来了，怎么将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 _BYGraySprite_h
#define _BYGraySprite_h

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

class BYGraySprite : public cocos2d::CCSprite {
public:
    BYGraySprite();
    virtual ~BYGraySprite();

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

#endif//_BYGraySprite_h

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

cpp文件

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

#include "BYGraySprite.h"
#include "cocoa/CCGeometry.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 \
            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 \
            }";

        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()->setUniformsForBuiltins();//  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);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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 \

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

改成:

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 \

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }