月別アーカイブ: 2018年9月

【cocos2d-x v3.x】矩形描画における座標系

cocos2d-x で画面に矩形を描画する方法はいくつかあるが、お手軽なのは Sprite または LayerColor を使用する方法だ。通常、Sprite は用意しておいた画像ファイルを表示するのだが、単色の矩形であれば setTextureRect(const Rect& rect), setColor(iconst Color3B&) をコールすれば画像を用意する必要がなくお手軽だ。

以下が、矩形スプライトの表示コードサンプルと実行結果である。

// 矩形スプライト表示
auto rectSprite = Sprite::create();  //  スプライト生成
rectSprite->setTextureRect(Rect(0, 0, rwd, rht));  // 矩形位置・サイズ
rectSprite->setColor(Color3B(0x80, 0xff, 0x80));  // 明るい緑
rectSprite->setPosition(Vec2(screen_cx, screen_cy));  // 画面中央
addChild(rectSprite, 2);  //  スプライトオブジェクトをスクリーンに付加

rwd, rht は表示する矩形サイズ、screen_cx, cy は画面中央座標だ。
なお、わかりやすいように画面中央に十字の白色グリッドを表示している。

次に LayerColor を利用するコード、実行結果を示す。

// 矩形レイヤー表示
auto rectLayer = LayerColor::create(Color4B(0x80, 0x80, 0xff, 0xff), rwd, rht);  //  明るい青
rectLayer->setPosition(Vec2(screen_cx, screen_cy));  // 画面中央
addChild(rectLayer, 3);

Sprite の場合とほぼ同じようなコードで矩形を表示できる。が、ここで注意すべきは setPosition() で指定した位置だ。Sprite の方は矩形中央が指定した位置に表示されるが、LayerColor は左下が指定した位置に表示されるという点だ。

あと、スプライト・レイヤーに子オブジェクトを付加する場合の座標原点を確認しておく。

下記はスプライト矩形の上に赤い矩形を表示するコード。表示位置は (0. 0) としている。

// 矩形の上にスプライト表示
auto sprite = Sprite::create();
sprite->setTextureRect(Rect(0, 0, rwd/8, rht/8));
sprite->setColor(Color3B(0xff, 0x80, 0x80));
sprite->setPosition(Vec2(0, 0));
rectSprite->addChild(sprite, 1);

結果を見ると、スプライト矩形の左下点が座標原点となっているのがわかる。

同様に、レイヤーの上に赤い矩形を (0, 0) 位置に表示すると以下のようになる。

まあ、レイヤーなので当然と言えば当然であるが、こちらも矩形の左下点が座標原点となっているのがわかる。

以上、スプライトとレイヤーで矩形を描画した場合の座標系の違いついて見てきた。スプライト・レイヤーの意味を鑑みて、このような仕様にしたのであろうが、理解があやふやだと、意図した位置とは違う位置にオブジェクトが描画され混乱することもあるので、ちゃんと理解しておくことを推奨する。

まとめ:

  • オブジェクト生成時、スプライトは画像中央の位置を、レイヤーは左下点位置を指定する
  • 小オブジェクトを付加する場合の座標原点は、スプライト・レイヤーともに左下位置が座標原点となる。