cocos2d-x 2.x版本文字描边研究01_使用shader描边

由于Cocos2d-x 2.x版本对描边支持的不好，3.X的基于Freetype的字库的描边效果还是不错的，但项目用的是旧版本引擎，又需要用到描边字，最近也研究了几种描边的方法，想分享一下。

在网上找了很多种描边的方式，各有优劣，有的描边效果很不错，而有的效果稍差但绘制效率更高。这篇文章讲解其中一种基于Shader的描边方法。

“云风”大哥的ejoy2d引擎中提供了一种效率很高的描边算法，使用ejoy2d进行描边时，有不错的效果，但是我集成到了cocos2dx中，描边效果不太明显，可能是与生成的纹理有关系，如果对描边的效果要求不高，可以考虑用一下这个描边效果。

描边的原理参考云风的博客，http://blog.codingnow.com/2013/09/edge_font.html

参考的ejoy2d的描边shader，可以去github上查看源码，https://github.com/ejoy/ejoy2d

描边shader如下：

/* * LICENSE ??? */#ifdef GL_ESprecision highp float;#endifuniform sampler2D u_texture;varying vec2 v_texCoord;varying vec4 v_fragmentColor;uniform vec4 u_effectColor;void main() {        float c = texture2D(u_texture, v_texCoord).w;    float alpha = clamp(c, 0.0, 0.5) * 2.0;    float color = (clamp(c, 0.5, 1.0) - 0.5) * 2.0;        gl_FragColor.xyz = (v_fragmentColor.xyz + u_effectColor.xyz) * color;    gl_FragColor.w = alpha;    gl_FragColor *= v_fragmentColor.w;    gl_FragColor *= v_fragmentColor.w;    }

我封装了一个StrokeLabel类来对cocos2dx的CCLabelTTF进行了绘制的修改，增加了使用自有的shader进行着色的逻辑。

////  StrokeLabel.h//  StrokeLabel_01////  Created by cc on 15/1/27.////#ifndef __StrokeLabel_01__StrokeLabel__#define __StrokeLabel_01__StrokeLabel__#include "CCLabelTTFLoader.h"USING_NS_CC;class StrokeLabel : public CCLabelTTF {    private:        //描边宽度    float m_strokeSize;        //描边效果颜色    ccColor4B m_effectColor;    ccColor4F m_effectColorF;        //文本颜色    ccColor4F m_textColorF;    ccColor4B m_textColor;        //描边颜色值，传入shader的全局变量    GLuint m_uniformEffectColor;    public:    #pragma mark <构造 && 析构>        StrokeLabel();    ~StrokeLabel();    #pragma mark <创建 && 初始化>       /**     *  创建描边字     *     *  @param content     文本内容     *  @param fontName    字体     *  @param fontSize    字号     *  @param textColor   文本颜色     *  @param strokeColor 描边颜色     *  @param strokeSize  描边宽度     *     *  @return 描边字     */    static StrokeLabel* createWithAttribute(const std::string& content, const std::string& fontName, float fontSize, const ccColor3B& textColor, const ccColor3B& strokeColor, float strokeSize);        /**     *  初始化描边字     *     *  @param content     文本内容     *  @param fontName    字体     *  @param fontSize    字号     *  @param textColor   文本颜色     *  @param strokeColor 描边颜色     *  @param strokeSize  描边宽度     *     *  @return true: 初始化成功 false: 初始化失败     */    bool initWithAttribute(const std::string& content, const std::string& fontName, float fontSize, const ccColor3B& textColor, const ccColor3B& strokeColor, float strokeSize);        /**     *  更新Shader程序     */    void updateShaderProgram();        /**     *  绘制     */    virtual void draw();};#endif /* defined(__StrokeLabel_01__StrokeLabel__) */

