1. 程式人生 > >cocos2d-x 利用CCLabelTTF製作文字描邊與陰影效果的實現方法

cocos2d-x 利用CCLabelTTF製作文字描邊與陰影效果的實現方法

感謝點評與關注,歡迎轉載與分享。
勤奮努力,持之以恆!

方法一:

cocos2d-x 已經為我們封裝好了,方法就在類CCLabelTTF裡面。

/** enable or disable shadow for the label */
    void enableShadow(const CCSize &shadowOffset, float shadowOpacity, float shadowBlur, bool mustUpdateTexture = true);
    
    /** disable shadow rendering */
    void disableShadow(bool mustUpdateTexture = true);
    
    /** enable or disable stroke */
    void enableStroke(const ccColor3B &strokeColor, float strokeSize, bool mustUpdateTexture = true);
    
    /** disable stroke */
    void disableStroke(bool mustUpdateTexture = true);


方法二:自己實現

在方法一達不到效果的情況下就只能自己實現了。

.h檔案

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
USING_NS_CC;
using namespace std;

class HelloWorld : public CCLayer
{
public:
    virtual bool init();
    static CCScene* scene();
    CREATE_FUNC(HelloWorld);
    
    
    //給文字新增描邊
    CCLabelTTF* textAddStroke(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 // __HELLOWORLD_SCENE_H__


.cpp檔案

#include "HelloWorldScene.h"
#include "SimpleAudioEngine.h"

using namespace cocos2d;
using namespace CocosDenshion;

CCScene* HelloWorld::scene()
{
    CCScene *scene = CCScene::create();
    HelloWorld *layer = HelloWorld::create();
    scene->addChild(layer);
    return scene;
}
bool HelloWorld::init()
{
    if ( !CCLayer::init() )
    {
        return false;
    }

    
    CCSize size = CCDirector::sharedDirector()->getWinSize();
    
    //建立個背景
    CCLayerColor* whiteLayer = CCLayerColor::create(ccc4(0, 205, 205, 255), size.width, size.height);
    this->addChild(whiteLayer);
    
    //建立描邊
    CCLabelTTF* outline = textAddStroke("描邊 Stroke", "Arial", 40, ccWHITE, 1);
    outline->setPosition(ccp(size.width*0.5, size.height*0.7));
    this->addChild(outline);
    
    //建立陰影
    CCLabelTTF* shadow = textAddShadow("陰影 Shadow", "Arial", 40, ccWHITE, 2, 200);
    shadow->setPosition(ccp(size.width*0.5, size.height*0.5));
    this->addChild(shadow);
    
    //建立描邊加陰影
    CCLabelTTF* outlineShadow = textAddOutlineAndShadow("描邊加陰影 OutlineShadow", "Arial", 40, ccWHITE, 1, 4, 200);
    outlineShadow->setPosition(ccp(size.width*0.5, size.height*0.3));
    this->addChild(outlineShadow);
    
    return true;
}

/*
 製作文字描邊效果是很簡單的,我們寫好一段文字之後,也就是創建出一個CCLabelTTF,稱之為正文CCLabelTTF。然後再創建出4個CCLabelTTF,顏色為黑色,大小同正文CCLabelTTF相同,
 稱之為描邊CCLabelTTF。說到這大家可能已經明白了,沒錯,就是把4個描邊CCLabelTTF放於正文CCLabelTTF的下面,分別於左右上下與正文CCLabelTTF錯開,這樣描邊效果就實現啦。。
 
 *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;
}


/*
 給文字新增陰影,一看就懂的。。。
 *string         文字
 *fontName       文字字型型別
 *fontSize       文字大小
 *color3         文字顏色
 *shadowSize     陰影大小
 *shadowOpacity  陰影透明度
 */
CCLabelTTF* HelloWorld::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* HelloWorld::textAddOutlineAndShadow(const char* string, const char* fontName, float fontSize,const ccColor3B &color3,float lineWidth,float shadowSize,float shadowOpacity)
{
    CCLabelTTF* center = textAddStroke(string, fontName, fontSize, color3, lineWidth);
    
    CCLabelTTF* shadow = CCLabelTTF::create(string, fontName, fontSize);
    shadow->setPosition(ccp(center->getContentSize().width*0.5+shadowSize, center->getContentSize().height*0.5-shadowSize));
    shadow->setColor(ccBLACK);
    shadow->setOpacity(shadowOpacity);
    center->addChild(shadow,-1);
    
    return center;
}


效果如圖: