我们都知道cocos3dx和PS都有字体描边的功能，但是你知道cocos2dx字体描边与PS字体描边有什么区别吗？

先来说coco2dx

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

① 利用CCLabelTTF制作文字描边和阴影效果
② 利用CCRenderTexture渲染文理的方式生成带有描边效果的文字

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

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

利用CCLabelTTF制作文字描边和阴影效果
网上大量博客都讲了这种方式，写的很好，这里给一个链接：https://www.taikr.com/

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

【cpp】
  1.  /*string     文本
  2. *fontName   文本字体类型
  3. *fontSize   文本大小
  4. *color3     文本颜色
  5. *lineWidth  所描边的宽度
  6. */
  7. CCLabelTTF* HelloWorld::textAddStroke(const char* string, const char* fontName, float fontSize,const ccColor3B &color3,float lineWidth)
  8. {
  9.  /* 正文CCLabelTTF */
  10. CCLabelTTF* center = CCLabelTTF::create(string, fontName, fontSize);
  11. center->setColor(color3);
  12. /* 描边CCLabelTTF 上 */
  13. CCLabelTTF* up = CCLabelTTF::create(string, fontName, fontSize);
  14. up->setColor(ccBLACK);
  15. up->setPosition(ccp(center->getContentSize().width*0.5, center->getContentSize().height*0.5+lineWidth));
  16. center->addChild(up,-1);
  17. /* 描边CCLabelTTF 下 */
  18. CCLabelTTF* down = CCLabelTTF::create(string, fontName, fontSize);
  19. down->setColor(ccBLACK);
  20. down->setPosition(ccp(center->getContentSize().width*0.5, center->getContentSize().height*0.5-lineWidth));
  21. center->addChild(down,-1);
  22. /* 描边CCLabelTTF 左 */
  23. CCLabelTTF* left = CCLabelTTF::create(string, fontName, fontSize);
  24. left->setPosition(ccp(center->getContentSize().width*0.5-lineWidth, center->getContentSize().height*0.5));
  25. left->setColor(ccBLACK);
  26. center->addChild(left,-1);
  27. /* 描边CCLabelTTF 右 */
  28. CCLabelTTF* right = CCLabelTTF::create(string, fontName, fontSize);
  29. right->setColor(ccBLACK);
  30. right->setPosition(ccp(center->getContentSize().width*0.5+lineWidth,center->getContentSize().height*0.5));
  31. center->addChild(right,-1);
  32. return center;
  33. }  <span style="font-family: verdana, Arial, Helvetica, sans-serif;"> </span>
阴影效果就更简单了，只需要两个label，一个阴影用的label和正文label，只需要设置阴影label：颜色、透明度和位置偏移即可。
  1. 【cpp】
  2. /*string         文本
  3. *fontName       文本字体类型
  4. *fontSize       文本大小
  5. *color3         文本颜色
  6. *shadowSize     阴影大小
  7. *shadowOpacity  阴影透明度
  8. */
  9. CCLabelTTF* HelloWorld::textAddShadow(const char* string, const char* fontName, float fontSize,const ccColor3B &color3,float shadowSize,float shadowOpacity)
  10. {
  11. /* 阴影label */
  12. CCLabelTTF* shadow = CCLabelTTF::create(string, fontName, fontSize);
  13. shadow->setColor(ccBLACK);
  14. shadow->setOpacity(shadowOpacity);
  15. /* 正文label */
  16. CCLabelTTF* center = CCLabelTTF::create(string, fontName, fontSize);
  17. center->setColor(color3);
  18. center->setPosition(ccp(shadow->getContentSize().width*0.5-shadowSize,shadow->getContentSize().height*0.5+shadowSize));
  19. shadow->addChild(center);
  20. return shadow;
  21. } <span style="font-family: verdana, Arial, Helvetica, sans-serif;"> </span>

这里提到一点，就是具体要创建几个label是不一定的，创建的越多，效果是描边越粗越亮但是效率越低，比如创建了40个描边用的label，4个方向各10个，互相之间有微小的偏移不完全重叠，这样的效果是label更加的粗且亮，阴影效果等同。

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

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

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

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

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

在cocos2dx中的可渲染的节点都是CCNode的子类，如精灵、场景、文本，CCNode有一个渲染混色的函数glBlendFunc()和setBlendFunc(),操作的是ccBlendFunc，ccBlendFunc有两个调节变量，ccBlendFunc func = { GL_SRC_ALPHA, GL_ONE},这个调节变量就是前面说的系数：
GL_SRC_ALPHA：表示使用源颜色的alpha值来作为源因子。

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

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

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

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

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

接着看ps

在图片的后期处理中，图片上的文字就如男人的手表、女人的首饰一样，适当而精彩的文字能给图片起到点睛的装饰作用。当然文字的添加，并不是单纯地打字上图那么简单，无论是构图、编排、修饰都要反复斟酌，很多软件也相应推出一些文字修饰功能，比如文字描边就是其中比较常用的一种。

文字添加了描边后，会更立体也更突出。但是每款软件在完成文字描边的方法过程不尽相同，特地带来本文对 Photoshp CS3 和美图秀秀这两款常用图片处理软件有关文字描边的横向测评。
一、评测过程
1、Photoshop(以下简称PS，收费软件暂不提供下载)
要在PS里给文字添加描边，首先点击左侧功能栏中的文字图标，拖拽成文字编辑框，键入文字时，可以更换字体及其大小模式(浑厚、犀利……)等。不过，PS中只能使用本地字体，想要喜欢的字体需要去网上下载安装。

然后选择对文字添加描边，在PS中实现文字描边的方法有两种：
方法1：利用编辑菜单---描边，进行描边。
1、输入文字;
2、选择“图层”---栅格化---文字;
3、将文字载入选区，选择“编辑”菜单---描边;
4、在“描边”对话框中设置描边的宽度及颜色等，点击“确定”完成描边。
方法2：利用图层样式进行描边。
1、输入文字;
2、双击图层后面的蓝色区域，弹出“图层样式”对话框;
3、在样式下面勾选“描边”，再在“混合选项”栏进行相关的设置;
4、设置完后，点击“好”按钮完成描边。
相比之下方法2比较好用，在修改颜色及其描边粗细时可以实时预览效果。下面在图层样式中做文字描边的详细介绍。

在描边编辑框中可以看出功能很强大，描边粗细可以自行调节就不用说了，还设有描边的位置“外部、内部、居中”，大多常用的是外部描边。当然还有一些混合模式和填充类型，相对比较复杂，这里不多介绍。

至于描边的颜色，可以选择在颜色选择器中调节，也可以在颜色状态下选择使用取色笔去拾取图片上的某种颜色来描边。


总结

看完cocos2dx字体描边与PS字体描边的过程就知道cocos2dx字体描边与PS字体描边有什么区别吧！最大的区别就是它们的实现方法是不同的。