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

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

関連記事

cocos2dx

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

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

cocos2dx

Cocos2d-x クライアント側のHttpレスポンス処理

この記事は「Cocos2d-x セーブデータをサーバに送信して保存する」の続きになります。 ・第1回 : サーバにデータを保存したい理由と全体の流れ ・第2回 : クライアント側の処理とデータ送信(H …

エフェクト

Cocos2d-x 加算合成を利用して、背景が黒い画像をアニメーションで使えるようにする方法

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

タイムチャート

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

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

状態遷移

ゲーム制作 Cocos2d-x関連 第13回 「ゲームの状態(プレイヤーのターン 敵のターン、etc・・・)の実装」

ゲームの操作感がわかってきたところで、ゲーム全体の流れの大枠を作っていきましょう。     今回のゲームはターン制を想定しています。つまり、プレイヤーのターンと敵のターンです。 な …