SSPlayer(SpriteStudio Player) for Cocos2d-xのご紹介

投稿日 : 2013/10/08　 カテゴリー: OPTPiX SpriteStudio

こんにちは、ウェブテクノロジ 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 の特徴を挙げます。

意外と歴史のあるフレームワーク

もともと cocos2d というPython用に書かれたフレームワークがあり、そのフレームワークデザインをiOSのObjective-Cへ移植しcocos2d for iPhone になり、さらに拡張されて Cocos2d-x となりました。

2Dベースのエンジン

2Dベースで比較的高機能なクラスが用意されており、制作に必要そうな低レベル関数はそろっています。また、シェーダーの追加も簡単に行え、ソースの変更、カスタマイズも比較的容易なため、総合的に2Dベースとしては高性能エンジンなのではないかと思います。

開発コミュニティの活動が活発

開発は中国のオープンソース・コミュニティをベースに行われ、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 

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ファイルを展開してください。

https://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;
}

プログラムの流れは以下の通りです。

  1. シーンの初期化時にssbaファイルをSsPlayerへ読み込ませてスプライトアニメーションの再生ができるように準備
  2. 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上でゲームアプリを開発する際には、ぜひお役立てください。

タグ , , , | 2023/01/31 更新 |