こんにちは、ウェブテクノロジ R&D部の黒岡です。
本稿では、SSPlayer(SpriteStudio Player) for Cocos2d-xについてご紹介します。
SSPlayer for Cocos2d-xは、OPTPiX SpriteStudioで作成したアニメーションデータをCocos2d-x上で再生するためのプラグイン・モジュールです。SSPlayerを使用することで、デザイナーがSpriteStudioで作成したアニメーションを簡単・忠実に再生できるようになります。
魅力あるゲームアプリには、エフェクトのようなリッチなアニメーション表現が不可欠ですが、デザイナーが作成した複雑なエフェクトをプログラムで記述するとなると非常に大きな工数がかかってしまいます。SpriteStudioとSSPlayerを組み合わせれば、デザイナーがSpriteStudioでアニメーションを作成し、プログラマはそのデータをゲームアプリに組み込んだSSPlayerで再生するだけですので、開発工数を大幅に削減しつつ、リッチな表現が可能になります。
このところSSPlayer for Cocos2d-x のお問い合わせが非常に増えています。Cocos2d-xというプラットフォーム自体も、最近ぐんぐんと広まっている感触があります。そのため、弊社で提供しているプレイヤー・コンバーターの改修の頻度が最も高いプラットフォームです。
この記事では、Cocos2d-xの簡単な説明と導入方法、SSPlayer for Cocos2d-xを使ったアニメーションの再生方法についてご紹介します。
Cocos2d-xとは？
Cocos2d-xは、cocos2d for iPhoneを基にC++で書かれたマルチプラットフォーム対応ゲーム・エンジンです。開発に使用する言語もC++ですので、C++での開発に慣れている人にはメリットが大きいでしょう。
私個人としては、以前の仕事で iOSアプリの開発を行ったときに cocos2d for iPhone のお世話になったのですが、当時、Android でも同時開発ができるとありがたいなと思っていました。その後、マルチプラットフォームを打ち出した Cocos2d-x がリリースされましたが、初期の頃は完成度がかなり低かったのを覚えています。今回プラグインを開発してみて、完成度が高まっているのを実感しました。
さて、以下に Cocos2d-x の特徴を挙げます。
- 開発コミュニティの活動が活発
開発は中国のオープンソース・コミュニティをベースに行われ、MITライセンスで公開されています(ライセンス条項の縛りが緩いので使いやすい)。この開発コミュニティの活動はかなり活発で、これは重要なポイントです。
開発中のソースコードはGitHubにて開発状況の確認ができるので、「あの不具合はどうなったかな？」とか「実装されそうな機能」の予測などし易いです。
- 豊富な対応プラットフォーム
対応プラットフォームが比較的多いことが挙げられます。また、JavaScriptとLuaへのスクリプト・バインディングが用意されており、JavaScript、Luaでの開発もある程度可能です。ただし、スクリプト言語によって対応プラットフォームが制限されます(cocos2d-x-2.1.5)。具体的には、以下のようになります。
- C++で開発可能な環境 : Android、BlackBerry、iOS、Linux、Mac OS X、Marmalade、Win32
- Luaで開発可能な環境 : Android、BlackBerry、iOS、Linux、Marmalade、Win32
- JavaScriptで開発可能な環境 : Android、iOS、Win32
- 余談ですが、JavaScriptバインディングをちょこっと試してみたい方は最近出た Cocosinoがお勧めです。ビルドの必要がなく、Cocosinoをインストールしてコードを書くとシミュレータが動くので楽ちんです。遊べるサンプルプロジェクトも同梱されていますので、ぜひ試してみてください。
Cocos2d-x におけるデバッグについて
これは余談ですが、参考までに…。開発系のカンファレンスなどでは、Android、iOS両対応のネイティブ開発の際はまずiOS環境で作成し、Xcodeを用いてデバッグする手法がよく紹介されています。これはAndroidのネイティブ開発においてデバッガーの貧弱さとエミュレータの遅さが問題になっているためでしょう。
マルチ開発ではなく、Androidだけがターゲットの場合は、Win32でプロトタイピングという選択肢も考えられます。ご存じの通りMicrosoft Visual Studioは類似製品と比較してもデバッガーが非常に強力なため、ゲームロジックの部分はMicrosoft Visual Studioを使ってデバッグし、描画依存の部分はそれぞれの環境でテストを行うという方法を取るのが便利だと思います。
Cocos2d-xの環境構築
このセクションで必要なソフトウェア
- VisualStudio 2010/2012 (ExpressでもOK)
- Python
- Cocos2d-x
Microsoft Visual Studioのインストール
最初に、Microsoft Visual Studio 2010環境の構築を行います。インストール済の方は飛ばして結構です。ExpressでもOKです。
Pythonのインストール
次に、Pythonのインストールを行います。Mac環境では最初から入っていますが、Windows環境ではインストールが必要です。Pythonは、プロジェクトの作成やツールのスクリプトを動かすために使用します。私はActivePythonを使用しています。
http://www.activestate.com/activepython
Cocos2d-xのインストール
最後に、Cocos2d-xをインストールしましょう。GitHubからcloneしてくるのも良いのですが、最初はステイブルなバージョンをダウンロードして使用するのが良いでしょう。
http://www.cocos2d-x.org/download
Cocos2d-xを選びます。ここでは、v2.1.5をダウンロードした想定で進めます。ダウンロードが完了したらzipファイルを展開します。
cocos2d-x-2.1.5.zip を展開すると cocos2d-x-2.1.5 フォルダが作成されるので使いやすいパスへコピーします。ここでは、展開して作成された cocos2d-x-2.1.5 フォルダを cocos2d-x とリネームして C:\framework にコピーすることにします。
プロジェクトを作成してみる
インストール先の C:\framework\cocos2d-x\tools\project-creator\ でコマンドプロンプトを開きます(Explorer で上記フォルダを表示し、[Shift]キーを押しながら右クリックして「コマンド ウィンドウをここで開く」を選択します)。
コマンド プロンプトに下記コマンドを入力します。
> create_project.py
コマンドラインオプションを付けないと以下のようなヘルプが表示されます。
Usage: create_project.py -project PROJECT_NAME -package PACKAGE_NAME -language PROGRAMING_LANGUAGE
Options:
-project PROJECT_NAME Project name, for example: MyGame
-package PACKAGE_NAME Package name, for example: com.MyCompany.MyAwesomeGame
-language PROGRAMING_LANGUAGE Major programing lanauge you want to used, should be [cpp | lua | javascript]
Sample 1: ./create_project.py -project MyGame -package com.MyCompany.AwesomeGame
Sample 2: ./create_project.py -project MyGame -package com.MyCompany.AwesomeGame -language javascript
Python が起動することが確認できたら、まずはサンプルプロジェクトとして、以下の設定で作成します。
- project: SampleApp
- package: com.hoge.huga
- language: cpp (C++)
コマンド プロンプトに下記コマンドを入力します。
> create_project.py -project SampleApp -package com.hoge.huga -language cpp
[Enter]を押すとマルチプラットフォームに対応したプロジェクトが作成され、下記のようなメッセージが表示されます。
proj.ios : Done!
proj.android : Done!
proj.win32 : Done!
proj.mac : Done!
proj.blackberry : Done!
proj.linux : Done!
proj.marmalade : Done!
New project has been created in this path: C:\framework\cocos2d-x\tools\project-creator/../../projects/SampleApp
Have Fun!
このメッセージは、それぞれ表示されている環境に対応したプロジェクトファイルが作成されたことを意味しています。ここで作成したプロジェクトファイルは、C:\framework\cocos2d-x\projects\SampleApp\ に作成されています。
ビルド
C:\framework\cocos2d-x\projects\SampleApp\proj.win32\SampleApp.sln をVisual Studioで読み込み、ビルド＆実行を行ってみてください。
![ビルド]()
環境によってはOpenGLのdllを要求される可能性がありますが、必要なものを実行形式のパスにコピーすると実行できます。
実行すると、次のようなウィンドウが起動します。
![HelloWorld]()
ここまでの手順でWindowsアプリが作成できることを確認できたら、いよいよSSPlayerの組み込みです。
SSPlayerの組み込みと実行(アニメーション再生)
サンプルのダウンロード
サンプルソースとサンプルデータはOPTPiX SpriteStudio ユーザーサポートページからzipファイル形式でダウンロードできます。本記事執筆時点では「SpriteStudio Player for Cocos2d-x/Corona SDK/HTML5 (2013/8/9)」という名称になっています。こちらからダウンロードしてダウンロードしたzipファイルを展開してください。
http://www.webtech.co.jp/spritestudio/ss5user/download.html
ここから先は、ダウンロードしたCocos2d-x用のサンプルを利用し、先ほど作成したSampeAppを改造しながら進めます。
プロジェクトファイル内の Resources にデータをコピー
まずは、今回のサンプルで使用するデータをコピーします。
ダウンロードしたサンプルの cocos2dx\Samples\Comipo\Resources\ から C:\framework\cocos2d-x\projects\SampleApp\Resources\ に.ssbaファイルと.pngファイルのコピーを行います。
プロジェクトファイル内の Classes にSSPlayerソースコードをコピー
作成したプロジェクトファイル内のClassesフォルダ( C:\framework\cocos2d-x\projects\SampleApp\Classes\ )の中身を確認します。
- AppDelegate.cpp
- AppDelegate.h
- HelloWorldScene.cpp
- HelloWorldScene.h
以上4つのファイルが作成されているはずです。このClassesフォルダに、先ほどダウンロードしたzipファイルから、以下のファイルをコピーします。
- SSPlayer.cpp
- SSPlayer.h
- SSPlayerData.h
- ssShader_frag.h
この4つのファイルがSSPlayerのソースコードです。
プロジェクトにソースファイルを追加
さて、コピーを行ったら忘れずにプロジェクトに上記ソースファイルを追加しましょう。
今回はVisualStudioで作成するのでSampleAppのプロジェクトへ追加します。
SampleAppのプロジェクトを右クリック→「追加」→「既存の項目」を選択して上記を追加します。
![既存の項目を追加]()
ソースファイルの編集
次にソースファイルを編集します。
まずは、ヘッダーファイル（HelloWorldScene.h）を編集していきます。SSPlayer.hのインクルードとアニメーションを再生するためのクラスをメンバとして定義しています。
#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__
#include "cocos2d.h"
#include "SSPlayer.h" //<< 追加 SSPlayer.hをインクルードします。
class HelloWorld : public cocos2d::CCLayer
{
public:
// Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
virtual bool init();
// there's no 'id' in cpp, so we recommend returning the class instance pointer
static cocos2d::CCScene* scene();
// a selector callback
void menuCloseCallback(CCObject* pSender);
// implement the "static node()" method manually
CREATE_FUNC(HelloWorld);
private: //<<追加
SSImageList* m_SsImageList; //<<追加 アニメーションで使用する画像リスト管理クラスを追加
SSPlayer* m_SsPlayer; //<<追加 アニメーションプレイヤーを追加
};
#endif // __HELLOWORLD_SCENE_H__
次に、cppファイル、HelloWorldScene.cpp を編集します。bool HelloWorld::init()の最後の方に以下のコードを追加します。
bool HelloWorld::init()
{
中略
unsigned char* filebuffer = 0;
//ssbaファイルを読み込みm_SsPlayerで再生できるようにします。
SSPlayerHelper::createFromFile( &filebuffer , &m_SsPlayer , &m_SsImageList , "attack_attack.ssba" );
//シーンのドローグラフへ登録します。
this->addChild(m_SsPlayer);
//画面中央に表示
int width = CCDirector::sharedDirector()->getWinSize().width;
int height = CCDirector::sharedDirector()->getWinSize().height;
int x = ( width / 2 );
int y = ( height / 2 );
m_SsPlayer->setPositionX(x);
m_SsPlayer->setPositionY(y);
return true;
}
プログラムの流れは以下の通りです。
- シーンの初期化時にssbaファイルをSsPlayerへ読み込ませてスプライトアニメーションの再生ができるように準備
- m_SsPlayerに対してポジションの設定
なお、SSPlayerは cocos2d::CCSpriteからの派生クラスなので、cocos2d::CCSpriteのプロパティがある程度使用できます。
今回、アニメーションのファイルは「attack_attack.ssba」を指定して読み込んでいます。これは、先ほどResourcesへコピーしたssbaファイルになります。
これでVisualStudio上で実行を行うとアプリが起動し、アニメーションが再生されます。
![実行結果]()
OPTPiX SpriteStudioでアニメーションを作成し、それを再生する方法
上記では用意されたサンプルのデータを使用して再生を行いましたが、ここからは実際にOPTPiX SpriteStudioでアニメーションを作成したデータから、ssbaファイルを作成する方法をご紹介します。
現在、方法は二通りあります。
１．OPTPiX SpriteStudioのエクスポート設定から選択しエクスポートする方法
２．コマンドラインツールを使用して .ssax から .ssba を作成する方法
どちらの場合も作成した.ssbaファイルをcocos2d-xのプロジェクトフォルダの Resources にコピーして使用します。
1.OPTPiX SpriteStudioのエクスポート設定から選択しエクスポートする方法
OPTPiX SpriteStuidoからの.ssbaの出力は、メニューの「プロジェクト」から「エクスポート」もしくは「全てエクスポート」で行います。ただし、出力先の設定や、エクスポート内容の設定を行う必要があります。出力先の設定、エクスポートの内容の設定は、OPTPiX Sprite Studioのメニューの「ファイル」内「プロジェクトの設定」から行います。
出力先の設定は、図７の「基準フォルダ」タブからアクセスできます。この基準フォルダ設定は、プロジェクトファイルからの相対パスですが、ドライブレターから記述することで、フルパス指定も可能です。
![エクスポート先の設定]()
エクスポート内容の設定は「エクスポート」タブからアクセスします。ssbaの出力には「SSP for Cocos2d-x(.ssba)」を選択してください。
![ssbaの選択]()
これで、メニューの「プロジェクト」内「エクスポート」からssbaファイルが出力できるようになりました。メニュー内の「エクスポート」コマンドを実行するとエクスポートの項目を選ぶダイアログが表示されますので、項目を選択してエクスポートしてください。
2.コマンドラインツールを使用して .ssax から .ssba を作成する方法
SspForCCH_v0.8.12_20130808.zip のなかにコマンドラインツールが同梱されています。本ツールのzip展開時のパスは以下の通りです。
\SspForCCH_v0.8.12_20130808\SspForCCH\cocos2dx\Converter
このフォルダ内にWindows用、MacOS用のコマンドラインツールがあります。このコンバートツールは、コマンドラインオプションでエクスポート元となるssaxファイルを指定して実行します。下記にコマンドラインオプションの内容と例を記載します。
SsToCocos2d converter version 0.8.13
usage: SsToCocos2d Input files(.ssax) and/or a file list for image(.ssf) ...
option:
-h [ --help ] Display usage.
-o [ --out ] arg Output filename.
-b [ --bf ] Output as binary format. (default)
-c [ --cf ] Output as c source code.
-e [ --encoding ] arg Encoding of output file (UTF8/UTF8N/SJIS) default:UTF8.
-i [ --in ] arg ssax, ssf filename.
-v [ --verbose ] Verbose mode.
SsToCocos2d(.exe) <入力ssaxファイル名> [-h] [-o <出力luaファイル名>][-b][-c] [-e UTF8|UTF8N|SJIS] [-i <入力ssaxファイル名>] [-v]
hige.ssaxをhige.ssbaへ変換する場合は、コマンド プロンプトで以下のように実行します。
> SsToCocos2d hige.ssax –o hige.ssba
まとめ
Cocos2d-xは、無料フレームワーク、2Dゲーム、マルチプラットフォーム、商用利用という条件であれば有力な選択枝の一つに入るのではないかと思います。書籍も発売されていますし、ネット上のTipsも充実してきています。
SSPlayerを使用することで、Cocos2d-x上でもSpriteStudioで作成したリッチなアニメーションが簡単に再生できるようになります。Cocos2d-x上でゲームアプリを開発する際には、ぜひお役立てください。
CEDEC 2013公式サイト
ゲームエンジンのコモディティ化、ブラウザ/ハイブリッド/ネイティブ・アプリなど、ゲーム開発手法は年々多様化。開発者には、多くの開発手法のなかから適切な手段を選択するスキルが要求されるようになりました。
8/22のCEDEC2013で行われたセッション「工程の手戻りを最小限に 圧縮テクスチャ(PVRTC・DXTC・ETC)における傾向と対策」の発表資料を公開しております。
▲PCのタイムライン上での表示
