zoukankan      html  css  js  c++  java
  • cocos2d-x 全面总结--字体描边和制作阴影

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

      ① 利用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;  
    }  

      阴影效果就更简单了,只需要两个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;  
    } 

      这里提到一点,就是具体要创建几个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,这个还在研究,不过它的特效功能着实强大,以后逐步学习。

  • 相关阅读:
    Go 语言简介(下)— 特性
    Array.length vs Array.prototype.length
    【转】javascript Object使用Array的方法
    【转】大话程序猿眼里的高并发架构
    【转】The magic behind array length property
    【转】Build Your own Simplified AngularJS in 200 Lines of JavaScript
    【转】在 2016 年做 PHP 开发是一种什么样的体验?(一)
    【转】大话程序猿眼里的高并发
    php通过token验证表单重复提交
    windows 杀进程软件
  • 原文地址:https://www.cnblogs.com/gl5773477/p/3971436.html
Copyright © 2011-2022 走看看