十、cocos2d-x 字体描边和制作阴影

关于字体描边的实现，不考虑效果和效率的话，是有三种方式：

　　①利用CCLabelTTF制作文字描边和阴影效果

　　②利用CCRenderTexture渲染文理的方式生成带有描边效果的文字

　　③利用shader来实现，使用cocos2dx中CCGLProgram类与OpenGl绘图机制中的着色器交互来实现

　　第三种方式我没试过，不过基于shader的强大特效功能，实现起来是没问题的，后面我还会写一篇关于shader来实现改变纹理颜色做特殊效果的文章。现在我们主要研究一下前两种。前两种方式从原理来说都是利用多个CCLabelTTF的重叠来做的，只不过第二种方式是使用CCLabelTTF绘制了一个带有描边效果的文字图片。

利用CCLabelTTF制作文字描边和阴影效果

　　网上大量博客都讲了这种方式，写的很好，这里给一个链接：http://www.52php.cn/article/p-nnxtiyxa-nk.html

原理就是创建了4个描边用的CCLabelTTF和一个正文主体CCLabelTTF，先画描边的label，颜色设置成要用的描边色，分别在目标位置出做上下左右4个方向偏移，然后在盖上我们的正文主体label即可。

　　阴影效果就更简单了，只需要两个label，一个阴影用的label和正文label，只需要设置阴影label：颜色、透明度和位置偏移即可。

