Lab

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

 Tag :  Published : 2014-8-7

Pocket

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

レイヤー背景色の設定

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

cocos2d-x 背景色が青色のグラデーションになるレイヤーを作成
    Size s = Director::getInstance()->getVisibleSize();
    
    //レイヤーを作成 開始色:RGBA(132,194,235,255) 終了色:RGBA(51,75,112,255)
    auto layer = LayerGradient::create(Color4B(132, 194, 235, 255), Color4B(51, 75, 112, 255));
    layer->setContentSize(Size(s.width*.8, s.height*.8));
    Size layerSize = layer->getContentSize();
    layer->setPosition(Vec2((s.width-layerSize.width)*.5, (s.height-layerSize.height)*.5));
    this->addChild(layer);

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

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

cocos2d-x 背景色が左から右へのグラデーションになるレイヤーを作成
    //レイヤーを作成 グラデーションの方向:左から右
    auto layer = LayerGradient::create(Color4B(132, 194, 235, 255), Color4B(51, 75, 112, 255), Vec2(1,0));
    layer->setContentSize(Size(s.width*.8, s.height*.8));
    Size layerSize = layer->getContentSize();
    layer->setPosition(Vec2((s.width-layerSize.width)*.5, (s.height-layerSize.height)*.5));
    this->addChild(layer);

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

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

画面の背景色の設定

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

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

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

HelloWorldScene.h

//もとは、class HelloWorld : public cocos2d::Layerだったはず
class HelloWorld : public cocos2d::LayerGradient
{
public:
    static cocos2d::Scene* createScene();

    virtual bool init();
    
    CREATE_FUNC(HelloWorld);
};

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

HelloWorldScene.cpp

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

    return true;
}

pageTop