Cocos2d-x iOS アプリ

Cocos2d-x スプライトシートを作成して画像を楽に管理したい

投稿日:

Cocos2d-x スプライトシートを作成して画像を楽に管理したい

この記事では、スプライトシートの作成方法と、スプライトシートを利用することのメリットについて紹介します。

 

ShoeBox02

 

スプライトシート(テクスチャアトラス)とは

スプライトシートとは、いくつかの画像をひとまとめにしたものです。ひとまとめにされた画像は設定ファイルとセットになって管理されます。また、スプライトシートはテクスチャアトラスとも呼ばれるようです。

 

 

スプライトシートを使用するメリット

・画像ファイルの管理が簡単になる

ゲームを作成していると、だんだんと大量の画像を管理しなくてはならないようになります。複数の画像をスプライトシートにまとめてしまえば、管理するファイルの数は1/10以下にすることも可能です。

 

・メモリ効率が良くなる

Cocos2dxでは画像を読み込む際に、画像の大きさに応じて、2の乗数分の正方形分のメモリ空間を確保するようです。その分無駄なメモリを消費するのですが、スプライトシートにすることで無駄を減らすことができます。

 

 

ShoeBoxを使用してスプライトシートを作成する

スプライトシートを作成するために、ShoeBoxというツールを使用します。このツールを採用する理由としては「無償である」「導入が簡易」「シンプルな機能のみ備えている」の3点です。

 

ShoeBoxのダウンロード

下記のリンクからダウンロードしてください。

ShoeBox公式サイト

ShoeBox

1.右上の赤枠の「ShoeBox3.6.5」からインストーラをダウンロードして下さい。

 

2.左下の赤枠はインストール手順です。

1.AdobeのAIR runtimeをインストールします。

2.古いバージョンがある場合はアンインストールします。

3.ダウンロードしたインストーラからインストールします。

 

 

ShoeBoxの使い方の説明

1.ツールを立ち上げると下記のような画面が現れます。赤枠のところを右クリックします。

ShoeBox00

 

 

2.設定画面が現れます。主要な項目を変更していきます。

ShoeBox01

 

・Animation Name Ids : 値を削除します。削除しないと、スプライトシートに不要なファイル名が表示されてしまいます。

・File Name : スプライトシートのファイル名です。必要に応じて変更します。

・Tex Crop Alpha : trueならば画像ファイルの余白(透過部分)を自動でカットしてくれます。falseなら余白部分はそのままです。必要に応じて変更します。

項目を設定したら「Apply」を押します。

 

 

3.赤枠のところに、スプライトシートとしてまとめたい画像群をドラッグアンドドロップします。

ShoeBox00

 

 

4.確認画面が現れるので「Save」して完了です。

ShoeBox02

・sprites.png

・sprites.plist

の2つのファイルが出力されます。

 

 

プロジェクトへの追加

「ShoeBoxの使い方の説明」で生成した2つのファイルをプロジェクトのResources配下に配置します。

 

 

プログラムの実装

cocos2d::SpriteFrameCache::getInstance()->addSpriteFramesWithFile("sprites.plist");
 
Size visibleSize = Director::getInstance()->getVisibleSize();
Vec2 origin = Director::getInstance()->getVisibleOrigin();

Sprite* sprite = Sprite::createWithSpriteFrameName("effect_cure01_0001.png");
sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
this->addChild(sprite, 0);

 

 

シミュレータの起動

シミュレータを起動して目的の画像が表示されることを確認します。

sc_0812

 

以上になります。ご覧頂きありがとうございました。

PrainGoogleAdSense

PrainGoogleAdSense

-Cocos2d-x, iOS, アプリ
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ゲーム制作 Cocos2d-x関連 最終回 「勝利演出、敗北演出の追加」

勝利演出、敗北演出を実装していきます。今回で最終回です!     仕様の検討 1.バトル中、プレイヤーのHPが0になった場合 → 勝利演出 → 勝利演出中に画面をタップするとスター …

ゲーム制作 Prain プレイン Cocos2d-x

ゲーム制作 Cocos2d-x関連 第17回 「タイトル画面の作成と画面遷移」

  この回ではタイトル画面と画面遷移を実装していきます。画面遷移が実装できれば、リッチなゲームを作りやすくなると思います。       仕様の検討 追加する画面 …

cocos2dx

ゲーム制作 Cocos2d-x関連 第1回 「ゲームを作ろう!!」

ゲーム制作をやってみたい!   誰もが一度はちらっと考えることなのではないでしょうか。しかし一度はそう思うものの、でもやっぱり難しそうだし・・・と思いとどまる方も少なくないはず。 &nbsp …

文字送り

Cocos2d-x テキストを1文字ずつ表示する文字送りのやり方

こんにちは。akiです。 この記事ではテキストを1文字ずつ表示する「文字送り」についてCocos2d-xで実装する方法を説明していきます。RPGなどで良く見かけるアレですね。   &nbsp …

タイムチャート

ゲーム制作 Cocos2d-x関連 第15回 「ダメージエフェクトの演出」

おそらくここが一番大変なところですが、ゲーム完成までもう一歩です!   第12回 「ボールヒットエフェクトの表示」でヒットエフェクトを表示しました。その時とやり方はほぼ同じですが、エフェクト …