このサイトは、只今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

Arduino IDEとArduino接続して、サクッと設定。

電子工作

2019.08.15

ついに、M5Stack Gray 購入!! その他諸々、購入したボードの振り返りなど。

電子工作

2019.08.12

正規表現 先読み後読み 論理積

JavaScript

2019.07.28

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

Rails5 gemでmysql2が インストールできない

Ruby

2019.05.05

平成最後のお買い物!!「Logicool MX Master 2 Wireless Mouse」と「K780 マルチデバイス BLUETOOTH® キーボード」で快適PC生活。

ubuntu

2019.04.27

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US