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

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

関連記事

SDKBoxを使ってアプリ内課金をするやり方 インストール編

この記事では、アプリ課金のためのSDKBoxインストールのやり方を説明します。   環境 XCode:7.3.1 Cocos2d-x:3.9     SDKBoxについて …

ボールの進行方向

ゲーム制作 Cocos2d-x関連 第6回 「画面端でのボールの跳ね返り」

今回は画面端でのボールの跳ね返りを製作していきましょう。   前回ではボールを弾くと、二度と触れられないところまで去って行ってしまいましたね。それでは早速やっていきましょう。   …

cocos2dx

Cocos2d-x Http通信の完了に同期して処理を実行する

  こんにちは、akiです。 この記事ではHttp通信処理の完了に同期して任意の処理を実行するやり方を説明します。 やり方は簡単でHttp通信のコールバックの中にカスタムイベントを発行する処 …

三平方の定理

ゲーム制作 Cocos2d-x関連 第7回 「ボールとドロップとの衝突検知と跳ね返り」

今回はボールとドロップとの衝突検知を実装してきます。   前回はボールと画面端との衝突判定と跳ね返りのプログラムを行いました。   画面端であれば上下左右の4通りの検知を行えばよか …

エフェクトサムネ

ゲーム制作 Cocos2d-x関連 第12回 「ボールヒットエフェクトの表示」

派手なヒットエフェクトが欲しい!   この回では、派手では無いですが、ボールがドロップにヒットしたタイミングでヒットエフェクトを表示していきたいと思います。 一口にエフェクトと言っても色々な …