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 加算合成を利用して、背景が黒い画像をアニメーションで使えるようにする方法

アニメーションを利用してエフェクト表示するときに、以下のようなエフェクト素材を目にすることはよくあると思います。背景が透過処理されているものではなく、黒く塗りつぶされているものです。 元になる素材は「 …

ゲーム制作 Cocos2d-x関連 第11回 「音楽、効果音を鳴らす」

いつになったらゲームで音楽を流せるようになるの~   最初に書籍でcocos2dxの勉強をしていた時、こんなことを思っていた気がします・・・     今回はサウンド関連で …

アプリ名のローカライズ

Cocos2d-x アプリのアイコン名変更方法について iOS/Android

こんにちは。akiです。 この記事ではCocos2d-xにおけるアプリのアイコン名の変更方法を、iOSとAndroidでそれぞれ紹介します。それでは早速やっていきましょう。     …

cocos2dx

Cocos2d-x カスタムイベントを削除するタイミング

こんにちは、akiです。 この記事ではカスタムイベントを削除するタイミングについて説明します。   掲題の通り、カスタムイベントを登録した場合、不要になった際に明示的に削除してやる必要があり …

三平方の定理

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

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