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

【Unity x WebAssembly】UnityコンテンツをBlazorとFlutterでWebアプリとして扱う

Unity

2023.01.30

【nasne】M1 Mac Miniで、「torne® mobile」使用して、テレビ視聴。

mac

2022.12.31

2022 VIVA JS World Cup 開幕!! 〜 Vue3で作るサッカーゲーム 〜

JavaScript

2022.12.24

M1 Mac ruby rbenv install error

Ruby

2022.10.10

【Flutter】CheckboxListTileのチェックボックスをカスタマイズ

Flutter

2022.10.01

FLEXISPOT E3で作るスタンディング PCデスク

イベント

2022.09.18

NordVPNを使ってみた感想は?評判や口コミを徹底的に解説

tool

2022.07.26

Ubuntu 20.04 LTS サーバ構築 - DKIM、DMARCを設定する

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfix Let’s EncryptでTLS化

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfix SASL認証

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Dovecotインストール

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfixインストール

ubuntu

2022.05.01

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US