////  StrokeLabel.cpp//  StrokeLabel_01////  Created by cc on 15/1/27.////#include "StrokeLabel.h"StrokeLabel::StrokeLabel(): m_strokeSize(0), m_uniformEffectColor(0) {    }StrokeLabel::~StrokeLabel() {    }long long int getNowTime() {    struct timeval tv;    gettimeofday(&tv, NULL);    long long int nowTime = ((long long int)tv.tv_sec) * 1000 + tv.tv_usec / 1000;    return nowTime;}/** *  创建描边字 * *  @param content     文本内容 *  @param fontName    字体 *  @param fontSize    字号 *  @param textColor   文本颜色 *  @param strokeColor 描边颜色 *  @param strokeSize  描边宽度 * *  @return 描边字 */StrokeLabel* StrokeLabel::createWithAttribute(const std::string& content, const std::string& fontName, float fontSize, const ccColor3B& textColor, const ccColor3B& strokeColor, float strokeSize) {    StrokeLabel *pRet = new StrokeLabel();    if (pRet && pRet->initWithAttribute(content, fontName, fontSize, textColor, strokeColor, strokeSize)) {        pRet->autorelease();        return pRet;    }        CC_SAFE_DELETE(pRet);    return NULL;}/** *  初始化描边字 * *  @param content     文本内容 *  @param fontName    字体 *  @param fontSize    字号 *  @param textColor   文本颜色 *  @param strokeColor 描边颜色 *  @param strokeSize  描边宽度 * *  @return true: 初始化成功 false: 初始化失败 */bool StrokeLabel::initWithAttribute(const std::string& content, const std::string& fontName, float fontSize, const ccColor3B& textColor, const ccColor3B& strokeColor, float strokeSize) {        if (!CCLabelTTF::initWithString(content.c_str(), fontName.c_str(), fontSize)) {        return false;    }        m_textColor = ccc4(textColor.r, textColor.g, textColor.b, 255);    m_textColorF.r = m_textColor.r / 255.0f;    m_textColorF.g = m_textColor.g / 255.0f;    m_textColorF.b = m_textColor.b / 255.0f;    m_textColorF.a = m_textColor.a / 255.0f;        m_effectColor = ccc4(strokeColor.r, strokeColor.g, strokeColor.b, 255);;    m_effectColorF.r = m_effectColor.r / 255.0f;    m_effectColorF.g = m_effectColor.g / 255.0f;    m_effectColorF.b = m_effectColor.b / 255.0f;    m_effectColorF.a = m_effectColor.a / 255.0f;        this->setColor(textColor);        this->updateShaderProgram();    return true;}/** *  更新Shader程序 */void StrokeLabel::updateShaderProgram() {        const GLchar* fragmentSource = (GLchar*)CCString::createWithContentsOfFile(CCFileUtils::sharedFileUtils()->fullPathForFilename("Label_outline1.frag").c_str())->getCString();        CCGLProgram* pProgram = new CCGLProgram();    pProgram->initWithVertexShaderByteArray(ccPositionTextureColor_vert, fragmentSource);    setShaderProgram(pProgram);    pProgram->release();        CHECK_GL_ERROR_DEBUG();        getShaderProgram()->addAttribute(kCCAttributeNamePosition, kCCVertexAttrib_Position);    getShaderProgram()->addAttribute(kCCAttributeNameColor, kCCVertexAttrib_Color);    getShaderProgram()->addAttribute(kCCAttributeNameTexCoord, kCCVertexAttrib_TexCoords);        CHECK_GL_ERROR_DEBUG();        getShaderProgram()->link();        CHECK_GL_ERROR_DEBUG();        getShaderProgram()->updateUniforms();        m_uniformEffectColor = glGetUniformLocation(getShaderProgram()->getProgram(), "u_effectColor");    }void StrokeLabel::draw() {        long long int startTime = getNowTime();        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();        ccGLBlendFunc( m_sBlendFunc.src, m_sBlendFunc.dst );        getShaderProgram()->use();            getShaderProgram()->setUniformLocationWith4f(m_uniformEffectColor,                                            m_effectColorF.r, m_effectColorF.g, m_effectColorF.b,m_effectColorF.a);        getShaderProgram()->setUniformsForBuiltins();            ccGLBindTexture2D( m_pobTexture->getName() );    ccGLEnableVertexAttribs( kCCVertexAttribFlag_PosColorTex );    #define kQuadSize sizeof(m_sQuad.bl)#ifdef EMSCRIPTEN    long offset = 0;    setGLBufferData(&m_sQuad, 4 * kQuadSize, 0);#else    long offset = (long)&m_sQuad;#endif // EMSCRIPTEN        // 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();    #if CC_SPRITE_DEBUG_DRAW == 1    // draw bounding box    CCPoint vertices[4]={        ccp(m_sQuad.tl.vertices.x,m_sQuad.tl.vertices.y),        ccp(m_sQuad.bl.vertices.x,m_sQuad.bl.vertices.y),        ccp(m_sQuad.br.vertices.x,m_sQuad.br.vertices.y),        ccp(m_sQuad.tr.vertices.x,m_sQuad.tr.vertices.y),    };    ccDrawPoly(vertices, 4, true);#elif CC_SPRITE_DEBUG_DRAW == 2    // draw texture box    CCSize s = this->getTextureRect().size;    CCPoint offsetPix = this->getOffsetPosition();    CCPoint vertices[4] = {        ccp(offsetPix.x,offsetPix.y), ccp(offsetPix.x+s.width,offsetPix.y),        ccp(offsetPix.x+s.width,offsetPix.y+s.height), ccp(offsetPix.x,offsetPix.y+s.height)    };    ccDrawPoly(vertices, 4, true);#endif // CC_SPRITE_DEBUG_DRAW        CC_INCREMENT_GL_DRAWS(1);        CC_PROFILER_STOP_CATEGORY(kCCProfilerCategorySprite, "CCSprite - draw");        long long int endTime = getNowTime();    long long int druation = endTime - startTime;    CCLOG("drawTime %lld", druation);    }

我在每一次绘制都打印了一下绘制消耗的时间，单位是毫秒，基本都近似于0~1毫秒，所以绘制效率还是很高的。

用这个shader描边描出来的效果在2dx上的表现一般，描的很浅，下面是普通白字和白字描红边的对比效果图。

这是在Ios上描边效果，Android的效果也差不多。

描边的代码在这里下载：http://download.csdn.net/download/oktears/8403783

本文由CC原创总结，如需转载请注明出处：http://blog.csdn.net/oktears/article/details/43200757