Prainブログ

ゲーム開発とかIT小話とかその他雑記のブログ

*

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

 

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

 - , ,

        

Message

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

  関連記事

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

今回は画面端でのボールの跳ね返りを製作していきましょう。   前回では …

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

こんにちは、akiです。 この記事ではカスタムイベントを削除するタイミングについ …

マップイメージ
ゲーム制作 Cocos2d-x関連 第14回 「プレイヤー攻撃によるダメージ計算、ターン交代」

今回はプレイヤーのターン、敵のターンを交互に行うようにしていきます。また、それぞ …

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

ゲームの操作感がわかってきたところで、ゲーム全体の流れの大枠を作っていきましょう …

アプリ 購入画面
SDKBoxを使ってアプリ内課金をするやり方 プログラム実装~実機テストまでの13の手順

この記事では、SDKBoxを利用したiOSアプリ内課金のプログラム実装から実機テ …