在遊戲中有時了為了突顯前景元素，需要對背景進行一些模糊化處理，如下圖所示

雖然cocos2d-x 3.x提供了新的使用者模糊化的shader指令碼，但根據實現方式的不同仍然會有很大區別。

方案0：對所有背景上所有精靈進行模糊化

最不可取的方案，多數情況下並不能達到預期效果，而且效率低，原因見以下兩圖：

第1張黑色背景是引擎示例中的效果，第2張是我在示例程式碼中加了一個白色背景後的效果。

這裡的問題是，實際上3.x版本提供shader指令碼無法很好的處理帶有透明度的圖片，由於示例預設都是黑色背景，因此無法看出問題，而在白色背景下，所有透明的地方都被處理成了黑色。相信現在遊戲中即使背景也會有大量帶有透明區域的圖片，況且當我們我們模糊處理的時候經常也需要處理前景圖片，那麼這個問題完全不能忽視了。

我本人對shader指令碼並不太熟悉，不過猜測應該可以靠修改shader指令碼解決。但即使如此，對場景中多個精靈進行模糊化，效率如何呢？我們來看方案1。

方案1：擷取螢幕生成一個精靈作為臨時背景，並對此精靈進行模糊化

基本思路是使用渲染到紋理技術生成一個臨時的圖片精靈，將此精靈置於場景最上層（即Zorder高於其他精靈），成為一個假背景，而把需要突顯的元素，再置於這個精靈之上。實現很容易，效果如圖：

粗略看貌似沒問題，但請注意左下角的幀率。實際上即使只對一個960x640尺寸的精靈進行模糊化，效率也非常低，長期保持在20幀以下。雖然這裡我的執行環境是整合顯示卡，這也是造成幀率的低的原因之一，但桌上型電腦尚且如此，移動裝置上很難表現的更好，況且移動裝置還要耗電和發熱問題，效率問題必須重視。於是便有了方案2。

方案2：用模糊化後的精靈生成一個普通精靈作為臨時背景

效果如圖：

幀數恢復到了60左右，經我在手機上測試，對1280x720的圖片進行這樣的處理，也幾乎沒有問題，僅僅會在生成模糊圖的一刻會瞬間降到40幀左右，之後會迅速恢復至60幀。

以下是實現程式碼：

#include "HelloWorldScene.h"

USING_NS_CC;

//////////////////////////////////////////////////////////////////////////
//精靈模糊類
//////////////////////////////////////////////////////////////////////////
class SpriteBlur : public cocos2d::Sprite
{
public:
    SpriteBlur();
    ~SpriteBlur();
    static SpriteBlur* create(cocos2d::Sprite* pSprite, const float fRadius = 8.0f, const float fSampleNum = 8.0f);
    bool initWithTexture(cocos2d::Texture2D* pTexture, const cocos2d::Rect&  rRect);
    void initGLProgram();

    void setBlurRadius(float fRadius);
    void setBlurSampleNum(float fSampleNum);

protected:
    float fBlurRadius_;
    float fBlurSampleNum_;
};

SpriteBlur::SpriteBlur()
    : fBlurRadius_(0.0f)
    , fBlurSampleNum_(0.0f)
{

}

SpriteBlur::~SpriteBlur()
{

}

SpriteBlur* SpriteBlur::create(cocos2d::Sprite* pSprite, const float fRadius, const float fSampleNum)
{
    SpriteBlur* pRet = new (std::nothrow) SpriteBlur();
    if (nullptr == pRet)
        return nullptr;
    pRet->fBlurRadius_ = fRadius;
    pRet->fBlurSampleNum_ = fSampleNum;
    if (pRet->initWithSpriteFrame(pSprite->getSpriteFrame()))
        pRet->autorelease();
    else
        CC_SAFE_DELETE(pRet);
    return pRet;
}

bool SpriteBlur::initWithTexture(cocos2d::Texture2D* texture, const cocos2d::Rect& rect)
{
    if (Sprite::initWithTexture(texture, rect))
    {
#if CC_ENABLE_CACHE_TEXTURE_DATA
        auto listener = EventListenerCustom::create(EVENT_RENDERER_RECREATED, [this](EventCustom* event){
            setGLProgram(nullptr);
            initGLProgram();
        });

        _eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);
#endif
        initGLProgram();
        return true;
    }
    return false;
}

