このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

Cocos2d-x スプライトの扱い まとめ

Cocos2d-x

2015.09.26

この記事は最終更新日から1年以上が経過しています。

どもですー。

最近、ちょこちょことCocos2d-xを扱っていますので、スプライトの扱いや基本アニメーションについてざっとまとめてみました。

素材は前回同様、

株式会社ブリリアントサービス

『星宝転生ジュエルセイバー』http://www.jewel-s.jp/

から、ご利用させていただいております。

スプライト表示

まずはスプライトの表示。

Spriteクラスのcreate関数を用いて画像を表示できます。

cocos2d-xでは、クラスのインスタンス生成にnew演算子を用いらず、一番簡単な方法としてcreate関数を用いてインスタンスを生成します。

Size visibleSize = Director::getInstance()->getVisibleSize();
auto cat = Sprite::create("cat.png");
cat->setPosition(Point(visibleSize.width/2, visibleSize.height/2));
this->addChild(cat, 0);

スクリーンショット 2015-09-21 2.19.03

 

画像位置の変更

Point(0, 0) (ディスプレイ左下)

オブジェクトの位置を指定するためのPointクラスを用いて座標を指定します。

cat->setPosition(Point(0, 0));

スクリーンショット 2015-09-21 2.19.38

cocos2d-xのx座標 0は左、y座標は下となります。

 

画像サイズ変更

画像サイズの変更は、setScale関数を用いて変更します。
数値を引数にすることで変更できます。

cat->setScale(2);

スクリーンショット 2015-09-21 3.17.56

2/1サイズを変更する例

cat->setScale(0.5);

スクリーンショット 2015-09-21 3.18.10

画像を回転

画像を回転させるには、setRotation関数を用いて回転させます。

以下は、時計周りに90度回転させた例となります。

cat->setRotation(90);

スクリーンショット 2015-09-21 3.19.55

cat->setRotation(-45);

スクリーンショット 2015-09-21 3.20.13

画像のアンカーポイント(軸)を変更

画像のアンカーポイント(軸)の変更には、setAnchorPoint関数を用いて変更を行います。

デフォルトでは、画像の中央がアンカーポイントとなっております。

setAnchorPoint(Point(0,0))とすることで、画像の左下にアンカーポイントを置くことができます。

画像の左下が画面中央の位置に来ているのが確認できます。

cat->setAnchorPoint(Point(0,0));

スクリーンショット 2015-09-21 3.21.18

setAnchorPoint(Point(1,1)で画像の右上にアンカーポイントを置いた例となります。

画像の右上が画面中央の位置に来ているのが確認できます。

cat->setAnchorPoint(Point(1,1));

スクリーンショット 2015-09-21 3.24.02

ラベルを表示

ラベルの作成には、LabelTTFクラスが利用されます。

LabelTTFクラスのcreate関数を用いて用いて、以下の設定を行うことが可能です。

LabelTTF::create(文字列、フォント名、フォントサイズ);
auto label = LabelTTF::create("Hello Cats!", "Arial", 30);
label->setPosition(Point(visibleSize.width/2, visibleSize.height/2));
this->addChild(label, 1);

スクリーンショット 2015-09-21 3.29.27

ラベルの回転

画像を回転させた時の様に、ラベルもsetRotation関数を用いることで回転することが可能です。

label->setRotation(30);

スクリーンショット 2015-09-21 3.30.02

基本アクション

Cocos2d-xでは、多数のアクションが用意されています。

基本的なアクションを用いて時間と共に動かすアニメーションを作っていきます。

〜Byとなっているクラスは、相対値(画像を指定した際、画像)の指定となります。

〜Toとなっているクラスは、絶対値(画面から)の指定となります。

移動:MoveBy/MoveTo

移動するアニメーションには、MoveBy/MoveToクラスのアクションを利用します。

this->addChild(cat, 0);
auto move = MoveBy::create(2, Point(100,100));
cat->runAction(move);

move

拡大:ScaleBy

拡大するアニメーションには、ScaleByクラスのアクションを利用します。

auto scale = ScaleBy::create(2, 2);
cat->runAction(scale);

scale

回転:RotateBy

回転するアニメーションには、RotateByクラスのアクションを利用します。

auto rotate = RotateBy::create(5, 90);
cat->runAction(rotate);

rotate

反転:flip

Flipクラスはこれまでのクラスと異なり、真偽値(true, false)を引数に指定することによって変化させます。

FlipYクラスはY軸を基準にして反転させます。

auto flip = FlipY::create(true);
cat->runAction(flip);

スクリーンショット 2015-09-21 4.23.57

連結アクション

これまで単独のアクションだったのですが、複数指定することも可能です。

直列連結アクション

◯◯のアクションが終わったら、◯◯のアクションを実行。と、直列的にアクションを連結する際は、
Sequenceクラスを用いて作成します。

auto move = MoveBy::create(2, Point(50,50));
auto rotate = RotateBy::create(2, 90);
auto seq = Sequence::create(move, rotate, nullptr);
cat->runAction(seq);

seq

並列連結アクション

◯◯のアクションと、◯◯のアクションを実行。と、並列的にアクションを連結する際は、

Spawnクラスを用いて作成します。

auto move = MoveBy::create(2, Point(50,50));
auto rotate = RotateBy::create(2, 90);
auto spawn = Spawn::create(move, rotate, nullptr);
cat->runAction(spawn);

spawn

と、ざっと基本的なスプライトの扱いなどでした。

少ないソース量で容易に扱えるのが、cocos2d-xの魅力でもありますね。

次回以降もがっつり触っていければと思います。

Comment

Related Article

Cocos2d-x iPhone実機転送で「Xcode setting ENABLE_BITCODE」error

2015.11.28

CocosStudio 1.6系 & 2系 Animationの表示 Armatureクラス、読み込み方まとめ

2015.09.30

Cocos Studio 1.6系 & 2系 インストール、使い方まとめ

2015.09.27

Cocos2d-x スプライトの扱い まとめ

2015.09.26

Cocos2d-x インストール 開発環境構築

2015.09.01

CATEGORY LIST

LATEST NEWS

このコロナ禍で、飛沫感染防止など求められる中「電子メモパッド」が重宝。 1300円で購入可能な電子メモパッドが超絶便利な件。

tool

2020.06.02

OAuthのフローを可視化できるツールを作ってみました。

JavaScript

2020.05.17

Django django-allauthで、サクッとソーシャルログイン機能を実装

Python

2020.04.12

部下を育てる技術

イベント

2020.04.08

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

JavaScript

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

まだ間に合う!!ラズベリーパイ購入なら「RSコンポーネンツ」で!最大40%オフの年に1度の大特価期末セール中!

RaspberryPi

2020.01.25

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

JavaScript

2020.01.24

TSUKUMO の初売りでNAS (Synology DiskStation DS218j)購入!!

イベント

2020.01.04

Mac用 エミュレーター 「OpenEmu」が、V2.2リリース!GameCube対応して更に神アプリ進化!

Game

2020.01.01

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻その2

Game

2019.12.31

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻

Game

2019.12.14

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US