Cocos2d-xでもGUIで画面を作りたい!

みなさん初めまして、2014年度新卒の澤田泰治と申します。前回、前々回と小川、石黒がUnityについて紹介してくれました。2人とも同期で、共に入社以来ネイティブゲーム向けの研修を共に受けておりました。

このままUnityばかり紹介されるのも癪なので、今回はUnityと双璧をなす、もう一つの有名なネイティブゲームエンジンである、Cocos2d-xについて紹介したいと思います!

Cocos2d-xの歴史

Cocos2d-xはもともとCocos2dというゲームフレームワークから派生して生まれています。Cocos2dはPythonで書かれており、MITライセンスで公開されています。

このCocos2dがiPhone向けに移植され、Cocos2d for iPhoneが生まれました。Cocos2d for iPhoneもさまざまなiPhone向けゲームのゲームエンジンとして採用されています。

このCocos2d for iPhoneから派生し、iPhone向けだけでなくAndroidなどマルチプラットフォーム対応を可能としたものがCocos2d-xとなっています。Cocos2d for iPhoneから派生しているため、クラス名やメソッド名にObjective-C由来に見えるものがまだ少し残っています。

Cocos2d-XとUnityの比較

前回、前々回とUnityの記事が続いていたため、それぞれの特徴について簡単に書いておきたいと思います。

Unityの特徴

記述はC#
アセットストアから簡単にアセットをダウンロードし、拡張が可能
GUIのUIエディタなどが充実している
コアの部分はオープンソースではない

Cocos2d-Xの特徴

記述はC++
GUIのUIエディタが充実していない
MITライセンスでオープンソース

などがあります。

Cocos2d-xはオープンソースで、エンジン内部の挙動も追うことが可能である反面、GUIエディタを使用したシーンの開発などが難しくなっています。

Cocos2d-xのオフィシャルのエディタである、Cocos Studioもあるのですが、Mac版はCocos2d-xのv3以降に対応していませんでした。そんな中、つい先日Cocos Studio v2.0.0.0 Beta0がリリースされたので、それを試してみたいと思います。

なお、今回はCocos2d-x v3.3rc0を使用しています。

ダウンロードからインストール

Cocos2d-xのページからDownloadページに遷移し、Cocos Studioを選択してダウンロードしてください。

ダブルクリックするとこのような画面になるので、インストールを進めてください。

リリースノートを見ると、以下の様な更新がされているようです。

Unified editor, merge scene, ui, animation into one brand new editor
(シーン、アニメーションエディタ画面の統合)
Support scene reuse
(シーンの再利用のサポート)
Better spritesheet management
(スプライトシート管理の効率化)
Better integration with cocos2d-x and IDEs
(cocos2d-xとIDEの統合に関しての改善)
Easy to use asset management
(アセット管理を容易に)
Brand new UI design
(新しいUIデザイン)
User experience revamp
(UXの改善)

/Application/Cocosの中にCocos Studio 2.appというファイルができていると思うので、そちらをクリックして起動します。

リリースノートにもあるように、v2.0からは、今までSceneエディタ、UIエディタなどのエディタが統合されています。

簡単な画面の作成

新しいプロジェクトを作成すると、この様な画面が表示されるかと思います。

今回は簡単に画像を配置した画面をエディタ上で作成し、cocos2d-xのプロジェクトで正しく読み込まれるか確かめて見たいと思います。
エディタ上の操作は非常に簡単で、画像を用意して、画面左下のResourceウィンドウにドラッグアンドドロップすることで、リソース登録が完了します。

後は表示したいリソースを中央のSceneウィンドウの好きな位置に置くと完成です。

今回は以上のような画面を作成してみました。

Cocos Studio>Fileから、Publish を選択することで、csbファイルが作成されます。
このファイルの中に、リソースの情報や配置情報などが含まれています。

その後、Cocos Studio>File>Publish>Publish to Xcode Project を選択することで、Xcodeのプロジェクトファイルが生成されます。

生成されたcsbファイルは、プロジェクトフォルダ内のResourcesフォルダ内でなく、resフォルダに含まれているため、Resourcesフォルダにコピーするようにしましょう。

その後、HelloWorldScene.cppを以下のように編集します。簡単のため、余計なコードは省略しています。

#include "HelloWorldScene.h"
#include "editor-support/cocostudio/CocoStudio.h"

USING_NS_CC;

Scene* HelloWorld::createScene(){
    auto scene = Scene::create();
    auto layer = HelloWorld::create();
    scene->addChild(layer);
    return scene;
}

bool HelloWorld::init(){
    if ( !Layer::init() ) {
      return false;
    }
    auto node = CSLoader::getInstance()->createNodeFromProtocolBuffers("MainScene.csb");
    this->addChild(node);
    return true;
}

その後、Xcodeのプロジェクトでビルドを行うと、Cocos Studioで作成したものと同じ画面が表示されていることが確認できます。

まとめ

今回はCocos Studio v2.0 Beta0を使って、画面の作成を行い、Cocos2d-x上で読み込む部分まで試してみました。
Cocos Studioのドキュメントはまだまだ整備されていないため、使いにくい部分もありますが、まだまだ使いやくすなっていくはずです!

ネイティブゲームでは、毎回ソースのビルドを行う必要が有るため、このようにGUIで画面作成などが可能になっていくことで、開発時間の短縮や効率化につながると考えています。
Cocos2d-xはオープンソースですが、Cocos Studioのソースは公開されていないのが残念なところ。

まだまだ個人的に試せていない部分も多いので、いろいろと触って行きたいと思います。これからのCocos2d-xの発展にもますます期待ですね!