Cocos2d-x　入門編-画像の操作について

6672 ワード
cocos2d-x cocos2d-x テキストリンク

はじめに

最近cocos2d-xをはじめたので入門編としてまとめていきます。今回は画像の操作についてまとめていきたいと思います。

画像を表示してみよう

画像を表示するには、CCSpriteクラスを利用することで画面上に表示することができます。
表示するLayerに対してadd_childeするだけなので簡単ですね。

// 画面解像度を取得する
Size visibleSize = Director::getInstance()->getVisibleSize();

//0座標を取得する
Vec2 origin = Director::getInstance()->getVisibleOrigin();

//CCSpriteクラスを初期化する。
auto sprite = Sprite::create("HelloWorld.png");

//画面中央に表示する
sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

//layerに追加する
//引数１：設置するオブジェクト
//引数２：Z値
//引数３：オブジェクトのタグ
this->addchild(sprite, 0);

ちなみに複数のレイヤーを扱う場合はTAGをつけてaddchildした方が良さそうです。
以下のようにenumで定義して指定することで管理しやすいですね。

//こんな感じでlayer用のtagを定義する
typedef enum
{
    LayerTagHeaderLayer,
    LayerTagGameLayer,
    LayerTagBackgroundLayer,
} LayerSceneTags;

Vec2 origin = Director::getInstance()->getVisibleOrigin();
auto sprite = Sprite::create("HelloWorld.png");
this->addchild(sprite, 0, LayerTagMainLayer);

オブジェクトのZ値（奥行き）を変更するには

sprite:cocos2d-xのアイコン
sprite2:droid君

とした場合に、以下の様に記述するとZ値（奥行き）を変更することができます。

auto sprite = Sprite::create("HelloWorld.png");
sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
this->addChild(sprite, 1, LayerTagGameLayer);

auto sprite2 = Sprite::create("ic_launcher.png");
sprite2->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
this->addChild(sprite2, 2, LayerTagGameLayer);

画像の表示位置を変更する場合

CCSpriteクラスのsetposisonというメソッドで変更することができます。

中央に表示する場合

// 画面解像度を取得する
Size visibleSize = Director::getInstance()->getVisibleSize();

//0座標を取得する
Vec2 origin = Director::getInstance()->getVisibleOrigin();

auto sprite = Sprite::create("HelloWorld.png");
sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

任意の位置に表示する場合

Pointクラスを利用してオブジェクトの表示位置をすることができます。
OpenGL ESでは画面左下が原点となっている(0,0)

Point(x座標位置, y座標位置);

auto sprite = Sprite::create("HelloWorld.png");
sprite->setPosition(Point(10, 10));

画像サイズを変更する場合

CCSpriteクラスのsetScaleというメソッドで変更することができます。

auto sprite = Sprite::create("HelloWorld.png");
sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
sprite->setScale(2.0, 2.0);

表示・非表示を制御するには

表示ON/OFF
spriteオブジェクトのvisible変数をfalseにすることで非表示にすることができます。

auto sprite = Sprite::create("HelloWorld.png");
sprite->setVisible(false);

透過表示
spriteオブジェクトのopacityを調整(0〜255)することで透過表示ができます。
255:透過表示OFF
0:非表示になる

auto sprite = Sprite::create("HelloWorld.png");
sprite->setOpacity(100);

画像をアニメーションさせてみよう

cocos2d-xにはいくつかアニメーションするためのアクションが用意されています。
今回は簡単なアクションのみ試してみた結果を記載しておきます。

・移動アクション

auto move = MoveBy::create(2.0f, Point(100, 100));
sprite->runAction(move);

・スケールアクション

auto sacale = ScaleBy::create(2, 5);
sprite->runAction(sacale);

・回転アクション

auto rotate = RotateBy::create(0, 90);
sprite->runAction(rotate);

・フェードイン

auto sprite = Sprite::create("HelloWorld.png");
sprite->setPosition(Vec2(visibleSize.width/2, visibleSize.height/2));
sprite->setOpacity(0);
this->addChild(sprite, 1, LayerTagGameLayer)
auto action = FadeIn::create(2);
sprite->runAction(action);

・フェードアウト

auto sprite = Sprite::create("HelloWorld.png");
sprite->setPosition(Vec2(visibleSize.width/2, visibleSize.height/2));
this->addChild(sprite, 1, LayerTagGameLayer)
auto action = FadeOut::create(2);
sprite->runAction(action);

・透明度を指定したアニメーション

auto sprite = Sprite::create("HelloWorld.png");
Size visibleSize = Director::getInstance()->getVisibleSize();
sprite->setPosition(Vec2(visibleSize.width/2, visibleSize.height/2));
this->addChild(sprite, 1, LayerTagGameLayer);
auto action = FadeTo::create(5, 100);
sprite->runAction(action);

・複数のアクションを連結してみる
Spawnクラスを利用して、複数のアクションを並列で実行することができます。
実際には、アニメーションパターン毎にクラスを作ってアニメーション処理することになるんだと思います。

可変長引数でアクションを指定し、最後はNULLを指定してください。

auto sprite = Sprite::create("HelloWorld.png");
Size visibleSize = Director::getInstance()->getVisibleSize();
sprite->setPosition(Vec2(visibleSize.width/2, visibleSize.height/2));
this->addChild(sprite, 1, LayerTagGameLayer);
auto move = MoveBy::create(2, Point(100, 100));
auto rotate = RotateBy::create(2, 270);
auto spawn = Spawn::create(move, rotate, nullptr);
sprite->runAction(spawn);