Lab

Cocos2d-x:背景色の設定(グラデーション)

 Tag :  Published : 2013-12-26

Pocket

CCLayerGradientを使用します。
レイヤーの背景色(グラデーション)を設定します。
> Ver3.x : 『背景色の設定(グラデーション)』はこちら

レイヤー背景色の設定

背景色が青色のグラデーションになるレイヤーを作成します。

cocos2d-x 背景色が青色のグラデーションになるレイヤーを作成
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //レイヤーを作成 開始色:RGBA(132,194,235,255) 終了色:RGBA(51,75,112,255)
    CCLayerGradient* layer = CCLayerGradient::create(ccc4(132, 194, 235, 255), ccc4(51, 75, 112, 255));
    layer->setContentSize(CCSizeMake(200, 200));
    CCSize layerSize = layer->getContentSize();
    layer->setPosition(ccp((winSize.width-layerSize.width)*.5, (winSize.height-layerSize.height)*.5));
    this->addChild(layer);

グラデーションの方向設定

色は先ほどと同様ですが、今度は左から右へのグラデーションにしてみます。

cocos2d-x 背景色が左から右へのグラデーションになるレイヤーを作成
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    //レイヤーを作成 グラデーションの方向:左から右
    CCLayerGradient* layer = CCLayerGradient::create(ccc4(132, 194, 235, 255), ccc4(51, 75, 112, 255), ccp(1,0));
    layer->setContentSize(CCSizeMake(200, 200));
    CCSize layerSize = layer->getContentSize();
    layer->setPosition(ccp((winSize.width-layerSize.width)*.5, (winSize.height-layerSize.height)*.5));
    this->addChild(layer);

4行目に引数ccp(1,0)を追加してグラデーションの方向を決めています。
これは、(0,0)をスタート地点としてどの方向へグラデーションをかけるか、という設定です。
(0,0)から(1,0)、つまり左から右、というわけですね。

cocos2d-x グラデーションの方向設定

画面の背景色の設定

デフォルトのHelloWorldSceneをベースにして、画面背景色をグラデーションにしてみます。

cocos2d-x 画面のグラデーションの設定

HelloWorldScene.h内の、HelloWorldクラスを書きかえます。

HelloWorldScene.h

//もとは、class HelloWorld : public cocos2d::CCLayerだったはず
class HelloWorld : public cocos2d::CCLayerGradient
{
public:
    virtual bool init();
    static cocos2d::CCScene* scene();
    CREATE_FUNC(HelloWorld);
};

HelloWorldScene.cpp内の、HelloWorld::initメソッドで色を指定します。

HelloWorldScene.cpp

bool HelloWorld::init()
{
    //ここで色を指定。
    if(!CCLayerGradient::initWithColor(ccc4(132, 194, 235, 255), ccc4(51, 75, 112, 255))){
        return false;
    }

    //ここから通常の処理。今回は画面中央に画像を表示
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
    CCSprite* pImg = CCSprite::create("1.png");
    pImg->setPosition(ccp(winSize.width*.5, winSize.height*.5));
    this->addChild(pImg);
      
    return true;
}

pageTop