Cocos Studio2 を使ってみる (基本編)」で、Cocos Studioの簡単な使い方を紹介しました。

今回はこのツールを使って「スプライトシート」の作成、実装をしてみたいと思います。

「スプライトシート」は複数の画像ファイルを一つにまとめたものです。「テクスチャアトラス」とも言われるらしいです。

画像を一つにまとめる利点として「メモリの消費を抑えられる」ことが大きいのですが、一方デメリットとしては「一つの画像にまとめるのが面倒」「パーツに修正が入る(特に配置やサイズ)と面倒」ということもありました。

そういったデメリットを「Cocos Studio」のツールを使って軽減し、高速かつ仕様変更に強い開発を行っていきましょう。

 

部品の画像を作る

何はともあれ画像が必要。
ここでは、ボタンの画像を複数用意しておく。

cocos_sp_01

 

スプライトシートデータの作成

基本編で作成したデータを元に作る。
partsフォルダ内にスプライトシートデータを作ることとして、partsフォルダ上で右クリック → New File…

cocos_sp_02

Progress Type で SpriteSheet を選択し、ファイル名を入力。
Newボタン押下で、parts配下にcsiファイルができあがる。

cocos_sp_03

また、作成していたボタンの画像をpartsフォルダにインポートする。
(ドラッグアンドドロップ、または右クリック → Import Resources… )

cocos_sp_04

その後、登録した画像ファイルをcsiファイルのキャンバス上にドラッグアンドドロップする。

cocos_sp_05

画像ファイルに黄色い丸が付いていたら、それはスプライトシートに登録されていることを示している。

このままでも良いが、プロパティを必要に応じて変える。

cocos_sp_06

できたらpublishする。
すると、Resourcesフォルダの中にはplistファイルと画像が一つにまとまったpngファイルができていることを確認できる。

cocos_sp_07

 

ウィジットに組み込み

作成したスプライトシートは、Cocos Studioで配置するボタンやスプライトにセットできる。
ここでは、メニューボタンを作ってボタンの画像をセットしてみる。

cocos_sp_08

Feature の Background の各Stateに対して、ボタンの画像をドラッグアンドドロップする。

cocos_sp_09

同様に、もう一つボタンを配置して、画像を登録する。
先程作ったボタンをコピペして、名前と位置、画像を変える。

できたらPublishして、ビルド実行してみる。
スプライトシートの画像を使って、ボタンが作成できたことを確認する。

cocos_sp_10

 

スプライトシート内の画像をプログラム内で変更

今度は動的にスプライトシート内の画像を変えてみる。
動作としてはサンプルボタンを押下すると、一番下にあるスプライトが「!」に変わるようにしてみる。

cocos_sp_11

まずは、画面上にSpriteを登録する。
また、変更する画像をスプライトシートに登録しておく。
ここでは、スプライトシートに”attention_buntton.png”を追加する。
(やり方はボタンと変わらないので省略)

サンプルボタンが押下されたときの処理に、以下のコードを追加する。

 

ここではいきなり SpriteFrameCache を使って、キャッシュからスプライトを抜き出しているが、これはMainScene.csbファイル読み込み時にスプライトシートを用いたボタンを配置したときに、自動的にスプライトシート(およびplist情報)がキャッシュされたためである。

もし、独立したスプライトシートを作成し、初めて画像を読み込む運用ならば

で、初期化時などにplistファイルをキャッシュさせておく。
そうでないと、キャッシュからスプライトシートが見つからずにエラーとなる。

うまくいけば、以下のようにサンプルボタン押下でスプライトが変わることを確認できる。

cocos_sp_12

 

おわりに

Cocos studioが吐き出すスプライトシートをうまく使えば、メモリを抑えるだけでなく、ファイル管理も楽になります。

また、パーツ画像のファイル名を連番にするしてアニメーション用スプライトシートを作ることで、プログラム内でアニメーション処理を実装することもできます。

スプライトシートを作成するツールとして有名な「TexturePacker」もありますが、無料のCocos Studioでここまでできるので、十分に活用できるのではないでしょうか。