*shadowSize阴影大小
1. *shadowOpacity阴影透明度
2. */
3. CCLabelTTF*HelloWorld::textAddShadow(floatshadowSize,87); font-weight:bold; background-color:inherit">floatshadowOpacity)
4. {
5. /*阴影label*/
6. CCLabelTTF*shadow=CCLabelTTF::create(string,fontSize);
7. shadow->setColor(ccBLACK);
8. shadow->setOpacity(shadowOpacity);
9. /*正文label*/
10. center->setPosition(ccp(shadow->getContentSize().width*0.5-shadowSize,shadow->getContentSize().height*0.5+shadowSize));
11. shadow->addChild(center);
12. returnshadow;
13. 　　这里提到一点，就是具体要创建几个label是不一定的，创建的越多，效果是描边越粗越亮但是效率越低，比如创建了40个描边用的label，4个方向各10个，互相之间有微小的偏移不完全重叠，这样的效果是label更加的粗且亮，阴影效果等同。

    
    

    利用CCRenderTexture渲染文理的方式生成带有描边效果的文字

    　　这种方式难点在于，很多人不了解OpenGl的绘图着色机制，不过也不要紧，这里只用到了一点着色知识，就是颜色的混合，这个大多数的人都知道，红色和绿色混合会变成黄色，黑色和任何颜色混合还是黑色（0*任何数＝0），任何颜色和白色的混合不改变颜色。

    　　绘图时，OpenGL 会把源颜色和目标颜色各自取出，并乘以一个系数（源颜色乘以的系数称为“源因子”，目标颜色乘以的系数称为“目标因子”），然后做运算得到新的颜色值，并按照新的颜色来绘制。　　

    　　比如，RGB格式，原来的颜色是（255，0,0）--红色，目标颜色是（0,0）--绿色，加入系数为{1,0}，运算方式为颜色的叠加，这意味着新的颜色为(255，0,0)*1+(0,0)*0 =(255，0,0)--红色，就是完全不用目标颜色的值，相当于没变色,系数中源因子为前者：1，目标因子为后者：0，这是{1,0}的混合机制。

    
    

    　　好了，那么我们来了解一下cocos2dx的渲染是怎么做的。

    　　在cocos2dx中的可渲染的节点都是CCNode的子类，如精灵、场景、文本，CCNode有一个渲染混色的函数glBlendFunc()和setBlendFunc(),操作的是ccBlendFunc，ccBlendFunc有两个调节变量，ccBlendFuncfunc = { GL_SRC_ALPHA,GL_ONE},这个调节变量就是前面说的系数：

    　　GL_SRC_ALPHA：表示使用源颜色的alpha值来作为源因子。

    　　GL_ONE： 表示使用1.0作为因子，实际上相当于完全的使用了这种颜色参与混合运算。

    　　这类参数有很多，自己可以跟踪引擎代码内部去看。

    再介绍一下，CCRenderTexture生成描边字体的原理，CCRenderTexture可以理解为一张纹理画布，我们可以再这张画布上涂鸦，当我们收工的时候，这张画就算画好了，即生成一张纹理。因此，我们是在画布上，用一个label在不同的位置不断的去画，类似第一种方式，我们在画布上绘制label的时候，在目标位置处的360个方向画多个label，重叠，最后通过画布就生成带有描边文字的一张纹理图，然后用这张纹理图生成一个精灵放到场景里，完毕。

    下面先把代码贴上来：

    CCTexture2D*FlyBloodLabel::createStrokeTexture(char*value,87); font-weight:bold; background-color:inherit">floatstrokeValue,ccColor3Bcolor)
    1. //floatfontSize=m_fontSize-2*strokeSize;
    2. /*创建一个CCLabelTTF，含有期望字体样式，作为画笔*/
    3. CCLabelTTF*label=CCLabelTTF::create(value,"Arial",EFFECT_LABEL_FONT_SIZE);
    4. /*通过label的大小来设置最终生成的纹理图片的大小，strokeValue为描边字体的偏移量，影响粗细*/
    5. CCSizetextureSize=label->getContentSize();
    6. textureSize.width+=2*strokeValue;
    7. textureSize.height+=2*strokeValue;
    9. /*监测OpenGl的错误状态*/
    10. glGetError();
    11. /*创建一张纹理画布*/
    12. CCRenderTexture*rt=CCRenderTexture::create(textureSize.width,textureSize.height);
    13. if(!rt)
    14. CCLog("createrendertexturefailed!!!!");
    15. addChild(label);
    16. return0;
    17. }
    18. /*设置描边的颜色*/
    19. label->setColor(color);
    20. /*
    21. *拿到源文字的混色机制，存储以备恢复，并设置新的目标混色机制
    22. *混色机制设为：源颜色透明度（影响亮度）和目标颜色（影响颜色）
    23. ccBlendFuncoriginalBlend=label->getBlendFunc();
    24. ccBlendFuncfunc={GL_SRC_ALPHA,GL_ONE};
    25. label->setBlendFunc(func);
    26. /*这是自定义的一些调整，倾斜了一点*/
    27. label->setAnchorPoint(ccp(0.5,0.5));
    28. label->setRotationX(15);
    29. /*张开画布，开始绘画*/
    30. rt->begin();
    31. for(inti=0;i<360;i+=5)//每变化5度绘制一张
    32. floatr=CC_DEGREES_TO_RADIANS(i);//度数格式的转换
    33. label->setPosition(ccp(textureSize.width*0.5f+sin(r)*strokeValue,textureSize.height*0.5f+cos(r)*strokeValue));
    34. /*CCRenderTexture的用法，在begin和end之间visit的纹理，都会画在CCRenderTexture里面*/
    35. label->visit();//画了一次该label
    36. /*恢复原始的label并绘制在最上层*/
    37. label->setColor(ccWHITE);
    38. label->setBlendFunc(originalBlend);
    39. label->setPosition(ccp(textureSize.width*0.5f,textureSize.height*0.5f));
    40. label->visit();
    41. /*在画布上绘制结束，此时会生成一张纹理*/
    42. rt->end();
    43. /*取出生成的纹理，添加抗锯齿打磨，并返回*/
    44. CCTexture2D*texture=rt->getSprite()->getTexture();
    45. texture->setAntiAliasTexParameters();//setAliasTexParameters();
    46. returntexture;
    47. }

    　　除此之外，还有一种方式就是Shader，这个还在研究，不过它的特效功能着实强大，以后逐步学习。

    出处:http://blog.csdn.net/ys5773477/article/details/39521959

    （编辑：李大同）

    【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!