読者です 読者をやめる 読者になる 読者になる

フニゲの開発日記

Electronとか...

Cocos2d-html5へようこそ

原稿


2013/12/07修正
2014/1/4いろいろ控えめに修正

Cocos2dとは

 Cocos2dは2008年にアルゼンチンで生まれた2Dゲーム用のフレームワークです。
「Cocos2dの父」Ricardo Quesadaさんの説明によると、Cocos2dのCocosというのはアルゼンチンのコルドバ州にあるロス・ココスという街の名前から来ているのだとか。
 コルドバ。母を訪ねて三千里に出てきました。地図を見るとロス・ココスはコルドバ市街からちょっと北にあります。母のいるトゥクマンに向かう途中、マルコは無賃乗車した貨物列車の中でこのへんを通り過ぎたのではないかと思いますが、まあ、それはどうでもいいことですね。
 2008年2月に、このロス・ココスでPythonプログラマのイベントPyConが開催されました。ここではじめて公開されたRicardoさん達のゲームフレームワークが、後のCocos2dです。Ricardoさんにとって幸運だったのは、ちょうどその春に(まあアルゼンチンでは秋なんですけど)、アップルがiPhoneSDKを発表したことでした。Ricardoさんが移植したiPhone版のCocos2d-iphoneは、すぐにiPhoneのゲーム開発者の間で評判のフレームワークになります。
 Cocos2d-iphoneで画面の中心に画像を1枚表示するコードは、こんな感じです。

CGSize size = [[CCDirector sharedDirector] winSize];

CCSprite *sprite = [CCSprite spriteWithFile:@"test.png"];
sprite.position = CGPointMake(size.width / 2, size.height / 2);
[self addChild:sprite];

 Objective-Cの知識が無くても、単語を拾っていけば何となく意味はわかりますよね?
 新しくiPhoneの世界に入ってきたゲーム開発者はみんな急いでいましたから、オープンソースで簡単に習得できるCocos2d-iphoneはぴったりだったのです。

Cocos2d-x

 Cocos2d-iphoneはその後、世界中の開発者によって他のプラットフォームやプログラム言語に移植されました。多くの派生プロジェクトの中で、最も大きく育ったのが2010年に中国のZhu Wang (王哲Walzer)さんが作りはじめたCocos2d-xです。Cocos2d-xはCocos2d-iphoneC++版で、"x" という名前が示すとおり、最初から多くのプラットフォームに対応することを目指していました。
 iPhone独走の時代は終わって、ゲーム開発者もAndroidiPhoneの両方に対応することを要求されることが多くなります。アドビがFlashで両対応のアプリを作れるようにしようとして、スティーブ・ジョブスに叩き潰されたのもこの時代ですね。あれは酷かった。
 2009年にはもうAndroid NDKが発表されていたので、C++で書いてAndroidiPhoneの両方で動くゲームを作る道がある、ということはみんな知っていたのですが、それを簡単に実現するフレームワークがまだ無かったのです。
 前節で示したコードをCocos2d-xで書き直すと、こうなります。

CGSize size = CCDirector::getSharedDirector()->getWinSize();

CCSprite *sprite = CCSprite.spriteWithFile("test.png");
sprite->setPosition(ccp(size.width / 2, size.height / 2));
this->addChild(sprite);

 まあ方言みたいなものですね。iphone版を使い慣れた開発者ならすぐに読むことができました。Cocos2d-xを使えばほとんど新しいことを勉強する必要がないし、iOSAndroidの両方で動くゲームができてしまうのですから驚きです。そんなわけで、今では多くの開発者がCocos2d-iphoneの代わりにCocos2d-xを選ぶようになりました。
「Cocos2dの父」Ricardoさんも、クロスプラットフォームのゲーム開発ならcocos2d-xがいい選択だろうと言っています*1。Ricardoさんは今ではサンフランシスコのジンガの社員ですが、ジンガ社内でもCocos2d-xが使われているんだとか。
 マルチプラットフォームを売りにするフレームワークは古今東西たくさんありますが、Cocos2d-xはその中でも最も実績が豊富で、コミュニティが活発なものの一つだと言えると思います。

Cocos2d-x jsb

 Cocos2d-x jsb (JavaScript Bindings) というのは、Cocos2d-xのプログラムをJavaScriptで書く技術です。JavaScriptをリアルタイムに解釈して実行するので、当然C++で書かれたアプリより遅くなります。ほんの数年前まで、遅くて使いものにならないと思われていた技術ですが、どうも時代は変わったようです。
 古参のゲーム開発者はこの手の誇大広告に何度も騙された経験があるので、「時代は変わった」とか言ってもなかなか信じません。私もずいぶん騙されました。Javaで書けばどんなプラットフォームでも動くとか。AndroidJavaだけどネイティブと同じくらい効率的だとか。あれ?Javaばかりですね。

 でもまあ、はっきり言いますが、いま実行速度のためにC++を選択する必要はありません。
 JavaScriptでゲームを作ることが実用的になったのは、PCの世界で2008年頃から続いたブラウザ戦争の結果です。JavaScriptの実行速度は飛躍的に向上しました。その間スマートフォンの処理速度も倍々で増えていきましたから、大雑把に言って、二桁速くなった感じですね。

var size = cc.Director.getInstance().getWinSize();

var sprite = cc.Sprite.create("test.png");
sprite.setPosition(cc.p(size.width / 2, size.height / 2));
this.addChild(sprite);

 JavaScriptを使うことでプログラマの負担は大きく減ります。ヘッダファイルとか書かなくていいですし、メモリの解放で悩むこともほとんどありません。コンパイルを待たずにすぐに結果を確認することができます。

Cocos2d-html5

 Cocos2d-html5は、2012年にCocos2d-xからスピンオフしたプロジェクトで、Cocos2d-x jsbと互換性のあるブラウザゲームフレームワークです。開発の中心になっているのは、Walzerさんと同じ中国のShun Lin (林順Sean) さん。
 同じJavaScirptを使うなら、スマートフォンとWebブラウザの両方で動くようにしたい、と考えるのは当然でしょう。もともとマルチプラットフォームを目指してはじまったCocos2d-xです。C++AndroidiOSを統一したCocos2d-xの思想をそのままに、今度はJavaScriptを使ってC++の使えないプラットフォームまで大統一しようとする野心的なプロジェクトです。

Cocos2d-html5を学ぶ理由

 Cocos2d-html5ブラウザゲームフレームワークです。ブラウザでゲームを作ることだけが目的なら、どのフレームワークを選んでもまあ同じようなゲームができます。そういう風に考えることもできるでしょう。
 しかし見方を変えれば、Cocos2d-html5は「モバイルゲームの開発環境」でもあります。スマートフォンエミュレータはインストールが面倒だし、特にAndroidエミュレータは重いので有名です。ブラウザならだれでも持っていますから、すぐに開発がはじめられるし、開発途中のゲームを気軽にWebで公開して、みんなに遊んでもらうこともできますね。公開すれば開発のモチベーションもぐっと上がります。
 本書ではCocos2d-html5のこの部分に焦点を当てて、ブラウザを使ってアプリを開発するのがどれくらい便利か、開発したゲームをAndroidiOSのアプリにしてリリースするのがどれくらい簡単か、実例を使って解説したいと思います。


 それではさっそく、開発をはじめましょう。

広告を非表示にする