void SpriteBlur::initGLProgram()
{
    GLchar * fragSource = (GLchar*)cocos2d::String::createWithContentsOfFile(
        cocos2d::FileUtils::getInstance()->fullPathForFilename("shaders/blur.fsh").c_str())->getCString();
    auto program = cocos2d::GLProgram::createWithByteArrays(ccPositionTextureColor_noMVP_vert, fragSource);

    auto glProgramState = cocos2d::GLProgramState::getOrCreateWithGLProgram(program);
    setGLProgramState(glProgramState);

    auto size = getTexture()->getContentSizeInPixels();
    getGLProgramState()->setUniformVec2("resolution", size);
    getGLProgramState()->setUniformFloat("blurRadius", fBlurRadius_);
    getGLProgramState()->setUniformFloat("sampleNum", fBlurSampleNum_);
}


void SpriteBlur::setBlurRadius(float radius)
{
    fBlurRadius_ = radius;
    getGLProgramState()->setUniformFloat("blurRadius", fBlurRadius_);
}

void SpriteBlur::setBlurSampleNum(float num)
{
    fBlurSampleNum_ = num;
    getGLProgramState()->setUniformFloat("sampleNum", fBlurSampleNum_);
}

//////////////////////////////////////////////////////////////////////////
//精靈模糊化函式
//////////////////////////////////////////////////////////////////////////
cocos2d::RenderTexture* SpriteBlurer(cocos2d::Sprite* pSprite, const float fRadius = 8.0f, const float fSampleNum = 8.0f)
{
    //模糊化的臨時精靈
    auto pSptBlur = SpriteBlur::create(pSprite, fRadius, fSampleNum);
    pSptBlur->setRotationSkewX(180.0f);
    pSptBlur->setPositionX(pSptBlur->getContentSize().width / 2);
    pSptBlur->setPositionY(pSptBlur->getContentSize().height / 2);
    //使用精靈尺寸初始化一個空的渲染紋理物件
    cocos2d::RenderTexture* textureScreen =
        cocos2d::RenderTexture::create(pSptBlur->getContentSize().width, pSptBlur->getContentSize().height);
    //開始獲取
    textureScreen->beginWithClear(0.0f, 0.0f, 0.0f, 0.0f);
    //遍歷節點物件，填充紋理到texure中
    pSptBlur->visit();
    //結束獲取
    textureScreen->end();
    return textureScreen;
}

//////////////////////////////////////////////////////////////////////////
//截圖函式
//////////////////////////////////////////////////////////////////////////
cocos2d::RenderTexture* ScreenShot(const bool bIsSave, std::function<void(cocos2d::RenderTexture*, const std::string&)> pFuncCallback)

{
    //使用螢幕尺寸初始化一個空的渲染紋理物件
    Size sizeWin = Director::getInstance()->getWinSize();
    cocos2d::RenderTexture* textureScreen =
        cocos2d::RenderTexture::create(sizeWin.width, sizeWin.height);
    //清除資料並開始獲取
    textureScreen->beginWithClear(0.0f, 0.0f, 0.0f, 0.0f);
    //遍歷場景節點物件，填充紋理到texure中
    cocos2d::Director::getInstance()->getRunningScene()->visit();
    //結束獲取
    textureScreen->end();
    //儲存為PNG圖
    if (bIsSave)
    {
        static int s_iSerialNumber = 0;
        textureScreen->saveToFile(
            cocos2d::CCString::createWithFormat("ScreenShot_%04d.png", ++s_iSerialNumber)->getCString(),
            cocos2d::Image::Format::PNG,
            true,
            pFuncCallback);
    }
    else
    {
        if (nullptr != pFuncCallback)
        {
            pFuncCallback(textureScreen, "");
        }
    }
    return textureScreen;
}


