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

```

![Screen Shot 2015-10-18 at 2.37.30.png](https://qiita-image-store.s3.amazonaws.com/0/96091/e9acd6fe-8170-b472-aa6f-b79b6b48d4e9.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);

```