Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

はじめに

最近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に追加する
//引数1:設置するオブジェクト
//引数2:Z値
//引数3:オブジェクトのタグ
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);

Screen Shot 2015-10-18 at 2.37.30.png

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

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);

kazuhiro1128
Unityエンジニア native側のiOS/Android向けのアプリとかも開発してます。
sumzap
スマートフォンゲームの企画・運営・配信事業をしています。
https://tech.sumzap.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away