//////////////////////////////////////////////////////////////////////////
//示例
//////////////////////////////////////////////////////////////////////////
Scene* HelloWorld::createScene()
{
    auto scene = Scene::create();
    auto layer = HelloWorld::create();
    scene->addChild(layer);
    return scene;
}

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    auto closeItem = MenuItemImage::create(
                                           "CloseNormal.png",
                                           "CloseSelected.png",
                                           CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
    closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,
                                origin.y + closeItem->getContentSize().height/2));
    auto menu = Menu::create(closeItem, NULL);
    menu->setPosition(Vec2::ZERO);
    this->addChild(menu, 1);
    auto label = Label::createWithTTF("Hello World", "fonts/Marker Felt.ttf", 24);
    label->setPosition(Vec2(origin.x + visibleSize.width/2,
                            origin.y + visibleSize.height - label->getContentSize().height));
    this->addChild(label, 1);
    auto sprite = Sprite::create("HelloWorld.png");
    sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
    this->addChild(sprite, 0);

    //////////////////////////////////////////////////////////////////////////
    //背景模糊
    //////////////////////////////////////////////////////////////////////////
    //新增按鍵用於觸發背景模糊
    auto blurItem = MenuItemImage::create(
        "CloseNormal.png",
        "CloseSelected.png",
        [&](Ref* pSender){

            //擷取螢幕（不儲存圖片，不設定回撥函式）
            auto textureScreen = ScreenShot(false, nullptr);
            
            //方案1：直接對背景精靈進行模糊化操作（效率低）
            //使用擷取後獲得的截圖精靈，生成一個帶模糊效果的精靈
            //SpriteBlur* spriteBlur = SpriteBlur::create(textureScreen->getSprite(), 8.0f, 8.0f);
            //spriteBlur->setRotationSkewX(180.0f);

            //方案2：將模糊化後的精靈儲存成一張圖片
            //將擷取的螢幕進行模糊化
            auto textureBlur = SpriteBlurer(textureScreen->getSprite());
            //將模糊化後的圖片儲存成一張圖片
            auto spriteBlur = Sprite::createWithSpriteFrame(textureBlur->getSprite()->getSpriteFrame());
            spriteBlur->setPosition(Vec2(visibleSize.width, visibleSize.height));

            Size size = Director::getInstance()->getWinSize();
            spriteBlur->setRotationSkewX(180.0f);
            spriteBlur->setPosition(Vec2(size.width / 2, size.height / 2));

            //將此精靈覆蓋在原有層之上，成為一個臨時背景
            this->addChild(spriteBlur, 4);

            //新增一個新的圖片作為前景元素以便進行比較
            auto sprite = Sprite::create("HelloWorld.png");
            sprite->setPosition(Vec2(size.width / 2, size.height / 2));
            sprite->setScale(0.5f);
            this->addChild(sprite, 5);
            
        }
    );
    blurItem->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
    menu->addChild(blurItem);

    return true;
}


void HelloWorld::menuCloseCallback(Ref* pSender)
{
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WP8) || (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT)
    MessageBox("You pressed the close button. Windows Store Apps do not implement a close button.","Alert");
    return;
#endif

    Director::getInstance()->end();

#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
    exit(0);
#endif
}
 

HelloWorldScene.h未做任何修改，因此此處不再貼出。

class SpriteBlur用於生成可被shader處理的精靈，注意將cocos2d-x的shader指令碼拷入自己的專案中。得到的精靈每一幀都會進行畫素渲染，可以動態調節模糊效果。建構函式中的除了需要模糊化的精靈之外，另外兩個引數：fRadius為模糊半徑，此引數越大，模糊效果越明顯；fSampleNum為模糊取樣，此引數越大，模糊效果越細膩。這兩個引數越高，效率也就越低。並且當高過一定數值後，在手機上有可能出現異常，建議兩個引數設定均不要超過8。

ScreenShot為截圖函式，相關教程很多，此處不再展開。

SpriteBlurer為精靈模糊化函式，將一個普通精靈傳入，即可返回一個被模糊化處理後的紋理，使用此紋理即可生成普通精靈。即把用shader處理過的精靈截圖，生成普通精靈，此精靈不再需要進行畫素渲染，因此保證了效率。