对于cocos2dx 描边原理,如果不考虑效率的话,我们可以使用下面的3种方式来做一下:

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

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

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

本文主要研究前两种。前两种方式从原理来说都是利用多个CCLabelTTF的重叠来做的,只不过第二种方式是使用CCLabelTTF绘制了一个带有描边效果的文字图片。

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

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

  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.        
  13.     /* 描边CCLabelTTF 上 */
  14.     CCLabelTTF* up = CCLabelTTF::create(string, fontName, fontSize);  
  15.     up->setColor(ccBLACK);  
  16.     up->setPosition(ccp(center->getContentSize().width*0.5, center->getContentSize().height*0.5+lineWidth));  
  17.     center->addChild(up,-1);  
  18.    
  19.     /* 描边CCLabelTTF 下 */
  20.     CCLabelTTF* down = CCLabelTTF::create(string, fontName, fontSize);  
  21.     down->setColor(ccBLACK);  
  22.     down->setPosition(ccp(center->getContentSize().width*0.5, center->getContentSize().height*0.5-lineWidth));  
  23.     center->addChild(down,-1);  
  24.        
  25.     /* 描边CCLabelTTF 左 */ 
  26.     CCLabelTTF* left = CCLabelTTF::create(string, fontName, fontSize);  
  27.     left->setPosition(ccp(center->getContentSize().width*0.5-lineWidth, center->getContentSize().height*0.5));  
  28.     left->setColor(ccBLACK);  
  29.     center->addChild(left,-1);  
  30.        
  31.     /* 描边CCLabelTTF 右 */
  32.     CCLabelTTF* right = CCLabelTTF::create(string, fontName, fontSize);  
  33.     right->setColor(ccBLACK);  
  34.     right->setPosition(ccp(center->getContentSize().width*0.5+lineWidth,center->getContentSize().height*0.5));  
  35.     center->addChild(right,-1);  
  36.        
  37.     return center;  
  38. }  <span style="font-family: verdana, Arial, Helvetica, sans-serif;">&nbsp;</span>
阴影效果就更简单了,只需要两个label,一个阴影用的label和正文label,只需要设置阴影label:颜色、透明度和位置偏移即可。

  1. /*string         文本 
  2.  *fontName       文本字体类型 
  3.  *fontSize       文本大小 
  4.  *color3         文本颜色 
  5.  *shadowSize     阴影大小 
  6.  *shadowOpacity  阴影透明度 
  7.  */  
  8. CCLabelTTF* HelloWorld::textAddShadow(const char* string, const char* fontName, float fontSize,const ccColor3B &color3,float shadowSize,float shadowOpacity)  
  9. {  
  10.     /* 阴影label */
  11.     CCLabelTTF* shadow = CCLabelTTF::create(string, fontName, fontSize);  
  12.     shadow->setColor(ccBLACK);  
  13.     shadow->setOpacity(shadowOpacity);  
  14.      
  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.        
  21.     return shadow;  
  22. } <span style="font-family: verdana, Arial, Helvetica, sans-serif;">&nbsp;</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}的混合机制。

好了,那么我们来了解一下Cocos2d-x的渲染是怎么做的。

在Cocos2d-x中的可渲染的节点都是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,重叠,最后通过画布就生成带有描边文字的一张纹理图,然后用这张纹理图生成一个精灵放到场景里,完毕。

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