2019-01-09 18:33:43 blogsun 阅读数 116

Cocos2d-x 3.x的label使用了freetype字体引擎(http://www.freetype.org/),可以很轻松的实现描边和阴影效果。所以本篇文章只针对于sprite来实现描边效果。

varying vec4 v_fragmentColor; // vertex shader传入,setColor设置的颜色
varying vec2 v_texCoord; // 纹理坐标
uniform float outlineSize; // 描边宽度,以像素为单位
uniform vec3 outlineColor; // 描边颜色
uniform vec2 textureSize; // 纹理大小(宽和高),为了计算周围各点的纹理坐标,必须传入它,因为纹理坐标范围是0~1

// 判断在这个角度上距离为outlineSize那一点是不是透明
int getIsStrokeWithAngel(float angel)
{
    int stroke = 0;
    float rad = angel * 0.01745329252; // 这个浮点数是 pi / 180,角度转弧度
    vec2 unit = 1.0 / textureSize.xy;//单位坐标
    vec2 offset = vec2(outlineSize * cos(rad) * unit.x, outlineSize * sin(rad) * unit.y); //偏移量
    float a = texture2D(CC_Texture0, v_texCoord + offset).a;
    if (a >= 0.5)// 我把alpha值大于0.5都视为不透明,小于0.5都视为透明
    {
        stroke = 1;
    }
    return stroke;
}

void main()
{
    vec4 myC = texture2D(CC_Texture0, v_texCoord); // 正在处理的这个像素点的颜色
    if (myC.a >= 0.5) // 不透明,不管,直接返回
    {
        gl_FragColor = v_fragmentColor * myC;
        return;
    }
    //在安卓某些机型(如小米4)会直接崩溃,查找资料发现OpenGL es并不是很支持循环,while和for都不要用
    int strokeCount = 0;
    strokeCount += getIsStrokeWithAngel(0.0);
    strokeCount += getIsStrokeWithAngel(30.0);
    strokeCount += getIsStrokeWithAngel(60.0);
    strokeCount += getIsStrokeWithAngel(90.0);
    strokeCount += getIsStrokeWithAngel(120.0);
    strokeCount += getIsStrokeWithAngel(150.0);
    strokeCount += getIsStrokeWithAngel(180.0);
    strokeCount += getIsStrokeWithAngel(210.0);
    strokeCount += getIsStrokeWithAngel(240.0);
    strokeCount += getIsStrokeWithAngel(270.0);
    strokeCount += getIsStrokeWithAngel(300.0);
    strokeCount += getIsStrokeWithAngel(330.0);

    if (strokeCount > 0) // 四周围至少有一个点是不透明的,这个点要设成描边颜色
    {
        myC.rgb = outlineColor;
        myC.a = 1.0;
    }

    gl_FragColor = v_fragmentColor * myC;
}

大致的逻辑是:
先判断当前像素是否透明,如果不透明则直接返回。如果是透明像素,就判断这个点周围12个方向,每个方向距离当前像素距离是outlineSize的像素点是否透明,只要有一个是非透明像素,就把当前像素点设为描边的颜色,并设置成非透明。
效果如下:
描边

2014-09-24 13:08:20 gl5773477 阅读数 4158

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

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

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

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

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


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

  网上大量博客都讲了这种方式,写的很好,这里给一个链接:http://blog.csdn.net/song_hui_xiang/article/details/17375279

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

/*string     文本 
 *fontName   文本字体类型 
 *fontSize   文本大小 
 *color3     文本颜色 
 *lineWidth  所描边的宽度 
 */  
CCLabelTTF* HelloWorld::textAddStroke(const char* string, const char* fontName, float fontSize,const ccColor3B &color3,float lineWidth)  
{  
    /* 正文CCLabelTTF */
    CCLabelTTF* center = CCLabelTTF::create(string, fontName, fontSize);  
    center->setColor(color3);  
      
    /* 描边CCLabelTTF 上 */
    CCLabelTTF* up = CCLabelTTF::create(string, fontName, fontSize);  
    up->setColor(ccBLACK);  
    up->setPosition(ccp(center->getContentSize().width*0.5, center->getContentSize().height*0.5+lineWidth));  
    center->addChild(up,-1);  
  
    /* 描边CCLabelTTF 下 */
    CCLabelTTF* down = CCLabelTTF::create(string, fontName, fontSize);  
    down->setColor(ccBLACK);  
    down->setPosition(ccp(center->getContentSize().width*0.5, center->getContentSize().height*0.5-lineWidth));  
    center->addChild(down,-1);  
      
    /* 描边CCLabelTTF 左 */ 
    CCLabelTTF* left = CCLabelTTF::create(string, fontName, fontSize);  
    left->setPosition(ccp(center->getContentSize().width*0.5-lineWidth, center->getContentSize().height*0.5));  
    left->setColor(ccBLACK);  
    center->addChild(left,-1);  
      
    /* 描边CCLabelTTF 右 */
    CCLabelTTF* right = CCLabelTTF::create(string, fontName, fontSize);  
    right->setColor(ccBLACK);  
    right->setPosition(ccp(center->getContentSize().width*0.5+lineWidth,center->getContentSize().height*0.5));  
    center->addChild(right,-1);  
      
    return center;  
}  <span style="font-family: verdana, Arial, Helvetica, sans-serif;"> </span>

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

/*string         文本 
 *fontName       文本字体类型 
 *fontSize       文本大小 
 *color3         文本颜色 
 *shadowSize     阴影大小 
 *shadowOpacity  阴影透明度 
 */  
CCLabelTTF* HelloWorld::textAddShadow(const char* string, const char* fontName, float fontSize,const ccColor3B &color3,float shadowSize,float shadowOpacity)  
{  
    /* 阴影label */
    CCLabelTTF* shadow = CCLabelTTF::create(string, fontName, fontSize);  
    shadow->setColor(ccBLACK);  
    shadow->setOpacity(shadowOpacity);  
    
    /* 正文label */
    CCLabelTTF* center = CCLabelTTF::create(string, fontName, fontSize);  
    center->setColor(color3);  
    center->setPosition(ccp(shadow->getContentSize().width*0.5-shadowSize,shadow->getContentSize().height*0.5+shadowSize));  
    shadow->addChild(center);  
      
    return shadow;  
} <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,重叠,最后通过画布就生成带有描边文字的一张纹理图,然后用这张纹理图生成一个精灵放到场景里,完毕。

 

下面先把代码贴上来: 

CCTexture2D* FlyBloodLabel::createStrokeTexture(const char* value,float strokeValue,ccColor3B color)
{
    // float fontSize = m_fontSize - 2 * strokeSize;
    /* 创建一个CCLabelTTF,含有期望字体样式,作为画笔 */
    CCLabelTTF *label = CCLabelTTF::create(value,"Arial",EFFECT_LABEL_FONT_SIZE);
    
    /* 通过label的大小来设置最终生成的纹理图片的大小,strokeValue为描边字体的偏移量,影响粗细 */
    CCSize textureSize = label->getContentSize();
    textureSize.width += 2 * strokeValue;
    textureSize.height += 2 * strokeValue;
    
    /* 监测OpenGl的错误状态 */
    glGetError();
    
    /* 创建一张纹理画布 */
    CCRenderTexture *rt = CCRenderTexture::create(textureSize.width, textureSize.height);
    if(!rt)
    {
        CCLog("create render texture failed !!!!");
        addChild(label);
        return 0;
    }
    
    /* 设置描边的颜色 */
    label->setColor(color);
    
    /* 
     *拿到源文字的混色机制,存储以备恢复,并设置新的目标混色机制
     *混色机制设为:源颜色透明度(影响亮度)和目标颜色(影响颜色)
     */
    ccBlendFunc originalBlend = label->getBlendFunc();
    ccBlendFunc func = { GL_SRC_ALPHA, GL_ONE};
    label->setBlendFunc(func);
    
    /* 这是自定义的一些调整,倾斜了一点 */
    label->setAnchorPoint(ccp(0.5, 0.5));
    label->setRotationX(15);
    
    /* 张开画布,开始绘画 */
    rt->begin();
    for(int i = 0; i < 360; i += 5)//每变化5度绘制一张
    {
        float r = CC_DEGREES_TO_RADIANS(i); //度数格式的转换
        label->setPosition(ccp(textureSize.width * 0.5f + sin(r) * strokeValue,textureSize.height * 0.5f + cos(r) * strokeValue));

        /* CCRenderTexture的用法,在begin和end之间visit的纹理,都会画在CCRenderTexture里面 */
        label->visit();//画了一次该label
    }

    /* 恢复原始的label并绘制在最上层 */
    label->setColor(ccWHITE);
    label->setBlendFunc(originalBlend);
    label->setPosition(ccp(textureSize.width * 0.5f, textureSize.height * 0.5f));
    label->visit();

    /* 在画布上绘制结束,此时会生成一张纹理 */
    rt->end();
    
    /* 取出生成的纹理,添加抗锯齿打磨,并返回 */
    CCTexture2D *texture = rt->getSprite()->getTexture();
    texture->setAntiAliasTexParameters();// setAliasTexParameters();
    
    return texture;
}

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


 

2014-03-04 20:40:31 xufeng0991 阅读数 2210

游戏中经常会用到文字描边和阴影,当cocos2dx中并没有给我们提供,下面是我参考:点击打开链接(http://blog.csdn.net/song_hui_xiang/article/details/17375279)和点击打开链接(http://fengmm521.blog.163.com/blog/static/2509135820138943638777/)自己弄了一个,基本上是一模一样,不喜勿喷!代码如下:

///////////////////////////////////////////////////////////////////////
// 命名空间:窄描边
///////////////////////////////////////////////////////////////////////

思路:多个CCLabelTTF重叠在一起。

头文件

//
//  CLabel.h
//  XXX
//
//  Created by user on 14-3-4.
//
//

#ifndef __XXX__CLabel__
#define __XXX__CLabel__

#include <iostream>
#include "cocos2d.h"

USING_NS_CC;

namespace CLabel{
    /*使用示例
     CCSize size = CCDirector::sharedDirector()->getWinSize();
     
     //创建个背景
     CCLayerColor* whiteLayer = CCLayerColor::create(ccc4(0, 205, 205, 255), size.width, size.height);
     this->addChild(whiteLayer);
     
     //创建描边
     CCLabelTTF* outline = CLabel::textAddOutline("描边 Outline", "Arial", 40, ccWHITE, 1);
     outline->setPosition(ccp(size.width*0.5, size.height*0.7));
     this->addChild(outline);
     
     //创建阴影
     CCLabelTTF* shadow = CLabel::textAddShadow("阴影 Shadow", "Arial", 40, ccWHITE, 2, 200);
     shadow->setPosition(ccp(size.width*0.5, size.height*0.5));
     this->addChild(shadow);
     
     //创建描边加阴影
     CCLabelTTF* outlineShadow = CLabel::textAddOutlineAndShadow("描边加阴影 OutlineShadow", "Arial", 40, ccWHITE, 1, 4, 200);
     outlineShadow->setPosition(ccp(size.width*0.5, size.height*0.3));
     this->addChild(outlineShadow);
     */
    
    //**************************************************************************
    // 给文字添加描边
    //**************************************************************************
    CCLabelTTF* textAddOutline(const char* string,          // 显示的文字
                               const char* fontName,        // 字体名称
                               float fontSize,              // 字体大小
                               const ccColor3B &color3,     // 字体颜色
                               float lineWidth);            // 描边宽度
    
    //**************************************************************************
    // 添加阴影
    CCLabelTTF* textAddShadow(const char* string,           // 显示的文字
                              const char* fontName,         // 字体名称
                              float fontSize,               // 字体大小
                              const ccColor3B &color3,      // 字体颜色
                              float shadowSize,             // 阴影宽度
                              float shadowOpacity);         // 阴影透明度
    //**************************************************************************
    
    //**************************************************************************
    // 既添加描边又添加阴影
    //**************************************************************************
    CCLabelTTF* textAddOutlineAndShadow(const char* string,     // 显示的文字
                                        const char* fontName,   // 字体名称
                                        float fontSize,         // 字体大小
                                        const ccColor3B &color3,// 阴影颜色
                                        float lineWidth,        // 字体宽度
                                        float shadowSize,       // 阴影宽度
                                        float shadowOpacity);   // 阴影透明度
};

#endif /* defined(__XXX__CLabel__) */

// 源文件

//
//  CLabel.cpp
//  XXX
//
//  Created by user on 14-3-4.
//
//

#include "CLabel.h"

namespace CLabel{
    /*
     制作文字描边效果是很简单的,我们写好一段文字之后,也就是创建出一个CCLabelTTF,称之为正文CCLabelTTF。然后再创建出4个CCLabelTTF,颜色为黑色,大小同正文CCLabelTTF相同,
     称之为描边CCLabelTTF。说到这大家可能已经明白了,没错,就是把4个描边CCLabelTTF放于正文CCLabelTTF的下面,分别于左右上下与正文CCLabelTTF错开,这样描边效果就实现啦。。
     
     *string     文本
     *fontName   文本字体类型
     *fontSize   文本大小
     *color3     文本颜色
     *lineWidth  所描边的宽度
     */
    CCLabelTTF* textAddOutline(const char* string, const char* fontName, float fontSize,const ccColor3B &color3,float lineWidth)
    {
        //描边CCLabelTTF 左
        CCLabelTTF* left = CCLabelTTF::create(string, fontName, fontSize);
        left->setColor(ccBLACK);
        
        //描边CCLabelTTF 右
        CCLabelTTF* right = CCLabelTTF::create(string, fontName, fontSize);
        right->setColor(ccBLACK);
        right->setPosition(ccp(left->getContentSize().width*0.5+lineWidth*2,left->getContentSize().height*0.5));
        left->addChild(right);
        
        //描边CCLabelTTF 上
        CCLabelTTF* up = CCLabelTTF::create(string, fontName, fontSize);
        up->setColor(ccBLACK);
        up->setPosition(ccp(left->getContentSize().width*0.5+lineWidth, left->getContentSize().height*0.5+lineWidth));
        left->addChild(up);
        
        //描边CCLabelTTF 下
        CCLabelTTF* down = CCLabelTTF::create(string, fontName, fontSize);
        down->setColor(ccBLACK);
        down->setPosition(ccp(left->getContentSize().width*0.5+lineWidth, left->getContentSize().height*0.5-lineWidth));
        left->addChild(down);
        
        //正文CCLabelTTF
        CCLabelTTF* center = CCLabelTTF::create(string, fontName, fontSize);
        center->setColor(color3);
        center->setPosition(ccp(left->getContentSize().width*0.5+lineWidth, left->getContentSize().height*0.5));
        left->addChild(center);
        
        return left;
    }


    /*
     给文字添加阴影,一看就懂的。。。
     *string         文本
     *fontName       文本字体类型
     *fontSize       文本大小
     *color3         文本颜色
     *shadowSize     阴影大小
     *shadowOpacity  阴影透明度
     
     */
    CCLabelTTF* textAddShadow(const char* string, const char* fontName, float fontSize,const ccColor3B &color3,float shadowSize,float shadowOpacity)
    {
        CCLabelTTF* shadow = CCLabelTTF::create(string, fontName, fontSize);
        shadow->setColor(ccBLACK);
        shadow->setOpacity(shadowOpacity);
        
        CCLabelTTF* center = CCLabelTTF::create(string, fontName, fontSize);
        center->setColor(color3);
        center->setPosition(ccp(shadow->getContentSize().width*0.5-shadowSize, shadow->getContentSize().height*0.5+shadowSize));
        shadow->addChild(center);
        
        return shadow;
    }


    //既添加描边又添加阴影
    CCLabelTTF* textAddOutlineAndShadow(const char* string, const char* fontName, float fontSize,const ccColor3B &color3,float lineWidth,float shadowSize,float shadowOpacity)
    {
        CCLabelTTF* shadow = CCLabelTTF::create(string, fontName, fontSize);
        shadow->setColor(ccBLACK);
        shadow->setOpacity(shadowOpacity);
        
        CCLabelTTF* left = CCLabelTTF::create(string, fontName, fontSize);
        left->setColor(ccBLACK);
        left->setPosition(ccp(shadow->getContentSize().width*0.5-shadowSize, shadow->getContentSize().height*0.5+shadowSize));
        shadow->addChild(left);
        
        CCLabelTTF* right = CCLabelTTF::create(string, fontName, fontSize);
        right->setColor(ccBLACK);
        right->setPosition(ccp(left->getContentSize().width*0.5+lineWidth*2,left->getContentSize().height*0.5));
        left->addChild(right);
        
        CCLabelTTF* up = CCLabelTTF::create(string, fontName, fontSize);
        up->setColor(ccBLACK);
        up->setPosition(ccp(left->getContentSize().width*0.5+lineWidth, left->getContentSize().height*0.5+lineWidth));
        left->addChild(up);
        
        CCLabelTTF* down = CCLabelTTF::create(string, fontName, fontSize);
        down->setColor(ccBLACK);
        down->setPosition(ccp(left->getContentSize().width*0.5+lineWidth, left->getContentSize().height*0.5-lineWidth));
        left->addChild(down);
        
        CCLabelTTF* center = CCLabelTTF::create(string, fontName, fontSize);
        center->setColor(color3);
        center->setPosition(ccp(left->getContentSize().width*0.5+lineWidth, left->getContentSize().height*0.5));
        left->addChild(center);
        
        return shadow;
    }
}

使用时,加上命名空间就可以拉,下面是使用示例:

     CCSize size = CCDirector::sharedDirector()->getWinSize();
     
     //创建描边
     CCLabelTTF* outline = CLabel::textAddOutline("描边 Outline", "Arial", 40, ccWHITE, 1);
     outline->setPosition(ccp(size.width*0.5, size.height*0.7));
     this->addChild(outline);
     
     //创建阴影
     CCLabelTTF* shadow = CLabel::textAddShadow("阴影 Shadow", "Arial", 40, ccWHITE, 2, 200);
     shadow->setPosition(ccp(size.width*0.5, size.height*0.5));
     this->addChild(shadow);
     
     //创建描边加阴影
     CCLabelTTF* outlineShadow = CLabel::textAddOutlineAndShadow("描边加阴影 OutlineShadow", "Arial", 40, ccWHITE, 1, 4, 200);
     outlineShadow->setPosition(ccp(size.width*0.5, size.height*0.3));
     this->addChild(outlineShadow);

// 效果图


///////////////////////////////////////////////////////////////////////
// 命名空间:宽描边
///////////////////////////////////////////////////////////////////////
//头文件
class CCStrokeLabel : public CCNode {
public:
    bool init();
    static CCStrokeLabel* create(CCLabelTTF* labelTTF,ccColor3B fullColor,ccColor3B StrokeColor,float strokeSize);
    float getStrokeSize();
    void setStrokeSize(float strokeSize);
    
private:
    CCSprite* m_sprite;
    CCLabelTTF* m_label;
    ccColor3B m_fullColor;
    ccColor3B m_StrokeColor;
    float m_strokeSize;
};

//源文件

CCStrokeLabel* CCStrokeLabel::create(CCLabelTTF* labelTTF,ccColor3B fullColor,ccColor3B StrokeColor,float strokeSize)
{
    CCStrokeLabel* tmp = new CCStrokeLabel;
    tmp->autorelease();
    tmp->m_label = labelTTF;
    tmp->m_fullColor = fullColor;
    tmp->m_StrokeColor = StrokeColor;
    tmp->m_strokeSize = strokeSize;
    tmp->init();
    
    return tmp;
}

bool CCStrokeLabel::init()
{
    float strokeSize = getStrokeSize();
    CCSize textureSize = m_label->getContentSize();
    textureSize.width += 2 * strokeSize;
    textureSize.height += 2 * strokeSize;
    
    glGetError();
    CCRenderTexture *rt = CCRenderTexture::create(
                                                  textureSize.width, textureSize.height);
    if(!rt)
    {
        CCLOG("CCStrokeLabel::init:rt == NULL");
        addChild(m_label);
        return false;
    }
    
    m_label->setColor(m_fullColor);
    
    ccBlendFunc originalBlend = m_label->getBlendFunc();
    ccBlendFunc func = { GL_SRC_ALPHA, GL_ONE};
    m_label->setBlendFunc(func);
    
    m_label->setAnchorPoint(ccp(0.5, 0.5));
    
    rt->begin();
    for(int i = 0; i < 360; i += 15)
    {
        float r = CC_DEGREES_TO_RADIANS(i);
        m_label->setPosition(ccp(
                                 textureSize.width * 0.5f + sin(r) * strokeSize,
                                 textureSize.height * 0.5f + cos(r) * strokeSize));
        m_label->visit();
    }
    m_label->setColor(m_StrokeColor);
    m_label->setBlendFunc(originalBlend);
    m_label->setPosition(ccp(textureSize.width * 0.5f, textureSize.height * 0.5f));
    m_label->visit();
    rt->end();
    
    CCTexture2D *texture = rt->getSprite()->getTexture();
    texture->setAliasTexParameters();
    m_sprite = CCSprite::createWithTexture(rt->getSprite()->getTexture());
    setContentSize(m_sprite->getContentSize());
    m_sprite->setAnchorPoint(ccp(0, 0));
    m_sprite->setPosition(ccp(0, 0));
    ((CCSprite *)m_sprite)->setFlipY(true);
    addChild(m_sprite);
    
    return true;
}

float CCStrokeLabel::getStrokeSize()
{
    return m_strokeSize;
}

void CCStrokeLabel::setStrokeSize(float strokeSize)
{
    m_strokeSize = strokeSize;
}

// 使用示例

    CCLabelTTF* ttf = CCLabelTTF::create("ttflable","Arial",50);
    CCStrokeLabel* ttfStroke = CCStrokeLabel::create(ttf,ccc3(255,0,0),ccc3(0,0,255),2.0f);
    ttfStroke->setPosition(ccp(250,250));
    this->addChild(ttfStroke,2);
    
    CCLabelTTF* ttfx = CCLabelTTF::create("ttf label test white","Arial",50);
    CCStrokeLabel* ttfStrokeWhite = CCStrokeLabel::create(ttfx,ccc3(0,255,0),ccc3(255,255,255),4.0f);
    ttfStrokeWhite->setPosition(ccp(255,500));
    this->addChild(ttfStrokeWhite,2);

// 效果图


2019-07-15 12:35:57 weixin_30222723 阅读数 7

转载地址:http://www.taikr.com/group/2/thread/1606

 

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

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

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

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

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

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

网上大量博客都讲了这种方式,写的很好,这里给一个链接:http://www.taikr.com/

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

【cpp】 view plaincopy在CODE上查看代码片派生到我的代码片

/*string     文本

*fontName   文本字体类型

*fontSize   文本大小

*color3     文本颜色

*lineWidth  所描边的宽度

*/

CCLabelTTF* HelloWorld::textAddStroke(const char* string, const char* fontName, float fontSize,const ccColor3B &color3,float lineWidth)

{

/* 正文CCLabelTTF */

CCLabelTTF* center = CCLabelTTF::create(string, fontName, fontSize);

center->setColor(color3);

/* 描边CCLabelTTF 上 */

CCLabelTTF* up = CCLabelTTF::create(string, fontName, fontSize);

up->setColor(ccBLACK);

up->setPosition(ccp(center->getContentSize().width*0.5, center->getContentSize().height*0.5+lineWidth));

center->addChild(up,-1);

/* 描边CCLabelTTF 下 */

CCLabelTTF* down = CCLabelTTF::create(string, fontName, fontSize);

down->setColor(ccBLACK);

down->setPosition(ccp(center->getContentSize().width*0.5, center->getContentSize().height*0.5-lineWidth));

center->addChild(down,-1);

/* 描边CCLabelTTF 左 */

CCLabelTTF* left = CCLabelTTF::create(string, fontName, fontSize);

left->setPosition(ccp(center->getContentSize().width*0.5-lineWidth, center->getContentSize().height*0.5));

left->setColor(ccBLACK);

center->addChild(left,-1);

/* 描边CCLabelTTF 右 */

CCLabelTTF* right = CCLabelTTF::create(string, fontName, fontSize);

right->setColor(ccBLACK);

right->setPosition(ccp(center->getContentSize().width*0.5+lineWidth,center->getContentSize().height*0.5));

center->addChild(right,-1);

return center;

}  <span style="font-family: verdana, Arial, Helvetica, sans-serif;"> </span>

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

【cpp】 view plaincopy在CODE上查看代码片派生到我的代码片

/*string         文本

*fontName       文本字体类型

*fontSize       文本大小

*color3         文本颜色

*shadowSize     阴影大小

*shadowOpacity  阴影透明度

*/

CCLabelTTF* HelloWorld::textAddShadow(const char* string, const char* fontName, float fontSize,const ccColor3B &color3,float shadowSize,float shadowOpacity)

{

/* 阴影label */

CCLabelTTF* shadow = CCLabelTTF::create(string, fontName, fontSize);

shadow->setColor(ccBLACK);

shadow->setOpacity(shadowOpacity);

/* 正文label */

CCLabelTTF* center = CCLabelTTF::create(string, fontName, fontSize);

center->setColor(color3);

center->setPosition(ccp(shadow->getContentSize().width*0.5-shadowSize,shadow->getContentSize().height*0.5+shadowSize));

shadow->addChild(center);

return shadow;

} <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】 view plaincopy在CODE上查看代码片派生到我的代码片

CCTexture2D* FlyBloodLabel::createStrokeTexture(const char* value,float strokeValue,ccColor3B color)

{

// float fontSize = m_fontSize - 2 * strokeSize;

/* 创建一个CCLabelTTF,含有期望字体样式,作为画笔 */

CCLabelTTF *label = CCLabelTTF::create(value,"Arial",EFFECT_LABEL_FONT_SIZE);

/* 通过label的大小来设置最终生成的纹理图片的大小,strokeValue为描边字体的偏移量,影响粗细 */

CCSize textureSize = label->getContentSize();

textureSize.width += 2 * strokeValue;

textureSize.height += 2 * strokeValue;

/* 监测OpenGl的错误状态 */

glGetError();

/* 创建一张纹理画布 */

CCRenderTexture *rt = CCRenderTexture::create(textureSize.width, textureSize.height);

if(!rt)

{

CCLog("create render texture failed !!!!");

addChild(label);

return 0;

}

/* 设置描边的颜色 */

label->setColor(color);

/*

*拿到源文字的混色机制,存储以备恢复,并设置新的目标混色机制

*混色机制设为:源颜色透明度(影响亮度)和目标颜色(影响颜色)

*/

ccBlendFunc originalBlend = label->getBlendFunc();

ccBlendFunc func = { GL_SRC_ALPHA, GL_ONE};

label->setBlendFunc(func);

/* 这是自定义的一些调整,倾斜了一点 */

label->setAnchorPoint(ccp(0.5, 0.5));

label->setRotationX(15);

/* 张开画布,开始绘画 */

rt->begin();

for(int i = 0; i < 360; i += 5)//每变化5度绘制一张

{

float r = CC_DEGREES_TO_RADIANS(i); //度数格式的转换

label->setPosition(ccp(textureSize.width * 0.5f + sin(r) * strokeValue,textureSize.height * 0.5f + cos(r) * strokeValue));

/* CCRenderTexture的用法,在begin和end之间visit的纹理,都会画在CCRenderTexture里面 */

label->visit();//画了一次该label

}

/* 恢复原始的label并绘制在最上层 */

label->setColor(ccWHITE);

label->setBlendFunc(originalBlend);

label->setPosition(ccp(textureSize.width * 0.5f, textureSize.height * 0.5f));

label->visit();

/* 在画布上绘制结束,此时会生成一张纹理 */

rt->end();

/* 取出生成的纹理,添加抗锯齿打磨,并返回 */

CCTexture2D *texture = rt->getSprite()->getTexture();

texture->setAntiAliasTexParameters();// setAliasTexParameters();

return texture;

}

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

转载于:https://www.cnblogs.com/crazytiger/p/4382612.html

2014-07-08 11:38:30 u011794223 阅读数 1247

cocos2dx 利用CCLabelTTF设置字的水平间距与垂直间距

 在项目中对于文字的显示要求会有很多种,比如加描边、加阴影、个别文字加颜色、字的行间距与列间距等等一些。。最近在看cocos2d-x源码时发现引擎确实很强大里面有对文字的加描边与阴影的创建方法,但我在写实际运用时发现对文字加描边的效果不是很好,而且也没有找到可以设置字的行间距与列间距的方法,所以就写下了下面的方法以实现设置字的行间距与列间距,支持中英文状态下混输,支持自动换行。。有不好的地方请大家多多点评。。谢谢。。。。!

.h文件
  1. #ifndef __HELLOWORLD_SCENE_H__  
  2. #define __HELLOWORLD_SCENE_H__  
  3.   
  4. #include "cocos2d.h"  
  5.   
  6. using namespace cocos2d;  
  7. using namespace std;  
  8.   
  9. class HelloWorld : public cocos2d::CCLayer  
  10. {  
  11. public:  
  12.     virtual bool init();  
  13.   
  14.     static cocos2d::CCScene* scene();  
  15.       
  16.     CCLabelTTF* horizontalSpacingANDverticalSpacing(string _string, const char *fontName, float fontSize, float horizontalSpacing, float verticalSpacing, float lineWidth);  
  17.   
  18.     CREATE_FUNC(HelloWorld);  
  19. };  
  20.   
  21. #endif // __HELLOWORLD_SCENE_H__  

.cpp文件
  1. #include "HelloWorldScene.h"  
  2. #include "SimpleAudioEngine.h"  
  3.   
  4.   
  5. CCScene* HelloWorld::scene()  
  6. {  
  7.     CCScene *scene = CCScene::create();  
  8.     HelloWorld *layer = HelloWorld::create();  
  9.     scene->addChild(layer);  
  10.     return scene;  
  11. }  
  12.   
  13. bool HelloWorld::init()  
  14. {  
  15.     if ( !CCLayer::init() )  
  16.     {  
  17.         return false;  
  18.     }  
  19.       
  20.     CCSize size = CCDirector::sharedDirector()->getWinSize();  
  21.       
  22.     string str = "对敌人造成4,000的伤害、回合数延后一回合(上限10)当前战斗中,弱点属性伤害加成10%的上升。(不可重复)";  
  23.     //水平间距与垂直间距都是10像素,每行宽为300像素。  
  24.     CCLabelTTF* ttf = horizontalSpacingANDverticalSpacing(str, "Helvetica", 26, 10, 10, 300);  
  25.     ttf->setPosition(ccp(size.width*0.2, size.height*0.8));  
  26.     this->addChild(ttf);  
  27.       
  28.     return true;  
  29. }  
  30.   
  31.   
  32. /* 
  33.  horizontalSpacing: 水平间距 
  34.  verticalSpacing:   垂直间距 
  35.  lineWidth:         一行的最大宽度 
  36.  */  
  37. CCLabelTTF* HelloWorld::horizontalSpacingANDverticalSpacing(string _string, const char *fontName, float fontSize, float horizontalSpacing, float verticalSpacing, float lineWidth)  
  38. {  
  39.     CCArray* labelTTF_arr = CCArray::create();  
  40.     int index = 0;  
  41.     int index_max = strlen(_string.c_str());  
  42.     bool is_end = true;  
  43.     while (is_end) {  
  44.         if (_string[index] >= 0 && _string[index] <= 127) {  
  45.             string englishStr =_string.substr(index,1).c_str();  
  46.             labelTTF_arr->addObject(CCLabelTTF::create(englishStr.c_str(), fontName, fontSize));  
  47.             index+= 1;  
  48.         }  
  49.         else{  
  50.             string chineseStr =_string.substr(index,3).c_str();  
  51.             labelTTF_arr->addObject(CCLabelTTF::create(chineseStr.c_str(), fontName, fontSize));  
  52.             index+= 3;  
  53.         }  
  54.         if (index>=index_max) {  
  55.             is_end=false;  
  56.         }  
  57.     }  
  58.     //以上步骤是根据ASCII码找出中英文字符,并创建成一个CCLabelTTF对象存入labelTTF_arr数组中。  
  59.       
  60.       
  61.     //下面创建的原理是在CCLabelTTF对象上添加子对象CCLabelTTF,以此组合成一句话,以左上角第一个字为锚点。。  
  62.     CCLabelTTF* returnTTF = (CCLabelTTF*)labelTTF_arr->objectAtIndex(0);  
  63.     float nowWidth = returnTTF->getContentSize().width;  
  64.     CCLabelTTF* dangqiangTTF = returnTTF;  
  65.     CCLabelTTF* lineBeginTTF = returnTTF;  
  66.       
  67.     int arr_count = labelTTF_arr->count();  
  68.     for (int i=1; i < arr_count; i++) {  
  69.         CCLabelTTF* beforeTTF = (CCLabelTTF*)labelTTF_arr->objectAtIndex(i);  
  70.         beforeTTF->setAnchorPoint(ccp(0, 0.5));  
  71.         nowWidth+=beforeTTF->getContentSize().width;  
  72.         if (nowWidth >= lineWidth) {  
  73.             nowWidth = returnTTF->getContentSize().width;  
  74.             dangqiangTTF = lineBeginTTF;  
  75.             beforeTTF->setPosition(ccp(0, -dangqiangTTF->getContentSize().height*0.5-verticalSpacing));  
  76.             lineBeginTTF = beforeTTF;  
  77.         }else{  
  78.             beforeTTF->setPosition(ccp(dangqiangTTF->getContentSize().width+horizontalSpacing, dangqiangTTF->getContentSize().height*0.5));  
  79.         }  
  80.         dangqiangTTF->addChild(beforeTTF);  
  81.         dangqiangTTF = beforeTTF;  
  82.     }  
  83.       
  84.     return returnTTF;  
  85. }  

cocos2dx 3.x Label使用

阅读数 138

没有更多推荐了,返回首页