はじめに
最近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);